UntitledUI MCP

Un servidor MCP para componentes de UntitledUI

GitHub
21
Prueba este MCPPatrocinado

Documentación

UntitledUI MCP

UntitledUI MCP

Servidor MCP que permite a los agentes de IA obtener componentes reales de UntitledUI en lugar de generar interfaces desde cero.

Por qué

Las herramientas de IA pueden generar interfaces funcionales, pero el resultado a menudo carece del pulido y la consistencia de los sistemas diseñados profesionalmente. UntitledUI es una de las bibliotecas de componentes más refinadas disponibles — este MCP le da a tu IA acceso directo a ella.

En lugar de generar un modal a partir de patrones que ha visto, tu IA obtiene el modal real de UntitledUI con todos sus detalles cuidadosamente elaborados intactos.

Inicio Rápido

1. Comienza con un Kit de Inicio de UntitledUI

Los componentes de UntitledUI requieren una configuración específica de Tailwind, tokens de diseño y proveedores. La forma más fácil de empezar es con un kit de inicio oficial:

Next.js:

git clone https://github.com/untitleduico/untitledui-nextjs-starter-kit my-app
cd my-app && npm install

Vite:

git clone https://github.com/untitleduico/untitledui-vite-starter-kit my-app
cd my-app && npm install

Estos kits de inicio vienen preconfigurados con:

  • Tailwind CSS con todos los tokens de diseño de UntitledUI
  • Proveedor de tema para modo claro/oscuro
  • Notificaciones toast
  • Configuración de enrutamiento
  • Todas las dependencias requeridas

2. Agrega el Servidor MCP

Claude Code:

claude mcp add untitledui -- npx untitledui-mcp

Cursor / VS Code — agrégalo a .cursor/mcp.json:

{
  "mcpServers": {
    "untitledui": {
      "command": "npx",
      "args": ["-y", "untitledui-mcp"]
    }
  }
}

Esto te da acceso a componentes base (botón, input, select, avatar, badge, etc.) sin autenticación.

3. Autentícate para Componentes Pro (opcional)

Para acceder a componentes de aplicación (modales, barras laterales, tablas, paneles) y secciones de marketing, autentícate con tu licencia Pro de UntitledUI:

npx untitledui@latest login

Esto abre tu navegador para autenticarte y guarda tu clave de licencia en ~/.untitledui/config.json. El MCP detecta automáticamente este archivo.

Alternativamente, establece la clave manualmente en tu configuración de MCP:

{
  "mcpServers": {
    "untitledui": {
      "command": "npx",
      "args": ["-y", "untitledui-mcp"],
      "env": {
        "UNTITLEDUI_LICENSE_KEY": "<your-key>"
      }
    }
  }
}

4. Verifica la Configuración

npx untitledui-mcp --test

Flujo de Trabajo Recomendado

  1. Comienza con un kit de inicio — No intentes agregar componentes de UntitledUI a un proyecto existente sin la configuración adecuada de Tailwind. Los kits de inicio manejan toda la configuración.

  2. Pide a tu IA que obtenga componentes — Una vez que tu proyecto esté configurado, pide a tu IA que agregue componentes específicos:

    • "Agrega un modal de configuración"
    • "Necesito una navegación de barra lateral"
    • "Agrega el menú desplegable de perfil de usuario"

  3. Construye páginas completas a partir de ejemplos — Para funciones más grandes, comienza con una plantilla de página:

    • "Muéstrame las plantillas de panel disponibles"
    • "Obtén el ejemplo de página de aterrizaje"

Herramientas Disponibles

Tu IA obtiene estas herramientas:

HerramientaQué hace
search_componentsEncuentra componentes por nombre o descripción
list_componentsExplora una categoría
get_component_with_depsObtiene componente + todas las dependencias
get_componentObtiene solo el componente
get_component_fileObtiene un solo archivo (para componentes grandes)
list_examplesExplora plantillas de página disponibles
get_exampleObtiene una plantilla de página completa

Lo Que Puedes Hacer

Recrea Cualquier Interfaz a Partir de una Captura de Pantalla

You: [paste screenshot] "Recreate this with UntitledUI components"

AI analyzes the design → identifies matching components
AI fetches sidebar, header, cards, tables → all with dependencies
AI assembles → production-ready page matching your screenshot

Construye Páginas Completas en Segundos

You: "Build me a SaaS pricing page with 3 tiers and a FAQ section"

AI fetches marketing/pricing-sections + marketing/faq-sections
AI combines components → complete pricing page with toggle for monthly/annual
Result: Professional pricing page with all interactions working

Configura Todo el Esqueleto de Tu Aplicación

You: "Set up the main app layout with collapsible sidebar and header with user dropdown"

AI fetches application/sidebars + application/headers + base components
AI wires up navigation state, theme toggle, user menu
Result: Complete app shell ready for your content

Clona una Página de las Plantillas de UntitledUI

You: "I want a dashboard like the one in dashboards-01"

AI calls get_example { path: "application/dashboards-01/01" }
→ Returns 27 files: page layout, charts, tables, cards, all base components
→ Ready to customize with your data

Mezcla y Combina Componentes

You: "Create a settings page with sections for profile, notifications, billing, and team members"

AI searches → finds matching components for each section
AI fetches settings panels, forms, tables, modals
AI composes → cohesive settings page with consistent styling

Desarrollo Rápido de Funciones

You: "Add a command palette like Linear/Notion with keyboard shortcut"

AI fetches application/command-menus
→ Complete command palette with search, keyboard navigation, sections
→ Just wire up your actions

Formato de Respuesta

{
  "primary": {
    "name": "settings-modal",
    "files": [{ "path": "settings-modal.tsx", "code": "..." }],
    "baseComponents": ["button", "input", "select"]
  },
  "baseComponents": [
    { "name": "button", "files": [...] },
    { "name": "input", "files": [...] }
  ],
  "allDependencies": ["@headlessui/react", "clsx"],
  "estimatedTokens": 12500,
  "fileList": [
    { "path": "settings-modal.tsx", "tokens": 850 },
    { "path": "button/button.tsx", "tokens": 420 }
  ]
}

Las respuestas incluyen estimaciones de tokens para ayudar a los agentes de IA a gestionar los límites de contexto. Para respuestas muy grandes (>25K tokens), la IA puede usar get_component_file para obtener archivos individuales.

Solución de Problemas

Los componentes no se ven bien / faltan estilos

Los componentes de UntitledUI usan clases personalizadas de Tailwind como bg-primary, text-display-md y tokens de diseño que no forman parte del Tailwind estándar.

Solución: Usa un kit de inicio de UntitledUI. Los kits de inicio incluyen toda la configuración de Tailwind y los tokens de diseño requeridos.

Errores de importación para componentes base

Los componentes Pro dependen de componentes base (botón, input, etc.). Al obtener un componente con get_component_with_deps, todas las dependencias se incluyen automáticamente.

Solución: Asegúrate de usar get_component_with_deps en lugar de get_component para componentes Pro.

Requisitos

  • Node.js 18+
  • Licencia Pro de UntitledUI (solo para componentes Pro)

Créditos

UntitledUI es creado por Jordan Hughes.

Licencia

MIT