Angular MCP

La CLI de Angular incluye un servidor experimental del Protocolo de Contexto de Modelo (MCP) que permite a los asistentes de IA en tu entorno de desarrollo interactuar con la CLI de Angular. Hemos incluido soporte para generación de código impulsada por la CLI, adición de paquetes y más.

Ver en angular.devPrueba este MCPPatrocinado

Documentación

Docs

  • Introducción
    • ¿Qué es Angular?
    • Instalación
    • Fundamentos
    • ¡Empieza a programar! 🚀
  • Guías en profundidad
    • Señales Actualizado
    • Componentes
    • Plantillas
    • Directivas
    • Inyección de dependencias Actualizado
    • Enrutamiento
    • Formularios Actualizado
    • Cliente HTTP
    • Renderizado del lado del servidor y renderizado híbrido
    • Pruebas
    • Angular Aria Nuevo
    • Internacionalización
    • Animaciones
    • Arrastrar y soltar
  • Construye con IA
    • Comienza
    • Prompts para LLM y configuración de IDEs con IA
    • Habilidades de agente Nuevo
    • Configuración del servidor MCP de Angular CLI
    • Tutor de IA de Angular
    • Patrones de diseño
    • WebMCP Nuevo
  • Herramientas de desarrollador
    • Angular CLI
    • Bibliotecas
    • DevTools
    • Servicio de lenguaje
  • Mejores prácticas
    • Guía de estilo
    • Seguridad
    • Accesibilidad
    • Errores no controlados en Angular
    • Rendimiento
    • Mantenerse actualizado
  • Eventos de desarrolladores
    • Lanzamiento de Angular v22 Nuevo
    • Lanzamiento de Angular v21
  • Ecosistema extendido
    • NgModules
    • Animaciones heredadas
    • Uso de RxJS con Angular
    • Service Workers y PWAs
    • Web workers
    • Proceso de compilación personalizado
    • Tailwind
    • Angular Fire
    • Google Maps
    • Google Pay
    • YouTube player
    • Angular CDK
    • Angular Material

El Angular CLI incluye un servidor del Protocolo de Contexto de Modelo (MCP) que permite a los asistentes de IA (como Cursor, Antigravity, JetBrains AI, etc.) interactuar directamente con el Angular CLI. Proporciona herramientas para generación de código, análisis del espacio de trabajo y ejecución de compilaciones/pruebas.

Integración con las habilidades de agente de Angular AI

Si tu entorno host admite habilidades de agente personalizadas (como Antigravity), puedes combinar el servidor MCP de Angular CLI con las habilidades oficiales de Angular AI. Mientras que las habilidades proporcionan al agente una guía profunda a nivel de instrucciones y estándares de codificación, el servidor MCP proporciona las herramientas de acción (como compilar, ejecutar pruebas y analizar espacios de trabajo) para ejecutar esas directrices, dando como resultado un agente de desarrollo completo y potente.

Volver al inicio

Comienza

Para usar el servidor MCP, configuras tu entorno host (IDE o CLI) para ejecutar npx @angular/cli mcp.

Herramientas disponibles (por defecto)

Cuando el servidor MCP está habilitado, los agentes de IA tienen acceso a las siguientes herramientas:

NombreDescripción
ai_tutorInicia un tutor interactivo de Angular impulsado por IA.
devserver.startInicia asincrónicamente un servidor de desarrollo (ng serve). Devuelve inmediatamente.
devserver.stopDetiene el servidor de desarrollo.
devserver.wait_for_buildDevuelve los registros de la compilación más reciente en un servidor de desarrollo en ejecución.
get_best_practicesRecupera la Guía de Mejores Prácticas de Angular (crucial para componentes independientes, formularios tipados, etc.).
list_projectsLista todas las aplicaciones y bibliotecas en el espacio de trabajo leyendo angular.json.
onpush_zoneless_migrationAnaliza el código y proporciona un plan para migrarlo a la detección de cambios OnPush (prerrequisito para zonelss).
run_targetEjecuta un target configurado (por ejemplo, build, test, lint, e2e, deploy).
search_documentationBusca en la documentación oficial en https://angular.dev.

