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 आणि परत आलेले मूल्य दाखवत असल्यास त्यांची तुलना करा. मॉडेलचे विश्वासार्ह वाटणारे वाक्य एकटे `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 मध्ये 18 ऑक्टोबर 2026 रोजी आवृत्ती `0.209.2` होती. अधिकृत scaffold command बदलणारे `@latest` वापरते; काम सुरू करण्यापूर्वी आवृत्ती पुन्हा तपासा.

1. नवीन directory मध्ये स्वतंत्र 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 सामायिक record वाचत किंवा लिहीत नाही.

| तपासणी | return बदलण्यापूर्वी | return बदलल्यानंतर |
| --- | --- | --- |
| `/hello` मध्ये इनपुट `Alex` | `Hello, Alex!` | `Welcome, Alex.` |
| चॅट action result, इनपुट `name: "Alex"` | `Hello, Alex!` | `Welcome, Alex.` |

ही दस्तऐवजातील अपेक्षित मूल्ये आहेत. प्रयोग पूर्ण झाला असे मानण्यापूर्वी स्वतःला दिसलेली मूल्ये आणि उपलब्ध call details नोंदवा.

आज्ञा `pnpm` नसल्यास तयार अ‍ॅपमध्ये `corepack enable` चालवा. peer-dependency त्रुटींसाठी अधिकृत मार्गदर्शक पुन्हा प्रयत्न करण्यापूर्वी `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 पाहिलेला नाही.