Edição em Markdown

AI-translated from English; not yet reviewed by a fluent editor.

# Verifique uma ação do Agent-Native no chat e em uma página React

> Chame a ação hello do modelo Chat pelo chat do agente e por uma rota React, altere um valor de retorno e compare os resultados documentados verificando a evidência da chamada da ferramenta.

By BIG CHANGE Editorial

Published: 2026-10-19T10:08:15.758Z
Updated: 2026-10-19T10:08:15.758Z
Canonical: https://bigchange.ai/blog/agent-native-chat-react-action-parity-guide

![Conceptual charcoal illustration of one laptop showing two blank side-by-side work areas: conversation shapes on the left and a plain input and output area on the right.](https://bigchange.ai/api/media/file/agent-native-chat-react-comparison-hero-v1.png)
AI-generated conceptual illustration by BIG CHANGE; no actual product interface, action invocation or test result is depicted.

O modelo Chat do Agent-Native inclui uma ação `hello` que o agente pode chamar. Um desenvolvedor TypeScript pode adicionar uma pequena rota React que chame a mesma ação, alterar um valor de retorno e comparar os resultados. Este guia segue o [exemplo documentado do Agent-Native](https://www.agent-native.com/docs/); o BIG CHANGE examinou a documentação e o código do modelo, mas não executou o aplicativo.

## A grande mudança

- **O que muda:** uma ação pode fornecer a mesma operação tipada a uma ferramenta do agente e a uma consulta React. Neste exemplo, o código da saudação fica em um único arquivo.
- **Por que importa:** o desenvolvedor pode verificar se os dois chamadores recebem o mesmo resultado após uma mudança no código. Isso reduz a possibilidade de manter lógicas de saudação separadas para o chat e a página; não comprova que compartilhem o estado salvo do aplicativo.
- **O que verificar:** compare a chamada real da ação e o valor retornado quando a interface do chat os mostrar. Uma frase plausível do modelo, sozinha, não prova que ele chamou `hello`. Antes de usar esse padrão em operações importantes, avalie separadamente autorização, validação e gravações de estado.

## Configure o modelo Chat documentado

Você precisa de Node.js 22.22 ou posterior, `pnpm`, um editor de código e uma chave OpenAI API para a chamada do chat. A interface pode ser configurada antes da conexão com um modelo. O [pacote core examinado](https://github.com/BuilderIO/agent-native/blob/8e8419361fb415682cdf0e0e68538671dbb6aed3/packages/core/package.json) e o registro npm indicavam a versão `0.209.2` em 18 de outubro de 2026. O comando oficial de criação usa o alvo variável `@latest`; confira novamente a versão antes de seguir o guia.

1. Em um diretório novo, crie e inicie um aplicativo Chat independente:

```bash
   npx --yes @agent-native/core@latest create my-app --standalone --template chat
   cd my-app
   corepack enable
   pnpm install
   pnpm dev
```

   Abra a URL local exibida por `pnpm dev` e escolha **Continue as local dev**. O número da porta pode aumentar se a 8080 estiver ocupada. O aplicativo gerado inclui `actions/hello.ts`.

2. Conecte o agente com **Custom keys** e sua chave OpenAI API; depois selecione um modelo disponível em Settings. O [guia de variáveis de ambiente](https://www.agent-native.com/docs/environment-variables/) diz que Custom keys armazena credenciais de escopo delimitado no armazenamento criptografado do aplicativo, apoiado em banco de dados. Não coloque chaves no controle de versão nem em variáveis `VITE_` expostas ao navegador. As requisições usam a conta do provedor do dono da chave; confira preços atuais e [controles de dados](https://developers.openai.com/api/docs/guides/your-data) antes de enviar conteúdo sensível. Não medimos custo por tarefa nem comportamento de retenção.
3. No chat Get started, peça: `Call the hello action for Alex.` O [guia inicial](https://www.agent-native.com/docs/) mostra `Hello, Alex!` como resposta esperada. Se a interface exibir detalhes de ferramentas, confirme a chamada de `hello` com `name: "Alex"` e o retorno dessa mensagem. Uma frase correspondente sem evidência da chamada é inconclusiva.
4. Examine `actions/hello.ts`. O [modelo Chat fixado nesta revisão](https://github.com/BuilderIO/agent-native/blob/8e8419361fb415682cdf0e0e68538671dbb6aed3/templates/chat/actions/hello.ts) define uma entrada Zod `name`, uma ação GET e `mcpTool: true`. Preserve essas propriedades. Crie `app/routes/hello.tsx` com esta pequena página:

```typescript
   import { useActionQuery } from "@agent-native/core/client/hooks";
   import { useState } from "react";

   export default function HelloRoute() {
     const [name, setName] = useState("Alex");
     const { data } = useActionQuery("hello", { name });

     return (
       <main>
         <label htmlFor="greeting-name">Name</label>
         <input
           id="greeting-name"
           value={name}
           onChange={(event) => setName(event.target.value)}
         />
         <p>{data?.message}</p>
       </main>
     );
   }
```

   Reinicie `pnpm dev` para descobrir a rota e acrescente `/hello` à URL local exibida. Com `Alex` no campo, o resultado documentado é `Hello, Alex!`.

5. Na função `run` existente de `actions/hello.ts`, substitua somente a instrução de retorno:

```typescript
   return { message: `Welcome, ${name}.` };
```

   Atualize `/hello` e peça ao chat que chame `hello` para Alex novamente. A expectativa documentada é `Welcome, Alex.` nos dois lugares. Compare a mensagem da página com o resultado da ação no chat, incluindo detalhes da ferramenta quando disponíveis. A página mantém a entrada no estado React; essa ação de saudação não lê nem grava um registro compartilhado.

| Verificação | Antes de editar o retorno | Depois de editar o retorno |
| --- | --- | --- |
| `/hello` com `Alex` | `Hello, Alex!` | `Welcome, Alex.` |
| Resultado da ação do chat para `name: "Alex"` | `Hello, Alex!` | `Welcome, Alex.` |

Esses são os valores esperados na documentação. Anote os valores que você vê e os detalhes de chamada disponíveis antes de considerar o experimento concluído.

Se faltar `pnpm`, execute `corepack enable` no aplicativo gerado. Para erros de dependências pares, o guia oficial sugere `npx clear-npx-cache` antes de tentar de novo. Se o chat mostrar **Connect AI**, termine a configuração do provedor antes de diagnosticar a ação. Se `/hello` não aparecer, reinicie o servidor de desenvolvimento depois de criar a rota. São etapas de recuperação documentadas, não resultados observados por nós.

## Fontes e leituras adicionais

- [O guia inicial do Agent-Native](https://www.agent-native.com/docs/) documenta a criação, a instrução ao agente, o hook React, as respostas esperadas e a recuperação. Seu trecho da ação omite uma propriedade presente no modelo fixado; edite a ação gerada no próprio arquivo.
- [A ação Chat `hello` na revisão fixada](https://github.com/BuilderIO/agent-native/blob/8e8419361fb415682cdf0e0e68538671dbb6aed3/templates/chat/actions/hello.ts) estabelece as propriedades do código, incluindo `mcpTool: true`, no commit `8e8419361fb415682cdf0e0e68538671dbb6aed3`. Esse retrato não comprova o que uma criação futura instalará.
- [Variáveis de ambiente](https://www.agent-native.com/docs/environment-variables/) explica o escopo das chaves, a seleção de modelo e o limite público de `VITE_`. Consulte separadamente os termos do provedor; este guia não examinou uma requisição real do chat.

## Sources

- [Guia inicial do Agent-Native](https://www.agent-native.com/docs/) — O [guia inicial do Agent-Native](https://www.agent-native.com/docs/) documenta a criação, a instrução ao agente, o hook React, as respostas esperadas e a recuperação. Seu trecho da ação omite uma propriedade presente no modelo fixado; edite a ação gerada no próprio arquivo.
- [Ação Chat hello na revisão fixada](https://github.com/BuilderIO/agent-native/blob/8e8419361fb415682cdf0e0e68538671dbb6aed3/templates/chat/actions/hello.ts) — A [ação Chat `hello` na revisão fixada](https://github.com/BuilderIO/agent-native/blob/8e8419361fb415682cdf0e0e68538671dbb6aed3/templates/chat/actions/hello.ts) estabelece as propriedades do código, incluindo `mcpTool: true`, no commit `8e8419361fb415682cdf0e0e68538671dbb6aed3`. Esse retrato não comprova o que uma criação futura instalará.
- [Pacote core na revisão fixada](https://github.com/BuilderIO/agent-native/blob/8e8419361fb415682cdf0e0e68538671dbb6aed3/packages/core/package.json) — Versão do pacote, requisito de Node e licença.
- [Variáveis de ambiente do Agent-Native](https://www.agent-native.com/docs/environment-variables/) — [Variáveis de ambiente](https://www.agent-native.com/docs/environment-variables/) explica o escopo das chaves, a seleção de modelo e o limite público de `VITE_`. Consulte separadamente os termos do provedor; este guia não examinou uma requisição real do chat.
- [Controles de dados da OpenAI API](https://developers.openai.com/api/docs/guides/your-data) — Referência sobre o tratamento de dados pelo provedor; nenhum tráfego específico da tarefa foi observado.