MCP server
A local server that hands your coding agent the whole library: 201 components with their real prop signatures, every design token, the page templates and ready starters. It runs over stdio — no key, no account, no network.
Not on npm yet
The package is still being published. Until it lands, point your editor at the local path — see Run from source.
Install
Pick your editor. Every variant starts the same server; only the config file differs.
claude mcp add wunderui -- npx -y @wunderui/mcpRestart the editor afterwards; the tools are discovered on connect.
Tools
Seven, deliberately. Each one answers a question an agent actually has while it builds.
| Tool | Input | Returns |
|---|---|---|
| category?, query? | The inventory, filtered — name, category, description, docs URL. | |
| name | Exports, the TypeScript prop signature from the build, the import line and the docs URL. Accepts an export name, a slug or a title. | |
| format: json | css | tailwind, theme: light | dark | both | Every token, as JSON, a ready CSS block, or Tailwind @theme mappings. | |
| section: all | rules | tokens | inventory | props | templates | The DESIGN.md in full, or a single section when the context window is tight. | |
| — | The full-page templates and the components each one is built from. | |
| kind: app-shell | dashboard | table | chat | theming | Copy-paste TSX for a common composition, wired with the correct props. | |
| — | Package name and version, install commands, the stack, and the counts. |
Example prompts
Once the server is connected, the agent calls the tools on its own. Naming WunderUI in the prompt is usually enough.
- Build a settings page with WunderUI. Check the inventory first.
- Which WunderUI component handles a sortable, searchable table?
- Re-theme this dashboard with WunderUI's green accent.
- Give me the WunderUI app shell and fill it with the KPI row.
Run from source
Working inside the repository, or want to change a tool? Point the editor at the file directly.
{
"mcpServers": {
"wunderui": {
"command": "node",
"args": ["/absolute/path/to/packages/mcp/src/index.mjs"]
}
}
}There is a smoke test that starts the server with a real MCP client and calls every tool once:
npm run smoke:mcpWhere the data comes from
The server answers from a generated index bundled with the package — the same one served as design.json. It is rebuilt from the library source on every release, so a prop signature the agent reads is the signature the build exports. Nothing is fetched at runtime.