IA no desenvolvimento Angular: como o framework ensina o assistente a escrever Angular atual

Peça a um assistente de IA um componente Angular e, com boa probabilidade, ele entrega código que funciona. Peça com atenção aos detalhes e você verá algo curioso: parte da resposta usa padrões que o próprio Angular já substituiu. O problema não é falta de capacidade do modelo. É que ele aprendeu Angular com a internet inteira, e a internet guarda todas as épocas do framework ao mesmo tempo.

Este artigo explica como o Angular enfrenta esse problema com três mecanismos oficiais (arquivos de regras, llms.txt e um servidor MCP no Angular CLI), para quem cada um serve, como a IA realmente obtém essas informações e quais partes são específicas do Angular e quais são práticas gerais do ecossistema de IA.

O problema: o modelo aprendeu todas as épocas ao mesmo tempo

A documentação oficial resume a questão de forma direta: modelos de linguagem (LLMs) conseguem gerar código, mas tropeçam em frameworks que evoluem de forma contínua, como o Angular. A solução que a página descreve é fornecer instruções específicas do domínio ao modelo.

Veja um exemplo de como isso aparece. Sem orientação, é comum receber a forma antiga de listar itens:

<li *ngFor="let t of tarefas" *ngIf="t.ativa">{{ t.titulo }}</li>

Com a orientação certa, o assistente tende a usar o fluxo de controle atual dos templates:

@for (t of tarefas(); track t.id) {
  @if (t.ativa) { <li>{{ t.titulo }}</li> }
}

As duas formas existem em milhares de páginas. O modelo não sabe qual é a atual a menos que alguém diga.

Os três mecanismos oficiais

1. Arquivos de regras: instruções permanentes

O Angular publica um arquivo de boas práticas para ser usado como instruções de sistema ou incluído como contexto de um prompt. Ele cobre TypeScript, Angular, acessibilidade, componentes, estado, templates e serviços, e a equipe diz que o atualiza regularmente.

Cada ferramenta de IA lê um arquivo com nome diferente. A página oficial mapeia, por exemplo:

• GEMINI.md para o Antigravity;
• copilot-instructions.md para IDEs com Copilot;
• .instructions.md para o VS Code;
• AGENTS.md para IDEs da JetBrains;
• guidelines.md para o Windsurf;
• um arquivo de regras .mdc para o Cursor.

O AGENTS.md merece destaque porque não é exclusivo de uma ferramenta: segundo o site do formato, é um padrão aberto em Markdown, descrito como um "README para agentes", com passos de build, comandos de teste e convenções do projeto. Essa é uma pista importante sobre a natureza da abordagem, que veremos adiante.

2. llms.txt: um índice feito para máquinas

O llms.txt é descrito pela documentação como uma proposta de padrão para sites ajudarem LLMs a processar o conteúdo. O Angular oferece dois arquivos: o llms.txt, um índice com links para os recursos principais, e o llms-full.txt, um conjunto mais completo e compilado de como o Angular funciona e de como construir aplicações.

A ideia é parecida com a do robots.txt para buscadores, só que pensada para leitura por modelos: em vez de depender de um modelo "adivinhar" onde está a documentação certa, o site aponta o caminho.

3. Servidor MCP do Angular CLI: contexto sob demanda

O terceiro mecanismo é diferente dos outros dois. Em vez de um arquivo estático, o Angular CLI inclui um servidor MCP (Model Context Protocol). O MCP é descrito pelo seu site como um padrão de código aberto para conectar aplicações de IA a sistemas externos, com a analogia de uma porta USB-C: uma forma padronizada de ligar o assistente a dados, ferramentas e fluxos de trabalho.

O servidor do Angular é iniciado com npx @angular/cli mcp e permite que assistentes interajam com o CLI. As ferramentas listadas na documentação incluem, entre outras:

• search_documentation, que busca na documentação oficial em angular.dev;
• get_best_practices, que devolve o guia de boas práticas;
• list_projects, que lista aplicações e bibliotecas lendo o angular.json;
• onpush_zoneless_migration, que analisa o código e planeja uma migração;
• run_target, devserver_start e afins, que executam build, testes e o servidor de desenvolvimento.

