Markdown సంచిక

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

# చాట్, React పేజీ ద్వారా ఒకే Agent-Native action‌ను తనిఖీ చేయండి

> Chat టెంప్లేట్‌లోని hello action‌ను ఏజెంట్ చాట్, React route నుంచి కాల్ చేసి, ఒక return value మార్చి, tool call ఆధారాలతో పాటు డాక్యుమెంట్‌లోని ఫలితాలను పోల్చండి.

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` action ఉంటుంది. TypeScript డెవలపర్ అదే action‌ను కాల్ చేసే చిన్న React route జోడించి, ఒక return value మార్చి, రెండు ఫలితాలను పోల్చవచ్చు. ఈ గైడ్ [Agent-Native డాక్యుమెంట్‌లోని ఉదాహరణను](https://www.agent-native.com/docs/) అనుసరిస్తుంది; BIG CHANGE డాక్యుమెంటేషన్, టెంప్లేట్ సోర్స్‌ను పరిశీలించింది, కానీ యాప్‌ను నడపలేదు.

## పెద్ద మార్పు

- **ఏం మారుతుంది:** ఒక action ఏజెంట్ టూల్‌కు, React queryకి ఒకే typed operation‌ను అందించగలదు. ఈ ఉదాహరణలో పలకరింపు కోడ్ ఒకే ఫైల్‌లో ఉంటుంది.
- **ఎందుకు ముఖ్యం:** కోడ్ మారిన తర్వాత రెండు కాలర్లు ఒకే ఫలితం పొందుతున్నాయో డెవలపర్ తనిఖీ చేయవచ్చు. చాట్, పేజీ కోసం విడివిడిగా పలకరింపు లాజిక్ నిర్వహించే అవకాశం తగ్గుతుంది; అయితే అవి సేవ్ చేసిన application state‌ను పంచుకుంటున్నాయని ఇది నిరూపించదు.
- **ఏం చూడాలి:** చాట్ ఇంటర్‌ఫేస్ చూపిస్తే అసలు action call, return value‌ను పోల్చండి. మోడల్ ఇచ్చిన నమ్మదగిన వాక్యం ఒక్కటే `hello` కాల్ అయిందని నిరూపించదు. ముఖ్యమైన పనుల్లో ఈ నమూనా వాడే ముందు authorization, validation, state writes‌ను విడిగా అంచనా వేయండి.

## డాక్యుమెంట్‌లోని Chat టెంప్లేట్‌ను ఏర్పాటు చేయండి

Node.js 22.22 లేదా కొత్తది, `pnpm` , కోడ్ ఎడిటర్, చాట్ కాల్ కోసం OpenAI API key అవసరం. మోడల్‌ను కనెక్ట్ చేసే ముందే UI ఏర్పాటు చేయవచ్చు. పరిశీలించిన [core ప్యాకేజీ](https://github.com/BuilderIO/agent-native/blob/8e8419361fb415682cdf0e0e68538671dbb6aed3/packages/core/package.json), npm registryలో 2026 అక్టోబర్ 18న వెర్షన్ `0.209.2` ఉంది. అధికారిక scaffold command మారుతూ ఉండే `@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
```

   కమాండ్ `pnpm dev` చూపించే స్థానిక URL తెరిచి **Continue as local dev** ఎంచుకోండి. 8080 వాడుకలో ఉంటే port number పెరగవచ్చు. తయారైన యాప్‌లో `actions/hello.ts` ఉంటుంది.

2. కనెక్ట్ చేయడానికి **Custom keys**, మీ OpenAI API keyతో చాట్ ఏజెంట్‌ను కనెక్ట్ చేసి, Settingsలో అందుబాటులోని మోడల్‌ను ఎంచుకోండి. [Environment variables గైడ్](https://www.agent-native.com/docs/environment-variables/) ప్రకారం Custom keys పరిమిత scope గల credentials‌ను యాప్ యొక్క encrypted, database-backed storageలో ఉంచుతుంది. keyలను source controlలో లేదా బ్రౌజర్‌కు కనిపించే `VITE_` variablesలో పెట్టవద్దు. మోడల్ రిక్వెస్ట్‌లు key యజమాని provider account‌ను వాడతాయి; సున్నితమైన సమాచారం పంపే ముందు ప్రస్తుత ధరలు, [data controls](https://developers.openai.com/api/docs/guides/your-data) చూడండి. ఇక్కడ ప్రతి task ఖర్చు లేదా data retention ప్రవర్తనను కొలవలేదు.
3. Get started చాట్‌లో ఇలా అడగండి: `Call the hello action for Alex.` పత్రం [ప్రారంభ గైడ్](https://www.agent-native.com/docs/)లో ఆశించిన సమాధానం `Hello, Alex!` . ఇంటర్‌ఫేస్ tool details చూపిస్తే `hello` ను `name: "Alex"` తో కాల్ చేసి అదే సందేశం తిరిగివచ్చిందో నిర్ధారించండి. కాల్ ఆధారం లేకుండా సరిపోలే వాక్యం మాత్రమే నిర్ణయాత్మకం కాదు.
4. ఫైల్ `actions/hello.ts` పరిశీలించండి. [నిర్దిష్ట revisionలోని Chat టెంప్లేట్](https://github.com/BuilderIO/agent-native/blob/8e8419361fb415682cdf0e0e68538671dbb6aed3/templates/chat/actions/hello.ts) Zod `name` input, GET action, `mcpTool: true` ను నిర్వచిస్తుంది. ఆ properties ఉంచండి. ఈ చిన్న పేజీతో `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>
     );
   }
