Skip to main content
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
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 and follow Wonder MCP to connect your agent.

​
Install Wonder and sign in

  1. Download Wonder for macOS or Windows from 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.
  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 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, 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.

​
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 for everything Capture can do.

​
Have your agent apply the change to the code

  1. With your frame selected, press ⌘ L 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 Enter 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. For a Node app, you need Node.js 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.
  • 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 ⌘ K 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.