How do I install WunderUI?

Copy the stdio config for Cursor, Claude Desktop, Claude Code, or VS Code on this page. It uses the publisher's install, not a PlugMCP proxy.

Does WunderUI need an API key?

No required environment variable is listed on this record.

What transport does WunderUI use?

WunderUI runs locally over stdio.

When was WunderUI last checked?

Last checked 2026-11-09. The WunderUI design system for coding agents: components, props, tokens, rules and skills.

WunderUI MCP server

Power your agent

Add this server

The publisher's own command. Not a PlugMCP endpoint.

Add to Cursor Add to VS Code Run on PlugMCP

Host a copy with our keys and logs.

Local command

npx -y [email protected]

Claude Code has no install link for a local command. Copy the command below and run it in a terminal.

shClaude Code

1claude mcp add io.github.kl-webmedia-wunderui-mcp -- npx -y wunderui-mcp@1.2.1

Run in a terminal.

jsonClaude Desktop

1{2  "mcpServers": {3    "io.github.kl-webmedia-wunderui-mcp": {4      "command": "npx",5      "args": [6        "-y",7        "[email protected]"8      ]9    }10  }11}

claude_desktop_config.json

Local · npmPublisher installStep-by-step: add this in Claude

Remote URL or a command on your machine? How the two installs differ

Run on PlugMCP

Host a copy with our keys and logs.

A new server you create. It is not this listing's official endpoint. Use the publisher install when you want their URL and their credentials.

Launch

Server facts

Local

Transport: stdio
Version: 1.2.1
Last checked

Tools

No tool list yet. Remote servers get one after the first health check.

FAQ

Questions

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

Tool	What the agent gets
`list_components`	The inventory, filterable by category, plan (free or pro) or free text
`get_component`	Exports, the TypeScript prop signature, the import line, an example, the docs URL
`get_tokens`	Light and dark tokens as JSON, a CSS block, or Tailwind `@theme` mappings
`get_design_md`	The full DESIGN.md, or one section (`rules`, `donts`, `tasks`, `tokens`, `inventory`, `reference`, `templates`, `starters`)
`list_templates`	The full-page templates and what each is built from
`get_starter`	Copy-paste TSX: app shell, dashboard, data grid, AI chat, theming
`get_library_info`	Package name, version, install commands, stack, counts, data source
`get_instructions`	The short, always-on rules (components, tokens, motion, copy) for CLAUDE.md / AGENTS.md
`list_skills`	The WunderUI agent skills, free and Pro
`get_skill`	One skill's instructions (SKILL.md), so the agent can follow it without installing — Pro skills need `WUNDERUI_LICENSE_KEY`
`get_block_source`	The React source of a UI block and its shared helpers — needs a Pro key in `WUNDERUI_LICENSE_KEY`

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

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 is not on the public npm registry: Core and Pro licence holders install it from the wunderui-core download (the wunderui-setup agent skill does it for you), and the server tells agents exactly that. The Free plan covers the Figma preview and the documentation at wunderui.com.

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.

Variable	Effect
`WUNDERUI_OFFLINE=1`	never touch the network, use the bundled copy
`WUNDERUI_SITE=<url>`	fetch the live data from another origin
`WUNDERUI_LICENSE_KEY=<key>`	your WunderUI Pro key — unlocks Pro skills (`get_skill`) and block source (`get_block_source`); sent only to wunderui.com

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.

Licence

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

Add this server

Host a copy with our keys and logs.

Server facts

Tools

Questions

How do I install WunderUI?

Does WunderUI need an API key?

What transport does WunderUI use?

When was WunderUI last checked?

Documentation

WunderUI MCP

Tools

Install

Installing WunderUI itself

Where the data comes from

Without MCP

Verify

Licence