--- title: "WebMCP vs Angular CLI MCP server: tools em runtime vs ajuda em dev-time" description: "Qual MCP do Angular você quer de verdade: o CLI MCP server de dev-time, que ajuda um assistente a escrever seu código, ou o WebMCP de runtime, que deixa um agente do browser chamar seu app publicado." deck: "Duas features do Angular dividem as letras MCP e o pessoal confunde as duas. O [Angular CLI MCP server](https://angular.dev/ai/mcp) é de dev-time: entrega docs e contexto do projeto para o assistente que escreve seu código. O [WebMCP](https://next.angular.dev/ai/webmcp) é de runtime: seu app publicado entrega tools tipadas para um agente no browser. As mesmas três letras, pontas opostas." author: "André Ramos" url: "https://andreramos.dev/pt/angular/webmcp-vs-angular-cli-mcp-server/" lang: "pt-BR" type: "article" --- # WebMCP vs Angular CLI MCP server: tools em runtime vs ajuda em dev-time > Duas features do Angular dividem as letras MCP e o pessoal confunde as duas. O [Angular CLI MCP server](https://angular.dev/ai/mcp) é de dev-time: entrega docs e contexto do projeto para o assistente que escreve seu código. O [WebMCP](https://next.angular.dev/ai/webmcp) é de runtime: seu app publicado entrega tools tipadas para um agente no browser. As mesmas três letras, pontas opostas. ## Por que essas duas se confundem Quem busca por "Angular MCP" cai em duas coisas que dizem MCP e que envolvem um agente de IA, então é justo achar que são a mesma feature em níveis diferentes de maturidade. Não são. Elas ficam em pontas opostas da vida do mesmo app. O [Angular CLI MCP server](/angular/angular-cli-mcp-ai-generated-angular-code/) roda enquanto você escreve código. Você sobe ele com `ng mcp`, e ele dá ao seu assistente um caminho para a doc atual do Angular, exemplos e contexto do workspace, para o agente parar de gerar Angular do ano errado. Quem consome é o seu editor. O raio de impacto é a sua máquina. O [WebMCP](/angular/web-mcp-in-angular/) roda depois que você publica. Seu app em produção registra tools tipadas, e um agente de IA no browser do usuário final chama essas tools pelo nome em vez de clicar pelo DOM. Quem consome é o agente do browser do usuário. O raio de impacto é o app em produção. O eixo que importa aqui não é maturidade, é quando a coisa roda e quem está do outro lado dela. ## A diferença na prática Coloque as duas lado a lado e a confusão se desfaz. Uma ajuda você a escrever Angular na sua mesa. A outra deixa o app que você já publicou ser chamado por um agente lá fora. Leia a tabela pela linha que casa com o seu objetivo de verdade, não pela sigla que as duas compartilham. | Eixo | Angular CLI MCP (dev-time) | WebMCP (runtime) | |---|---|---| | Quando roda | Enquanto você escreve código, na sua máquina | Depois de publicar, no browser do usuário | | Quem consome | Seu editor ou assistente de código | O agente de IA no browser do usuário final | | O que expõe | Doc, exemplos e contexto de workspace do Angular | Tools tipadas que o app declara com `provideExperimentalWebMcpTools` | | Rótulo de maturidade | Habilitado por padrão desde a v21; a doc ainda chama de experimental | Experimental; um draft de Community Group do W3C, não um padrão | | Risco | Baixo: o pior caso é uma sugestão de código que você recusa no review | Alto: seu app publicado fica exposto a um agente em produção | | Raio de impacto | Sua máquina de dev | Seu app em produção | | Como você sobe | `ng mcp`, mais `ng generate ai-config` | Registrar tools, ponto de entrada `document.modelContext` | ## Qual delas você quer de verdade Se o seu problema é que o Angular escrito por IA sai desatualizado ou fora do estilo, você quer o lado de dev-time. Suba o `ng mcp` para o assistente ler a doc atual e o seu workspace, e rode o `ng generate ai-config` para deixar no repo as regras que o assistente segue. O servidor vem habilitado por padrão desde a v21, e a doc ainda chama de experimental, mas ele roda em dev-time, então o pior caso é uma sugestão ruim que você recusa no review. O setup completo está em [Angular CLI MCP e código Angular gerado por IA](/angular/angular-cli-mcp-ai-generated-angular-code/). Se o seu problema é querer que um agente de IA opere o app publicado por tools tipadas em vez de cliques sintéticos, você quer o [WebMCP](/angular/web-mcp-in-angular/). Essa capacidade é real e a ligação no Angular é limpa, mas ela é experimental: a spec é um draft de Community Group, e mesmo no v22 ela segue atrás das APIs experimentais. Então você faz um spike atrás de uma flag numa rota de baixo risco, e não coloca isso num fluxo de pagamento. A armadilha é correr para o WebMCP quando tudo que você queria era um autocomplete melhor no editor, ou correr para o CLI MCP server quando o que você precisa é que o app responda a um agente em runtime. Case a ferramenta com a ponta do app em que você está: você está escrevendo o código, ou o seu código está sendo chamado? *O lado de dev-time: suba o CLI MCP server e escreva as regras do repo* ```bash ng mcp ng generate ai-config --tool agents ``` ## Artefato reaproveitável: Qual MCP eu uso? - Objetivo: Angular escrito por IA com mais qualidade na sua mesa → Angular CLI MCP server (`ng mcp`) com `ng generate ai-config`. Habilitado por padrão desde a v21, dev-time, baixo risco. - Objetivo: app publicado chamável por um agente do browser via tools tipadas → WebMCP (`provideExperimentalWebMcpTools`). Experimental; faça spike atrás de uma flag. - Se quem consome é o seu editor, é o CLI MCP server de dev-time. Se quem consome é o agente do browser do usuário, é o WebMCP de runtime. - Se um passo errado te custa uma sugestão recusada, você está no lado de dev-time. Se te custa um incidente em produção, você está no lado do WebMCP. - Precisa dos dois? Eles se combinam: use o CLI MCP server para ajudar a escrever as tools do WebMCP, e publique essas tools atrás de uma flag. ## Perguntas frequentes ### WebMCP e o Angular CLI MCP server são a mesma coisa? Não. O [Angular CLI MCP server](/angular/angular-cli-mcp-ai-generated-angular-code/) é de dev-time e entrega docs e contexto do workspace para o assistente que escreve seu código. O [WebMCP](/angular/web-mcp-in-angular/) é de runtime e deixa um agente do browser chamar tools tipadas que seu app publicado expõe. As mesmas três letras, pontas opostas. ### Qual delas eu devo usar? Se você quer Angular escrito por IA com mais qualidade, use o CLI MCP server (`ng mcp`) e o `ng generate ai-config`; ele vem habilitado por padrão desde a v21 e roda em dev-time, então uma sugestão ruim só é recusada no review. Se você quer o app publicado chamável por um agente do browser, use o WebMCP, mas ele é experimental, então faça um spike atrás de uma flag em vez de colocar num fluxo crítico. ### Alguma das duas é estável? As duas ainda carregam o rótulo de experimental, então a pergunta útil é o risco, não o rótulo. O CLI MCP server vem habilitado por padrão desde a v21, e a doc ainda chama de experimental, mas ele roda em dev-time, então uma chamada ruim te custa uma sugestão recusada. O WebMCP também é experimental, um [draft de Community Group do W3C](https://webmachinelearning.github.io/webmcp/), não um padrão, e o Angular ainda o entrega atrás das APIs experimentais, agora no v22 ([releases](https://angular.dev/reference/releases)); uma chamada ruim ali chega no seu app em produção. ## Fontes consultadas - https://angular.dev/ai/mcp - https://angular.dev/cli/generate/ai-config - https://next.angular.dev/ai/webmcp - https://next.angular.dev/api/core/provideExperimentalWebMcpTools - https://webmachinelearning.github.io/webmcp/ - https://angular.dev/reference/releases ## Leia também - [WebMCP no Angular: como expor tools ao agente de IA do browser (e quando esperar)](https://andreramos.dev/pt/angular/web-mcp-in-angular/) - [Transformando Signal Forms em tools de agente de IA](https://andreramos.dev/pt/angular/signal-forms-as-ai-agent-tools/) - [Segurança de WebMCP no Angular: o agente que chama suas tools pode ser sequestrado](https://andreramos.dev/pt/angular/web-mcp-security-angular/)