shadcn/ui

shadcn-ui MCP Server

Servidor MCP para referências de componentes shadcn/ui

Este é um servidor MCP baseado em TypeScript que fornece informações de referência para componentes shadcn/ui. Ele implementa um servidor Model Context Protocol (MCP) que ajuda assistentes de IA a acessar a documentação e exemplos de componentes shadcn/ui.

Recursos

Ferramentas

• list_shadcn_components - Obtenha uma lista de todos os componentes shadcn/ui disponíveis
• get_component_details - Obtenha informações detalhadas sobre um componente específico
• get_component_examples - Obtenha exemplos de uso para um componente específico
• search_components - Pesquise componentes por palavra-chave

Funcionalidades

Este servidor coleta e armazena em cache informações de:

• O site oficial de documentação do shadcn/ui (https://ui.shadcn.com)
• O repositório GitHub do shadcn/ui

Ele fornece dados estruturados, incluindo:

• Descrições de componentes
• Instruções de instalação
• Exemplos de uso
• Props e variantes
• Exemplos de código

Desenvolvimento

Instale as dependências:

npm install

Compile o servidor:

npm run build

Para desenvolvimento com recompilação automática:

npm run watch

Instalação

Configuração do Claude Desktop

Para usar com o Claude Desktop, adicione a configuração do servidor:

No MacOS: ~/Library/Application Support/Claude/claude_desktop_config.json No Windows: %APPDATA%/Claude/claude_desktop_config.json

Opção 1: Usando build local

{
  "mcpServers": {
    "shadcn-ui-server": {
      "command": "/path/to/shadcn-ui-server/build/index.js"
    }
  }
}

Opção 2: Usando o comando npx

{
  "mcpServers": {
    "shadcn-ui-server": {
      "command": "npx",
      "args": ["-y", "shadcn-ui-mcp-server"]
    }
  }
}

Configuração do Windsurf

Adicione isto ao seu ./codeium/windsurf/model_config.json:

{
  "mcpServers": {
    "shadcn-ui-server": {
      "command": "npx",
      "args": ["-y", "shadcn-ui-mcp-server"]
    }
  }
}

Configuração do Cursor

Adicione isto ao seu .cursor/mcp.json:

{
  "mcpServers": {
    "shadcn-ui-server": {
      "command": "npx",
      "args": ["-y", "shadcn-ui-mcp-server"]
    }
  }
}

Depuração

Como os servidores MCP se comunicam via stdio, a depuração pode ser desafiadora. Recomendamos usar o MCP Inspector, que está disponível como um script de pacote:

npm run inspector

O Inspector fornecerá uma URL para acessar as ferramentas de depuração no seu navegador.