Connect your coding agent to Wuizard over MCP

Your coding agent is good at writing UI and has no idea what your product should look like. Connecting it to Wuizard fixes that: before it builds a screen, it reads your sheet (your colours, type, radii, motion and the exact component chosen for each part of the interface) and builds with those values instead of its own defaults.

This guide covers every way to connect, how to check it worked, and what to do when it doesn't. It takes about five minutes.

What you need#

• A Wuizard account. Your agent reads your sheets on any account; the AI features need Pro or MAX (annual plans start with a free trial).
• A sheet. Start one from a starter vibe (designing a sheet), from a website you like, or by describing your app to the sheet designer. You can change everything later, so a rough start is fine.
• An MCP client. Claude, Claude Code, Cursor, Windsurf, VS Code, Zed or anything else that can add a remote MCP server.

How the connection works#

Wuizard is a remote MCP server at https://wuizard.com/mcp. Nothing runs on your machine. Claude, Claude Code and Cursor connect by signing in with your Wuizard account: your browser opens a Wuizard page, you approve, and the client gets its own access. Every other client uses a personal API key that you create in the app.

Once connected, the agent sees a small set of tools. The ones it uses most are get_sheet (your whole design system), get_slot (the exact component for one slot, with your values filled in), get_tokens (CSS variables or a Tailwind theme) and get_page (a whole page assembled from your sheet's sections). The full tool list is in the docs.

Claude Code#

In your project folder, add the server:

claude mcp add --transport http wuizard https://wuizard.com/mcp

Then, inside Claude Code, run /mcp, choose wuizard and pick Authenticate. Your browser opens Wuizard; approve the connection and you're done. The server is added to that project, so repeat the command in each project that should use your sheet.

Cursor#

Open Agents in Wuizard, pick Cursor and use its install link. Cursor opens and adds Wuizard to its MCP servers. In Cursor's MCP settings, click Connect next to wuizard and approve in your browser.

Claude on the web and desktop#

1. In Claude, open Settings → Connectors and choose Add custom connector.
2. Name it Wuizard and paste https://wuizard.com/mcp as the URL.
3. Click Connect and approve on the Wuizard page that opens.

The connector is then available in any chat where you turn it on.

Windsurf and other MCP clients#

Create a personal API key on the Agents page and keep it somewhere safe: it's shown once. Set it as WUIZARD_KEY in your environment and add the server to your client's MCP config:

{
  "mcpServers": {
    "wuizard": {
      "url": "https://wuizard.com/mcp",
      "headers": { "Authorization": "Bearer $WUIZARD_KEY" }
    }
  }
}

Each client keeps this file in its own place, so check its docs for where. Some clients don't fill in $WUIZARD_KEY from your environment; Windsurf uses serverUrl and ${env:WUIZARD_KEY} instead, as the API key guide shows. You can rotate a key at any time, and disconnect any signed-in app from the same page. The API key guide covers key-based setup in detail, including Claude Code and Cursor on machines where a browser sign-in isn't practical.

Check that it works#

Start a new conversation and ask the agent to read your sheet:

Call get_sheet and summarise my design system in a few lines.

A connected agent comes back with your foundations (colours, fonts, radius, spacing, shadows, motion spring), the slots you've filled and your rules. If it answers from general knowledge instead, it isn't connected yet: see troubleshooting below.

Then ask for something real, such as a settings screen or a pricing page. A good sign is the agent calling get_slot for the buttons, inputs or transitions it needs instead of writing its own.

Choose which sheet the agent uses#

The usual setup is one sheet per product or client. Tools work on your active sheet unless the agent names another one: list_sheets shows them all with the active one marked, and every sheet tool takes a sheet name or id. When you work across several projects, say which sheet to use at the start of the conversation, or keep a CLAUDE.md in each repo that names it.

Make the sheet stick#

Agents forget between conversations. Two habits keep every session on your system:

• Keep instructions in the repo. Export the sheet (the Export button on the sheet) and put its CLAUDE.md (or AGENTS.md) at the root of your project. It tells the agent to use only your tokens and to call get_slot for anything you've slotted. The same file is also an MCP resource, for clients that keep resources in context.
• Review before finishing. Ask the agent to run check_ui on a screen before it calls it done. It lists colours, radii, springs or fonts outside your foundations and hand-written versions of components you've slotted. It's a fixed set of checks, so the same code always gets the same answer, and each review is metered.

Prefer files to a live connection? The export gives you the same tokens, components and pages as a zip.

Troubleshooting#

Still stuck? Email support from the docs page and a person replies.

Where to go next#

Fill the slots you use most, then browse the library for anything missing. Your agent can also make images and animations in your sheet's colours. If you're deciding whether a sheet is worth it compared with installing a component library, read component libraries vs a design sheet.