Design and code have always lived in separate worlds. Wonder changes that. The Wonder MCP server gives your AI coding agent direct read and write access to your Wonder canvas, so you can pull designs into code or push code back into designs.

What is Wonder MCP?

Wonder's MCP server plugs into coding agents (Claude, Cursor, and others) so that designs created in Wonder can be read, edited, and updated by your agent, and vice versa.

How it works

Wonder connects to your agent through the Wonder MCP server at https://mcp.wonder.so/mcp. On first use you'll sign in through a standard OAuth flow. There are no API keys to manage, and tokens refresh automatically.

For Cursor, Claude Code, and Codex, the fastest path is the official Wonder plugin. If your client doesn't support plugins yet, you can configure the MCP server directly using the manual instructions in each section.

Install

Pick your agent below. We currently support Cursor, Claude Code, Claude Desktop, Codex, Antigravity, Lovable, and custom MCP clients.

Cursor

Click the button below to install the MCP server in Cursor automatically:

Add to Cursor

Or set it up manually by copying the JSON below into your Cursor MCP config at Settings > MCP, or by pasting it into ~/.cursor/mcp.json.

{
  "mcpServers": {
    "wonder": {
      "serverUrl": "https://mcp.wonder.so/mcp"
    }
  }
}

Open Cursor Settings > MCP and confirm the Wonder server shows as connected. A Connect button will appear next to Wonder. Click it and sign in to your Wonder account in the browser window that opens.

Claude Code

Plugin (recommended)

Open your terminal and run claude to start Claude Code. Add the marketplace:

/plugin marketplace add aquila-lab/wonder-plugins

Install the plugin:

/plugin install wonder@wonder

Reload to activate it:

/reload-plugins

To check if it worked, run /plugin and confirm that Wonder appears under installed.

Open the Wonder app and any canvas file you want generations drawn to. Then, back in Claude Code, type a prompt like:

Generate a purple button in Wonder

On first use, Claude will say the Wonder MCP needs authentication and print a URL. Open that link in your browser to authorize, then come back to Claude Code and re-send the same prompt. Watch it draw onto your canvas in real time.

Manual setup

1. Open the terminal on your computer.
2. Run the command below (not inside Claude) to register the Wonder MCP server:

claude mcp add --transport http wonder https://mcp.wonder.so/mcp

3. Run claude mcp list to confirm the Wonder server appears.

4. Open a Claude Code session and run /mcp. You should see Wonder in the list of MCPs. If you don't, restart your Claude session. Wonder will prompt you to sign in to your account in the browser. Once done, your agent is connected. Tokens refresh automatically, so you should only need to do this once.

Terminals can be confusing if you're non-technical. If you have trouble setting up Claude Code, watch this tutorial or ask any AI agent to walk you through it.

Claude Desktop

Plugin (recommended)

1. Open your Claude Desktop app and navigate to the Code tab in the top-left corner.
2. Click on Customize.
3. Click the plus icon under Personal Plugins > Create Plugin > Add Marketplace.
4. Enter the Wonder plugin URL in the field: aquila-lab/wonder-plugins.
5. Click Sync and add the Wonder plugin that appears to Claude.

You should now see Wonder in your MCP list when you start a claude session in your terminal and run /mcp.

Manual setup

Claude Desktop requires Node.js to run MCP servers. Verify by running node --version in your terminal.

Open Claude Desktop Settings > Developer > Edit Config. This opens your claude_desktop_config.json file.

Your file probably looks something like this:

{
  "preferences": {
    "coworkWebSearchEnabled": true,
    "ccdScheduledTasksEnabled": true,
    "sidebarMode": "chat"
  }
}

Add the Wonder MCP section so it looks like this:

{
  "mcpServers": {
    "wonder": {
      "command": "npx",
      "args": [
        "mcp-remote",
        "https://mcp.wonder.so/mcp"
      ]
    }
  },
  "preferences": {
    "coworkWebSearchEnabled": true,
    "ccdScheduledTasksEnabled": true,
    "sidebarMode": "chat"
  }
}

Save the file. Make sure there's a comma after the closing } of mcpServers. Fully quit and restart Claude Desktop. A browser window will open asking "MCP CLI Proxy would like access to your account." Click Allow access. Once the browser confirms "Authorization successful!", close it and return to Claude. Check the chat input area for the MCP indicator to verify Wonder is connected.

Codex

Plugin (recommended)

1. Open Codex.
2. In the prompt box, start typing /plugin and select Plugin Creator from the command picker.

3. Complete the prompt with the Wonder plugins repo URL and send it:

Install the Wonder plugin from https://github.com/aquila-lab/wonder-plugins

4. Type in @wonder and select the Wonder plugin from the list.

