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

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

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

   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:

   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.

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