Angular MCP

O Angular CLI inclui um servidor Model Context Protocol (MCP) que permite que assistentes de IA (como Cursor, Antigravity, JetBrains AI, etc.) interajam diretamente com o Angular CLI. Ele fornece ferramentas para geração de código, análise de workspace e execução de builds/testes.

Integração com Angular AI Agent Skills

Se o seu ambiente host suporta Agent Skills personalizados (como Antigravity), você pode combinar o servidor MCP do Angular CLI com os Angular AI Skills oficiais. Enquanto as skills fornecem ao agente orientação profunda em nível de instrução e padrões de codificação, o servidor MCP fornece as ferramentas de ação (como compilar, executar testes e analisar workspaces) para executar essas diretrizes, resultando em um agente de desenvolvimento completo e poderoso.

Primeiros Passos

Para usar o servidor MCP, você configura seu ambiente host (IDE ou CLI) para executar npx @angular/cli mcp.

Ferramentas Disponíveis (Padrão)

Quando o servidor MCP está habilitado, os agentes de IA têm acesso às seguintes ferramentas:

Nome	Descrição
ai_tutor	Inicia um tutor Angular interativo com tecnologia de IA.
devserver.start	Inicia um servidor de desenvolvimento de forma assíncrona (ng serve). Retorna imediatamente.
devserver.stop	Para o servidor de desenvolvimento.
devserver.wait_for_build	Retorna os logs do build mais recente em um servidor de desenvolvimento em execução.
get_best_practices	Recupera o Guia de Melhores Práticas do Angular (crucial para componentes standalone, formulários tipados, etc.).
list_projects	Lista todos os aplicativos e bibliotecas no workspace lendo angular.json.
onpush_zoneless_migration	Analisa o código e fornece um plano para migrá-lo para a detecção de alterações OnPush (pré-requisito para zoneless).
run_target	Executa um alvo configurado (ex.: build, test, lint, e2e, deploy).
search_documentation	Pesquisa a documentação oficial em https://angular.dev.

Fluxos de Trabalho Comuns

Esses fluxos de trabalho demonstram como os assistentes de IA coordenam diferentes ferramentas MCP para alcançar automaticamente histórias de desenvolvedor complexas.

1. Ajuste de Desempenho: Migração Zoneless e OnPush

O agente de IA otimiza o desempenho da detecção de alterações e migra componentes para um estado pronto para zoneless.

1. Descobrir Workspace: O agente de IA chama list_projects para localizar componentes, projetos e configurações de estilo/teste no workspace.
2. Modernização de Schematics (Pré-requisito): O agente de IA executa quaisquer migrações de sinal pré-requisito usando comandos padrão ng generate (ex.: Signal Inputs, Signal Queries).
3. Planejar Migração: O agente de IA chama onpush_zoneless_migration com o caminho absoluto do diretório ou arquivo de componente.
4. Aplicar Alterações: O agente de IA aplica automaticamente a única alteração acionável retornada pela ferramenta ao código.
5. Verificar Alterações: O agente de IA executa testes unitários chamando run_target com o parâmetro de destino definido como "test".
6. Repetir: O agente de IA chama onpush_zoneless_migration novamente para obter o próximo passo, repetindo até que a ferramenta indique que a migração está completa.

2. Desenvolvimento de Recursos e Loop TDD

O agente de IA automatiza pesquisa, implementação e verificação ao desenvolver novos recursos.

1. Pesquisa de API e Sintaxe: O agente de IA usa search_documentation para consultar APIs do Angular ou regras de sintaxe (ex.: opções de bloco @defer).
2. Carregar Padrões de Codificação: O agente de IA chama get_best_practices com o caminho do workspace para carregar regras de codificação alinhadas à versão do Angular.
3. Iniciar Servidor de Desenvolvimento Local: O agente de IA inicia um servidor em segundo plano chamando devserver.start.
4. Monitorar Build: O agente de IA usa devserver.wait_for_build para observar os logs de build e garantir que a compilação seja bem-sucedida enquanto edita o código.
5. Escrever e Executar Testes: O agente de IA identifica o framework de teste do projeto (ex.: Jasmine, Jest, Vitest) via list_projects, escreve o arquivo de teste correspondente e executa os testes usando run_target com "test".
6. Parar Servidor de Desenvolvimento: Quando terminar, o agente de IA para o servidor de desenvolvimento ativo chamando devserver.stop.

3. Integração e Aprendizado do Desenvolvedor

O agente de IA guia o desenvolvedor pelos conceitos do Angular em um sandbox interativo.

1. Descobrir Projetos: O agente de IA chama list_projects para escanear o workspace e identificar a estrutura do código.
2. Iniciar Tutor: O agente de IA executa ai_tutor para carregar as instruções do currículo, persona e diretrizes de tutoria.
3. Seguir o Currículo: O agente de IA guia o usuário pelo currículo, explicando conceitos e instruindo sobre quais componentes construir ou modificar.
4. Implementar e Verificar: O agente de IA ajuda a implementar o código do sandbox e verifica as alterações usando run_target com "test" ou "build".

Opções de Comando

Você pode passar argumentos para o servidor MCP no array args da sua configuração:

• --read-only: Apenas registra ferramentas que não modificam o projeto.
• --local-only: Apenas registra ferramentas que não requerem conexão com a internet.

Exemplo para modo somente leitura:

"args": ["-y", "@angular/cli", "mcp", "--read-only"]