Connect a GitHub repository to a Wonder file to use your codebase as the source of truth for components, tokens, icons, fonts, and views. Wonder can pull code onto the canvas, keep it in sync, and turn approved changes into a pull request. You trigger each of these by prompting Wonder AI in the chat, using prompts like the examples in each section below.

What you can do

Requirements

• Edit access to the Wonder file. View-only collaborators can't connect a repository.
• The Wonder GitHub App installed on the account or organization that owns the repository. Public repositories can be read by URL without it.
• For pull requests, the app needs Contents: Read and write and Pull requests: Read and write.

Quickstart

1. Connect: open your Wonder file, select GitHub in the file header, and authorize the repository.
2. Import: ask Wonder AI to bring a component, tokens, or a view onto the canvas.
3. Export: ask Wonder to turn your approved changes into a pull request.

Connect GitHub

Each Wonder file connects to one repository at a time, and the connection is shared with everyone on that file.

1. Open the Wonder file and select GitHub in the file header.
2. Select Continue with GitHub.
3. Authorize Wonder on GitHub. If the Wonder GitHub App isn't installed on the owning account or organization, install it now.
4. Grant the app access to all repositories or only selected ones.
5. Return to Wonder and select the repository.

For a public repository, paste its GitHub URL instead, with no app required. Private repositories and all write actions need the app.

Manage the connection

• Switch: connect the file to a different repository.
• Add repositories or Manage on GitHub: change which repositories the app can access.
• Disconnect: remove the repository from this file. This doesn't uninstall the app or affect other files.

To suspend, uninstall, or change the repository access of the app itself, follow GitHub's guide to managing installed apps.

Import code

Wonder AI can read the connected repository (its file tree, paths, source, and branches) and bring it onto the canvas. Ask it to:

• Import a component and its variants.
• Import a component library into a Design Guide.
• Import tokens, icons, and other foundations without the full library.
• Reproduce a page or view as a Wonder design.
• Create a new design from the repository's real components, tokens, fonts, and icons.
• Work from a named branch instead of the default.

Example prompts:

- Import the Button and Card components from the connected repository, including their variants.
- Import our design tokens and icons into a Design Guide, but not the full component library.
- Reproduce the pricing page from the `develop` branch as a Wonder artboard.
- Create a checkout page using the components and tokens in the connected repository.

Sync designs

Imported elements remember their source path and commit. When an element still points to its source, you can:

• Open source on GitHub: jump to the referenced source at the recorded commit.
• Sync with code: compare the element with the latest source and update the canvas, keeping its place and identity.

When GitHub reports a change to a referenced file, Wonder marks the affected element as out of sync. Select it and choose Sync with code, or ask the chat.

Example prompts:

Update this selected card to match the latest source code.

Sync this component with `src/components/Navigation.tsx` on `main`.

Restyle this section using the latest version of our repository design system.

Create a pull request

You create a pull request by prompting Wonder AI in the chat, for example "turn these changes into a pull request." There's no separate export button. Wonder first reads the current source and shows a plan: the affected artboards, files, edits, branch, and pull request. Nothing is written until you approve it.

After you approve, Wonder will:

1. Create a new branch from the current base-branch head.
2. Edit, add, or delete text source files as required by the change.
3. Commit those changes.
4. Open a draft or regular pull request against the base branch.

Wonder-created branches use the wonder/ prefix and never write to the base branch directly.

Example prompts:

Export the changes on the Pricing artboard as a pull request against `main`.

Turn everything changed since import into a draft pull request titled "Update checkout design".

Update the source component to match this selected design, then show me the exact export plan before making changes.

Safeguards & privacy

GitHub write access is intentionally limited:

• The repository must be connected through the Wonder GitHub App. A public repository connected by URL is read-only.
• Wonder writes only to a new wonder/ branch, and only after you approve the export plan.
• It edits and creates text source files only, skipping binary files (like images or fonts) and very large files.
• Wonder never force-pushes, writes to a base branch, merges pull requests, approves reviews, or changes repository settings, secrets, or Actions workflows.

Wonder stores the connection and installation identifiers, and requests short-lived tokens from GitHub only when access is needed. It doesn't persist those tokens. You can change repository access, suspend the installation, or uninstall the app from GitHub settings at any time. Always review the diff and repository checks on GitHub before merging.

Troubleshooting & FAQ

GitHub is missing

Make sure you have edit access to the Wonder file. View-only collaborators can't connect, switch, or disconnect a repository. Refresh the file after your access changes.

Connection failed

If Wonder shows "Could not connect GitHub. Please try again.", restart the flow and finish it within 10 minutes. Keep your Wonder session open and use the same browser and profile throughout. The connection can fail if you let the authorization expire, switch browsers or profiles, sign out of Wonder mid-flow, or decline the GitHub request. If it persists, check GitHub Status and retry later.

Owner approval required

Your GitHub organization restricts app installation, so GitHub sent the request to an owner. Wonder can't approve it for you. Ask an owner to approve and install the Wonder GitHub App for the required repositories, then restart the connection. An owner can adjust the requested repositories before approving.

Repository not listed

1. Check the account filter and search for the full owner/repository name.
2. In Wonder, select Add repositories or Manage on GitHub.
3. On GitHub, add the missing repository under the app's Repository access.
4. Save, return to Wonder, and refresh the repository picker.

For an organization repository, an owner or repository administrator may need to make this change. If nothing appears, confirm you authorized the same GitHub user that can access the installation. Use Continue with GitHub so Wonder finds the installations available to you.

Private repository unavailable

Private repositories can't be connected by URL. Install the Wonder GitHub App on the owning account or organization, grant it access to the repository, then select it from Wonder. If Wonder says the repository isn't part of the installation, use Manage on GitHub to add it.

Public URL rejected

Confirm the repository exists and is public. Wonder accepts common formats:

• owner/repository
• https://github.com/owner/repository
• git@github.com:owner/repository.git

Remove any typos and confirm the URL points to GitHub. If the repository is private, use the GitHub App flow instead.

Write access unavailable

The repository was likely connected as a public URL, or its installation lacks write access.

1. Make sure the repository is connected through the Wonder GitHub App.
2. Ask the owner of the installation to confirm it's active and includes the repository.
3. Confirm the installation grants Contents: Read and write and Pull requests: Read and write.
4. Return to Wonder and retry the export.

Sync unavailable

Check that the element was imported from the currently connected repository, still has a source path and commit, that you can edit the file and use AI chat, and that the source file still exists. If the source was deleted or the element has no attribution, ask Wonder AI to locate the replacement source and re-import.

Export failed

Use the message from Wonder to choose the recovery:

Message or symptom	What to do
The branch already exists	Choose a different branch name and retry.
The branch changed while committing	Ask Wonder to re-read the affected files and regenerate the plan.
The source snippet was not found or was not unique	Ask Wonder to re-read the file and make the edit more specific.
There are no file changes	The repository already has the proposed content; a PR may not be needed.
There are no commits between the branches	Commit an approved change before opening the PR.
GitHub rate limit or temporary error	Wait and retry. Reconnecting usually won't clear a rate limit.

Still stuck?

When contacting support, include the Wonder file URL, the owner/repository name and branch, whether the repo is personal or organization-owned and public or private, the exact error and when it happened, and the action you attempted. Don't send access tokens, authorization codes, cookies, keys, or repository secrets.

Related

• Get started with Wonder MCP: connect Wonder to your coding agent.