Agent-Native के Chat टेम्पलेट में hello action है जिसे एजेंट कॉल कर सकता है। TypeScript डेवलपर उसी action को कॉल करने वाला छोटा React route जोड़कर एक return value बदल सकता है और दोनों परिणामों की तुलना कर सकता है। यह गाइड Agent-Native के दस्तावेज़ी उदाहरण पर आधारित है; 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 पैकेज और npm registry में 18 अक्टूबर 2026 को संस्करण 0.209.2 था। आधिकारिक scaffold कमांड बदलते @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

कमांड pnpm dev द्वारा दिखाया स्थानीय URL खोलें और Continue as local dev चुनें। 8080 व्यस्त होने पर port number बढ़ सकता है। बने ऐप में actions/hello.ts शामिल है।

  1. जोड़ने के लिए Custom keys और अपनी OpenAI API key से चैट एजेंट जोड़ें, फिर Settings में उपलब्ध मॉडल चुनें। Environment variables गाइड के अनुसार Custom keys सीमित scope वाले credentials को ऐप के encrypted, database-backed storage में रखता है। key को source control या ब्राउज़र में सार्वजनिक VITE_ variables में न रखें। मॉडल अनुरोध key के मालिक के provider account का उपयोग करते हैं; संवेदनशील सामग्री भेजने से पहले वर्तमान कीमत और data controls जाँचें। यहाँ प्रति-task लागत या data retention व्यवहार नहीं मापा गया।
  2. Get started चैट में कहें: Call the hello action for Alex. दस्तावेज़ शुरुआती गाइड में अपेक्षित उत्तर Hello, Alex! है। इंटरफ़ेस tool details दिखाए तो पुष्टि करें कि hello को name: "Alex" के साथ कॉल किया और वही संदेश लौटा। केवल मिलता-जुलता वाक्य, बिना call के प्रमाण के, निर्णायक नहीं है।
  3. फ़ाइल actions/hello.ts देखें। निश्चित revision वाला Chat टेम्पलेट 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! है।

  1. मौजूदा 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 शुरुआती गाइड scaffold, agent prompt, React hook, अपेक्षित उत्तर और recovery बताती है। उसके action अंश में निश्चित टेम्पलेट की एक property नहीं है, इसलिए बने action को उसी फ़ाइल में संपादित करें।
  • निश्चित revision का Chat hello action यहाँ mcpTool: true सहित source properties को commit 8e8419361fb415682cdf0e0e68538671dbb6aed3 पर स्थापित करता है। यह snapshot सिद्ध नहीं करता कि बाद में scaffold क्या install करेगा।
  • Environment variables key scope, model selection और सार्वजनिक VITE_ सीमा समझाते हैं। provider की शर्तें अलग जाँचें; इस गाइड ने वास्तविक chat request नहीं जाँची।