---
title: "Angular CLI MCP e código Angular gerado por IA"
description: "Um checklist de produção para usar Angular CLI MCP, ai-config e revisão humana em código Angular gerado por IA."
deck: "IA pode acelerar trabalho em Angular, mas só ajuda de verdade quando o agente enxerga docs atuais, formato local do projeto e regras duras de review. O [Angular CLI MCP server](https://angular.dev/ai/mcp) saiu experimental na v20.2 (agosto/2025) e passou a vir habilitado por padrão na v21, mas a doc ainda marca como experimental no v22; o protocolo MCP em si fez um ano depois que a [Anthropic abriu o código em novembro/2024](https://www.anthropic.com/news/model-context-protocol)."
author: "André Ramos"
url: "https://andreramos.dev/pt/angular/angular-cli-mcp-ai-generated-angular-code/"
lang: "pt-BR"
type: "article"
---

# Angular CLI MCP e código Angular gerado por IA

> IA pode acelerar trabalho em Angular, mas só ajuda de verdade quando o agente enxerga docs atuais, formato local do projeto e regras duras de review. O [Angular CLI MCP server](https://angular.dev/ai/mcp) saiu experimental na v20.2 (agosto/2025) e passou a vir habilitado por padrão na v21, mas a doc ainda marca como experimental no v22; o protocolo MCP em si fez um ano depois que a [Anthropic abriu o código em novembro/2024](https://www.anthropic.com/news/model-context-protocol).

## O problema real é Angular desatualizado

O risco em código Angular gerado por IA não é um assistente escrever código. O risco é ele escrever Angular do ano errado: `AppModule` para tudo, diretivas estruturais antigas por hábito, conversões de RxJS sem fronteira ou APIs experimentais tratadas como estáveis.

Minko Gechev (líder do Angular team) nomeou o problema direto no post [LLM-first Web Framework](https://blog.mgechev.com/2025/04/19/llm-first-web-framework/): 'Often the LLM will generate code that uses deprecated or missing APIs from previous versions.' O Angular CLI MCP server existe pra fechar essa lacuna, dando a ferramentas compatíveis um caminho para o [Angular CLI](https://angular.dev/ai/mcp), documentação oficial e contexto do workspace. Esse é o lado de tempo de desenvolvimento da superfície de IA do Angular: ele ajuda o assistente a escrever código melhor na sua máquina, enquanto a contraparte de runtime, o [WebMCP](/angular/web-mcp-in-angular/), expõe tools tipadas do seu app publicado para um agente do browser. Isso melhora o ponto de partida. Não remove review.

## O que permitir

| Uso | Permitir? | Condição |
|---|---|---|
| Buscar docs oficiais do Angular | Sim | Use docs atuais antes de aceitar afirmação de API. |
| Gerar componente pequeno | Sim | O prompt informa versão, estilo, fronteira de estado e APIs fora de escopo. |
| Inspecionar workspace em modo leitura | Sim | Prefira read-only quando a tarefa é descoberta. |
| Rodar ferramentas MCP experimentais que mudam código | Com cuidado | Exigir review explícito e diff pequeno. |
| Colocar secrets de IA no frontend Angular | Não | Secrets ficam atrás de backend, proxy ou provedor gerenciado. |

## O setup inicial

Comece com [MCP](https://angular.dev/ai/mcp) para documentação e contexto de workspace, e [`ng generate ai-config`](https://angular.dev/cli/generate/ai-config) para regras do repositório. O servidor vem habilitado por padrão desde a v21, mas a [página oficial](https://angular.dev/ai/mcp), construída no v22, ainda chama de experimental e ainda separa as seis ferramentas padrão (`search_documentation`, `find_examples`, `ai_tutor`, `get_best_practices`, `list_projects`, `onpush_zoneless_migration`) de outras sete atrás do `--experimental-tool`: `build`, `e2e`, `modernize`, `test`, mais um grupo de devserver com três (`devserver.start`, `devserver.stop`, `devserver.wait_for_build`). Como tudo isso roda em dev-time, o risco prático é baixo, mas mantenha política conservadora em qualquer coisa que consiga alterar código.

Para geração de código, o prompt precisa dizer o que Angular moderno significa nesse repo. Caso contrário, o assistente preenche as lacunas com o padrão que mais viu por aí.

*Baseline de tooling de IA para Angular*

```bash
ng mcp
ng generate ai-config --tool agents
```

## O que o `ng generate ai-config` escreve

O comando escreve um arquivo de regras que o assistente lê antes de tocar no código. A flag `--tool` é um array, tem o padrão `["none"]` e decide qual arquivo vai para onde. O enum que veio no [schematic](https://github.com/angular/angular-cli/blob/v21.2.13/packages/schematics/angular/ai-config/schema.json) é exatamente esses oito valores, e cada um aponta para um caminho que algum assistente específico já procura.

Se o arquivo de destino já existe, o schematic pula e avisa em vez de sobrescrever, então rodar isso num repo que já tem regras é seguro. O valor `agents` escreve um `AGENTS.md`; depois que ele existe, o próximo passo é fazer esse arquivo dizer algo útil, que tem o [seu próprio texto](/angular/agents-md-for-modern-angular/).

| `--tool` | Arquivo gerado | Uso |
|---|---|---|
| `none` | (nada) | Padrão. Pula a geração do arquivo. |
| `agents` | `AGENTS.md` | Regras agnósticas de ferramenta que vários assistentes já leem. |
| `claude` | `.claude/CLAUDE.md` | Regras de projeto do Claude Code. |
| `copilot` | `.github/copilot-instructions.md` | Instruções de repositório do GitHub Copilot. |
| `cursor` | `.cursor/rules/cursor.mdc` | Regras de projeto do Cursor. |
| `gemini` | `.gemini/GEMINI.md` | Regras do Gemini CLI. |
| `jetbrains` | `.junie/guidelines.md` | Guidelines do Junie, da JetBrains. |
| `windsurf` | `.windsurf/rules/guidelines.md` | Regras do Windsurf. |

## Qualidade de prompt faz parte da arquitetura

Um prompt vago empurra o assistente para o formato Angular mais comum na internet. Um prompt útil nomeia a arquitetura local, a versão do Angular, a fronteira de estado, a expectativa de teste e as APIs fora de escopo.

Eu rejeitaria uma saída de IA que ignora essas restrições mesmo se o componente compila. O alvo do review não é se o modelo gerou código; é se o diff respeita o modelo do time.

*Prompt ruim vs prompt útil*

```text
# Prompt ruim
Crie um componente Angular de busca.

# Prompt útil
Crie um componente de busca standalone em Angular 21.
Use Signal para o texto digitado, RxJS para debounce e cancelamento, e toSignal apenas na fronteira do componente.
Use built-in control flow no template.
Não use APIs experimentais.
Adicione um teste pequeno de service ou explique por que nenhum teste mudou.
```

## O checklist de review

Um diff Angular gerado por IA deve ser revisado como qualquer diff de produção, mais alguns checks específicos: conversão excessiva para Signals, providers no escopo errado, estado global acidental, acessibilidade falsa, testes ausentes e APIs cujo status não foi checado.

O ganho não é 'o agente escreveu a feature'. O ganho é um primeiro rascunho menor que ainda respeita o modelo Angular do time.

*Início de regras do repositório*

```text
# Regras de IA para Angular

Use componentes standalone para UI nova.
Prefira `inject` quando combinar com o estilo local.
Use built-in control flow em templates tocados.
Use Signals para estado local e derivado.
Mantenha RxJS para streams, cancelamento e composição assíncrona.
Não use APIs experimentais sem decisão explícita.
Não coloque secrets em código frontend Angular.
Todo diff gerado precisa de review humano.
```

## Artefato reaproveitável: Gate de review para Angular gerado por IA

- Docs atuais do Angular checadas em fontes oficiais.
- Prompt informa versão do Angular, estilo arquitetural e APIs fora de escopo.
- Ferramentas MCP que alteram código são tratadas como experimentais até review.
- Nenhum secret ou credencial de provedor entra no frontend.
- Código gerado passa nos testes normais e em review humano de Angular.

## Perguntas frequentes

### O que o `ng generate ai-config` faz?

Ele escreve um arquivo de regras que o seu assistente de IA lê antes de mexer no repo, então o assistente segue as suas convenções em vez de chutar. A [opção `--tool`](https://angular.dev/cli/generate/ai-config) decide o formato de arquivo de qual assistente vai ser gerado. Se o arquivo já existe, ele pula e avisa.

### Quais opções de `--tool` existem?

No Angular v21.2.x o enum que veio é `none`, `agents`, `claude`, `copilot`, `cursor`, `gemini`, `jetbrains` e `windsurf`; o `none` é o padrão e pula a geração. A lista completa está no [schema do schematic](https://github.com/angular/angular-cli/blob/v21.2.13/packages/schematics/angular/ai-config/schema.json), e o `--tool` é um array, então dá para passar mais de um.

### Ele gera um AGENTS.md?

Gera. O `ng generate ai-config --tool agents` escreve um `AGENTS.md` na raiz do repo, o arquivo agnóstico de ferramenta que vários assistentes leem. O que vai dentro desse arquivo para ele ficar útil em Angular tem o [seu próprio texto](/angular/agents-md-for-modern-angular/).

### Qual a diferença disso para o WebMCP?

O `ng generate ai-config` e o Angular CLI MCP server são de tempo de desenvolvimento: ajudam um assistente a escrever Angular na sua máquina. O [WebMCP](/angular/web-mcp-in-angular/) é runtime, onde o seu app publicado expõe tools tipadas para o agente do browser do usuário final. Mesmo tema de IA, raio de impacto bem diferente. Eu coloco os dois lado a lado em [WebMCP vs Angular CLI MCP server](/angular/webmcp-vs-angular-cli-mcp-server/).

## Fontes consultadas

- https://angular.dev/ai
- https://angular.dev/ai/mcp
- https://angular.dev/cli/generate/ai-config
- https://github.com/angular/angular-cli/blob/v21.2.13/packages/schematics/angular/ai-config/schema.json
- https://angular.dev/ai/develop-with-ai
- https://angular.dev/ai/agent-skills
- https://angular.dev/ai/design-patterns
- https://angular.dev/guide/signals
- https://angular.dev/guide/components
- https://angular.dev/guide/templates/control-flow
- https://blog.angular.dev/angular-summer-update-2025-1987592a0b42
- https://blog.angular.dev/announcing-angular-v21-57946c34f14b
- https://blog.mgechev.com/2025/04/19/llm-first-web-framework/
- https://www.anthropic.com/news/model-context-protocol
- https://modelcontextprotocol.io/specification/2025-11-25

## Leia também

- [O Angular CLI MCP server: setup, tools e como conectar no seu assistente de IA](https://andreramos.dev/pt/angular/angular-mcp-server-setup/)
- [WebMCP vs Angular CLI MCP server: tools em runtime vs ajuda em dev-time](https://andreramos.dev/pt/angular/webmcp-vs-angular-cli-mcp-server/)
- [WebMCP no Angular: como expor tools ao agente de IA do browser (e quando esperar)](https://andreramos.dev/pt/angular/web-mcp-in-angular/)