> ## Documentation Index
> Fetch the complete documentation index at: https://wonder.design/docs/llms.txt
> Use this file to discover all available pages before exploring further.

# Quickstart

> Install the Wonder desktop app, connect Claude Code or Codex, run a demo app on the canvas, change a captured screen and have your agent build it, then add your own repository.

Go from installing Wonder to your first design change in a real app. The desktop app walks you through the same steps with a demo app called Bookshelf, so you can follow along here.

**Before you start** · Desktop app · Free plan

> [!NOTE]
>
> **Only using Wonder MCP?**\\
>
> You don't need the desktop app to work from Cursor, Claude Code in your terminal or another MCP client. Sign up at [app.wonder.so](https://app.wonder.so/) and follow [Wonder MCP](https://wonder.design/docs/wonder-mcp.md) to connect your agent.

## Install Wonder and sign in

1. Download Wonder for macOS or Windows from [wonder.design/downloads](https://wonder.design/downloads) and install it. On a Mac, move it to your **Applications** folder.
2. Open Wonder and click **Continue with browser**. Sign in to Wonder in your browser, or create an account there if you're new, and you're taken back to the app.

   Or click **Sign in another way** to sign in inside the app with Google, Microsoft, GitHub or your email, or click **Create an account**. If you sign up with your email, enter the 6-digit code Wonder sends you. See [Your account](https://wonder.design/docs/your-account.md).
3. **Claim your handle**: pick the username you'll use in Wonder and click **Claim**. You can change it later in Settings.

## Connect Claude Code or Codex

Chats in Wonder run on your own Claude Code or Codex account. Wonder installs both agents for you. If one shows **Installing…**, wait for it to finish.

1. On **Bring your own agent**, click **Connect** next to **Claude** or **Codex**.
2. Your browser opens on claude.ai or ChatGPT. Sign in with the account you want Wonder to use.
3. Come back to Wonder. The agent shows **Connected**. Click **Continue**.

No Claude or ChatGPT account? Click **Continue without an agent** and connect one later in **Settings** > **Agents**. You can follow the rest of this guide, apart from having your agent change the code.

## Finish onboarding

1. **Get ready to use Wonder** offers the [Wonder Capture](https://wonder.design/docs/wonder-capture.md) Chrome extension, which brings any website onto your canvas. Click **Add to Chrome**, or **Skip for now**. If you already have it, click **Continue**.
2. Under **What best describes you?**, choose **Designer** to start on the canvas, or **Developer** to start in [Dev view](https://wonder.design/docs/desktop-app-and-browser.md#switch-between-the-canvas-and-dev-view), and click **Continue**. You can switch any time.
3. Click **Let's start**.

Wonder opens **Bookshelf**, a demo project, and starts a short tour. It first shows you around: your repositories and worktrees, your agents, the canvas and your tabs. Click **Next** through each card. If you chose Developer, the tour starts in Dev view and shows the canvas part the first time you open the canvas.

## Run the demo app in a Preview

1. Click **Start preview** in the chat header. Bookshelf runs on your computer and appears on your canvas as a Preview.
2. Double-click inside the Preview to use it like a real app: click, scroll and open pages.
3. Click any book to open its page, then click **I've opened a book** in the tour.

The Preview is your real app, running live next to your designs. See [Preview your running app](https://wonder.design/docs/preview-your-running-app.md).

## Capture a screen and change it on the canvas

1. Select the Preview and click **Capture** in the bar at the bottom of the canvas.
2. Hover over the book page and click a section to capture it, or click **Capture whole page** in the tour.

   The page appears next to the Preview as a frame with editable layers.
3. With the frame selected, click **Background Fill** in the properties panel on the right.
4. Choose any colour, then close the picker.

See [Capture your running app](https://wonder.design/docs/capture-your-running-app.md) for everything Capture can do.

## Have your agent apply the change to the code

1. With your frame selected, press <kbd>⌘</kbd> <kbd>L</kbd> to attach it to the chat. You can also click the button next to the selected frame and choose **Add to chat**.
2. The tour writes the message for you. Press <kbd>Enter</kbd> to send it. Your agent changes the app's code to match your frame, and the chat shows what it's doing while it works.
3. Keep the book open in the Preview to watch it change, then compare the result with your frame. If they don't match, tell your agent what to change. Click **Continue to GitHub** to go on.

## Add your own repository

1. Click **Add repository** (the folder with a plus) next to **Repositories** in the sidebar on the left.
2. Choose where your code comes from:
   * **Start from GitHub**: pick a repository under **Select a repository**. Wonder clones it into your Wonder folder and opens a chat in its first worktree. If you haven't linked GitHub yet, click **Continue with GitHub**, then enter the code Wonder shows on the GitHub page that opens and approve GitHub CLI.
   * **Start from local folder**: pick a folder on your computer. If it isn't a Git repository yet, click **Set up Git**, or **Skip, work without Git**.
   * **Create new repository**: give it a name, and Wonder creates a new, empty repository.

Your code stays on your computer. Each chat works in its own worktree, a separate copy of the repository on its own branch, so several chats can work at once.

To run your app in a Preview, click **Start preview** in a chat. The first time, Wonder works out how to start it: see [Set up the Preview](https://wonder.design/docs/set-up-the-preview.md). For a Node app, you need [Node.js](https://nodejs.org/en/download) 20.19 or later on your computer. The demo app brings its own.

The tour ends with **You're all set**. Click **Keep exploring**, and the **Next steps** list in the sidebar suggests what to try next: **Connect a repository**, **Invite a teammate** and **Publish a Preview**.

## If something goes wrong

* **The agent isn't connected.** Open **Settings** > **Agents** and connect Claude Code or Codex. Without one, the tour offers **Connect an agent** when it reaches the apply step, or **Skip for now**.
* **The tour asks you to install or update Node.js.** Click **Install Node.js** or **Update Node.js**. The tour continues once Wonder finds it.
* **Node.js isn't installed** when you start the Preview for your own app. Click **Download Node.js**, install it and try again. See [Fix Preview problems](https://wonder.design/docs/fix-preview-problems.md).
* **The tour says Open your book again.** Your Preview restarted while your agent worked. Reopen the same book in the Preview and click **I've opened a book**.
* **You skipped the tour or want to see it again.** Press <kbd>⌘</kbd> <kbd>K</kbd> and choose **Take the tour** or **Restart tour**, or click **?** at the bottom of the sidebar and choose **Restart onboarding**. You get a fresh demo project.

## Related

* [What is Wonder](https://wonder.design/docs/what-is-wonder.md)
* [Desktop app and browser](https://wonder.design/docs/desktop-app-and-browser.md)
* [Preview your running app](https://wonder.design/docs/preview-your-running-app.md)
* [Capture your running app](https://wonder.design/docs/capture-your-running-app.md)


This documentation is built and hosted on [Mintlify](https://mintlify.com), a developer documentation platform.