Angular MCP

La CLI de Angular incluye un servidor de Protocolo de Contexto de Modelo (MCP) que permite a los asistentes de IA (como Cursor, Antigravity, JetBrains AI, etc.) interactuar directamente con la CLI de Angular. 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 del agente de IA de Angular

Si su entorno anfitrión admite habilidades de agente personalizadas (como Antigravity), puede combinar el servidor MCP de la CLI de Angular con las habilidades oficiales de IA de Angular. 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, lo que resulta en un agente de desarrollo completo y potente.

Comenzar

Para usar el servidor MCP, configure su entorno anfitrión (IDE o CLI) para ejecutar npx @angular/cli mcp.

Herramientas disponibles (predeterminadas)

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

Nombre	Descripción
ai_tutor	Inicia un tutor de Angular interactivo impulsado por IA.
devserver.start	Inicia asincrónicamente un servidor de desarrollo (ng serve). Devuelve inmediatamente.
devserver.stop	Detiene el servidor de desarrollo.
devserver.wait_for_build	Devuelve los registros de la compilación más reciente en un servidor de desarrollo en ejecución.
get_best_practices	Recupera la Guía de mejores prácticas de Angular (crucial para componentes independientes, formularios tipados, etc.).
list_projects	Enumera todas las aplicaciones y bibliotecas en el espacio de trabajo leyendo angular.json.
onpush_zoneless_migration	Analiza el código y proporciona un plan para migrarlo a la detección de cambios OnPush (requisito previo para zoneless).
run_target	Ejecuta un objetivo configurado (por ejemplo, compilar, probar, lint, e2e, desplegar).
search_documentation	Busca 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 de desarrollador complejas.

1. Optimización del rendimiento: migración a Zoneless y OnPush

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

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 esquemática (requisito previo): El agente de IA ejecuta cualquier migración de señales previa usando comandos estándar de ng generate (por ejemplo, entradas de señales, consultas de señales).
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 el único cambio accionable devuelto por la herramienta al código base.
5. Verificar cambios: El agente de IA ejecuta pruebas unitarias llamando a run_target con el parámetro de destino establecido en "test".
6. Repetir: El agente de IA llama a onpush_zoneless_migration nuevamente para obtener el siguiente paso, repitiendo hasta que la herramienta indique que la migración está completa.

2. Desarrollo de funciones y bucle TDD

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

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 marco de pruebas del proyecto (por ejemplo, Jasmine, Jest, Vitest) mediante list_projects, escribe el archivo de prueba correspondiente y ejecuta las pruebas usando run_target con "test".
6. Detener servidor de desarrollo: Al terminar, el agente de IA detiene el servidor de desarrollo activo llamando a devserver.stop.

3. Incorporación y aprendizaje de desarrolladores

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

1. Descubrir proyectos: El agente de IA llama a list_projects para escanear el espacio de trabajo e identificar la estructura del código base.
2. Iniciar 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 indicándole qué componentes construir o modificar.
4. Implementar y verificar: El agente de IA ayuda a implementar el código del entorno de pruebas y verifica los cambios usando run_target con "test" o "build".

Opciones de comando

Puede pasar argumentos al servidor MCP en el arreglo args de su 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"]