shadcn-vue

Un agente de IA que ayuda a los desarrolladores a crear instantáneamente componentes de interfaz de usuario de alta calidad para shadcn-vue.

GitHub
109
Prueba este MCPPatrocinado

Documentación

shadcnVue MCP Logo

Una potente herramienta de agente de IA que ayuda a los desarrolladores a crear componentes de interfaz de usuario de alta calidad al instante

GitHub forks GitHub stars GitHub commits smithery badge License Contributors

MseeP.ai Security Assessment Badge

El servidor MCP de shadcn-vue es una potente herramienta impulsada por IA que ayuda a los desarrolladores a crear componentes de interfaz de usuario modernos y atractivos mediante descripciones en lenguaje natural. Integra la biblioteca de componentes shadcn-vue y tailwindcss, se conecta sin problemas con los IDE más populares y ofrece un flujo de trabajo de desarrollo de interfaz de usuario optimizado.

🌐 Idiomas disponibles: 中文文档

shadcn-vue-mcp MCP server

❌ Sin shadcn-vue MCP

Los desarrolladores se enfrentan a múltiples desafíos al crear componentes de interfaz de usuario:

  • ❌ Flujo de desarrollo tedioso: Cambiar constantemente entre el IDE, la documentación oficial y el navegador afecta gravemente la eficiencia del desarrollo y la concentración.
  • ❌ Dificultad para elegir componentes: Ante los numerosos componentes de shadcn-vue, los desarrolladores tienen dificultades para encontrar rápidamente el más adecuado para sus necesidades sin recomendaciones inteligentes.
  • ❌ Alta carga de trabajo repetitiva: Implica escribir manualmente una gran cantidad de código repetitivo y gestionar varios estados de componentes y lógica de interacción compleja.
  • ❌ Garantía de calidad insuficiente: Es fácil pasar por alto estándares de calidad como la accesibilidad (A11y), la optimización del rendimiento y las mejores prácticas de codificación, lo que genera una calidad inconsistente en los componentes.
  • ❌ Altos costos de mantenimiento: A medida que el proyecto crece, mantener manualmente el estilo, el comportamiento y las dependencias de todos los componentes se vuelve extremadamente difícil, lo que dificulta lograr la consistencia.

✅ Con shadcn-vue MCP

shadcn-vue MCP ofrece una experiencia inteligente de desarrollo de componentes de interfaz de usuario que revoluciona el flujo de trabajo tradicional:

  • ✅ Experiencia de desarrollo integral: Completa todo el proceso—desde la selección de componentes y la codificación hasta la vista previa—sin salir de tu editor, simplemente describiendo tus necesidades en lenguaje natural.
  • ✅ Recomendación inteligente de componentes: La herramienta components-filter analiza inteligentemente tus requisitos y recomienda los componentes de shadcn-vue más adecuados.
  • ✅ Generación automática de código de alta calidad: component-builder genera automáticamente código de componentes Vue de alta calidad que cumple con los estándares de shadcn-vue y tailwindcss, con las mejores prácticas integradas.
  • ✅ Garantía de calidad integrada: component-quality-check realiza automáticamente comprobaciones de accesibilidad (A11y) y calidad del código en el código generado, asegurando componentes de nivel profesional.
  • ✅ Documentación y vistas previas instantáneas: component-usage-doc proporciona documentación de componentes, API y ejemplos de uso en tiempo real para que puedas comenzar de inmediato.
  • ✅ Garantiza una alta consistencia de diseño: Todos los componentes generados cumplen estrictamente con una especificación de diseño unificada, asegurando consistencia visual e interactiva en toda la aplicación y mejorando el valor de la marca.

🌟 Características

  • Descripciones en lenguaje natural:
    • Generación de interfaz de usuario impulsada por IA: Crea componentes de interfaz de usuario describiéndolos en lenguaje natural
  • Soporte multi-IDE:
    • Integración con Cursor IDE para flujos de trabajo sin interrupciones.
    • Soporte para Trae para desarrollo avanzado impulsado por IA.
    • Soporte para VSCode para una experiencia de codificación robusta.
    • Integración de VSCode + Cline (Beta) para una colaboración mejorada.
  • Biblioteca de componentes moderna:
    • Construida sobre la biblioteca de componentes shadcn-vue y tailwindcss para diseños modernos y responsivos.
  • Soporte de TypeScript:
    • Soporte completo de TypeScript para garantizar un desarrollo escalable y seguro en cuanto a tipos.
  • Consulta inteligente de documentación:
    • Acceso en tiempo real a la documentación detallada de componentes de shadcn-vue con vistas previas integradas de uso y mejores prácticas.
  • Mejora de componentes:
    • Accesibilidad: Cumple con WCAG 2.1, navegación por teclado, soporte ARIA
    • Rendimiento: División de código, tree shaking, paquetes optimizados
    • Consistencia: Sistema de diseño unificado, patrones de comportamiento consistentes
    • Mantenibilidad: Arquitectura de código limpia, componentes bien documentados
    • Experiencia del desarrollador: Soporte de TypeScript, recarga en caliente, API intuitivas

