Agent-Native шаблон Chat садржи акцију hello коју агент може да позове. TypeScript програмер може да дода малу React руту која позива исту акцију, промени једну повратну вредност и упореди два резултата. Овај водич прати документовани пример Agent-Native-а; BIG CHANGE је прегледао документацију и изворни код шаблона, али није покренуо апликацију.

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

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

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

Потребни су Node.js 22.22 или новији, pnpm, уређивач кода и OpenAI API кључ за позив из ћаскања. Интерфејс можете подесити пре повезивања модела. Прегледани пакет core и npm регистар показивали су верзију 0.209.2 18. октобра 2026. Званична команда за генерисање користи променљиви @latest; поново проверите верзију пре рада.

  1. У новом директоријуму направите и покрените самосталну Chat апликацију:
Terminal
   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.

  1. Повежите агента преко Custom keys и свог OpenAI API кључа, па у Settings изаберите доступан модел. Према водичу за променљиве окружења, Custom keys чува акредитиве ограниченог опсега у шифрованом складишту апликације заснованом на бази података. Не стављајте кључеве у контролу верзија нити у VITE_ променљиве доступне прегледачу. Захтеви користе налог власника кључа код пружаоца услуге; пре слања осетљивих података проверите актуелне цене и контроле података. Овде нису мерени трошак задатка ни понашање задржавања података.
  2. У ћаскању Get started затражите: Call the hello action for Alex. Документ Почетни водич наводи Hello, Alex! као очекивани одговор. Ако интерфејс приказује детаље алата, потврдите позив hello са name: "Alex" и враћену поруку. Подударна реченица без доказа о позиву није довољна за закључак.
  3. Прегледајте actions/hello.ts. Шаблон Chat на фиксираној ревизији дефинише 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!.

  1. У постојећој функцији 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 описује генерисање, упит агенту, React hook, очекиване одговоре и опоравак. У изводу акције недостаје својство присутно у фиксираном шаблону, па измените генерисану акцију на месту.
  • Chat акција hello на фиксираној ревизији потврђује својства кода, укључујући mcpTool: true, на commit-у 8e8419361fb415682cdf0e0e68538671dbb6aed3. Тај снимак не доказује шта ће инсталирати касније генерисање.
  • Променљиве окружења објашњавају опсег кључева, избор модела и јавну границу VITE_. Засебно проверите услове пружаоца услуге; водич није испитивао стварни захтев ћаскања.