Configuración del Servidor MCP de Angular CLI

Angular CLI incluye un servidor de Model Context Protocol (MCP) experimental que permite a los asistentes de IA en tu entorno de desarrollo interactuar con Angular CLI. Hemos incluido soporte para generación de código potenciado por CLI, agregar paquetes y más.

Herramientas Disponibles

El servidor MCP de Angular CLI proporciona varias herramientas para asistirte en tu flujo de trabajo de desarrollo. Por defecto, las siguientes herramientas están habilitadas:

Nombre	Descripción	`local-only`	`read-only`
`ai_tutor`	Inicia un tutor de Angular interactivo potenciado por IA. Se recomienda ejecutarlo desde un nuevo proyecto Angular usando v20 o posterior. Aprende más.	✅	✅
`find_examples`	Encuentra ejemplos de código autorizados de una base de datos curada de ejemplos oficiales y de mejores prácticas, enfocándose en características de Angular modernas, nuevas y recientemente actualizadas.	✅	✅
`get_best_practices`	Recupera la Guía de Mejores Prácticas de Angular. Esta guía es esencial para asegurar que todo el código se adhiera a los estándares modernos, incluyendo componentes standalone, formularios tipados y flujo de control moderno.	✅	✅
`list_projects`	Lista los nombres de todas las aplicaciones y bibliotecas definidas dentro de un espacio de trabajo de Angular. Lee el archivo de configuración `angular.json` para identificar los proyectos.	✅	✅
`onpush_zoneless_migration`	Analiza código Angular y proporciona un plan paso a paso e iterativo para migrarlo a detección de cambios `OnPush`, un prerrequisito para una aplicación sin zona.	✅	✅
`search_documentation`	Busca en la documentación oficial de Angular en https://angular.dev. Esta herramienta debe usarse para responder cualquier pregunta sobre Angular, como para APIs, tutoriales y mejores prácticas.	❌	✅

Herramientas Experimentales

Algunas herramientas se proporcionan en estado experimental / de vista previa ya que son nuevas o no están completamente probadas. Habilítalas individualmente con la opción --experimental-tool y úsalas con precaución.

Nombre	Descripción	`local-only`	`read-only`
`modernize`.	Realiza migraciones de código y proporciona más instrucciones sobre cómo modernizar código Angular para alinearse con las últimas mejores prácticas y sintaxis. Aprende más	✅	❌

Get Started

Para comenzar, ejecuta el siguiente comando en tu terminal:

ng mcp

Cuando se ejecuta desde una terminal interactiva, este comando muestra instrucciones sobre cómo configurar un entorno host para usar el servidor MCP. Las siguientes secciones proporcionan configuraciones de ejemplo para varios editores y herramientas populares.

Cursor

Crea un archivo llamado .cursor/mcp.json en la raíz de tu proyecto y agrega la siguiente configuración. También puedes configurarlo globalmente en ~/.cursor/mcp.json.

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

Firebase Studio

Crea un archivo llamado .idx/mcp.json en la raíz de tu proyecto y agrega la siguiente configuración:

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

Gemini CLI

Crea un archivo llamado .gemini/settings.json en la raíz de tu proyecto y agrega la siguiente configuración:

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

IDEs de JetBrains

En los IDEs de JetBrains (como IntelliJ IDEA o WebStorm), después de instalar el plugin JetBrains AI Assistant, ve a Settings | Tools | AI Assistant | Model Context Protocol (MCP). Agrega un nuevo servidor (+) y selecciona As JSON. Luego pega la siguiente configuración:

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

Para las instrucciones más actualizadas sobre cómo configurar servidores MCP, consulta la documentación de JetBrains: Connect to an MCP server.

VS Code

En la raíz de tu proyecto, crea un archivo llamado .vscode/mcp.json y agrega la siguiente configuración. Nota el uso de la propiedad servers.

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

Otros IDEs

Para otros IDEs, consulta la documentación de tu IDE para la ubicación adecuada del archivo de configuración MCP (a menudo mcp.json). La configuración debe contener el siguiente fragmento.

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

Opciones de Comando

El comando mcp puede configurarse con las siguientes opciones pasadas como argumentos en la configuración MCP de tu IDE:

Opción	Tipo	Descripción	Default
`--read-only`	`boolean`	Solo registra herramientas que no realizan cambios en el proyecto. Tu editor o agente de codificación aún puede realizar ediciones.	`false`
`--local-only`	`boolean`	Solo registra herramientas que no requieren una conexión a internet. Tu editor o agente de codificación aún puede enviar datos a través de la red.	`false`
`--experimental-tool` `-E`	`string`	Habilita una herramienta experimental. Separa múltiples opciones con espacios, ej. `-E tool_a tool_b`.

Por ejemplo, para ejecutar el servidor en modo de solo lectura en VS Code, actualizarías tu mcp.json así:

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

Comentarios y Nuevas Ideas

El equipo de Angular agradece tus comentarios sobre las capacidades MCP existentes y cualquier idea que tengas para nuevas herramientas o características. Por favor comparte tus pensamientos abriendo un issue en el repositorio de GitHub angular/angular.