5. Type a prompt to test the connection:

Generate a purple button in Wonder

On first use, Codex will say the Wonder MCP needs authentication and show a URL. Open it in your browser to authorize, then come back to Codex and re-send the same prompt. Watch it draw onto your canvas in real time.

Manual setup

Run the command below in your terminal to register the Wonder MCP server:

codex mcp add wonder --url https://mcp.wonder.so/mcp

You can also configure it manually via config.toml. Run codex mcp list to confirm the Wonder server appears.

Antigravity

In Antigravity, click the ⋯ menu in the Agent panel > MCP Servers, then select Manage MCP Servers > View raw config. This opens your mcp_config.json file.

The file is located at:

• macOS / Linux: ~/.gemini/antigravity/mcp_config.json
• Windows: C:\Users\<USERNAME>\.gemini\antigravity\mcp_config.json

Add the following configuration. Note that Antigravity uses serverUrl instead of url for remote MCP servers.

{
  "mcpServers": {
    "wonder": {
      "serverUrl": "https://mcp.wonder.so/mcp"
    }
  }
}

Close and reopen Antigravity. Go to MCP Servers and confirm Wonder appears with its tools listed.

Lovable

Custom MCP servers require a paid Lovable plan.

1. Open Lovable.
2. Navigate to Settings → Connectors → Personal connectors via the sidebar. Scroll down to New MCP server and click it. You can also click + in the prompt box and go to Connectors for quick access.

3. Enter Wonder as the MCP name and paste this URL:

https://mcp.wonder.so/mcp

4. Select No authentication and click Add server.

Wonder will appear in your list of personal connectors. You can now reference your Wonder designs directly in prompts.

Other MCP clients

If your client isn't listed above, you can set up Wonder manually. The server URL is:

https://mcp.wonder.so/mcp

Most MCP clients accept a JSON config like this:

{
  "mcpServers": {
    "wonder": {
      "serverUrl": "https://mcp.wonder.so/mcp"
    }
  }
}

If your client doesn't support remote URLs natively, use the mcp-remote bridge (requires Node.js):

{
  "mcpServers": {
    "wonder": {
      "command": "npx",
      "args": [
        "mcp-remote",
        "https://mcp.wonder.so/mcp"
      ]
    }
  }
}

Try it out

Once Wonder is connected, open a chat in your agent of choice and try one of these prompts to confirm everything is working.

If you are in an existing codebase:

Read my Tailwind config and create a design in Wonder using my exact colors, typography, and spacing.

If you're starting fresh:

Create a simple landing page hero in Wonder with a headline, subheadline, and a call-to-action button.

To test the round-trip:

Look at my existing app's header component and design a matching hero section in Wonder.

Your agent will use the Wonder MCP tools to read and write directly to your canvas. Open Wonder to see the result.

Troubleshooting and FAQ

What does the Wonder MCP server do?

The Wonder MCP gives your AI coding agent direct access to your designs, components, and documentation inside Wonder. Instead of screenshotting or describing your designs, your agent can read the actual design data and generate code that matches what you've built on the canvas.

Do I need a Wonder account?

Yes. You need an active Wonder account with at least one project. The MCP server connects to your Wonder workspace, so the agent only sees designs you have access to.

Is the MCP server free?

Yes, the Wonder MCP server is free to use on all plans, including the free tier.

Does it work with Windsurf, VS Code Copilot, or Cline?

Yes. Any MCP-compatible client can connect to Wonder. Use the manual setup instructions above. The JSON config with "url": "https://mcp.wonder.so/mcp" works with most clients. For clients that don't support remote URLs directly, use the mcp-remote bridge method shown in the Other MCP clients section.

The Wonder server isn't showing up / tools aren't working

Try fully quitting and restarting your agent. Most MCP connection issues resolve after a restart.

The MCP server is connected but the agent isn't using it

This usually means the agent doesn't know to look at your Wonder designs. Try being explicit in your prompt, for example: "Use the Wonder MCP to pull my designs and generate the landing page layout." Most agents will discover the available tools automatically, but a nudge helps.

Can the agent modify my designs?

Yes. The Wonder MCP server provides both read and write access. Your agent can pull your designs as context and push new designs or updates back to the canvas.

I already added other MCP servers. Will Wonder conflict?

No. MCP servers run independently. Just add the Wonder config alongside your existing mcpServers entries in the same JSON object. For example:

{
  "mcpServers": {
    "wonder": {
      "url": "https://mcp.wonder.so/mcp"
    },
    "other-server": {
      "url": "https://example.com/mcp"
    }
  }
}

Where can I report issues or request features?

Head to our Feature Requests board or drop a message in our Discord.