அரட்டையிலும் React பக்கத்திலும் ஒரே Agent-Native action-ஐ சரிபார்க்கவும்

Agent-Native-இன் Chat வார்ப்புருவில் ஏஜென்ட் அழைக்கக்கூடிய hello action உள்ளது. TypeScript உருவாக்குநர் அதே action-ஐ அழைக்கும் சிறிய React route-ஐச் சேர்த்து, ஒரு return value-ஐ மாற்றி, இரண்டு முடிவுகளை ஒப்பிடலாம். இந்த வழிகாட்டி Agent-Native ஆவணத்தின் எடுத்துக்காட்டைப் பின்பற்றுகிறது; BIG CHANGE ஆவணத்தையும் வார்ப்புரு மூலத்தையும் ஆய்வு செய்தது, ஆனால் செயலியை இயக்கவில்லை.

பெரிய மாற்றம்

• எது மாறுகிறது: ஒரே action, ஏஜென்ட் கருவிக்கும் React query-க்கும் ஒரே typed operation-ஐ வழங்கலாம். இங்கு வாழ்த்துக் குறியீடு ஒரே கோப்பில் உள்ளது.
• ஏன் முக்கியம்: குறியீட்டை மாற்றிய பிறகு இரண்டு அழைப்பாளர்களும் ஒரே முடிவைப் பெறுகிறார்களா என உருவாக்குநர் சரிபார்க்கலாம். இது அரட்டைக்கும் பக்கத்திற்கும் தனித்தனி வாழ்த்து logic-ஐப் பராமரிக்கும் வாய்ப்பைக் குறைக்கிறது; சேமிக்கப்பட்ட application state பகிரப்படுவதை நிரூபிப்பதில்லை.
• எதைப் பார்க்க வேண்டும்: அரட்டை இடைமுகம் காட்டினால் உண்மையான action call-ஐயும் return value-ஐயும் ஒப்பிடவும். மாதிரியின் நம்பத்தகுந்த வாக்கியம் மட்டும் hello அழைக்கப்பட்டது என்பதை நிரூபிக்காது. முக்கியமான செயல்பாடுகளுக்கு இந்த முறையைப் பயன்படுத்தும் முன் authorization, validation, state writes ஆகியவற்றைத் தனித்தனியாக மதிப்பிடவும்.

ஆவணப்படுத்தப்பட்ட Chat வார்ப்புருவை அமைக்கவும்

Node.js 22.22 அல்லது புதிய பதிப்பு, pnpm , குறியீட்டு editor, அரட்டை அழைப்புக்கான 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 -ஐப் புதுப்பித்து, 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-ஐ ஆய்வு செய்யவில்லை.