Componentes Angular Seguros para Agentes: Configuração do MCP e Habilidades para Desenvolvimento de IA Verificado

Integração MCP v22 do Angular + Habilidades: Configuração de Desenvolvimento Agente

Com o Angular v22, o servidor MCP (Modelo de Contexto de Protocolo) + a pilha de Habilidades do Angular transforma o desenvolvimento assistido por agentes de uma proposta arriscada em um fluxo de trabalho determinístico e verificável. Este guia o orienta na configuração do seu ambiente, na configuração das habilidades corretas e na construção de componentes seguros para agentes.

Parte 1: Configuração do Ambiente

Pré-requisitos

Certifique-se de que você possui:

• Node.js v20+ (node --version)
• Angular CLI v22+ (npm install -g @angular/cli@latest)
• Um ambiente de agente de codificação (Gemini CLI, Cursor, Claude Code, GitHub Copilot, JetBrains AI ou Windsurf)

Passo 1: Configurar o Servidor MCP do Angular

O Angular CLI vem com o servidor MCP embutido. Configure-o nas configurações do seu agente:

Para Gemini CLI / Cursor / Claude Code (usando .gemini/settings.json ou equivalente):

{
  "mcpServers": {
    "angular-cli": {
      "command": "npx",
      "args": [
        "-y",
        "@angular/cli",
        "mcp"
      ]
    },
    "chrome-devtools": {
      "command": "npx",
      "args": [
        "chrome-devtools-mcp@latest"
      ]
    }
  }
}

Para IDEs JetBrains (Configurações → Ferramentas → MCP):

1. Adicionar novo servidor: nome angular-cli
2. Comando: npx -y @angular/cli mcp
3. Adicionar segundo servidor: nome chrome-devtools
4. Comando: npx chrome-devtools-mcp@latest

Teste a conexão:

npx @angular/cli mcp --health-check

Você deve ver uma lista de ferramentas disponíveis. As mais comuns:

• ng_lint — executa o linter no seu projeto
• get_examples — busca exemplos de código de melhores práticas
• get_best_practices — recupera o Guia de Melhores Práticas do Angular
• search_documentation — consulta angular.dev
• dev_server.wait_for_build — bloqueia até que a construção seja bem-sucedida/falhe (crítico para agentes)
• dev_server.start — inicia o servidor de desenvolvimento
• dev_server.stop — para o servidor de desenvolvimento

Passo 2: Instalar Habilidades do Angular

As habilidades são instaladas separadamente das ferramentas MCP. Elas aumentam o conhecimento do agente sem adicionar sobrecarga de token a cada solicitação.

Instale as habilidades oficiais do Angular:

# Usando o pacote de habilidades npx
npx @anthropic-ai/skills add \
  https://github.com/angular/skills/blob/main/angular-developer/SKILL.md \
  --name angular-developer

npx @anthropic-ai/skills add \
  https://github.com/angular/skills/blob/main/angular-new-app/SKILL.md \
  --name angular-new-app

Ou, se o seu agente suportar habilidades baseadas em URL, faça referência diretamente:

/skills install https://github.com/angular/skills/blob/main/angular-developer/SKILL.md
/skills install https://github.com/angular/skills/blob/main/angular-new-app/SKILL.md

Verifique a instalação:

# No seu agente (Gemini CLI, etc.)
/skills list

Você deve ver angular-developer e angular-new-app listados.

Passo 3: Configurar o Chrome DevTools para Agentes

Isso dá aos agentes visibilidade sobre sua aplicação em execução:

npx chrome-devtools-mcp@latest --install

Teste:

npx chrome-devtools-mcp@latest --health-check

Parte 2: Escrevendo Componentes Seguros para Agentes

Com o MCP + Habilidades configurados, seu agente tem acesso à verificação de construção e visibilidade do navegador. Agora escreva código que os agentes possam modificar com segurança.

Padrão 1: Exhaustivo @switch com Segurança de Tipo

Sempre use blocos @switch exaustivos. Isso impede que os agentes introduzam casos não tratados.

// ✓ Bom: União exaustiva e segura em tipo
export type VehicleStatus = 'idle' | 'transit' | 'maintenance' | 'critical';

export class FleetDetailComponent {
  status = signal<VehicleStatus>('idle');

  private assertNever(value: never): never {
    throw new Error(`Status não tratado: