Guía de Angular 21 usando MCP

Source: Dev.to

Introducción

Angular 21 introduce el servidor Model Context Protocol (MCP). Aprende cómo conectar tu editor de IA directamente al CLI de Angular para automatizar actualizaciones, refactorizaciones y cambios arquitectónicos como Zoneless.

Antes tratábamos a la IA como un extraño inteligente: copiábamos y pegábamos mensajes de error o contenidos de archivos en ChatGPT, esperando que entendiera la arquitectura de nuestro proyecto. Era útil, pero estaba ciega.

Con Angular 21, ese extraño se ha mudado a tu casa.

El lanzamiento del servidor MCP del CLI de Angular (ng mcp) marca un cambio fundamental en la forma en que mantenemos las aplicaciones. No es solo un nuevo comando; es un protocolo que permite a los agentes de IA (como Cursor, Windsurf o VS Code Copilot) “entrevistar” a tu proyecto, entender tus restricciones específicas y ejecutar migraciones que realmente compilen.

¿Qué es MCP? (El “puerto USB” para la IA)

El Model Context Protocol (MCP) es un estándar abierto que permite a los modelos de IA conectarse a herramientas y datos locales.

Antes de MCP: Pegabas angular.json en el chat para que la IA conociera tu estructura de archivos.
Después de MCP: La IA simplemente pregunta al CLI de Angular: “Oye, lista todos los proyectos en este espacio de trabajo”, y el CLI responde con la estructura exacta, los objetivos de compilación y las dependencias de bibliotecas.

En Angular 21, el CLI es un servidor MCP. Expone “herramientas” que tu editor de IA puede llamar directamente.

Configuración: 5 minutos para un Angular “Agéntico”

1. Inicializar el servidor

En tu terminal del espacio de trabajo de Angular 21:

ng mcp

Este comando genera los fragmentos de configuración que necesitas para tu IDE específico.

2. Conectar tu editor (por ejemplo, Cursor)

Si usas Cursor, crea o edita .cursor/mcp.json en la raíz de tu proyecto:

{
  "mcpServers": {
    "angular-cli": {
      "command": "npx",
      "args": ["-y", "@angular/cli", "mcp"]
    }
  }
}

Nota: La bandera -y es crucial para evitar que el mensaje “Press y to install” bloquee el proceso en segundo plano.

La “killer app”: Migraciones conscientes del contexto

Las migraciones conscientes del contexto superan con creces a los esquemáticos estándar. Los scripts tradicionales de ng update son rígidos y pueden romperse en arquitecturas empresariales poco comunes. El servidor MCP expone herramientas que cambian esta dinámica.

Herramienta 1: get_best_practices

La IA puede obtener las recomendaciones actuales del equipo de Angular, evitando suposiciones obsoletas.

Herramienta 2: onpush_zoneless_migration

Esta herramienta analiza tu gráfico de dependencias antes de cambiar ChangeDetectionStrategy.Default a OnPush.

Flujo de trabajo ejemplo:

1. Tú: “Quiero migrar user-profile.ts a Zoneless. Comprueba si es seguro.”
2. IA (pensamiento interno): Llama a list_projects para encontrar la raíz, luego lee el archivo.
3. IA (pensamiento interno): Detecta una suscripción a Observable en ngOnInit. Consulta get_best_practices para manejar asincronía en Zoneless.
4. IA (acción): “Detecté una suscripción no gestionada. En Zoneless, esto no activará un renderizado. Recomiendo convertir este observable user$ a una Signal usando toSignal() antes de cambiar la estrategia.”

La IA no solo aplica una solución; negocia la refactorización contigo basándose en la lógica interna del framework.

Herramienta 3: search_documentation

La IA consulta el índice de documentación local fuera de línea proporcionado por el servidor MCP, evitando adivinanzas sobre firmas de API.

Escenario del mundo real: La limpieza “Legacy”

Supongamos que tienes un componente estilo Angular 17 usando HttpClientModule y RxJS para estado simple.

Prompt a Cursor (con MCP activo):

“Refactoriza dashboard.component.ts para alinearlo con las mejores prácticas de Angular 21. Usa la herramienta get_best_practices para verificar tu plan primero.”

Qué sucede:

• La IA llama a get_best_practices y aprende que standalone: true, inject() y Signals son el estándar.
• Llama a modernize (una herramienta experimental en v21) para ejecutar los esquemáticos estándar.
• Convierte constructor(private http: HttpClient) a private http = inject(HttpClient).
• Transforma el estado BehaviorSubject a signal.

El resultado es código que parece escrito en v21, no solo parcheado para ejecutarse en v21.

El futuro: Mantenimiento continuo

Este lanzamiento señala un cambio en cómo Google ve el CLI: ya no es solo una herramienta de construcción; es una interfaz para agentes. En el futuro cercano, probablemente no “pararemos el desarrollo” para actualizar. Tendremos un agente en segundo plano ejecutándose vía MCP que abrirá PRs como:

• “Noté que usaste un ControlValueAccessor aquí. He creado un PR para refactorizar esto a la nueva API de entrada de Signal Forms.”
• “Angular v22 acaba de salir. He actualizado tu angular.json y verificado tus pruebas vía vitest.”

Resumen: No actualices solo

Si te estás moviendo a Angular 21, no ejecutes simplemente ng update y luches con errores de compilación manualmente.

1. Instala el servidor MCP.
2. Deja que la IA mapee tu proyecto.
3. Pídele que planifique la migración por ti.

El código sigue siendo tu responsabilidad, pero el trabajo pesado ahora pertenece a la máquina.