చాట్, 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, return value‌ను పోల్చండి. మోడల్ ఇచ్చిన నమ్మదగిన వాక్యం ఒక్కటే hello కాల్ అయిందని నిరూపించదు. ముఖ్యమైన పనుల్లో ఈ నమూనా వాడే ముందు authorization, validation, state writes‌ను విడిగా అంచనా వేయండి.

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

Node.js 22.22 లేదా కొత్తది, pnpm , కోడ్ ఎడిటర్, చాట్ కాల్ కోసం OpenAI API key అవసరం. మోడల్‌ను కనెక్ట్ చేసే ముందే UI ఏర్పాటు చేయవచ్చు. పరిశీలించిన core ప్యాకేజీ, npm registryలో 2026 అక్టోబర్ 18న వెర్షన్ 0.209.2 ఉంది. అధికారిక scaffold command మారుతూ ఉండే @latest ను వాడుతుంది; ప్రారంభించే ముందు వెర్షన్ మళ్లీ చూడండి.

1. కొత్త డైరెక్టరీలో స్వతంత్ర 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 shared record‌ను చదవదు, రాయదు.

ఇవి డాక్యుమెంట్‌లోని ఆశించిన విలువలు. ప్రయోగం పూర్తయిందని భావించే ముందు మీకు కనిపించిన విలువలు, అందుబాటులోని 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 ప్రారంభ గైడ్ 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‌ను పరిశీలించలేదు.