@ds-example/mcp-server

Servidor MCP dedicado para orientar agentes no uso da biblioteca @ds-example/ui.

O servidor usa um catálogo estático definido em src/components/, com suporte atual para os componentes: Button, Typography e Link.

Ferramentas

• list_components: lista os componentes disponíveis no pacote @ds-example/ui.
• get_component_details: retorna import path, summary, props e exemplos de uso de um componente específico.

Execucao local

pnpm --filter @ds-example/mcp-server mcp:start

Uso em projetos externos

Apos publicar o pacote no npm, qualquer projeto pode consumir o MCP server sem clonar este repositorio.

1. Instalar o pacote (opcional)

npm install -D @ds-example/mcp-server

Se preferir nao instalar, o npx baixa automaticamente na primeira execucao.

2. Configurar o VS Code

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

{
  "servers": {
    "design-system-ui": {
      "command": "npx",
      "args": ["-y", "@ds-example/mcp-server"],
      "type": "stdio"
    }
  }
}

3. Iniciar o servidor

1. Abra a Command Palette (Cmd+Shift+P / Ctrl+Shift+P)
2. Execute MCP: List Servers
3. Clique em Start ao lado de design-system-ui

4. Usar no Copilot Chat

Com o servidor ativo, o Copilot Chat consegue chamar as ferramentas diretamente. Exemplos:

• "liste os componentes do design system"
• "me explique o componente button"
• "qual componente usar para navegacao externa?"

Requisitos

• VS Code com extensao GitHub Copilot
• Node.js >= 18