चॅट आणि React पानावरून एकच Agent-Native action तपासा

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 command बदलणारे @latest वापरते; काम सुरू करण्यापूर्वी आवृत्ती पुन्हा तपासा.

1. नवीन directory मध्ये स्वतंत्र Chat अ‍ॅप तयार करून सुरू करा:

   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 मार्गदर्शकानुसार, Custom keys मर्यादित scope असलेली credentials अ‍ॅपच्या encrypted, database-backed storage मध्ये ठेवते. key source control मध्ये किंवा ब्राउझरला दिसणाऱ्या VITE_ variables मध्ये ठेवू नका. मॉडेल विनंत्या key च्या मालकाचे provider account वापरतात; संवेदनशील माहिती पाठवण्यापूर्वी सध्याचे दर आणि data controls तपासा. येथे task चा खर्च किंवा data retention चे वर्तन मोजलेले नाही.
3. Get started चॅटमध्ये सांगा: Call the hello action for Alex. दस्तऐवज प्रारंभिक मार्गदर्शकात अपेक्षित उत्तर Hello, Alex! आहे. इंटरफेस tool details दाखवत असल्यास hello ला name: "Alex" सह कॉल केला आणि तो संदेश परत आला याची खात्री करा. कॉलचा पुरावा नसताना जुळणारे वाक्य निर्णायक ठरत नाही.
4. फाइल actions/hello.ts तपासा. निश्चित revision मधील Chat टेम्पलेट Zod name input, GET action आणि mcpTool: true परिभाषित करते. ही properties कायम ठेवा. खालील छोट्या पानासह app/routes/hello.tsx तयार करा:

   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 बदला:

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

पान /hello refresh करा आणि चॅटला Alex साठी पुन्हा hello कॉल करायला सांगा. दस्तऐवजानुसार दोन्हीकडे Welcome, Alex. अपेक्षित आहे. पानावर दिसणारा संदेश आणि चॅटमधील action result यांची तुलना करा; उपलब्ध tool details देखील तपासा. पान आपला input React state मध्ये ठेवते; हा अभिवादन action सामायिक record वाचत किंवा लिहीत नाही.

ही दस्तऐवजातील अपेक्षित मूल्ये आहेत. प्रयोग पूर्ण झाला असे मानण्यापूर्वी स्वतःला दिसलेली मूल्ये आणि उपलब्ध 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 तपासलेली नाही.