WunderUI

WunderUI MCP

An MCP server that gives an AI coding agent the WunderUI design system: design tokens, the component inventory with real prop signatures, page templates and starter snippets. The agent builds _with_ the library instead of reinventing a data grid out of raw divs.

claude mcp add wunderui -- npx -y wunderui-mcp

Works with Claude Code, Cursor, Windsurf, Cline, Codex, VS Code and any other client that speaks MCP over stdio. No key and no account needed.

Tools

Every component carries its plan. On the Free plan, an agent should only use components marked free; the others need WunderUI Core or Pro.

Resources

Clients that support MCP resources can attach the design context without a tool call. Read-only, and the same data as the tools above:

The tools stay for clients without resource support.

Install

Claude Code

claude mcp add wunderui -- npx -y wunderui-mcp

Cursor: .cursor/mcp.json

{

"mcpServers": { "wunderui": { "command": "npx", "args": ["-y", "wunderui-mcp"] } } }

Windsurf, Cline, Codex, VS Code: the same shape, in that editor's MCP config.

Installing WunderUI itself

The server describes the library; it does not ship it. @wunderui/react on npm is WunderUI Free (the free components only). Core and Pro licence holders install the full library from the wunderui-core download (the wunderui-setup agent skill does it for you), and the server tells agents exactly that.

Where the data comes from

data/design.json and data/DESIGN.md are generated from the WunderUI source with every release: tokens from the stylesheet, props from the built type definitions, names and descriptions from the docs.

The server starts with the bundled copy and answers immediately. In the background it fetches the current design.json and DESIGN.md from wunderui.com and switches to them when they are at least as new, so agents see new components without a package update. get_library_info reports which source is in use.

Without MCP

The same data is served as static files for agents and editors that don't speak MCP:

• https://wunderui.com/DESIGN.md: paste at the top of a prompt
• https://wunderui.com/llms.txt: the llms.txt convention
• https://wunderui.com/design.json: the same structured index

Verify

npm install

npm run smoke

Starts the server with a real MCP client and calls every tool once.

Releasing

1. Bump the version in package.json and in server.json (top-level version and packages[0].version — the workflow refuses to publish when they differ).
2. Commit, tag vX.Y.Z and push the tag. The Publish to npm workflow publishes to npm (Trusted Publishing) and then publishes server.json to the MCP Registry with GitHub OIDC — no tokens.
3. If the registry ever falls behind npm, run the workflow by hand (Actions → Publish to npm → Run workflow) with registry_only ticked; it publishes the current server.json for a version that already exists on npm.

Licence

The server code is MIT. The WunderUI components it describes are licensed per plan, see wunderui.com/pricing.