Shadcn UI MCP Server

Shadcn UI MCP Server

Um servidor MCP (Model Control Protocol) poderoso e flexível, projetado para aprimorar a experiência de desenvolvimento com componentes Shadcn UI. Este servidor fornece uma base robusta para criar e gerenciar componentes de UI com ferramentas e funcionalidades avançadas.

Recursos

Ferramentas

O servidor MCP fornece um conjunto de ferramentas que podem ser usadas através do Model Control Protocol:

• list-components: Obtenha a lista de componentes shadcn/ui disponíveis
• get-component-docs: Obtenha documentação para um componente específico
• install-component: Instale um componente shadcn/ui
• list-blocks: Obtenha a lista de blocos shadcn/ui disponíveis
• get-block-docs: Obtenha documentação para um bloco específico
• install-blocks: Instale um bloco shadcn/ui

Funcionalidades

• Gerenciamento de Componentes

  • Liste componentes shadcn/ui disponíveis
  • Obtenha documentação detalhada para componentes específicos
  • Instale componentes com suporte a múltiplos gerenciadores de pacotes (npm, pnpm, yarn, bun)

• Gerenciamento de Blocos

  • Liste blocos shadcn/ui disponíveis
  • Obtenha documentação e código para blocos específicos
  • Instale blocos com suporte a múltiplos gerenciadores de pacotes

• Suporte a Gerenciadores de Pacotes

  • Suporte flexível em tempo de execução para npm, pnpm, yarn e bun
  • Detecção automática do gerenciador de pacotes preferido do usuário

Instalação

Pré-requisitos

• Node.js (v18 ou superior)
• Gerenciador de pacotes npm ou yarn

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

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

Configuração do Windsurf

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

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

Configuração do Cursor

Adicione isto ao seu .cursor/mcp.json:

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

Desenvolvimento e Depuração

Desenvolvimento Local

1. Instale as dependências:

npm install

2. Compile o servidor:

npm run build

Depuração

Como os servidores MCP se comunicam via stdio, a depuração pode ser desafiadora. Recomendamos usar o MCP Inspector para depuração:

npm run inspector

O Inspector fornecerá uma URL para acessar ferramentas de depuração no seu navegador, permitindo que você:

• Monitore a comunicação MCP
• Inspecione chamadas e respostas de ferramentas
• Depure o comportamento do servidor
• Visualize logs em tempo real

Projetos Relacionados e Dependências

Este projeto é construído usando as seguintes ferramentas e bibliotecas:

• Model Context Protocol TypeScript SDK - O SDK TypeScript oficial para servidores e clientes MCP
• MCP Inspector - Uma ferramenta de depuração para servidores MCP
• Cheerio - Implementação rápida, flexível e enxuta do núcleo do jQuery, projetada especificamente para o servidor

Licença

Licença MIT - sinta-se à vontade para usar este projeto para seus próprios fins.

Contribuindo

Contribuições são bem-vindas! Sinta-se à vontade para enviar um Pull Request.