WunderUI

io.github.Kl-webmediaPublished by GitHub account Kl-webmediav1.2.1Updated Nov 3, 2026

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

VerifiedSTDIODesktop onlyKnowledge & MemoryDeveloper Tools

Overview

AI-generated overview

Gives a coding agent the WunderUI React design system: component inventory, real prop signatures, tokens, templates, starters and skills.

What you can do
  • Browse the component inventory, filtered by category, plan or free text, and read one component's exports, TypeScript props, anatomy and CSS variables
  • Read light and dark design tokens as JSON, CSS or Tailwind theme mappings, plus the full design context document and short always-on rules
  • List full-page templates and fetch copy-paste TSX starters for an app shell, dashboard, data grid, AI chat or theming
  • List agent skills and retrieve one skill's instructions, and fetch the React source of a UI block with its shared helpers
When to use it
Useful when an assistant is building a React interface with WunderUI and should reuse existing components and tokens instead of inventing markup. It also helps when migrating from another component library or when you want the design rules available in the editor without pasting documentation.
Requirements
Runs locally over stdio, typically via npx with the wunderui-mcp npm package, so Node.js is needed. No account or key is required for free content. Optional environment variables: WUNDERUI_LICENSE_KEY for Pro skills and block source, WUNDERUI_OFFLINE to stay offline, WUNDERUI_SITE to change the data origin. Network access is used to refresh design data from wunderui.com.
Before you install
The server describes the library but does not install it; the actual React package is installed separately. Pro skills and block source require a WunderUI Pro key in WUNDERUI_LICENSE_KEY, which is sent to wunderui.com. By default the server fetches updated design data from wunderui.com in the background; set WUNDERUI_OFFLINE to avoid network access. Free-plan users should only use components marked free.

Installation

In SourceWeft

  1. Open WunderUI in the dashboard and add it to a workspace.
  2. Enable the server for the chats that should use its tools.

Desktop only via STDIO. STDIO servers start a local process, so they need the SourceWeft desktop host.

Other MCP clients

Follow the launch instructions in the repository.

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.

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

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 URIWhat it holds
wunderui://design-mdThe full DESIGN.md (markdown)
wunderui://design-jsonThe machine-readable design data (tokens, inventory, templates, skills)
wunderui://tokensLight and dark token values
wunderui://instructionsThe short rules for CLAUDE.md / AGENTS.md
wunderui://componentsThe 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

bash
claude mcp add wunderui -- npx -y wunderui-mcp

Cursor: .cursor/mcp.json

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

bash
npm installnpm run smoke

Starts the server with a real MCP client and calls every tool once.

Releasing

  1. 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).
  2. 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.
  3. 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.

Source: README.md at commit 17381f2

Tools

11

list_components

List WunderUI components

The WunderUI component inventory: name, category, plan (free or pro) and one-line description. Filter by category, plan or a free-text query. Call this first to find out whether a component already exists before building one by hand. On the Free plan use only components with plan "free".

Parametersplanquerycategory

get_component

Get a WunderUI component

Everything needed to use one component correctly: its exported names, the TypeScript prop signature straight from the build, a props table per export (type, allowed values, default, required, description), its anatomy (parts and data-slot names), best practices, the CSS variables it reads with their defaults, the import line and a link to its documentation page. Also answers for hooks (signature, parameters, return value, notes), providers and utilities (useToast, ThemeProvider …).

Parametersnamerequired

get_tokens

Get WunderUI design tokens

The design tokens for light and dark, in the format you need. Use these instead of hardcoding colours; overriding them is how WunderUI is themed.

Parametersthemeformat

get_design_md

Get the WunderUI DESIGN.md

The complete design context as one markdown document: install steps, the rules an agent should follow, every token, the component inventory with props, and starter snippets. Pull this once at the start of a build.

Parameterssection

list_templates

List WunderUI page templates

Full pages assembled only from WunderUI components — a dashboard, a settings page, an AI inbox and a sign-in screen. Start from one of these instead of an empty file.

Takes no parameters.

get_starter

Get a WunderUI starter snippet

Copy-paste TSX for a common composition, wired with the correct props: an application shell, a dashboard row, a data grid, an AI chat, or the theming pattern.

Parameterskindrequired

get_library_info

Get WunderUI package info

Package name and version, install commands, the stack it is built on, and how many components, categories and templates exist.

Takes no parameters.

get_instructions

Get the short WunderUI rules

The short, always-on rules for building with WunderUI (components, tokens, motion, copy) — the text to keep in CLAUDE.md / AGENTS.md. Read this first; use get_design_md for the full context.

Takes no parameters.

list_skills

List WunderUI agent skills

The agent skills that build and check with WunderUI (set up a project, build screens, theme from a brand colour, migrate from shadcn/MUI/Chakra, token check, motion and accessibility audits, Figma). Free skills work for everyone; Pro skills need WUNDERUI_LICENSE_KEY.

Takes no parameters.

get_skill

Get a WunderUI agent skill

Returns one skill's instructions (its SKILL.md) from wunderui.com, so the agent can follow the workflow without installing the skill. Pro skills are sent only with a valid Pro key in WUNDERUI_LICENSE_KEY. Scripts the skill mentions come with the installed skill (wunderui.com/skills).

Parametersnamerequired

get_block_source

Get a WunderUI block's source (Pro)

The React source of a UI block (e.g. category 'app', block 'billing'), optionally one screen, plus the shared helpers it imports. Needs a WunderUI Pro key in WUNDERUI_LICENSE_KEY. Use https://wunderui.com/api/registry/index to see every block.

Parametersblockrequiredscreencategoryrequired

Version history

2
  1. v1.2.1LatestNov 1, 2026
  2. v1.1.0Oct 10, 2026

Score

90% of the applicable checks met

How complete this listing is, computed from the registry entry, the endpoint and public sources. Not a rating of the server and not a statement that it is safe or working today: reachability is a dated check, and no installs or reviews go into the score.

  • Reached in the last 30 days25 pts
  • Auth declared10 pts

    Declare the credential headers in the registry entry, or keep the endpoint answering the probe so its auth can be classified.

  • Tools listedRequired15 pts
  • DescriptionRequired15 pts
  • Logo10 pts
  • Documentation15 pts
  • License10 pts