shadcn-vue

Uma ferramenta poderosa de Agente de IA que ajuda desenvolvedores a criar instantaneamente componentes de UI de alta qualidade

O Shadcn-vue MCP Server é uma ferramenta poderosa baseada em IA que ajuda desenvolvedores a criar instantaneamente componentes de UI bonitos e modernos por meio de descrições em linguagem natural. Ele integra a biblioteca de componentes shadcn-vue e o tailwindcss, conecta-se perfeitamente aos principais IDEs e fornece um fluxo de trabalho simplificado de desenvolvimento de UI.

🌐 Idiomas disponíveis:

❌ Sem o shadcn-vue MCP

Os desenvolvedores enfrentam vários desafios ao criar componentes de UI:

• ❌ Fluxo de trabalho tedioso: Alternar constantemente entre o IDE, a documentação oficial e o navegador impacta severamente a eficiência e o foco do desenvolvimento.
• ❌ Dificuldade na seleção de componentes: Diante de inúmeros componentes do shadcn-vue, os desenvolvedores têm dificuldade em encontrar rapidamente a melhor opção para suas necessidades sem recomendações inteligentes.
• ❌ Alta carga de trabalho repetitiva: Envolve escrever manualmente uma grande quantidade de código boilerplate e lidar com vários estados de componentes e lógica de interação complexa.
• ❌ Garantia de qualidade insuficiente: É fácil ignorar padrões de qualidade como acessibilidade (A11y), otimização de desempenho e boas práticas de codificação, levando a uma qualidade inconsistente dos componentes.
• ❌ Altos custos de manutenção: À medida que o projeto cresce, manter manualmente o estilo, o comportamento e as dependências de todos os componentes torna-se excepcionalmente difícil, dificultando a consistência.

✅ Com o shadcn-vue MCP

O shadcn-vue MCP oferece uma experiência inteligente de desenvolvimento de componentes de UI que revoluciona o fluxo de trabalho tradicional:

• ✅ Experiência de desenvolvimento completa: Conclua todo o processo — da seleção de componentes à codificação e pré-visualização — sem nunca sair do seu editor, simplesmente descrevendo suas necessidades em linguagem natural.
• ✅ Recomendação inteligente de componentes: A ferramenta components-filter analisa inteligentemente seus requisitos e recomenda os componentes shadcn-vue mais adequados.
• ✅ Geração automática de código de alta qualidade: O component-builder gera automaticamente código Vue de alta qualidade que está em conformidade com os padrões shadcn-vue e tailwindcss, com boas práticas incorporadas.
• ✅ Garantia de qualidade integrada: O component-quality-check realiza automaticamente verificações de acessibilidade (A11y) e qualidade de código no código gerado, garantindo componentes de nível profissional.
• ✅ Documentação e pré-visualizações instantâneas: O component-usage-doc fornece documentação de componentes, APIs e exemplos de uso em tempo real para você começar imediatamente.
• ✅ Garante alta consistência de design: Todos os componentes gerados seguem rigorosamente uma especificação de design unificada, garantindo consistência visual e interativa em todo o aplicativo e aumentando o valor da marca.

🌟 Recursos

• Descrições em linguagem natural:
  • Geração de UI com IA: Crie componentes de UI descrevendo-os em linguagem natural
• Suporte a múltiplos IDEs:
  • Integração com Cursor para fluxos de trabalho contínuos.
    • Suporte a Trae para desenvolvimento avançado orientado por IA.
    • Suporte a VSCode para uma experiência de codificação robusta.
    • Integração com VSCode + Cline (Beta) para colaboração aprimorada.
• Biblioteca de componentes moderna:
  • Construída sobre a biblioteca de componentes shadcn-vue e tailwindcss para designs modernos e responsivos.
• Suporte a TypeScript:
  • Suporte completo a TypeScript garante desenvolvimento escalável e seguro quanto a tipos.
• Consulta inteligente de documentação:
  • Acesso em tempo real à documentação detalhada dos componentes shadcn-vue com pré-visualizações integradas de uso e boas práticas.
