UntitledUI MCP

Um servidor MCP para componentes UntitledUI

GitHub
21
Experimente este MCPPatrocinado

Documentação

UntitledUI MCP

UntitledUI MCP

Servidor MCP que permite que agentes de IA busquem componentes reais do UntitledUI em vez de gerar UI do zero.

Por quê

Ferramentas de IA conseguem gerar UI funcional, mas o resultado muitas vezes carece do acabamento e da consistência de sistemas projetados profissionalmente. O UntitledUI é uma das bibliotecas de componentes mais refinadas disponíveis — este MCP dá à sua IA acesso direto a ela.

Em vez de gerar um modal a partir de padrões que já viu, sua IA busca o modal real do UntitledUI com todos os seus detalhes cuidadosamente elaborados intactos.

Início Rápido

1. Comece com um Starter Kit do UntitledUI

Os componentes do UntitledUI exigem configuração específica de Tailwind, design tokens e providers. A maneira mais fácil de começar é com um starter kit 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

Esses starter kits já vêm pré-configurados com:

  • Tailwind CSS com todos os design tokens do UntitledUI
  • Theme provider para modo claro/escuro
  • Notificações toast
  • Configuração de rotas
  • Todas as dependências necessárias

2. Adicione o Servidor MCP

Claude Code:

claude mcp add untitledui -- npx untitledui-mcp

Cursor / VS Code — adicione ao .cursor/mcp.json:

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

Isso dá acesso aos componentes base (button, input, select, avatar, badge, etc.) sem autenticação.

3. Autentique para Componentes Pro (opcional)

Para acessar componentes de aplicação (modais, sidebars, tabelas, dashboards) e seções de marketing, autentique com sua licença Pro do UntitledUI:

npx untitledui@latest login

Isso abre seu navegador para autenticar e salva sua chave de licença em ~/.untitledui/config.json. O MCP detecta esse arquivo automaticamente.

Alternativamente, defina a chave manualmente na sua configuração do MCP:

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

4. Verifique a Configuração

npx untitledui-mcp --test

Fluxo de Trabalho Recomendado

  1. Comece com um starter kit — Não tente adicionar componentes do UntitledUI a um projeto existente sem a configuração adequada do Tailwind. Os starter kits cuidam de toda a configuração.

  2. Peça à sua IA para buscar componentes — Depois que seu projeto estiver configurado, peça à sua IA para adicionar componentes específicos:

    • "Adicione um modal de configurações"
    • "Preciso de uma navegação lateral"
    • "Adicione o dropdown de perfil do usuário"

  3. Construa páginas completas a partir de exemplos — Para funcionalidades maiores, comece com um template de página:

    • "Mostre-me os templates de dashboard disponíveis"
    • "Busque o exemplo de landing page"

Ferramentas Disponíveis

Sua IA tem acesso a estas ferramentas:

FerramentaO que faz
search_componentsEncontra componentes por nome ou descrição
list_componentsNavega por uma categoria
get_component_with_depsBusca componente + todas as dependências
get_componentBusca apenas o componente
get_component_fileBusca um único arquivo (para componentes grandes)
list_examplesNavega pelos templates de página disponíveis
get_exampleBusca um template de página completo

O Que Você Pode Fazer

Recriar Qualquer UI a Partir de um Screenshot

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

Construir Páginas Completas em 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

Configurar Todo o Shell do Seu Aplicativo

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

Clonar uma Página dos Templates do 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

Misturar e Combinar 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

Desenvolvimento Rápido de Funcionalidades

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 Resposta

{
  "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 }
  ]
}

As respostas incluem estimativas de tokens para ajudar agentes de IA a gerenciar limites de contexto. Para respostas muito grandes (>25K tokens), a IA pode usar get_component_file para buscar arquivos individuais.

Solução de Problemas

Componentes não parecem corretos / estilos ausentes

Os componentes do UntitledUI usam classes Tailwind personalizadas como bg-primary, text-display-md e design tokens que não fazem parte do Tailwind padrão.

Solução: Use um starter kit do UntitledUI. Os starter kits incluem toda a configuração necessária do Tailwind e os design tokens.

Erros de importação para componentes base

Os componentes Pro dependem dos componentes base (button, input, etc.). Ao buscar um componente com get_component_with_deps, todas as dependências são incluídas automaticamente.

Solução: Certifique-se de usar get_component_with_deps em vez de get_component para componentes Pro.

Requisitos

  • Node.js 18+
  • Licença Pro do UntitledUI (apenas para componentes Pro)

Créditos

UntitledUI é criado por Jordan Hughes.

Licença

MIT