19 may 2026

Angular 22 MCP + Skills: Setup Paso a Paso para Agentes IA

angularangular22mcpskillsagentsdesarrollosetupia

Evita que agentes envíen código roto. Configura MCP + Skills en 5 minutos, 4 patrones probados y deja que los agentes verifiquen sus propios cambios.
Volver a Artículos

Angular 22 MCP + Skills: Guía de integración para desarrollo agnóstico

La mayoría de los flujos de trabajo agnósticos tienen el mismo fallo: el agente escribe código, dice que funciona, y lo descubres tú cuando abres el navegador. La pila MCP + Skills de Angular 22 resuelve esto dando a los agentes la capacidad de verificar su propio trabajo — compilación, captura de pantalla, iteración.

Esta guía cubre el setup completo: configurar tu entorno, instalar las skills correctas y escribir componentes que los agentes puedan modificar sin introducir fallos silenciosos.

Parte 1: Configuración de entorno

Requisitos previos

Asegúrate de tener:

  • Node.js v20+ (node --version)
  • Angular CLI v22+ (npm install -g @angular/cli@latest)
  • Un entorno de agente de codificación (Gemini CLI, Cursor, Claude Code, GitHub Copilot, JetBrains AI, o Windsurf)

Paso 1: Configurar servidor Angular MCP

La CLI de Angular incluye el servidor MCP integrado — sin paquetes extra. Configúralo en la configuración de tu agente:

Para Gemini CLI / Cursor / Claude Code (.gemini/settings.json o equivalente):

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

Para IDEs JetBrains (Settings → Tools → MCP):

  1. Añade nuevo servidor: nombre angular-cli, comando: npx -y @angular/cli mcp
  2. Añade segundo servidor: nombre chrome-devtools, comando: npx chrome-devtools-mcp@latest

Prueba la conexión:

npx @angular/cli mcp --health-check

Deberías ver una lista de herramientas disponibles. Las que más importan para flujos agnósticos:

  • ng_lint — ejecuta el linter en tu proyecto
  • get_examples — busca ejemplos de código de mejor práctica
  • get_best_practices — recupera la Guía de Mejores Prácticas de Angular
  • search_documentation — consulta angular.dev
  • dev_server.wait_for_build — se bloquea hasta que la compilación tenga éxito o falle (la crítica)
  • dev_server.start — inicia el dev server
  • dev_server.stop — detiene el dev server

Paso 2: Instalar Angular Skills

Las skills se instalan separadamente de las herramientas MCP. Aumentan el conocimiento del agente sin añadir overhead de tokens a cada solicitud. Piénsalo así: MCP es lo que el agente puede hacer — y las Skills son lo que el agente sabe. Necesitas los dos.

Instala las skills oficiales de Angular:

# Usando el paquete npx skills npx @anthropic-ai/skills add \ https://github.com/angular/skills/blob/main/angular-developer/SKILL.md \ --name angular-developer npx @anthropic-ai/skills add \ https://github.com/angular/skills/blob/main/angular-new-app/SKILL.md \ --name angular-new-app

O, si tu agente soporta skills basadas en URL:

/skills install https://github.com/angular/skills/blob/main/angular-developer/SKILL.md /skills install https://github.com/angular/skills/blob/main/angular-new-app/SKILL.md

Verifica la instalación:

/skills list

Deberías ver angular-developer y angular-new-app listadas.

Paso 3: Configurar Chrome DevTools para Agentes

Esto da a los agentes visibilidad en tu aplicación en ejecución — lo que cierra el bucle de alucinación.

npx chrome-devtools-mcp@latest --install

Pruébalo:

npx chrome-devtools-mcp@latest --health-check

Una vez configurado, los agentes pueden tomar capturas de pantalla, interactuar con elementos y verificar que lo que escribieron se renderiza correctamente. Sin más “asumiré que funcionó.”

Parte 2: Escribiendo componentes agnóstico-safe

Con MCP + Skills configurado, tu agente tiene verificación de compilación y visibilidad en el navegador. Ahora escribe código que los agentes puedan modificar sin introducir fallos silenciosos.

Patrón 1: @switch exhaustivo con type safety

Siempre usa bloques @switch exhaustivos. Esto previene que los agentes introduzcan casos sin manejo que fallan silenciosamente en producción.

// ✓ Bueno: type-safe, exhaustive union export type VehicleStatus = 'idle' | 'transit' | 'maintenance' | 'critical'; export class FleetDetailComponent { status = signal<VehicleStatus>('idle'); private assertNever(value: never): never { throw new Error(`Estado no manejado: ${value}`); } }
<!-- Plantilla con verificación exhaustiva --> <div class="status-card"> @switch (status()) { @case ('idle') { <span class="badge badge-green">Disponible</span> } @case ('transit') { <span class="badge badge-blue">En tránsito</span> } @case ('maintenance') { <span class="badge badge-yellow">Mantenimiento</span> } @case ('critical') { <span class="badge badge-red">Crítico</span> } @default { <!-- Si un agente añade un nuevo estado sin actualizar la plantilla, esto falla en compilación --> {{ assertNever(status() as never) }} } } </div>

