---
title: "Transformando Signal Forms em tools de agente de IA"
description: "Como o Angular transforma um Signal Form numa tool que o agente consegue chamar, o que a inferência de schema precisa do seu modelo e onde eu usaria isso antes de sair do status experimental."
deck: "O Angular consegue expor sozinho um Signal Form como uma tool que um agente de IA preenche e envia, com a validação do próprio form guardando a chamada, então o agente se corrige em vez de mandar lixo. Isso faz parte do WebMCP, que é experimental, então a API pode mudar entre minors. A fonte primária é [next.angular.dev/ai/webmcp](https://next.angular.dev/ai/webmcp)."
author: "André Ramos"
url: "https://andreramos.dev/pt/angular/signal-forms-as-ai-agent-tools/"
lang: "pt-BR"
type: "article"
---

# Transformando Signal Forms em tools de agente de IA

> O Angular consegue expor sozinho um Signal Form como uma tool que um agente de IA preenche e envia, com a validação do próprio form guardando a chamada, então o agente se corrige em vez de mandar lixo. Isso faz parte do WebMCP, que é experimental, então a API pode mudar entre minors. A fonte primária é [next.angular.dev/ai/webmcp](https://next.angular.dev/ai/webmcp).

## O que você ganha de verdade

Essa é a fatia mais demonstrável do [WebMCP no Angular](/angular/web-mcp-in-angular/): em vez de escrever uma tool na mão com um JSON schema e um callback `execute`, você deixa um Signal Form que já existe virar a tool. Adicione o `provideExperimentalWebMcpForms()` de `@angular/forms/signals` aos seus providers, passe a opção `experimentalWebMcpTool` para o `form()`, e o Angular liga o resto.

A parte boa está no que o form já carrega. O Angular infere o JSON schema da tool a partir dos valores iniciais do modelo, e conecta a validação e o submit do form na chamada. Quando o agente preenche a tool, os validadores que você já escreveu rodam; o agente enxerga os erros de campo e consegue se corrigir, em vez de empurrar um payload meio-válido para o seu handler de submit. As mesmas regras de `required` que protegem uma pessoa digitando no form passam a proteger o agente que o chama.

Eu leio isso como o form virando um contrato que o agente precisa cumprir, e não uma superfície que ele fica cutucando. Você escreve o form uma vez, para pessoas, e o agente ganha a versão validada de graça.

*Um Signal Form exposto como tool*

```ts
// provideExperimentalWebMcpForms() precisa estar nos seus providers
readonly model = signal({ firstName: '', lastName: '' });

readonly userForm = form(this.model,
  (f) => {
    required(f.firstName, { message: 'First name is mandatory.' });
    required(f.lastName, { message: 'Last name is mandatory.' });
  },
  {
    experimentalWebMcpTool: { name: 'registerUser', description: 'Registers a new user.' },
    submission: { action: async (formValue) => { /* ... */ } },
  },
);
```

## O que a inferência de schema precisa

Essa conveniência tem um preço, e ele está no modelo. O Angular lê o formato do schema da tool a partir dos valores iniciais do modelo, então esses valores precisam ser concretos o bastante para dar para ler um tipo deles. Não existe um schema separado que você corrige na mão; o modelo é o schema.

Três restrições saem daí. A primeira: todo campo precisa de um valor inicial concreto (`''`, `0`, `false`), nunca `null` ou `undefined`, porque não dá para inferir um tipo a partir de `null`. A segunda: arrays precisam de pelo menos um elemento para o formato do item ser conhecido. A terceira: validadores assíncronos não rodam durante o submit do agente, então aquilo que você só garante de forma assíncrona não vai barrar o agente.

Leia a tabela como o custo de pular um schema escrito na mão. Se um campo não consegue dar um valor inicial limpo, é nesse campo que você precisa pensar antes de expor o form.

| Campo do modelo | Inferido como | Pegadinha |
|---|---|---|
| `name: ''` | string | Tranquilo. Uma string vazia ainda é lida como string. |
| `age: 0` | number | Tranquilo, mas `0` é um valor padrão de verdade, não um 'não preenchido'. |
| `active: false` | boolean | Tranquilo. `false` é lido como boolean. |
| `tags: []` | array de desconhecido | Precisa de pelo menos um elemento para o formato do item ser conhecido; um array vazio esconde isso. |
| `role: null` | não dá para inferir | Nenhum tipo sai de `null`; dê um valor padrão concreto como `''`. |

## Onde isso merece existir, e onde eu esperaria

Eu usaria isso em forms internos e de admin que um agente conduz: um registro de back-office que um operador preencheria na mão, ou uma ação em lote atrás de uma flag, onde o form já tem uma boa validação e o raio de impacto é pequeno. Ali é genuinamente útil, e a validação guardando a chamada é a feature, não um detalhe de rodapé.

Eu esperaria em envios voltados ao usuário e em fluxos regulados. A metade dos forms está resolvida agora: Signal Forms são [estáveis desde o Angular 22](https://angular.dev/events/v22). A metade do agente não. O WebMCP é experimental, um [draft de Community Group do W3C](https://webmachinelearning.github.io/webmcp/), e a doc avisa que as APIs podem mudar fora de major versions. O motivo mais profundo é que o Angular não valida que as entradas do agente batem com o schema inferido; você ainda valida dentro do submit para qualquer coisa que importe. Então é uma camada experimental agora, não duas: eu [adotaria Signal Forms sozinhos](/angular/signal-forms-not-my-default-yet/) antes de confiar na camada de agente em cima num fluxo de receita.

## Artefato reaproveitável: Checklist de prontidão para form como tool

- Dê a todo campo do modelo um valor inicial concreto (`''`, `0`, `false`), nunca `null` ou `undefined`.
- Semeie todo array com pelo menos um elemento para o Angular conseguir inferir o formato do item.
- Não conte com validadores assíncronos para barrar o agente; eles não rodam durante o submit do agente.
- Valide as entradas dentro da ação de submit para qualquer coisa que importe; o schema inferido não é imposto.
- Mantenha os primeiros alvos em forms internos ou de admin que um agente conduz, atrás de uma flag.
- Trate a tool como experimental e recheque a API a cada minor do Angular, não só nos majors.

## Perguntas frequentes

### Como um Signal Form vira uma tool de agente de IA?

Adicione o `provideExperimentalWebMcpForms()` aos seus providers e passe a opção `experimentalWebMcpTool` para o `form()`. O Angular infere o JSON schema da tool a partir dos valores iniciais do modelo e conecta a validação e o submit do form, então o agente enxerga os erros de campo e se corrige. Fonte: [next.angular.dev/ai/webmcp](https://next.angular.dev/ai/webmcp).

### Por que um campo não pode ser null no modelo?

O Angular infere o schema a partir dos valores iniciais do modelo, e não dá para inferir um tipo a partir de `null` ou `undefined`. Dê a cada campo um valor padrão concreto como `''`, `0` ou `false`, e semeie arrays com pelo menos um elemento para o formato do item ser conhecido.

### A validação do form protege a chamada do agente?

A validação síncrona protege. O agente enxerga os mesmos erros de campo que uma pessoa veria e consegue se corrigir antes de enviar. Validadores assíncronos não rodam durante o submit do agente, e o Angular não impõe o schema inferido, então valide as entradas dentro da ação de submit para qualquer coisa que importe.

### Dá para colocar isso em produção para usuários?

Eu esperaria, mas por um motivo mais estreito que antes. Signal Forms são estáveis no Angular 22, então a metade dos forms está resolvida; o WebMCP é a parte que ainda é experimental, com a doc avisando que as APIs podem mudar fora de major versions. Eu usaria em forms internos ou de admin atrás de uma flag e deixaria fora de envios voltados ao usuário ou regulados por enquanto.

## Fontes consultadas

- https://next.angular.dev/ai/webmcp
- https://angular.dev/guide/forms/signals/overview
- https://webmachinelearning.github.io/webmcp/
- https://next.angular.dev/api/core/provideExperimentalWebMcpTools
- https://angular.dev/reference/releases

## Leia também

- [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/)
- [Segurança de WebMCP no Angular: o agente que chama suas tools pode ser sequestrado](https://andreramos.dev/pt/angular/web-mcp-security-angular/)