Angular MCP

A CLI do Angular inclui um servidor experimental do Model Context Protocol (MCP) que permite que assistentes de IA no seu ambiente de desenvolvimento interajam com a CLI do Angular. Incluímos suporte para geração de código via CLI, adição de pacotes e muito mais.

Ver em angular.devExperimente este MCPPatrocinado

Documentação

Documentação

  • Introdução
    • O que é Angular?
    • Instalação
    • Fundamentos
    • Comece a codar! 🚀
  • Guias Aprofundados
    • Signals Atualizado
    • Componentes
    • Templates
    • Diretivas
    • Injeção de Dependência Atualizada
    • Roteamento
    • Formulários Atualizados
    • Cliente HTTP
    • Renderização no servidor e híbrida
    • Testes
    • Angular Aria Novo
    • Internacionalização
    • Animações
    • Arrastar e soltar
  • Desenvolva com IA
    • Comece agora
    • Prompts de LLM e configuração de IDE com IA
    • Agent Skills Novo
    • Configuração do servidor MCP do Angular CLI
    • Tutor de IA do Angular
    • Padrões de Design
    • WebMCP Novo
  • Ferramentas do Desenvolvedor
    • Angular CLI
    • Bibliotecas
    • DevTools
    • Serviço de Linguagem
  • Melhores Práticas
    • Guia de Estilo
    • Segurança
    • Acessibilidade
    • Erros não tratados no Angular
    • Desempenho
    • Mantendo-se atualizado
  • Eventos do Desenvolvedor
    • Lançamento do Angular v22 Novo
    • Lançamento do Angular v21
  • Ecossistema Estendido
    • NgModules
    • Animações Legadas
    • Usando RxJS com Angular
    • Service Workers & PWAs
    • Web workers
    • Pipeline de build personalizado
    • Tailwind
    • Angular Fire
    • Google Maps
    • Google Pay
    • Player do YouTube
    • Angular CDK
    • Angular Material

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 do workspace e execução de builds/testes.

Integração com Angular AI Agent Skills

Se o seu ambiente host suporta Agent Skills personalizadas (como Antigravity), você pode combinar o servidor MCP do Angular CLI com as 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.

Voltar ao topo

Comece agora

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:

NomeDescrição
ai_tutorInicia um tutor Angular interativo com tecnologia de IA.
devserver.startInicia um servidor de desenvolvimento (ng serve) de forma assíncrona. Retorna imediatamente.
devserver.stopPara o servidor de desenvolvimento.
devserver.wait_for_buildRetorna os logs do build mais recente em um servidor de desenvolvimento em execução.
get_best_practicesRecupera o Guia de Melhores Práticas do Angular (crucial para componentes standalone, formulários tipados, etc.).
list_projectsLista todos os aplicativos e bibliotecas no workspace lendo o angular.json.
onpush_zoneless_migrationAnalisa o código e fornece um plano para migrá-lo para a detecção de alterações OnPush (pré-requisito para zoneless).
run_targetExecuta um target configurado (ex.: build, test, lint, e2e, deploy).
search_documentationPesquisa a documentação oficial em https://angular.dev.

Fluxos de Trabalho Comuns

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

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 signals pré-requisito usando comandos padrão do 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 do 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 target 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á concluída.

2. Desenvolvimento de Funcionalidades e Loop de TDD

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

  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 acompanhar os logs do 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 testes 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: Ao 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, a persona e as 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: Registra apenas ferramentas que não modificam o projeto.
  • --local-only: Registra apenas ferramentas que não exigem conexão com a internet.

Exemplo para modo somente leitura:

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