Server data from the Official MCP Registry
The WunderUI design system for coding agents: components, props, tokens, rules and skills.
About
The WunderUI design system for coding agents: components, props, tokens, rules and skills.
Security Report
The WunderUI MCP server is a well-structured design-system data server with no shell execution, no dynamic code evaluation, no hardcoded secrets, and no user-controlled file paths. The main concerns are that WUNDERUI_LICENSE_KEY is sent as a bearer token to whatever origin WUNDERUI_SITE points to, which contradicts the README's claim that it is sent only to wunderui.com, and that remote design.json and DESIGN.md content is trusted without schema validation and then passed to the agent as context. Permissions (network_http, env_vars, file_read) match the server's purpose. Supply chain analysis found 1 known vulnerability in dependencies (0 critical, 1 high severity). Package verification found 1 issue.
4 files analyzed · 6 issues found
Security scores are indicators to help you make informed decisions, not guarantees. Always review permissions before connecting any MCP server.
Permissions Required
This plugin requests these system permissions. Most are normal for its category.
How to Install
Add this to your MCP configuration file:
{
"mcpServers": {
"io-github-kl-webmedia-wunderui-mcp": {
"args": [
"-y",
"wunderui-mcp"
],
"command": "npx"
}
}
}Documentation
View on GitHubFrom the project's GitHub README.
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 prompthttps://wunderui.com/llms.txt: the llms.txt conventionhttps://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.
Reviews
No reviews yet
Be the first to review this server!
More Developer Tools MCP Servers
Fetch
Freeby Modelcontextprotocol · Developer Tools
Web content fetching and conversion for efficient LLM usage
Git
Freeby Modelcontextprotocol · Developer Tools
Read, search, and manipulate Git repositories programmatically
Toleno
Freeby Toleno · Developer Tools
Toleno Network MCP Server — Manage your Toleno mining account with Claude AI using natural language.
MCP Marketplace
Freeby mcp-marketplace · Developer Tools
Search and install MCP servers from inside your AI client.
mcp-creator-python
Freeby mcp-marketplace · Developer Tools
Create, build, and publish Python MCP servers to PyPI — conversationally.
FinAgent
Freeby mcp-marketplace · Finance
Free stock data and market news for any MCP-compatible AI assistant.