Deja de Escribir Código Angular Desactualizado: Configuración MCP con Cursor y Claude Code

Angular ha cambiado mucho en los últimos lanzamientos — de buena manera.

Componentes standalone, signals, plantillas de bloque (@if, @for), aplicaciones zoneless... y ahora, integración de IA de primera clase.

Entonces, si estás comenzando un nuevo proyecto Angular hoy, construir "a la vieja usanza" te ralentiza.

¿Y estar al día manualmente con cada cambio de API? No, gracias.

Las buenas noticias: tu IDE puede ayudarte — si lo configuras correctamente.

En este post, vamos a:

Configurar un proyecto Angular limpio
Configurar reglas de IA para que tu IDE entienda Angular moderno
Habilitar el servidor MCP de Angular (Model Context Protocol)
Ver cómo Cursor habla directamente con el Angular CLI
Evitar una pequeña trampa de "configuración duplicada" en la que caí.

Vamos paso a paso.

Por Qué IA + Angular Tiene Sentido Ahora

Angular se mueve rápido. Algunos hitos importantes:

Característica	Introducido	Por Qué Importa
Standalone por defecto	v14 (Experimental)	No más sobrecarga de NgModules
Signals estable	v16 (Preview)	Primitivos reactivos, mejor rendimiento
Sintaxis de bloque (`@if`, `@for`, `@switch`)	v17 (Preview)	Plantillas más limpias, sin directivas
`@let`	v18 (Preview)	Variables de plantilla sin trucos de ngIf
Herramientas de IA + MCP	v20 (Experimental)	El IDE conoce las convenciones de Angular

Y honestamente — escribir todo a mano y recordar cada nueva convención ya no vale la pena.

Antes de la configuración de IA:

Buscas en Google "Angular input decorator"
Encuentras una respuesta de Stack Overflow de 2019
Usas @Input() en lugar de input()
Tu código funciona, pero está desactualizado

Con la configuración de IA:

Preguntas: "crear un input de usuario"
La IA genera: readonly user = input.required()
Moderno, basado en signals, type-safe

La clave es ayudar a la IA a saber cómo funciona Angular hoy, no cómo funcionaba en 2019.

Crear un Nuevo Proyecto Angular (con Soporte de IA)

Empecemos desde cero para mantener las cosas simples y reproducibles.

# Requiere Angular CLI v19+
yarn global add @angular/cli
ng new mcp-demo # generando una nueva app Angular

verás una nueva pregunta:

