LUIS UI MCP Server

MCP (Model Context Protocol) server para a biblioteca LUIS UI. Expõe componentes, tokens, temas, recipes e hooks para uso com LLMs.

📦 Instalação

Uso Local (desenvolvimento)

No projeto LUIS UI, o servidor já está configurado:

pnpm install
pnpm -F luis-ui-mcp build

Uso como Pacote NPM (publicado)

npm install -g luis-ui-mcp
# ou
npx luis-ui-mcp

⚙️ Configuração

Claude Desktop / VS Code

Adicione ao seu .mcp.json ou cline_mcp_settings.json:

{
  "mcpServers": {
    "luis": {
      "command": "node",
      "args": [
        "/caminho/absoluto/para/luis-ui-lib/packages/mcp-server/dist/index.js"
      ]
    }
  }
}

Ou se instalado via npm:

{
  "mcpServers": {
    "luis": {
      "command": "npx",
      "args": ["luis-ui-mcp"]
    }
  }
}

🛠️ Tools Disponíveis

1. luis_list_components

Lista todos os componentes LUIS com informações básicas.

Parâmetros:

• category? (opcional): Filtrar por categoria (form, layout, feedback, navigation, overlay, data-display, utility)

Exemplo:

luis_list_components({ category: "form" });

2. luis_get_component

Obtém detalhes completos de um componente específico.

Parâmetros:

• name (obrigatório): Nome do componente (ex: "Button", "Modal")

Exemplo:

luis_get_component({ name: "Button" });

3. luis_get_tokens

Obtém tokens de design por categoria.

Parâmetros:

• category (obrigatório): colors, spacing, fontSizes, fontWeights, lineHeights, borderRadius, borderWidths, durations, easings, keyframes, zIndex, opacity, aspectRatios, fonts

Exemplo:

luis_get_tokens({ category: "spacing" });

4. luis_get_semantic_colors

Obtém semantic color tokens com valores para light/dark mode.

Parâmetros:

• prefix? (opcional): Filtrar por prefixo (bg, text, border, icon, interactive, status, surface)

Exemplo:

luis_get_semantic_colors({ prefix: "bg" });

5. luis_get_recipe

Obtém recipe ou slot-recipe de um componente.

Parâmetros:

• name (obrigatório): Nome do recipe (ex: "button", "textRecipe", "modalSlot")

Exemplo:

luis_get_recipe({ name: "button" });

6. luis_get_theme_info

Obtém informações do sistema de tema.

Parâmetros:

• topic? (opcional): provider, colorMode, breakpoints, transitions, fonts, semanticColors

Exemplo:

luis_get_theme_info({ topic: "colorMode" });

7. luis_get_hooks

Obtém hooks, HOCs e utilitários disponíveis.

Parâmetros:

• name? (opcional): Filtrar por nome

Exemplo:

luis_get_hooks({ name: "useTheme" });

8. luis_search

Busca full-text em toda a biblioteca.

Parâmetros:

• query (obrigatório): Termo de busca

Exemplo:

luis_search({ query: "button" });

📚 Exemplo de Uso

Após configurar o MCP server, você pode perguntar ao LLM:

• "Quais componentes de formulário estão disponíveis no LUIS?"
• "Como usar o componente Button com todas suas variantes?"
• "Quais são os tokens de spacing disponíveis?"
• "Como funciona o sistema de color mode?"
• "Mostre exemplo de código usando o Modal"

🏗️ Estrutura

packages/mcp-server/
├── src/
│   ├── index.ts          # Entry point (McpServer + stdio)
│   ├── server.ts         # Registro de tools
│   ├── data/             # Dados estáticos
│   │   ├── components.ts
│   │   ├── tokens.ts
│   │   ├── semantic-colors.ts
│   │   ├── recipes.ts
│   │   ├── hooks.ts
│   │   └── theme.ts
│   └── tools/            # Implementação das 8 tools
│       ├── list-components.ts
│       ├── get-component.ts
│       ├── get-tokens.ts
│       ├── get-semantic-colors.ts
│       ├── get-recipe.ts
│       ├── get-theme-info.ts
│       ├── get-hooks.ts
│       └── search.ts
└── dist/                 # Compilado (gerado)

🔧 Desenvolvimento

# Build
pnpm build

# Watch mode
pnpm dev

# Testar localmente
node dist/index.js

📦 Publicação

Primeira publicação

# 1. Login no npm (primeira vez apenas)
npm login

# 2. Build
pnpm build

# 3. Publicar
npm publish

Atualizações (release)

Use os scripts de release para incrementar versão, buildar e publicar automaticamente:

# Patch release (1.0.0 -> 1.0.1) - correções de bugs
pnpm release:patch

# Minor release (1.0.0 -> 1.1.0) - novas funcionalidades
pnpm release:minor

# Major release (1.0.0 -> 2.0.0) - breaking changes
pnpm release:major

Esses comandos executam automaticamente:

1. npm version patch/minor/major - incrementa a versão no package.json
2. pnpm build - compila o TypeScript
3. npm publish - publica no npm registry

Verificar publicação

# Ver informações do pacote
npm view luis-ui-mcp

# Testar instalação
npm install -g luis-ui-mcp

# Executar
luis-ui-mcp

📝 Notas

• Todos os dados são hardcoded em TypeScript (não há leitura dinâmica de arquivos)
• Fonte de verdade: packages/ui-lib/src/
• Idioma: Todas as descrições em português
• Compatível com MCP SDK 1.0+

🔗 Links

• Documentação LUIS UI
• Model Context Protocol
• MCP SDK