Duas opções ajudam a controlar o risco: --read-only registra apenas ferramentas que não modificam o projeto, e --local-only registra apenas as que não precisam de internet. A página trata o servidor como experimental, o que é um bom lembrete de que a lista de ferramentas pode mudar entre versões.

Como a IA obtém esses dados de verdade

Os mecanismos diferem em quando e como a informação chega ao modelo:

• Arquivos de regras são carregados pela ferramenta no início da conversa e viram parte do contexto. O modelo não "pesquisa"; ele já começa a conversa lendo as instruções.
• llms.txt é um recurso que a ferramenta ou o próprio modelo pode buscar para se orientar na documentação.
• MCP funciona por chamada: o assistente decide usar uma ferramenta, o servidor executa e devolve o resultado, que entra no contexto. É o mecanismo que permite ao assistente consultar a documentação durante a tarefa e agir no projeto (build, testes, servidor).

A documentação não detalha como cada ferramenta processa esses dados internamente, e o comportamento pode variar entre elas. Por isso, vale tratar o resultado como orientação, não como garantia.

Na prática: configurar já na criação do projeto

O caminho mais simples é configurar o assistente de IA junto com a criação do projeto. O ng new oferece a opção --ai-config, que gera o arquivo de regras certo para a ferramenta escolhida:

ng new meu-app --ai-config=claude
ng new meu-app --ai-config=claude --ai-config=cursor   # mais de uma ferramenta
ng new meu-app --ai-config=none                         # nenhuma

No CLI 21.2, os valores aceitos são agents, claude, copilot, cursor, gemini, jetbrains, none e windsurf. Cada um grava o arquivo no local que a ferramenta espera, como .claude/CLAUDE.md ou .github/copilot-instructions.md. O projeto também recebe o arquivo .vscode/mcp.json, que registra o servidor MCP para editores compatíveis.

A escolha da ferramenta é simples: use a que você e seu time realmente usam. Em equipes em que cada pessoa prefere um assistente diferente, versionar os arquivos de regras no repositório alinha o resultado de todos. Se ninguém do time usa IA para programar, a opção none é adequada: a configuração não altera o aplicativo, apenas orienta a ferramenta durante o desenvolvimento.

Vantagens, limites e quando não vale a pena

Vantagens.

• Código mais alinhado ao Angular atual, com menos retrabalho de revisão.
• Consistência entre pessoas do time, porque as regras são versionadas junto com o código.
• Contexto de projeto (via MCP) em vez de respostas genéricas.

Limites.

• É orientação, não garantia: o modelo ainda pode errar, e a revisão humana continua necessária.
• Os arquivos mudam com o tempo, e as regras do repositório podem ficar defasadas se ninguém as atualizar.
• O MCP expõe ferramentas que executam ações. Use --read-only quando a tarefa não precisa alterar o projeto.
• Informações das ferramentas de terceiros ficam nos sites delas e mudam por conta própria.

Quando não vale a pena. Para quem está aprendendo e quer escrever o código por conta própria, ou para equipes que não usam IA, a configuração é opcional.

É algo específico do Angular?

Em parte. Os conceitos não são exclusivos: arquivos de instruções por projeto, índices em llms.txt e servidores MCP são práticas gerais do ecossistema, e o AGENTS.md e o MCP são padrões abertos usados por várias ferramentas e frameworks. O que é específico do Angular é a curadoria oficial e a integração: o conteúdo das regras é mantido pela própria equipe do framework, e o ng new --ai-config e o servidor MCP estão embutidos no Angular CLI, que já conhece o seu workspace.

Essa combinação é a vantagem real: a mesma equipe que muda o framework também publica o contexto necessário para que as ferramentas de IA acompanhem a mudança.

Conclusão

Para escrever Angular atual com ajuda de IA, o modelo precisa de contexto atual. Os arquivos de regras dão as instruções permanentes, o llms.txt orienta a leitura da documentação e o servidor MCP entrega consulta e ação sob demanda. Configurar isso na criação do projeto custa uma opção do ng new e evita que cada pessoa do time resolva o problema sozinha.

Um bom primeiro passo é criar um projeto de teste com --ai-config para a sua ferramenta, pedir ao assistente um componente simples e comparar o resultado com e sem as regras. A diferença costuma ser a melhor justificativa para adotar a configuração no time.

Links

• Tutorial link: https://cursos.danielfaustino.com.br/#/curso/00-ambiente-angular