Por qué importa: Si un equipo backend añade 'error' a la unión sin notificar al frontend, la compilación de TypeScript falla inmediatamente — los agentes no pueden enviar código roto.

Patrón 2: Signal Forms con validadores inline

Signal Forms proporciona manejo de formularios type-safe e impulsado por signals. Los agentes son mucho menos propensos a introducir errores de validación porque TypeScript los atrapa antes de que se complete la compilación.

export class ServiceTicketComponent { form = new FormGroup({ description: new FormControl('', Validators.required), priority: new FormControl<'LOW' | 'MEDIUM' | 'HIGH' | 'CRITICAL'>('MEDIUM'), assignedTo: new FormControl(''), }); priority$ = this.form.get('priority')!.valueAsSignal; priorityClass = computed(() => { const level = this.priority$(); return level === 'CRITICAL' ? 'text-red-600' : level === 'HIGH' ? 'text-orange-600' : 'text-gray-600'; }); submitTicket() { if (this.form.valid) { this.fleetService.createTicket(this.form.value); } } }

Plantilla:

<form [formGroup]="form" (submit)="submitTicket()"> <textarea formControlName="description" [class]="priorityClass()" placeholder="Describe el problema..." ></textarea> <select formControlName="priority"> <option value="LOW">Bajo</option> <option value="MEDIUM">Medio</option> <option value="HIGH">Alto</option> <option value="CRITICAL">Crítico</option> </select> <button type="submit" [disabled]="form.invalid()">Enviar</button> </form>

Patrón 3: @boundary para integraciones riesgosas

Cuando integres código de terceros o características experimentales de IA, envuelve con @boundary. Cuando un agente escribe código de integración complejo, un único bug no crasheará toda tu app.

<div class="dashboard"> <!-- La lista de flota core siempre se renderiza --> <fleet-list [units]="units()" /> <!-- Los diagnósticos de IA pueden fallar sin crashear toda la página --> @boundary { <ai-predictive-diagnostics [selectedUnit]="selectedUnit()" /> } @catch (error) { <div class="error-fallback"> <h3>Diagnósticos no disponibles</h3> <p>{{ error.message }}</p> <button (click)="retryDiagnostics()">Reintentar</button> </div> } </div>

Patrón 4: funciones de plantilla inline para lógica transitoria

Mantén la superficie de API del componente mínima. Deja que los agentes escriban manejadores inline que se queden cerca de su uso — en lugar de exponer cada acción transitoria como método de clase.

<!-- ✓ Manejador inline — intención clara, superficie de API mínima --> <button (click)="vehicles.update(v => v.filter(item => item.id !== vehicleId))" class="btn-danger" > Eliminar de flota </button>

Parte 3: Flujos de trabajo de agentes

Estos son los tres flujos principales donde el setup MCP + Skills realmente rinde.

Flujo de trabajo 1: Scaffolding de componente (con verificación MCP)

Di a tu agente: “Crea un componente ServiceTicketForm usando las skills de Angular. Usa Signal Forms, incluye un @boundary para el analizador de prioridad de IA, y ejecuta la compilación para verificar.”

El agente:

  1. Llama get_best_practices para buscar patrones de Signal Forms
  2. Hace scaffolding con ng generate component
  3. Implementa validadores inline usando la orientación de la skill
  4. Llama dev_server.wait_for_build para verificar compilación
  5. Lee y arregla cualquier error de compilación antes de responder

Monitoreas todo en el chat de tu agente. Sin errores sorpresa, sin “creo que debería funcionar.”

Flujo de trabajo 2: Chat de flota con IA (con verificación de navegador)

Del codelab logistics-manager-app: “Implementa una característica de consulta de chat de flota. Usa la API de Gemini para analizar datos de flota y devolver resultados filtrados. Inicia el dev server con Chrome DevTools, navega al componente de chat, y toma una captura de pantalla para verificar que la característica funciona.”

El agente:

  1. Crea un FleetChatService que acepta una consulta en lenguaje natural
  2. Envía el estado actual units() signal a la API de Gemini
  3. Analiza la respuesta de Gemini y filtra la flota
  4. Actualiza la UI de chat con resultados
  5. Llama dev_server.start, Chrome DevTools navega al componente
  6. Toma una captura de pantalla, la lee, y confirma que la característica funciona

Ese es el bucle de alucinación cerrado — el agente tiene ojos en la aplicación en ejecución.

Flujo de trabajo 3: Diagnósticos predictivos con @boundary

“Añade un botón ‘Ejecutar diagnóstico de IA’ a FleetDetailModal. El botón debe llamar a una API de Gemini con la telemetría del unit (velocidad, batería, estado). Envuelve el componente de diagnósticos con @boundary así si la llamada a IA falla, no crashea el modal.”

El agente:

  1. Crea un DiagnosticsComponent que llama al servicio de IA
  2. Lo envuelve con @boundary en la plantilla modal
  3. Implementa una UI de fallback en el bloque @catch con lógica de reintento
  4. Inicia el dev server, navega a un modal de detalle de vehículo
  5. Hace click en el botón de diagnóstico, verifica el resultado en el navegador
  6. Si la prueba falla, lee el error e itera

