WunderUI MCP

WunderUI MCP

Un servidor MCP que le brinda a un agente de codificación de IA el sistema de diseño WunderUI: tokens de diseño, el inventario de componentes con firmas de props reales, plantillas de página y fragmentos de inicio. El agente construye con la librería en lugar de reinventar una cuadrícula de datos a partir de divs en bruto.

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

Funciona con Claude Code, Cursor, Windsurf, Cline, Codex, VS Code y cualquier otro cliente que hable MCP sobre stdio. No se necesita clave ni cuenta.

Herramientas

Herramienta	Lo que obtiene el agente
list_components	El inventario, filtrable por categoría, plan (gratis o pro) o texto libre
get_component	Exportaciones, la firma de props en TypeScript, la línea de importación, un ejemplo, la URL de documentación
get_tokens	Tokens claros y oscuros como JSON, un bloque CSS o mapeos de Tailwind @theme
get_design_md	El DESIGN.md completo, o una sección (rules, donts, tasks, tokens, inventory, reference, templates, starters)
list_templates	Las plantillas de página completa y de qué están hechas
get_starter	TSX para copiar y pegar: shell de aplicación, panel de control, cuadrícula de datos, chat de IA, theming
get_library_info	Nombre del paquete, versión, comandos de instalación, stack, conteos, fuente de datos
get_instructions	Las reglas cortas y siempre activas (componentes, tokens, movimiento, copy) para CLAUDE.md / AGENTS.md
list_skills	Las habilidades del agente WunderUI, gratis y Pro
get_skill	Las instrucciones de una habilidad (SKILL.md), para que el agente pueda seguirlas sin instalarlas — las habilidades Pro necesitan WUNDERUI_LICENSE_KEY
get_block_source	El código fuente React de un bloque de UI y sus helpers compartidos — necesita una clave Pro en WUNDERUI_LICENSE_KEY

Cada componente lleva su plan. En el plan gratuito, un agente solo debe usar componentes marcados como free; los demás necesitan WunderUI Core o Pro.

Instalación

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: la misma forma, en la configuración MCP de ese editor.

Instalando WunderUI en sí

El servidor describe la librería; no la envía. @wunderui/react no está en el registro público de npm: los titulares de licencias Core y Pro lo instalan desde la descarga de wunderui-core (la habilidad del agente wunderui-setup lo hace por ti), y el servidor les dice exactamente eso a los agentes. El plan gratuito cubre la vista previa de Figma y la documentación en wunderui.com.

De dónde vienen los datos

data/design.json y data/DESIGN.md se generan desde el código fuente de WunderUI con cada versión: tokens desde la hoja de estilos, props desde las definiciones de tipos compiladas, nombres y descripciones desde la documentación.

El servidor arranca con la copia incluida y responde de inmediato. En segundo plano, obtiene el design.json y DESIGN.md actuales de wunderui.com y cambia a ellos cuando son al menos tan nuevos, para que los agentes vean componentes nuevos sin una actualización del paquete. get_library_info informa qué fuente está en uso.

Variable	Efecto
WUNDERUI_OFFLINE=1	nunca tocar la red, usar la copia incluida
WUNDERUI_SITE=<url>	obtener los datos en vivo desde otro origen
WUNDERUI_LICENSE_KEY=<key>	tu clave Pro de WunderUI — desbloquea habilidades Pro (get_skill) y código fuente de bloques (get_block_source); se envía solo a wunderui.com

Sin MCP

Los mismos datos se sirven como archivos estáticos para agentes y editores que no hablan MCP:

• https://wunderui.com/DESIGN.md: pegar al inicio de un prompt
• https://wunderui.com/llms.txt: la convención llms.txt
• https://wunderui.com/design.json: el mismo índice estructurado

Verificación

npm install
npm run smoke

Inicia el servidor con un cliente MCP real y llama a cada herramienta una vez.

Licencia

El código del servidor es MIT. Los componentes de WunderUI que describe están licenciados por plan, ver wunderui.com/pricing.