✔ Which stylesheet format would you like to use? Sass (SCSS)
✔ Do you want to enable Server-Side Rendering (SSR) and Static Site Generation (SSG/Prerendering)? No
✔ Do you want to create a 'zoneless' application without zone.js? Yes
? Which AI tools do you want to configure with Angular best practices? https://angular.dev/ai/develop-with-ai
 ◯ None
 ◯ Claude         [ https://docs.anthropic.com/en/docs/claude-code/memory ]
 ❯ ◉ Cursor         [ https://docs.cursor.com/en/context/rules ]
 ◯ Gemini         [ https://ai.google.dev/gemini-api/docs ]
 ◯ GitHub Copilot [ https://code.visualstudio.com/docs/copilot/copilot-customization ]
 ◯ JetBrains AI   [ https://www.jetbrains.com/help/junie/customize-guidelines.html ]
 ◯ Windsurf       [ https://docs.windsurf.com/windsurf/cascade/memories#rules ]

Este archivo contiene las reglas de mejores prácticas de IA oficiales de Angular, diseñadas para el motor de contexto de IA de Cursor.

Le dice a tu IDE cómo razonar sobre proyectos Angular — por ejemplo, cómo usar componentes standalone, signals y la nueva sintaxis de plantilla @if / @for.

Si necesitas profundizar en cómo funcionan las reglas en Cursor, puedes revisar este enlace https://cursor.com/docs/context/rules

Cursor vs Claude Code: Ubicaciones de Archivos

Si estás usando Claude Code en lugar de Cursor, aquí están las únicas diferencias:

Archivo	Cursor	Claude Code
Archivo de reglas	`.cursor/rules/angular-20.mdc`	`.claude/CLAUDE.md`
Configuración MCP	`.cursor/mcp.json`	`.mcp.json`
Contenido	Mismas mejores prácticas de Angular	Mismas mejores prácticas de Angular

Habilitar el Servidor MCP del Angular CLI

Cuando ejecutas ng mcp, Angular no crea nada — en su lugar, imprime la configuración que necesitarás para conectar la IA de tu IDE al Angular CLI.

Verás algo como esto:

ng mcp

To start using the Angular CLI MCP Server, add this configuration to your host:

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

Exact configuration may differ depending on the host.

For more information and documentation, visit: https://angular.dev/ai/mcp

Esto te dice exactamente qué agregar al archivo de configuración MCP de tu IDE.

Crea el archivo de configuración MCP en la raíz de tu proyecto:

Para Cursor:

/.cursor/mcp.json

Para Claude:

/.mcp.json

luego pega este contenido:

{
  "mcpServers": {
    "angular-cli": {
      "command": "npx",
      "args": ["-y", "@angular/cli", "mcp"]
    } // si tienes más servidores mcp, agrega una coma y pégalo después del último
  }
}

Ahora tu IDE sabe cómo iniciar el servidor MCP de Angular cada vez que abras este proyecto.

Esta configuración es a nivel de proyecto, lo que significa que solo se aplica dentro de este repositorio — no globalmente en todos tus proyectos.

Verificar Conexión MCP

En Cursor:

Una vez que agregues la configuración .cursor/mcp.json, abre Cursor → Settings → MCP Servers.

Ahora deberías ver algo como esto:

Esto confirma que Cursor se ha conectado exitosamente al servidor MCP del Angular CLI.

En Claude Code (Extensión o CLI):

Si usas la extensión de VS Code:

Abre el panel de chat de Claude en VS Code
Escribe /mcp para verificar los servidores MCP

Si usas el CLI:

Abre tu terminal
Ejecuta claude
Escribe /mcp en la sesión interactiva

Con esto, tendremos disponibles las siguientes herramientas:

get_best_practices – recupera las recomendaciones oficiales de IA de Angular.
search_documentation – permite que la IA busque directamente en la documentación de Angular.
list_projects – lista los proyectos definidos en tu workspace (angular.json).

Con esta configuración, tu asistente de IA ahora puede llamar a las propias herramientas de Angular directamente desde el chat. Es bastante genial — literalmente puedes preguntar:

Necesito un componente para mostrar una lista de usuarios.

Notarás que lo primero que hace Cursor es intentar buscar angular-20.mdc dentro de la carpeta de reglas. Después de eso, Cursor ejecuta get_best_practices desde el MCP.

// user-list.ts

@Component({
  selector: 'app-users-list',
  templateUrl: './users-list.html',
  styleUrl: './users-list.scss',
  changeDetection: ChangeDetectionStrategy.OnPush
})
export class UsersListComponent {
  readonly users = input<User[]>([]);
  readonly selectedUserId = signal<number | null>(null);

  selectUser(userId: number): void {
    if (this.selectedUserId() === userId) {
      this.selectedUserId.set(null);
    } else {
      this.selectedUserId.set(userId);
    }
  }

  isSelected(userId: number): boolean {
    return this.selectedUserId() === userId;
  }
}

Antes, obtendrías NgModules, Input() y la vieja sintaxis *ngFor. Ahora, sigue el estilo más reciente de Angular automáticamente.

Listo — Tu Configuración Angular + IA Está Lista

Ahora tienes:

Proyecto Angular con reglas conscientes de IA
MCP conectado para que tu IDE pueda ejecutar comandos ng
Generación de código Angular moderno (standalone + signals + blocks)

Esta configuración ya me ha ahorrado tiempo poniéndome al día con las APIs y convenciones más nuevas de Angular — y mi código generado se mantiene limpio y consistente.

Si estás adoptando Angular moderno, esta es honestamente la mejor configuración de experiencia en este momento.

Nota Rápida sobre las Reglas vs las "instrucciones" de MCP

Cuando creas el proyecto y eliges tu herramienta de IA, Angular genera un archivo de reglas local:

# Para Cursor
.cursor/rules/angular-20.mdc

# Para Claude Code
.claude/CLAUDE.md

Este archivo contiene las mejores prácticas oficiales de Angular — las reglas que la IA debe seguir al generar código Angular.

Piensa en este como tu "libro de reglas base". Y la parte agradable es: puedes personalizarlo.

Por ejemplo, agregué una línea diciéndole a la IA que no importe CommonModule a menos que realmente sea necesario — y cuando generé un nuevo componente, respetó esa regla.

Ahora, dentro del panel MCP de tu herramienta de IA, también verás un botón "instructions" (y la herramienta get_best_practices). Ese contenido se ve idéntico — y lo es — pero esa versión es de solo lectura.

Entonces la diferencia es:

Fuente	Propósito	¿Editable?
`.cursor/rules/angular-20.mdc` o .`claude/CLAUDE.md`	Reglas base locales para tu proyecto	Sí, destinado a personalizar
Vista de "`instructions`" de MCP	Reglas del framework servidas vía MCP	No, solo lectura

Y eso es intencional — el framework te da un conjunto de reglas predeterminado, pero también te permite evolucionarlo para las convenciones de tu propio proyecto.

¿Qué Sigue?

Ahora que tienes Angular + IA funcionando, prueba:

Generar una característica completa — Pide a la IA que genere un CRUD con enrutamiento
Refactorizar código legacy — Migra componentes antiguos y pide modernizarlos
Personalizar tus reglas — Edita .cursor/rules/angular-20.mdc (o .claude/CLAUDE.md) para las convenciones de tu equipo

Muy Bien, Estás Todo Listo

La configuración toma 5 minutos. ¿El tiempo ahorrado? Infinito.

Ahora ve y construye algo increíble con Angular moderno y herramientas impulsadas por IA.

¡Feliz codificación aumentada!