WunderUI

What the WunderUI MCP server does

The WunderUI MCP server gives coding agents a structured view of the WunderUI design system. It covers the component inventory, real TypeScript prop signatures, import statements, usage examples, design tokens, page templates, starter applications, and written design guidance. The information is intended to help an agent select and use library components while generating an interface.

The server also reports package details such as the library name, version, installation commands, technology stack, component counts, and data source. Components include their plan classification, allowing an agent to distinguish free components from Core or Pro components.

How it works

Run the server as an MCP process, commonly with npx -y wunderui-mcp. It communicates over stdio, so it can be configured in an MCP-capable coding editor or agent. The initial responses use data bundled with the package, allowing the server to answer without waiting for a network request.

In the background, it can retrieve newer design.json and DESIGN.md files from wunderui.com. When the remote files are at least as current as the bundled data, the server switches to that source. get_library_info identifies which source is currently active. The underlying data is generated from the WunderUI source, including stylesheet tokens, built type definitions, and documentation content.

Setup and configuration

For Claude Code, add the server with:

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

Other supported clients use an MCP server entry with npx as the command and -y, wunderui-mcp as its arguments. Cursor, Windsurf, Cline, Codex, and VS Code can use this configuration shape.

Configuration is optional. Set WUNDERUI_OFFLINE=1 to prevent network access and use only the bundled files. WUNDERUI_SITE changes the origin used for live data. WUNDERUI_LICENSE_KEY supplies a WunderUI Pro key for licensed capabilities; the key is sent only to wunderui.com.

Tools and capabilities

The WunderUI MCP server provides these tools:

• list_components searches or filters components by category, plan, or text.
• get_component returns a component’s exports, TypeScript props, import line, example, and documentation URL.
• get_tokens returns light and dark tokens as JSON, CSS, or Tailwind @theme mappings.
• get_design_md returns the complete design guide or a selected section.
• list_templates describes available full-page templates and their component makeup.
• get_starter returns copyable TSX for app shells, dashboards, data grids, AI chat, and theming.
• get_library_info reports library and data-source metadata.
• get_instructions returns concise rules suitable for CLAUDE.md or AGENTS.md.
• list_skills and get_skill expose WunderUI agent skills; Pro skills require a license key.
• get_block_source returns React source and shared helpers for UI blocks when a Pro key is available.

Limitations and notes

The WunderUI MCP server describes the library but does not install or include the library itself. @wunderui/react is not available from the public npm registry; Core and Pro users obtain it through the WunderUI download process. The Free plan covers the Figma preview and documentation, while component and skill availability depends on the applicable plan.

The server code is MIT licensed, but the WunderUI components it describes have separate plan-based licensing. Agents that do not support MCP can use the published DESIGN.md, llms.txt, or design.json files instead.