Completamente determinista. La compilación atrapa errores de compilación. Chrome DevTools atrapa problemas en tiempo de ejecución. El agente envía código que funciona o sigue intentando.

Parte 4: Mejores prácticas de configuración de skills

Un servidor por dominio

No cargues el servidor MCP de Angular junto a tu servidor de deployment y herramientas de comunicación. Crea perfiles de IDE separados:

{ "profiles": { "angular-dev": { "mcpServers": { "angular-cli": { "command": "npx", "args": ["-y", "@angular/cli", "mcp"] }, "chrome-devtools": { "command": "npx", "args": ["chrome-devtools-mcp@latest"] } } }, "deployment": { "mcpServers": { "deploy-cli": { "command": "npx", "args": ["my-deploy-cli", "mcp"] } } } } }

Activa solo el perfil que necesites para la tarea. Eso son muchos tokens ahorrados desde el inicio.

Versionea tus skills

Pon skills en tu repo y versiónalas como código:

/my-project /skills /angular-v22-dev-guidelines.md /our-design-system.md /api-integration-patterns.md /src angular.json

Referéncialas:

npx @anthropic-ai/skills add ./skills/angular-v22-dev-guidelines.md

Una skill para patrones de Angular 19 te lastimará en Angular 22. Actualiza skills cuando actualices versiones de Angular.

Mide presupuesto de contexto

Antes de ejecutar un agente en una tarea real, pídele que estime el uso de tokens:

¿Cuál es el conteo de tokens total de todas mis herramientas MCP instaladas y skills?

Si más del 30% de tu ventana de contexto está en definiciones de herramientas, simplifica. Los agentes necesitan espacio para pensar, no solo para enumerar capacidades.

Escribe guardrails de MCP en skills

En lugar de confiar en que el agente “tenga cuidado,” escríbelo en la skill:

# Angular Update Guardrail Skill Antes de ejecutar `ng update`, SIEMPRE: 1. Crea una rama de git: `git checkout -b ng-update-v22` 2. Ejecuta pruebas: `npm test` 3. Commitea el estado actual: `git commit -m "checkpoint antes de ng update"` 4. Entonces y solo entonces ejecuta: `ng update @angular/core @angular/cli`

El agente sigue las instrucciones de la skill. Guardrails en el código, no en la confianza.

Parte 5: Resolución de problemas

“Servidor MCP no encontrado”

  • Verifica que npx @angular/cli mcp --health-check devuelva una lista de herramientas
  • Reinicia tu IDE de agente
  • Verifica que Angular CLI v22+ esté instalado: ng version

“Skills no reconocidas”

  • Ejecuta npx @anthropic-ai/skills list para confirmar que están instaladas
  • Reinicia tu agente
  • Verifica que la URL de la skill sea correcta

“Chrome DevTools no toma capturas de pantalla”

  • Asegúrate de que Chrome está instalado y en PATH
  • Ejecuta npx chrome-devtools-mcp@latest --health-check
  • Verifica que hayas iniciado el dev server con dev_server.start antes de pedir al agente que navegue

“Verificación de compilación agotó timeout”

  • dev_server.wait_for_build tiene un timeout predeterminado (usualmente 30 segundos)
  • Si tus compilaciones son más lentas, pide al agente que incremente el timeout en la llamada MCP
  • Verifica que el dev server está ejecutándose: ng serve

Resumen

Con la pila MCP + Skills de Angular 22:

  • Los agentes escriben código type-safe que compila o falla, nunca silenciosamente.
  • Exhaustive type checking previene que nuevos estados se cuelen.
  • @boundary contiene fallos en lugar de crashear la aplicación.
  • Plantillas inline mantienen los componentes limpios.
  • Signal Forms fuerza validación a nivel de tipo.
  • Integración con Chrome DevTools da a agentes visibilidad en código en ejecución.
  • Las skills enseñan patrones modernos alineados a tu versión y convenciones.

El bucle de alucinación está cerrado. La generación de código se vuelve verificable. El desarrollo agnóstico cambia de riesgoso a confiable.

Próximos pasos:

  1. Configura Angular MCP en tu IDE/agente (5 minutos)
  2. Instala Angular Skills (2 minutos)
  3. Configura Chrome DevTools (2 minutos)
  4. Escribe un componente de prueba usando los patrones de arriba
  5. Pide a tu agente que haga scaffolding de una característica y verifícala con herramientas MCP

Recursos:

Si quieres entender la diferencia entre Skills y herramientas MCP antes de empezar, revisa MCP Skills vs MCP Tools: La forma correcta de configurar MCP Server.

Siguiente lectura

Angular 22: Para Alucinaciones con @boundary, Tipos y MCP

Angular 22 cierra el bucle de alucinación con @boundary nativo, tipos exhaustivos y builds verificados por MCP. Todo lo de Google I/O 2026.

Leer artículo
Angular 22: Para Alucinaciones con @boundary, Tipos y MCP