English Français العربية

WunderUI

Official registry Developer tools

The WunderUI design system for coding agents: components, props, tokens, rules and skills.

Source code Website Documentation

Install

Add this to your client's MCP configuration (Claude Desktop: claude_desktop_config.json; Cursor: .cursor/mcp.json; VS Code and others use the same "mcpServers" shape).

NPM package wunderui-mcp
Claude Code 
claude mcp add wunderui -- npx -y wunderui-mcp@1.1.0
JSON configuration (Claude Desktop, Cursor, VS Code) 
{
    "mcpServers": {
        "wunderui": {
            "command": "npx",
            "args": [
                "-y",
                "wunderui-mcp@1.1.0"
            ]
        }
    }
}

Documentation

From the project's README on GitHub, refreshed weekly. Links open on GitHub.

Contents
  1. WunderUI MCP
  2. Tools
  3. Install
  4. Installing WunderUI itself
  5. Where the data comes from
  6. Without MCP
  7. Verify
  8. Licence

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

ToolWhat the agent gets
list_componentsThe inventory, filterable by category, plan (free or pro) or free text
get_componentExports, the TypeScript prop signature, the import line, an example, the docs URL
get_tokensLight and dark tokens as JSON, a CSS block, or Tailwind @theme mappings
get_design_mdThe full DESIGN.md, or one section (rules, donts, tasks, tokens, inventory, reference, templates, starters)
list_templatesThe full-page templates and what each is built from
get_starterCopy-paste TSX: app shell, dashboard, data grid, AI chat, theming
get_library_infoPackage name, version, install commands, stack, counts, data source
get_instructionsThe short, always-on rules (components, tokens, motion, copy) for CLAUDE.md / AGENTS.md
list_skillsThe WunderUI agent skills, free and Pro
get_skillOne skill's instructions (SKILL.md), so the agent can follow it without installing — Pro skills need WUNDERUI_LICENSE_KEY
get_block_sourceThe 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 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.

VariableEffect
WUNDERUI_OFFLINE=1never 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.

Frequently asked questions

What is WunderUI?

The WunderUI design system for coding agents: components, props, tokens, rules and skills.

How do I install WunderUI?

It runs on your machine. In Claude Code: claude mcp add wunderui -- npx -y wunderui-mcp@1.1.0. For other clients, paste the JSON configuration from this page into their MCP settings.

Does WunderUI need an API key?

Its registry entry lists no required key or secret. Some features may still need an account with the service it connects to.

Is WunderUI open source?

Yes. Its code is on GitHub under the MIT license.

Who maintains WunderUI?

It is published by Kl-webmedia. AI.tn lists it but does not maintain or endorse it.

From the official MCP Registry. Listing is not an endorsement: review a server's code and permissions before giving it access to your data.