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 कमांड बदलते `@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"` के साथ कॉल किया और वही संदेश लौटा। केवल मिलता-जुलता वाक्य, बिना call के प्रमाण के, निर्णायक नहीं है।
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 नहीं देखा गया।
Markdown संस्करण

लेख खोजें।

BIG CHANGE देखें।

लेख खोजें।

BIG CHANGE देखें।

Markdown संस्करण

बड़ी तस्वीर। आपकी गति से।

आपकी गोपनीयता, आपकी पसंद।

आपकी गोपनीयता, आपकी पसंद।
