How do I install Wunderui?

Wunderui is a local plugin. Install it using npm package: wunderui-mcp and add the generated configuration snippet to your AI app's MCP config file. Then restart your AI app.

Is Wunderui safe to use?

Yes. Wunderui passed MCP Marketplace's automated security scan with a score of 9/10 (low risk). Every server on MCP Marketplace is security-scanned before it's listed; see the full security report on this page for the findings and permissions.

What AI apps work with Wunderui?

Wunderui uses the Model Context Protocol (MCP) and works with any MCP-compatible AI app, including Claude, ChatGPT / Codex, Gemini, Copilot, Cursor, and more.

Back to Browse

Wunderui MCP Server

by Kl Webmedia

Developer ToolsLow Risk9.0MCP RegistryLocal

Free

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

9.0

Low Risk9.0Low Risk

Valid MCP server (3 strong, 3 medium validity signals). 1 known CVE in dependencies (0 critical, 1 high severity) Package registry verified. Imported from the Official MCP Registry.

4 files analyzed · 2 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.

file_system

Check that this permission is expected for this type of plugin.

HTTP Network Access

Connects to external APIs or services over the internet.

env_vars

Check that this permission is expected for this type of plugin.

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 GitHub

From 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.

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:

Resource URI	What it holds
`wunderui://design-md`	The full DESIGN.md (markdown)
`wunderui://design-json`	The machine-readable design data (tokens, inventory, templates, skills)
`wunderui://tokens`	Light and dark token values
`wunderui://instructions`	The short rules for CLAUDE.md / AGENTS.md
`wunderui://components`	The component inventory: name, category, plan, description
`wunderui://components/{slug}`	One component in full (one resource per component, listed by the server)

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.

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.

Releasing

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).
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.
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.

Reviews

No reviews yet

Be the first to review this server!

4.8

Local

MCP Marketplace

Free

by mcp-marketplace · Developer Tools

Search and install MCP servers from inside your AI client.