Markdown izdanje

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

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

> Pozovite hello akciju šablona Chat iz ćaskanja agenta i React rute, promenite jednu povratnu vrednost i uporedite dokumentovane rezultate uz proveru dokaza o pozivu alata.

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.

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](https://www.agent-native.com/docs/); 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](https://github.com/BuilderIO/agent-native/blob/8e8419361fb415682cdf0e0e68538671dbb6aed3/packages/core/package.json) 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:

```bash
   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](https://www.agent-native.com/docs/environment-variables/), 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](https://developers.openai.com/api/docs/guides/your-data). 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č](https://www.agent-native.com/docs/) 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](https://github.com/BuilderIO/agent-native/blob/8e8419361fb415682cdf0e0e68538671dbb6aed3/templates/chat/actions/hello.ts) definiše Zod ulaz `name`, GET akciju i `mcpTool: true`. Zadržite ta svojstva. Napravite `app/routes/hello.tsx` sa ovom malom stranicom:

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

   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:

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

| Provera | Pre izmene povratne vrednosti | Posle izmene povratne vrednosti |
| --- | --- | --- |
| `/hello` sa `Alex` | `Hello, Alex!` | `Welcome, Alex.` |
| Rezultat akcije u ćaskanju za `name: "Alex"` | `Hello, Alex!` | `Welcome, Alex.` |

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](https://www.agent-native.com/docs/) 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](https://github.com/BuilderIO/agent-native/blob/8e8419361fb415682cdf0e0e68538671dbb6aed3/templates/chat/actions/hello.ts) 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](https://www.agent-native.com/docs/environment-variables/) objašnjavaju opseg ključeva, izbor modela i javnu granicu `VITE_`. Zasebno proverite uslove pružaoca usluge; vodič nije ispitivao stvarni zahtev ćaskanja.

## Sources

- [Početni vodič Agent-Native](https://www.agent-native.com/docs/) — [Početni vodič Agent-Native](https://www.agent-native.com/docs/) 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](https://github.com/BuilderIO/agent-native/blob/8e8419361fb415682cdf0e0e68538671dbb6aed3/templates/chat/actions/hello.ts) — [Chat akcija `hello` na fiksiranoj reviziji](https://github.com/BuilderIO/agent-native/blob/8e8419361fb415682cdf0e0e68538671dbb6aed3/templates/chat/actions/hello.ts) potvrđuje svojstva koda, uključujući `mcpTool: true`, na commit-u `8e8419361fb415682cdf0e0e68538671dbb6aed3`. Taj snimak ne dokazuje šta će instalirati kasnije generisanje.
- [Paket core na fiksiranoj reviziji](https://github.com/BuilderIO/agent-native/blob/8e8419361fb415682cdf0e0e68538671dbb6aed3/packages/core/package.json) — Verzija paketa, zahtev za Node i licenca.
- [Promenljive okruženja Agent-Native](https://www.agent-native.com/docs/environment-variables/) — [Promenljive okruženja](https://www.agent-native.com/docs/environment-variables/) objašnjavaju opseg ključeva, izbor modela i javnu granicu `VITE_`. Zasebno proverite uslove pružaoca usluge; vodič nije ispitivao stvarni zahtev ćaskanja.
- [Kontrole podataka OpenAI API](https://developers.openai.com/api/docs/guides/your-data) — Referenca o obradi podataka kod pružaoca usluge; saobraćaj ovog zadatka nije posmatran.