Angular dispone de un servidor experimental del Model Context Protocol MCP desarrollado por Anthropic que permite a los clientes MCP, como IDEs con capacidades de IA, comunicarse con servidores MCP para ejecutar comandos y consultar documentación y el espacio de trabajo local de Angular; en este artículo traducido y reescrito te explico cómo configurarlo en tu IDE, organizar instrucciones para agentes y crear una aplicación Todo sin escribir código manualmente, además de comentar buenas prácticas y lecciones aprendidas.
Requisitos previos: necesitas un IDE con acceso a capacidades de IA; en el ejemplo original se usó VS Code con Copilot, pero los pasos son similares con otros clientes que actúen como MCP clients; los resultados variarán según la herramienta de IA y el modelo que elijas.
Configuración del servidor MCP de Angular: Angular ofrece documentación Build with AI y un servidor MCP que proporciona mejores prácticas, búsqueda en la documentación y consultas al workspace local para devolver información del proyecto y librerías. Para conectar tu cliente MCP debes añadir la configuración del servidor MCP en un archivo mcp.json ya sea por workspace o en la configuración de usuario del IDE; en VS Code se accede a Build with agent mode y al panel de Chat para gestionar servidores MCP. Si prefieres línea de comandos, Angular CLI incluye el comando ng mcp que puede emitir instrucciones genéricas de configuración del servidor MCP.
Verificar la conexión: una vez registrado el servidor puedes pedir a tu asistente IA que confirme la conexión preguntando algo como eres capaz de conectarte al servidor MCP de Angular y revisar la respuesta para confirmar que el servidor devuelve información de mejores prácticas y documentación.
Instrucciones en proyectos Angular: al crear un nuevo proyecto con la CLI, se pregunta qué herramientas de IA quieres configurar con las mejores prácticas y la CLI puede generar ficheros de instrucciones específicos para cada agente, por ejemplo copilot-instructions.md; esos ficheros contienen directrices que guían el comportamiento del agente, por ejemplo recomendaciones sobre TypeScript, Angular y prácticas para crear código mantenible y accesible.
Ejemplo práctico: crear una app Todo. Al generar el proyecto y pedir al agente que genere un servicio o componente, el asistente suele seguir las instrucciones presentes en copilot-instructions.md, pero pueden surgir problemas comunes como nombres no coincidentes con la convención de Angular, falta de conexión entre componente y servicio, o ausencia de un estado compartido. En el experimento el agente generó un servicio con una lista de todos hardcodeada y un componente que usaba signals, pero la lógica de estado residía solo en el componente, por lo que fue necesario pedir al agente ampliar el servicio para exponer un estado reactivo basado en signals y métodos de gestión como getTodos, getTodoById, toggleTodo, addTodo, removeTodo y updateTodo para que el componente consuma la señal del servicio en vez de snapshotear datos.
Controlar el comportamiento del agente con AGENTS.md: para dirigir mejor a los agentes conviene crear un fichero AGENTS.md en la raíz del proyecto que actúe como README para agentes; este enfoque es independiente de la plataforma IA y permite definir reglas de estilo, convenciones de nombres, instrucciones de tooling y ejemplos de cómo scaffoldear código con ng generate para preservar la estructura esperada por angular.json. Además puedes tener varios AGENTS.md en monorepos y la IA debería aplicar la instrucción más cercana al código en cuestión.
Ejemplos de instrucciones útiles en AGENTS.md: indicar que no se modifiquen archivos generados automáticamente, pedir confirmación antes de ejecutar comandos de CLI, preferir ng sobre npx cuando la CLI está instalada globalmente, solicitar comentarios claros en bloques de código y anotar cuando se usen APIs experimentales, y especificar convenciones de nombres para componentes y servicios para evitar colisiones y mantener consistencia. Estas reglas ayudan a que el agente genere scaffolding respetando tests y configuraciones por defecto.
Iteración y correcciones: la generación inicial raramente es perfecta; es necesario revisar, pedir refactorizaciones y solicitar la migración de estado al servicio, la adopción de signals modernos de Angular, o la creación de componentes hijos como un componente TodoItem que reciba señales requeridas como entrada. En el experimento se le solicitó al agente reemplazar snapshots por consumo directo de la señal del servicio y refactorizar la entrada de nuevo todo usando computed para limpiar el texto, además de aplicar mejoras de accesibilidad como añadir aria labels y evitar casteos innecesarios como any.
Consejos prácticos para trabajar con agentes IA en Angular: 1) define y versiona instrucciones de agente en AGENTS.md para compartir normas en el equipo; 2) prioriza prompts claros y por pasos, aprobando operaciones de CLI cuando el agente lo proponga; 3) valida que el código generado siga las prácticas actuales de Angular y corrige o refactoriza cuando haga uso de APIs experimentales; 4) prueba distintos modelos y herramientas si necesitas mayor pulido o limpieza de código; 5) automatiza lo posible pero revisa manualmente los cambios y elimina código muerto tras varias iteraciones.
Servicios complementarios y posicionamiento: si estás buscando apoyo profesional para llevar un experimento similar a producción, en Q2BSTUDIO somos una empresa de desarrollo de software y aplicaciones a medida especializada en inteligencia artificial, ciberseguridad y servicios cloud; ayudamos a equipos a integrar agentes IA, diseñar arquitecturas basadas en señales y a desplegar soluciones seguras en AWS y Azure. Consulta nuestros servicios de inteligencia artificial en IA para empresas y agencia de IA y descubre cómo podemos desarrollar aplicaciones a medida en soluciones de software a medida que integren buenas prácticas de seguridad, escalabilidad y análisis con Power BI.
Palabras clave incluidas naturalmente: aplicaciones a medida, software a medida, inteligencia artificial, ciberseguridad, servicios cloud aws y azure, servicios inteligencia de negocio, ia para empresas, agentes IA y power bi.
Conclusión: experimentar con el servidor MCP de Angular y agentes IA permite acelerar prototipos y aplicar buenas prácticas automatizadas, pero exige guiar al agente con instrucciones claras, validar salidas y complementar con experiencia humana. Si quieres que demos soporte en tu proyecto para integrar agentes IA, diseñar workflows seguros o modernizar tu frontend Angular, en Q2BSTUDIO podemos ayudarte a convertir experimentos en productos robustos y escalables.
.jpg)
.jpg)
.jpg)
.jpg)