```

   కొత్త route‌ను గుర్తించేందుకు `pnpm dev` మళ్లీ ప్రారంభించి, చూపిన స్థానిక URLకు `/hello` జోడించండి. inputలో `Alex` ఉన్నప్పుడు డాక్యుమెంట్‌లోని ఫలితం `Hello, Alex!` .

5. ప్రస్తుత `run` function లో, అంటే `actions/hello.ts` లో ఉన్న దానిలో, return statement ను మాత్రమే మార్చండి:

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

   పేజీ `/hello` refresh చేసి, Alex కోసం `hello` ను మళ్లీ కాల్ చేయమని చాట్‌ను అడగండి. డాక్యుమెంట్ ప్రకారం రెండు చోట్లా `Welcome, Alex.` ఆశించబడుతుంది. పేజీలో కనిపించే సందేశాన్ని చాట్ action resultతో పోల్చండి; tool details ఉంటే వాటినీ చూడండి. పేజీ తన input‌ను React stateలో ఉంచుతుంది; ఈ పలకరింపు action shared record‌ను చదవదు, రాయదు.

| తనిఖీ | return మార్చే ముందు | return మార్చిన తర్వాత |
| --- | --- | --- |
| `/hello` లో ఇన్‌పుట్ `Alex` | `Hello, Alex!` | `Welcome, Alex.` |
| చాట్ action result, ఇన్‌పుట్ `name: "Alex"` | `Hello, Alex!` | `Welcome, Alex.` |

ఇవి డాక్యుమెంట్‌లోని ఆశించిన విలువలు. ప్రయోగం పూర్తయిందని భావించే ముందు మీకు కనిపించిన విలువలు, అందుబాటులోని call details నమోదు చేయండి.

కమాండ్ `pnpm` లేకపోతే తయారైన యాప్‌లో `corepack enable` నడపండి. peer-dependency errorsకు మళ్లీ ప్రయత్నించే ముందు `npx clear-npx-cache` ను అధికారిక గైడ్ సూచిస్తుంది. చాట్‌లో **Connect AI** కనిపిస్తే action సమస్య వెతికే ముందు provider setup పూర్తి చేయండి. `/hello` లేకపోతే route సృష్టించిన తర్వాత development server మళ్లీ ప్రారంభించండి. ఇవి డాక్యుమెంట్‌లోని recovery steps; మేము గమనించిన ఫలితాలు కావు.

## మూలాలు, మరింత చదవడానికి

- [Agent-Native ప్రారంభ గైడ్](https://www.agent-native.com/docs/) scaffold, agent prompt, React hook, ఆశించిన సమాధానాలు, recovery గురించి చెబుతుంది. దాని action ఉదాహరణలో నిర్దిష్ట టెంప్లేట్‌లోని ఒక property లేదు; అందువల్ల తయారైన action‌ను అదే ఫైల్‌లో సవరించండి.
- [నిర్దిష్ట revisionలోని Chat `hello` action](https://github.com/BuilderIO/agent-native/blob/8e8419361fb415682cdf0e0e68538671dbb6aed3/templates/chat/actions/hello.ts) ఇక్కడ `mcpTool: true` సహా source propertiesను commit `8e8419361fb415682cdf0e0e68538671dbb6aed3` వద్ద నిర్ధారిస్తుంది. ఈ snapshot తర్వాతి scaffold ఏం install చేస్తుందో నిరూపించదు.
- [Environment variables](https://www.agent-native.com/docs/environment-variables/) key scope, model selection, `VITE_` యొక్క బహిరంగ హద్దును వివరిస్తుంది. provider నిబంధనలు విడిగా చూడండి; ఈ గైడ్ నిజమైన chat request‌ను పరిశీలించలేదు.

## Sources

- [Agent-Native ప్రారంభ గైడ్](https://www.agent-native.com/docs/) — [Agent-Native ప్రారంభ గైడ్](https://www.agent-native.com/docs/) scaffold, agent prompt, React hook, ఆశించిన సమాధానాలు, recovery గురించి చెబుతుంది. దాని action ఉదాహరణలో నిర్దిష్ట టెంప్లేట్‌లోని ఒక property లేదు; అందువల్ల తయారైన action‌ను అదే ఫైల్‌లో సవరించండి.
- [నిర్దిష్ట revisionలోని Chat hello action](https://github.com/BuilderIO/agent-native/blob/8e8419361fb415682cdf0e0e68538671dbb6aed3/templates/chat/actions/hello.ts) — [నిర్దిష్ట revisionలోని Chat `hello` action](https://github.com/BuilderIO/agent-native/blob/8e8419361fb415682cdf0e0e68538671dbb6aed3/templates/chat/actions/hello.ts) commit `8e8419361fb415682cdf0e0e68538671dbb6aed3` వద్ద `mcpTool: true` సహా source propertiesను నిర్ధారిస్తుంది. ఈ snapshot తర్వాతి scaffold ఏం install చేస్తుందో నిరూపించదు.
- [నిర్దిష్ట revisionలోని core ప్యాకేజీ](https://github.com/BuilderIO/agent-native/blob/8e8419361fb415682cdf0e0e68538671dbb6aed3/packages/core/package.json) — ప్యాకేజీ వెర్షన్, Node అవసరం, లైసెన్స్.
- [Agent-Native environment variables](https://www.agent-native.com/docs/environment-variables/) — [Environment variables](https://www.agent-native.com/docs/environment-variables/) key scope, model selection, `VITE_` యొక్క బహిరంగ హద్దును వివరిస్తుంది. provider నిబంధనలు విడిగా చూడండి; ఈ గైడ్ నిజమైన chat request‌ను పరిశీలించలేదు.
- [OpenAI API data controls](https://developers.openai.com/api/docs/guides/your-data) — Provider డేటా నిర్వహణకు సూచన; ఈ taskకు చెందిన నిజమైన traffic‌ను గమనించలేదు.