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

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; 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 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:

   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 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 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 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 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:

   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:

   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.

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 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 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 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.