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

# Проверите једну Agent-Native акцију кроз ћаскање и React страницу

> Позовите hello акцију шаблона Chat из ћаскања агента и React руте, промените једну повратну вредност и упоредите документоване резултате уз проверу доказа о позиву алата.

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 шаблон Chat садржи акцију `hello` коју агент може да позове. TypeScript програмер може да дода малу React руту која позива исту акцију, промени једну повратну вредност и упореди два резултата. Овај водич прати [документовани пример Agent-Native-а](https://www.agent-native.com/docs/); BIG CHANGE је прегледао документацију и изворни код шаблона, али није покренуо апликацију.

## Велика промена

- **Шта се мења:** једна акција може да обезбеди исту типизирану операцију алату агента и React упиту. У овом примеру код поздрава налази се у једној датотеци.
- **Зашто је важно:** програмер може да провери да ли оба позиваоца добијају исти резултат после измене кода. То смањује могућност одржавања засебне логике поздрава за ћаскање и страницу; не доказује да позиваоци деле сачувано стање апликације.
- **Шта проверити:** упоредите стварни позив акције и повратну вредност када их интерфејс ћаскања приказује. Уверљива реченица модела сама не доказује да је позвао `hello`. Пре примене овог обрасца на важне операције, засебно процените овлашћења, валидацију и уписе стања.

## Подесите документовани шаблон Chat

Потребни су Node.js 22.22 или новији, `pnpm`, уређивач кода и OpenAI API кључ за позив из ћаскања. Интерфејс можете подесити пре повезивања модела. Прегледани [пакет core](https://github.com/BuilderIO/agent-native/blob/8e8419361fb415682cdf0e0e68538671dbb6aed3/packages/core/package.json) и npm регистар показивали су верзију `0.209.2` 18. октобра 2026. Званична команда за генерисање користи променљиви `@latest`; поново проверите верзију пре рада.

1. У новом директоријуму направите и покрените самосталну Chat апликацију:

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

   Отворите локални URL који испише `pnpm dev` и изаберите **Continue as local dev**. Ако је 8080 заузет, број порта може да се повећа. Генерисана апликација садржи `actions/hello.ts`.

2. Повежите агента преко **Custom keys** и свог OpenAI API кључа, па у Settings изаберите доступан модел. Према [водичу за променљиве окружења](https://www.agent-native.com/docs/environment-variables/), Custom keys чува акредитиве ограниченог опсега у шифрованом складишту апликације заснованом на бази података. Не стављајте кључеве у контролу верзија нити у `VITE_` променљиве доступне прегледачу. Захтеви користе налог власника кључа код пружаоца услуге; пре слања осетљивих података проверите актуелне цене и [контроле података](https://developers.openai.com/api/docs/guides/your-data). Овде нису мерени трошак задатка ни понашање задржавања података.
3. У ћаскању Get started затражите: `Call the hello action for Alex.` Документ [Почетни водич](https://www.agent-native.com/docs/) наводи `Hello, Alex!` као очекивани одговор. Ако интерфејс приказује детаље алата, потврдите позив `hello` са `name: "Alex"` и враћену поруку. Подударна реченица без доказа о позиву није довољна за закључак.
4. Прегледајте `actions/hello.ts`. [Шаблон Chat на фиксираној ревизији](https://github.com/BuilderIO/agent-native/blob/8e8419361fb415682cdf0e0e68538671dbb6aed3/templates/chat/actions/hello.ts) дефинише Zod улаз `name`, GET акцију и `mcpTool: true`. Задржите та својства. Направите `app/routes/hello.tsx` са овом малом страницом:

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

   Поново покрените `pnpm dev` да би открио руту, а затим додајте `/hello` исписаном локалном URL-у. За унос `Alex`, документовани резултат је `Hello, Alex!`.

5. У постојећој функцији `run` у `actions/hello.ts` замените само наредбу за враћање вредности:

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

   Освежите `/hello` и поново затражите од ћаскања позив `hello` за Alex. Документовано очекивање је `Welcome, Alex.` на оба места. Упоредите поруку странице са резултатом акције у ћаскању, укључујући детаље алата ако постоје. Страница чува унос у React стању; ова акција поздрава не чита нити уписује заједнички запис.

| Провера | Пре измене повратне вредности | После измене повратне вредности |
| --- | --- | --- |
| `/hello` са `Alex` | `Hello, Alex!` | `Welcome, Alex.` |
| Резултат акције у ћаскању за `name: "Alex"` | `Hello, Alex!` | `Welcome, Alex.` |

Ово су очекиване вредности из документације. Забележите сопствене приказане вредности и доступне детаље позива пре него што експеримент сматрате завршеним.

Ако нема `pnpm`, покрените `corepack enable` у генерисаној апликацији. За грешке peer зависности, званични водич предлаже `npx clear-npx-cache` пре новог покушаја. Ако ћаскање приказује **Connect AI**, довршите подешавање пружаоца услуге пре дијагностике акције. Ако нема `/hello`, поново покрените развојни сервер после прављења руте. То су документовани кораци опоравка, а не резултати које смо посматрали.

## Извори и додатна литература

- [Почетни водич Agent-Native](https://www.agent-native.com/docs/) описује генерисање, упит агенту, React hook, очекиване одговоре и опоравак. У изводу акције недостаје својство присутно у фиксираном шаблону, па измените генерисану акцију на месту.
- [Chat акција `hello` на фиксираној ревизији](https://github.com/BuilderIO/agent-native/blob/8e8419361fb415682cdf0e0e68538671dbb6aed3/templates/chat/actions/hello.ts) потврђује својства кода, укључујући `mcpTool: true`, на commit-у `8e8419361fb415682cdf0e0e68538671dbb6aed3`. Тај снимак не доказује шта ће инсталирати касније генерисање.
- [Променљиве окружења](https://www.agent-native.com/docs/environment-variables/) објашњавају опсег кључева, избор модела и јавну границу `VITE_`. Засебно проверите услове пружаоца услуге; водич није испитивао стварни захтев ћаскања.

## Sources

- [Почетни водич Agent-Native](https://www.agent-native.com/docs/) — [Почетни водич Agent-Native](https://www.agent-native.com/docs/) описује генерисање, упит агенту, React hook, очекиване одговоре и опоравак. У изводу акције недостаје својство присутно у фиксираном шаблону, па измените генерисану акцију на месту.
- [Chat акција hello на фиксираној ревизији](https://github.com/BuilderIO/agent-native/blob/8e8419361fb415682cdf0e0e68538671dbb6aed3/templates/chat/actions/hello.ts) — [Chat акција `hello` на фиксираној ревизији](https://github.com/BuilderIO/agent-native/blob/8e8419361fb415682cdf0e0e68538671dbb6aed3/templates/chat/actions/hello.ts) потврђује својства кода, укључујући `mcpTool: true`, на commit-у `8e8419361fb415682cdf0e0e68538671dbb6aed3`. Тај снимак не доказује шта ће инсталирати касније генерисање.
- [Пакет core на фиксираној ревизији](https://github.com/BuilderIO/agent-native/blob/8e8419361fb415682cdf0e0e68538671dbb6aed3/packages/core/package.json) — Верзија пакета, захтев за Node и лиценца.
- [Променљиве окружења Agent-Native](https://www.agent-native.com/docs/environment-variables/) — [Променљиве окружења](https://www.agent-native.com/docs/environment-variables/) објашњавају опсег кључева, избор модела и јавну границу `VITE_`. Засебно проверите услове пружаоца услуге; водич није испитивао стварни захтев ћаскања.
- [Контроле података OpenAI API](https://developers.openai.com/api/docs/guides/your-data) — Референца о обради података код пружаоца услуге; саобраћај овог задатка није посматран.