Proverite jednu Agent-Native akciju kroz ćaskanje i React stranicu

Agent-Native šablon Chat sadrži akciju hello koju agent može da pozove. TypeScript programer može da doda malu React rutu koja poziva istu akciju, promeni jednu povratnu vrednost i uporedi dva rezultata. Ovaj vodič prati dokumentovani primer Agent-Native-a; BIG CHANGE je pregledao dokumentaciju i izvorni kod šablona, ali nije pokrenuo aplikaciju.

Velika promena

• Šta se menja: jedna akcija može da obezbedi istu tipiziranu operaciju alatu agenta i React upitu. U ovom primeru kod pozdrava nalazi se u jednoj datoteci.
• Zašto je važno: programer može da proveri da li oba pozivaoca dobijaju isti rezultat posle izmene koda. To smanjuje mogućnost održavanja zasebne logike pozdrava za ćaskanje i stranicu; ne dokazuje da pozivaoci dele sačuvano stanje aplikacije.
• Šta proveriti: uporedite stvarni poziv akcije i povratnu vrednost kada ih interfejs ćaskanja prikazuje. Uverljiva rečenica modela sama ne dokazuje da je pozvao hello. Pre primene ovog obrasca na važne operacije, zasebno procenite ovlašćenja, validaciju i upise stanja.

Podesite dokumentovani šablon Chat

Potrebni su Node.js 22.22 ili noviji, pnpm, uređivač koda i OpenAI API ključ za poziv iz ćaskanja. Interfejs možete podesiti pre povezivanja modela. Pregledani paket core i npm registar pokazivali su verziju 0.209.2 18. oktobra 2026. Zvanična komanda za generisanje koristi promenljivi @latest; ponovo proverite verziju pre rada.

1. U novom direktorijumu napravite i pokrenite samostalnu Chat aplikaciju:

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

Otvorite lokalni URL koji ispiše pnpm dev i izaberite Continue as local dev. Ako je 8080 zauzet, broj porta može da se poveća. Generisana aplikacija sadrži actions/hello.ts.

2. Povežite agenta preko Custom keys i svog OpenAI API ključa, pa u Settings izaberite dostupan model. Prema vodiču za promenljive okruženja, Custom keys čuva akreditive ograničenog opsega u šifrovanom skladištu aplikacije zasnovanom na bazi podataka. Ne stavljajte ključeve u kontrolu verzija niti u VITE_ promenljive dostupne pregledaču. Zahtevi koriste nalog vlasnika ključa kod pružaoca usluge; pre slanja osetljivih podataka proverite aktuelne cene i kontrole podataka. Ovde nisu mereni trošak zadatka ni ponašanje zadržavanja podataka.
3. U ćaskanju Get started zatražite: Call the hello action for Alex. Dokument Početni vodič navodi Hello, Alex! kao očekivani odgovor. Ako interfejs prikazuje detalje alata, potvrdite poziv hello sa name: "Alex" i vraćenu poruku. Podudarna rečenica bez dokaza o pozivu nije dovoljna za zaključak.
4. Pregledajte actions/hello.ts. Šablon Chat na fiksiranoj reviziji definiše Zod ulaz name, GET akciju i mcpTool: true. Zadržite ta svojstva. Napravite app/routes/hello.tsx sa ovom malom stranicom:

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

Ponovo pokrenite pnpm dev da bi otkrio rutu, a zatim dodajte /hello ispisanom lokalnom URL-u. Za unos Alex, dokumentovani rezultat je Hello, Alex!.

5. U postojećoj funkciji run u actions/hello.ts zamenite samo naredbu za vraćanje vrednosti:

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

Osvežite /hello i ponovo zatražite od ćaskanja poziv hello za Alex. Dokumentovano očekivanje je Welcome, Alex. na oba mesta. Uporedite poruku stranice sa rezultatom akcije u ćaskanju, uključujući detalje alata ako postoje. Stranica čuva unos u React stanju; ova akcija pozdrava ne čita niti upisuje zajednički zapis.

Ovo su očekivane vrednosti iz dokumentacije. Zabeležite sopstvene prikazane vrednosti i dostupne detalje poziva pre nego što eksperiment smatrate završenim.

Ako nema pnpm, pokrenite corepack enable u generisanoj aplikaciji. Za greške peer zavisnosti, zvanični vodič predlaže npx clear-npx-cache pre novog pokušaja. Ako ćaskanje prikazuje Connect AI, dovršite podešavanje pružaoca usluge pre dijagnostike akcije. Ako nema /hello, ponovo pokrenite razvojni server posle pravljenja rute. To su dokumentovani koraci oporavka, a ne rezultati koje smo posmatrali.

Izvori i dodatna literatura

• Početni vodič Agent-Native opisuje generisanje, upit agentu, React hook, očekivane odgovore i oporavak. U izvodu akcije nedostaje svojstvo prisutno u fiksiranom šablonu, pa izmenite generisanu akciju na mestu.
• Chat akcija hello na fiksiranoj reviziji potvrđuje svojstva koda, uključujući mcpTool: true, na commit-u 8e8419361fb415682cdf0e0e68538671dbb6aed3. Taj snimak ne dokazuje šta će instalirati kasnije generisanje.
• Promenljive okruženja objašnjavaju opseg ključeva, izbor modela i javnu granicu VITE_. Zasebno proverite uslove pružaoca usluge; vodič nije ispitivao stvarni zahtev ćaskanja.