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

# Suriin ang isang Agent-Native action sa chat at React page

> Tawagin ang hello action ng Chat template mula sa agent chat at React route, baguhin ang isang return value, at ihambing ang dokumentadong resulta habang naghahanap ng ebidensiya ng tool call.

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.

May `hello` action ang Chat template ng Agent-Native na puwedeng tawagin ng agent. Maaaring magdagdag ang TypeScript developer ng maliit na React route na tumatawag sa parehong action, magbago ng isang return value, at ihambing ang dalawang resulta. Sinusunod ng gabay na ito ang [dokumentadong halimbawa ng Agent-Native](https://www.agent-native.com/docs/); sinuri ng BIG CHANGE ang dokumentasyon at source ng template ngunit hindi pinatakbo ang app.

## Ang malaking pagbabago

- **Ano ang nagbago:** maaaring magbigay ang isang action ng iisang typed operation sa agent tool at React query. Sa halimbawang ito, nasa iisang file ang code ng pagbati.
- **Bakit mahalaga:** masusuri ng developer kung pareho ang natatanggap ng dalawang tumatawag matapos baguhin ang code. Nababawasan nito ang posibilidad na magpanatili ng magkahiwalay na lohika ng pagbati para sa chat at page; hindi nito pinatutunayang pareho ang kanilang naka-save na application state.
- **Ano ang susuriin:** ihambing ang aktuwal na action call at return value kapag ipinapakita ng chat interface ang mga ito. Hindi sapat ang kapani-paniwalang pangungusap ng model para patunayang tinawag nito ang `hello`. Bago gamitin ang paraang ito sa mahahalagang operasyon, hiwalay na suriin ang awtorisasyon, validation at pagsulat ng state.

## Ihanda ang dokumentadong Chat template

Kailangan ang Node.js 22.22 o mas bago, `pnpm`, code editor at OpenAI API key para sa chat call. Puwedeng ihanda ang UI bago ikonekta ang model. Ang sinuring [core package](https://github.com/BuilderIO/agent-native/blob/8e8419361fb415682cdf0e0e68538671dbb6aed3/packages/core/package.json) at npm registry ay nagpakita ng bersiyong `0.209.2` noong Oktubre 18, 2026. Gumagamit ang opisyal na scaffold command ng nagbabagong `@latest`; muling suriin ang bersiyon bago sundan ang gabay.

1. Sa bagong directory, gumawa at magpatakbo ng standalone na Chat app:

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

   Buksan ang lokal na URL na inilabas ng `pnpm dev` at piliin ang **Continue as local dev**. Maaaring tumaas ang port number kung gamit na ang 8080. Kasama sa nabuong app ang `actions/hello.ts`.

2. Ikonekta ang chat agent gamit ang **Custom keys** at iyong OpenAI API key, saka pumili ng available na model sa Settings. Ayon sa [gabay sa environment variables](https://www.agent-native.com/docs/environment-variables/), iniimbak ng Custom keys ang mga credential na may takdang scope sa encrypted, database-backed na imbakan ng app. Huwag ilagay ang key sa source control o sa `VITE_` variables na nakikita ng browser. Ginagamit ng model requests ang provider account ng may-ari ng key; suriin ang kasalukuyang presyo at [data controls](https://developers.openai.com/api/docs/guides/your-data) nito bago magpadala ng sensitibong materyal. Walang sinukat na gastos kada task o aktuwal na data-retention behavior dito.
3. Sa Get started chat, itanong: `Call the hello action for Alex.` Ipinapakita ng [getting-started guide](https://www.agent-native.com/docs/) ang `Hello, Alex!` bilang inaasahang sagot. Kung may tool details sa interface, tiyaking tinawag ang `hello` gamit ang `name: "Alex"` at ibinalik ang mensaheng iyon. Hindi sapat na konklusyon ang katugmang pangungusap kung walang ebidensiya ng invocation.
4. Suriin ang `actions/hello.ts`. Tinutukoy ng [Chat template sa nakapirming revision](https://github.com/BuilderIO/agent-native/blob/8e8419361fb415682cdf0e0e68538671dbb6aed3/templates/chat/actions/hello.ts) ang Zod `name` input, GET action at `mcpTool: true`. Panatilihin ang mga property na iyon. Gumawa ng `app/routes/hello.tsx` gamit ang maliit na page na ito:

```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>
     );
   }
```

   I-restart ang `pnpm dev` para makita ang route, saka idagdag ang `/hello` sa inilabas na lokal na URL. Kapag `Alex` ang input, `Hello, Alex!` ang dokumentadong resulta.

5. Sa kasalukuyang `run` function ng `actions/hello.ts`, return statement lamang ang palitan:

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

   I-refresh ang `/hello` at hilinging tawagin muli ng chat ang `hello` para kay Alex. `Welcome, Alex.` sa parehong lugar ang inaasahan sa dokumentasyon. Ihambing ang mensahe sa page at action result sa chat, kasama ang tool details kung mayroon. Iniimbak ng page ang input sa React state; hindi nagbabasa o nagsusulat ng shared record ang action na ito.

| Susuriin | Bago baguhin ang return | Pagkatapos baguhin ang return |
| --- | --- | --- |
| `/hello` na may `Alex` | `Hello, Alex!` | `Welcome, Alex.` |
| Chat action result para sa `name: "Alex"` | `Hello, Alex!` | `Welcome, Alex.` |

Mga inaasahang value sa dokumentasyon ang mga ito. Itala ang sarili mong nakitang value at available na invocation details bago ituring na kumpleto ang eksperimento.

Kung walang `pnpm`, patakbuhin ang `corepack enable` sa nabuong app. Para sa peer-dependency errors, iminumungkahi ng opisyal na gabay ang `npx clear-npx-cache` bago subukang muli. Kung **Connect AI** ang nasa chat, tapusin muna ang provider setup bago siyasatin ang action. Kung walang `/hello`, i-restart ang development server matapos likhain ang route. Dokumentadong recovery steps ang mga ito, hindi mga resultang naobserbahan namin.

## Mga sanggunian at karagdagang babasahin

- [Inilalarawan ng pagsisimula sa Agent-Native](https://www.agent-native.com/docs/) ang scaffold, prompt ng agent, React hook, inaasahang sagot at recovery steps. May property sa nakapirming template na wala sa action excerpt nito, kaya baguhin ang nabuong action sa mismong file.
- [Pinatutunayan ng Chat `hello` action sa nakapirming revision](https://github.com/BuilderIO/agent-native/blob/8e8419361fb415682cdf0e0e68538671dbb6aed3/templates/chat/actions/hello.ts) ang source properties, kasama ang `mcpTool: true`, sa commit `8e8419361fb415682cdf0e0e68538671dbb6aed3`. Hindi pinatutunayan ng snapshot na ito kung ano ang i-install ng susunod na scaffold.
- [Ipinapaliwanag ng environment variables](https://www.agent-native.com/docs/environment-variables/) ang key scope, model selection at pampublikong hangganan ng `VITE_`. Suriin nang hiwalay ang mga tuntunin ng provider; hindi siniyasat ng gabay na ito ang isang live chat request.

## Sources

- [Pagsisimula sa Agent-Native](https://www.agent-native.com/docs/) — Inilalarawan ng [pagsisimula sa Agent-Native](https://www.agent-native.com/docs/) ang scaffold, prompt ng agent, React hook, inaasahang sagot at recovery steps. May property sa nakapirming template na wala sa action excerpt nito, kaya baguhin ang nabuong action sa mismong file.
- [Chat hello action sa nakapirming revision](https://github.com/BuilderIO/agent-native/blob/8e8419361fb415682cdf0e0e68538671dbb6aed3/templates/chat/actions/hello.ts) — Pinatutunayan ng [Chat `hello` action sa nakapirming revision](https://github.com/BuilderIO/agent-native/blob/8e8419361fb415682cdf0e0e68538671dbb6aed3/templates/chat/actions/hello.ts) ang source properties, kasama ang `mcpTool: true`, sa commit `8e8419361fb415682cdf0e0e68538671dbb6aed3`. Hindi pinatutunayan ng snapshot na ito kung ano ang i-install ng susunod na scaffold.
- [Core package sa nakapirming revision](https://github.com/BuilderIO/agent-native/blob/8e8419361fb415682cdf0e0e68538671dbb6aed3/packages/core/package.json) — Bersiyon ng package, Node requirement at lisensiya.
- [Environment variables ng Agent-Native](https://www.agent-native.com/docs/environment-variables/) — Ipinapaliwanag ng [environment variables](https://www.agent-native.com/docs/environment-variables/) ang key scope, model selection at pampublikong hangganan ng `VITE_`. Suriin nang hiwalay ang mga tuntunin ng provider; hindi siniyasat ng gabay na ito ang isang live chat request.
- [Mga kontrol sa datos ng OpenAI API](https://developers.openai.com/api/docs/guides/your-data) — Sanggunian sa paghawak ng provider sa datos; walang naobserbahang trapiko para sa task na ito.