🚀 Primeros pasos

Requisitos previos

Antes de comenzar, asegúrate de tener Node.js instalado en tu sistema.

  • Versión recomendada de Node.js: 18.20.1 o posterior.

Usar una versión diferente podría provocar errores de instalación como Error: spawnSync code-insiders.cmd EINVAL. Degradar o actualizar a la versión recomendada es la mejor solución.

Instalación rápida: Instalación rápida por URL para copilot

Primero, necesitas obtener una URL de conexión única del servicio Smithery que contenga tus credenciales personales. Visita la página de shadcn-vue-mcp en Smithery.

Paso 1. Haz clic en el botón Generar URL en la página:

El sistema generará una URL única para ti, que incluye una clave de API para la autenticación. Copia esta URL completa.

Paso 2. Abre vscode, abre copilot y selecciona el modelo Agent. A continuación, añade la URL que acabas de obtener al archivo de configuración MCP de tu IDE.

  1. En tu proyecto del IDE, busca o crea el archivo de configuración llamado mcp.json.
  2. Añade o fusiona el siguiente objeto JSON en el campo servers de ese archivo.

Paso 3: Para el IDE de vscode, selecciona Añadir servidor

Paso 4: Elige HTTP (HTTP o Server-Sent Events)

Paso 5: Pega la URL

Paso 6: Configura de la siguiente manera:

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

Ubicaciones de los archivos de configuración:

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

🛠️ Lista de herramientas y características principales

Herramientas de generación de componentes

  • requirement-structuring
    • Analiza requisitos en lenguaje natural
    • Convierte las necesidades del usuario en formato JSON estructurado
    • Considera la funcionalidad principal y las características esenciales
    • Análisis integrado de interacción del usuario y casos límite

Herramientas de documentación y análisis

  • component-usage-doc
    • Acceso en tiempo real a la documentación de componentes de shadcn-vue
    • Vista previa interactiva de variantes de componentes
    • Renderizado de markdown integrado en el navegador
    • API detallada y ejemplos de uso

Filtrado y gestión de componentes

  • components-filter
    • Sistema inteligente de recomendación de componentes
    • Soporta análisis de descripciones en varios idiomas
    • Análisis de relaciones entre componentes
    • Estadísticas de frecuencia de uso y ponderación

Calidad del código y pruebas

  • component-quality-check
    • Evaluación automatizada de la calidad del código
    • Verificación de cumplimiento de A11y (Accesibilidad)
    • Sugerencias de optimización del rendimiento
    • Validación de mejores prácticas

Generación inteligente de código

  • component-builder
    • Generación de componentes impulsada por IA
    • Integración de shadcn-vue y Tailwind CSS
    • Seguridad de tipos con TypeScript
    • Implementación integrada de mejores prácticas

Ejemplo de resultado

Usuario: /ui crear un componente de visualización de vuelos

IA: Código generado de la siguiente manera:

UI Component Example

Usuario: /check

IA: alt text

🤝 Guía de contribución

¡Damos la bienvenida a todo tipo de contribuciones! Puedes ayudarnos a mejorar @agent/shadcn-vue de las siguientes maneras:

  • Informar errores: Si encuentras un error, crea un issue en nuestro repositorio de GitHub.
  • Sugerir mejoras: ¿Tienes una idea para una nueva función o una mejora? Háznoslo saber creando un issue.
  • Enviar pull requests: Estaremos encantados de revisar y fusionar pull requests. Antes de realizar cambios significativos, abre un issue primero para discutir tus ideas.

El código fuente está disponible como código abierto en GitHub.

👥 Comunidad y soporte

  • Comunidad de Discord: Únete a nuestra comunidad activa

📝 Licencia

Licenciado bajo la Licencia Apache 2.0.