Flujos de trabajo comunes

Estos flujos de trabajo demuestran cómo los asistentes de IA coordinan diferentes herramientas MCP para lograr automáticamente historias complejas de desarrolladores.

1. Optimización del rendimiento: Migración a zonelss y OnPush

El agente de IA optimiza el rendimiento de la detección de cambios y migra componentes a un estado listo para zonelss.

  1. Descubrir espacio de trabajo: El agente de IA llama a list_projects para localizar componentes, proyectos y configuraciones de estilo/pruebas en el espacio de trabajo.
  2. Modernización de esquemas (prerrequisito): El agente de IA ejecuta cualquier migración de señales prerrequisito usando comandos estándar de ng generate (por ejemplo, Entradas de Señal, Consultas de Señal).
  3. Planificar migración: El agente de IA llama a onpush_zoneless_migration con la ruta absoluta del directorio o archivo de componente.
  4. Aplicar cambios: El agente de IA aplica automáticamente al codebase el único cambio accionable devuelto por la herramienta.
  5. Verificar cambios: El agente de IA ejecuta pruebas unitarias llamando a run_target con el parámetro de target establecido en "test".
  6. Repetir: El agente de IA vuelve a llamar a onpush_zoneless_migration para recuperar el siguiente paso, repitiendo hasta que la herramienta indique que la migración está completa.

2. Desarrollo de funcionalidades y bucle TDD

El agente de IA automatiza la investigación, implementación y verificación al desarrollar nuevas funcionalidades.

  1. Investigación de API y sintaxis: El agente de IA usa search_documentation para buscar APIs o reglas de sintaxis de Angular (por ejemplo, opciones de bloque @defer).
  2. Cargar estándares de codificación: El agente de IA llama a get_best_practices con la ruta del espacio de trabajo para cargar reglas de codificación alineadas con la versión de Angular.
  3. Iniciar servidor de desarrollo local: El agente de IA inicia un servidor en segundo plano llamando a devserver.start.
  4. Monitorear compilación: El agente de IA usa devserver.wait_for_build para observar los registros de compilación y asegurarse de que la compilación tenga éxito mientras edita el código.
  5. Escribir y ejecutar pruebas: El agente de IA identifica el framework de pruebas del proyecto (por ejemplo, Jasmine, Jest, Vitest) a través de list_projects, escribe el archivo de prueba correspondiente y ejecuta las pruebas usando run_target con "test".
  6. Detener servidor de desarrollo: Cuando termina, el agente de IA detiene el servidor de desarrollo activo llamando a devserver.stop.

3. Incorporación de desarrolladores y aprendizaje

El agente de IA guía al desarrollador a través de conceptos de Angular en un sandbox interactivo.

  1. Descubrir proyectos: El agente de IA llama a list_projects para escanear el espacio de trabajo e identificar la estructura del codebase.
  2. Lanzar tutor: El agente de IA ejecuta ai_tutor para cargar las instrucciones del plan de estudios, la persona y las pautas de tutoría.
  3. Seguir el plan de estudios: El agente de IA guía al usuario a través del plan de estudios, explicando conceptos e instruyéndole sobre qué componentes construir o modificar.
  4. Implementar y verificar: El agente de IA ayuda a implementar el código del sandbox y verifica los cambios usando run_target con "test" o "build".

Opciones de comando

Puedes pasar argumentos al servidor MCP en el array args de tu configuración:

  • --read-only: Solo registra herramientas que no modifican el proyecto.
  • --local-only: Solo registra herramientas que no requieren conexión a internet.

Ejemplo para modo de solo lectura:

"args": ["-y", "@angular/cli", "mcp", "--read-only"]