luis-ui-mcp

v1.1.1

Published

2 months ago

MCP server para a biblioteca LUIS UI - expoe componentes, tokens, temas e hooks para LLMs

Downloads

0High
0Medium
0Low

pedronazarito

mcp luis-ui design-system react panda-css model-context-protocol llm ai

LUIS UI MCP Server

Servidor MCP da biblioteca LUIS UI. Ele expõe o catálogo do design system para clientes MCP como VS Code, GitHub Copilot, Claude Desktop e outros.

Com este servidor, um modelo consegue:

listar componentes, tokens, semantic colors, recipes e hooks do LUIS UI
consultar docs e ADRs versionadas do repositório
montar contexto canônico para documentação
preparar outlines, drafts e checks de consistência de documentação

Início rápido

Se você quer só usar o MCP no editor, o caminho mais simples é:

Instalar o Node.js LTS.
Confirmar que node, npm e npx existem na máquina.
Adicionar o servidor ao Copilot no VS Code usando npx.

node -v
npm -v
npx --version

Crie o arquivo .vscode/mcp.json na raiz do projeto com:

{
  "servers": {
    "luisUi": {
      "type": "stdio",
      "command": "npx",
      "args": ["-y", "luis-ui-mcp"]
    }
  }
}

Depois de salvar:

Clique em Start no topo do .vscode/mcp.json.
Abra o chat do Copilot em modo Agent.
Confira se o servidor aparece na lista de tools disponíveis.

Se preferir testar o pacote no terminal antes de configurar o editor:

npx -y luis-ui-mcp

O que você precisa ter na máquina

| Ferramenta | Obrigatório | Para que serve | Como verificar | Como instalar | | --- | --- | --- | --- | --- | | Node.js LTS | Sim | Runtime do servidor MCP | node -v | Baixe em https://nodejs.org/en/download | | npm | Sim | Gerenciar pacotes | npm -v | Já vem com o Node.js | | npx | Sim para o fluxo mais simples | Rodar o pacote sem instalar globalmente | npx --version | Já vem com o npm | | pnpm 9+ | Só para desenvolvimento local no monorepo | Instalar dependências e buildar o pacote | pnpm -v | Exemplo: npm install -g pnpm |

Notas rápidas:

npx faz parte do ecossistema do npm. Na prática, ao instalar Node.js, você instala npm e npx junto.
O -y em npx -y luis-ui-mcp evita o prompt interativo de confirmação da instalação temporária.
Se npx não existir na sua máquina, normalmente basta reinstalar o Node.js LTS ou atualizar o npm.

Formas de usar o servidor

1. Sem instalar globalmente

Recomendado para quem só quer usar o pacote em um cliente MCP:

npx -y luis-ui-mcp

2. Instalação global

Útil se você pretende chamar o binário diretamente:

npm install -g luis-ui-mcp
luis-ui-mcp

3. Rodando a versão local do monorepo

Útil para desenvolvimento do pacote dentro deste repositório:

npm install -g pnpm
pnpm install
pnpm --filter luis-ui-mcp build
node packages/mcp-server/dist/index.js

Configurando no Copilot

VS Code + GitHub Copilot Chat

Este é o cenário mais completo. No VS Code, o cliente MCP consegue usar:

tools
resources
prompts

Exemplo usando o pacote publicado com npx:

{
  "servers": {
    "luisUi": {
      "type": "stdio",
      "command": "npx",
      "args": ["-y", "luis-ui-mcp"]
    }
  }
}

Exemplo usando a build local deste monorepo:

{
  "servers": {
    "luisUiLocal": {
      "type": "stdio",
      "command": "node",
      "args": ["${workspaceFolder}/packages/mcp-server/dist/index.js"]
    }
  }
}

Checklist para esse fluxo:

Use VS Code 1.99+.
Tenha o GitHub Copilot habilitado.
Crie .vscode/mcp.json na raiz do workspace.
Se usar a versão local, rode pnpm --filter luis-ui-mcp build antes.
Reinicie o servidor MCP pelo VS Code quando alterar a configuração.
Se sua conta estiver em um plano Business ou Enterprise, confirme que a policy de MCP está habilitada pela organização.

Se você quiser compartilhar a configuração com o restante do time, versionar o .vscode/mcp.json costuma ser o caminho mais simples.

GitHub Copilot coding agent

No GitHub Copilot coding agent em github.com, o suporte é mais restrito: ele usa apenas tools. resources e prompts deste servidor não ficam disponíveis nesse ambiente.

No GitHub, vá em Settings -> Copilot -> Coding agent e cole uma configuração como esta na seção de MCP:

{
  "mcpServers": {
    "luis-ui": {
      "type": "local",
      "command": "npx",
      "args": ["-y", "luis-ui-mcp"],
      "tools": ["*"]
    }
  }
}

Se quiser uma configuração mais restrita, substitua ["*"] por uma allowlist com os nomes exatos das tools que o agente pode usar.

Compatibilidade por cliente

| Cliente | Formato de configuração | O que fica disponível | | --- | --- | --- | | VS Code com Copilot Chat | .vscode/mcp.json com servers | tools, resources e prompts | | GitHub Copilot coding agent | configuração MCP do repositório com mcpServers | apenas tools | | Outros clientes MCP | varia por cliente | normalmente command + args com transporte stdio |

Tools disponíveis

Catálogo e consulta

| Tool | O que faz | | --- | --- | | luis_list_components | Lista componentes, com filtro opcional por categoria | | luis_get_component | Retorna detalhes completos de um componente | | luis_get_tokens | Retorna tokens por categoria | | luis_get_semantic_colors | Retorna semantic colors com filtro opcional por prefixo | | luis_get_recipe | Retorna recipe ou slot recipe | | luis_get_theme_info | Retorna informações do sistema de tema | | luis_get_hooks | Retorna hooks, HOCs e utilitários | | luis_search | Faz busca full-text no catálogo |

Workflow de documentação

| Tool | O que faz | | --- | --- | | luis_get_doc_context | Monta contexto canônico para documentação | | luis_prepare_doc_outline | Prepara outline para docs, migration notes, ADRs e resumos | | luis_draft_documentation | Gera rascunho de documentação | | luis_review_documentation_consistency | Faz drift check entre catálogo, docs e stories locais |

Resources canônicos

Resources de catálogo:

luis://components
luis://components/{name}
luis://tokens
luis://tokens/{category}
luis://semantic-colors
luis://semantic-colors/{prefix}
luis://recipes
luis://recipes/{name}
luis://hooks
luis://hooks/{name}

Resources do repositório:

luis://docs
luis://docs/{slug}
luis://adr
luis://adr/{slug}

Resources de workflow:

luis://skill-packs

Prompts disponíveis

write-component-doc
write-token-guide
write-migration-note
write-adr-from-change
summarize-design-system-area

Exemplos de perguntas para testar

"Quais componentes de formulário o LUIS UI tem?"
"Me mostre os detalhes do componente Button."
"Quais tokens de spacing existem?"
"Quais semantic colors começam com bg?"
"Monte um contexto de documentação para o componente Modal."
"Crie um outline de migration note para a área de tokens."
"Revise se a documentação do Button está consistente com o catálogo MCP."

Desenvolvimento do pacote

A partir da raiz do monorepo:

pnpm install
pnpm --filter luis-ui-mcp build
pnpm --filter luis-ui-mcp test
pnpm --filter luis-ui-mcp dev

Estrutura principal:

packages/mcp-server/
├── src/
│   ├── index.ts
│   ├── server.ts
│   ├── prompts.ts
│   ├── resources.ts
│   ├── data/
│   ├── lib/
│   └── tools/
└── dist/