• Aprimoramento de componentes:
  • Acessibilidade: Conformidade com WCAG 2.1, navegação por teclado, suporte a ARIA
    • Desempenho: Code splitting, tree shaking, bundles otimizados
    • Consistência: Sistema de design unificado, padrões de comportamento consistentes
    • Manutenibilidade: Arquitetura de código limpa, componentes bem documentados
    • Experiência do desenvolvedor: Suporte a TypeScript, hot reload, APIs intuitivas

🚀 Primeiros passos

Pré-requisitos

Antes de começar, certifique-se de ter o Node.js instalado no seu sistema.

• Versão recomendada do Node.js: 18.20.1 ou posterior.

Usar uma versão diferente pode levar a erros de instalação como Error: spawnSync code-insiders.cmd EINVAL. Fazer downgrade ou upgrade para a versão recomendada é a melhor solução.

Instalação rápida: Instalação rápida por URL para copilot

Primeiro, você precisa obter uma URL de conexão exclusiva do serviço Smithery que contenha suas credenciais pessoais. Visite a página shadcn-vue-mcp no Smithery.

Etapa 1. Clique no botão Gerar URL na página:

O sistema gerará uma URL exclusiva para você, que inclui uma chave de API para autenticação. Copie esta URL inteira.

Etapa 2. Abra o vscode, abra o copilot e selecione o modelo Agente. Em seguida, adicione a URL que você acabou de obter ao arquivo de configuração MCP do seu IDE.

1. No seu projeto IDE, encontre ou crie o arquivo de configuração chamado mcp.json.
2. Adicione ou mescle o seguinte objeto JSON no campo servers desse arquivo.

Etapa 3: para o IDE vscode, selecione Adicionar Servidor

Etapa 4: escolha HTTP (HTTP ou Server-Sent Events)

Etapa 5: cole a URL

Etapa 6: configure assim:

{
  "servers": {
    "shadcn-vue-mcp": {
      "url": "https://server.smithery.ai/@HelloGGX/shadcn-vue-mcp/mcp?api_key=xxxx&profile=linguistic-landfowl-TWeEt8"
    }
  }
}

Locais dos arquivos de configuração:

• Cursor: ~/.cursor/mcp.json
• Trae: ~/.Trae/mcp.json
• Cline: ~/.cline/mcp_config.json
• Claude: ~/.claude/mcp_config.json

🛠️ Lista de ferramentas e recursos principais

Ferramentas de geração de componentes

• requirement-structuring
  • Analisa requisitos em linguagem natural
    • Converte as necessidades do usuário em formato JSON estruturado
    • Considera a funcionalidade principal e os recursos essenciais
    • Análise integrada de interação do usuário e casos extremos

Ferramentas de documentação e análise

• component-usage-doc
  • Acesso em tempo real à documentação dos componentes shadcn-vue
    • Pré-visualização interativa das variantes dos componentes
    • Renderização integrada de markdown no navegador
    • API detalhada e exemplos de uso

Filtragem e gerenciamento de componentes

• components-filter
  • Sistema inteligente de recomendação de componentes
    • Suporte à análise de descrições em vários idiomas
    • Análise de relacionamento entre componentes
    • Estatísticas de frequência de uso e ponderação

Qualidade de código e testes

• component-quality-check
  • Avaliação automatizada da qualidade do código
    • Verificação de conformidade com A11y (Acessibilidade)
    • Sugestões de otimização de desempenho
    • Validação de boas práticas

Geração inteligente de código

• component-builder
  • Geração de componentes com IA
    • Integração com shadcn-vue e Tailwind CSS
    • Segurança de tipos com TypeScript
    • Implementação integrada de boas práticas

Exemplo de resultado

Usuário: /ui criar um componente de exibição de voo

IA: Código gerado da seguinte forma:

Usuário: /check

IA:

IA: Código gerado da seguinte forma:

🤝 Guia de contribuição

Aceitamos todas as formas de contribuição! Você pode nos ajudar a melhorar o @agent/shadcn-vue:

• Relatando bugs: Se você encontrar um bug, crie uma issue em nosso repositório GitHub.
• Sugerindo melhorias: Tem uma ideia para um novo recurso ou uma melhoria? Informe-nos criando uma issue.
• Enviando pull requests: Ficamos felizes em revisar e mesclar pull requests. Antes de fazer alterações significativas, abra uma issue primeiro para discutir suas ideias.