Guía de Angular 21 usando MCP

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.

Solíamos tratar a la IA como a 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.

He aquí por qué la era de la "migración manual" podría estar terminando, y cómo sobrevivir al nuevo flujo de trabajo agéntico.

¿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.

Piénsalo de esta manera:

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"

La configuración es sorprendentemente trivial porque el equipo de Angular la integró directamente en el CLI.

1. Inicializar el Servidor

En tu terminal del espacio de trabajo de Angular 21:

ng mcp

Este comando no inicia un demonio; genera los fragmentos de configuración que necesitas para tu IDE específico.

2. Conectar tu Editor (por ejemplo, Cursor)

Si estás usando Cursor (que probablemente deberías estar usando si te interesa MCP), crea o edita .cursor/mcp.json en la raíz de tu proyecto:

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

[!NOTE]
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

¿Por qué pasar por este problema? Porque las migraciones conscientes del contexto superan con creces a los esquemáticos estándar.

Los scripts tradicionales de ng update son rígidos. Siguen una lógica estricta de "Si A, entonces B". Si tu arquitectura es rara (y seamos honestos, cada arquitectura empresarial es rara), el script se rompe o produce código que tienes que reescribir.

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. No alucinará que deberías usar SharedModule en 2025 porque "lo leyó en un blog de 2021". Pregunta al CLI por la verdad fundamental.

Herramienta 2: onpush_zoneless_migration

Esta es la grande para la v21. En lugar de cambiar ciegamente ChangeDetectionStrategy.Default a OnPush, la IA utiliza esta herramienta para analizar tu gráfico de dependencias.

El flujo de trabajo:

Tú: "Oye, quiero migrar user-profile.ts a Zoneless. Comprueba si es seguro."

IA (Pensamiento Interno): Necesito comprobar el estilo del componente. Llamaré a list_projects para encontrar la raíz, luego leeré el archivo.

IA (Pensamiento Interno): Veo una suscripción a Observable en ngOnInit. Comprobaré get_best_practices para manejar asincronía en Zoneless.

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."

No solo aplica una solución; negocia la refactorización contigo basándose en la lógica interna del marco.

Herramienta 3: search_documentation

La IA no necesita adivinar las firmas de la API. Consulta el índice de documentación local fuera de línea proporcionado por el servidor MCP.

Escenario del mundo real: La limpieza "Legacy"

Digamos que tienes un componente al estilo Angular 17 usando HttpClientModule (enfoque obsoleto) 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:

1. La IA llama a get_best_practices y aprende que standalone: true, inject() y Signals son el estándar.
2. Llama a modernize (una herramienta experimental en v21) para ejecutar los esquemáticos estándar.
3. Limpia manualmente los restos: convirtiendo constructor(private http: HttpClient) a private http = inject(HttpClient).
4. Convierte tu 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 abre PRs:

"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 pelees con los 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? Eso pertenece a la máquina ahora.