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 write আলাদাভাবে মূল্যায়ন করুন।

নথিভুক্ত Chat টেমপ্লেট সেট আপ করুন

Node.js 22.22 বা পরের সংস্করণ, pnpm , কোড এডিটর ও চ্যাট কলের জন্য OpenAI API key লাগবে। মডেল যুক্ত করার আগেও UI সেট আপ করা যায়। পরীক্ষা করা core প্যাকেজ ও npm registry-তে ১৮ অক্টোবর ২০২৬ তারিখে সংস্করণ ছিল 0.209.2 । সরকারি scaffold command পরিবর্তনশীল @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" দিয়ে কল করা হয়েছে এবং ওই বার্তা ফিরেছে। কলের প্রমাণ ছাড়া একই বাক্য দেখলেই নিশ্চিত হওয়া যায় না।
  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 কোনো shared record পড়ে বা লেখে না।

পরীক্ষা

return বদলানোর আগে

return বদলানোর পরে

/hello -এ ইনপুট Alex

Hello, Alex!

Welcome, Alex.

চ্যাট action result, ইনপুট name: "Alex"

Hello, Alex!

Welcome, Alex.

এগুলো নথির প্রত্যাশিত মান। পরীক্ষা শেষ হয়েছে বলার আগে নিজের দেখা মান ও উপলব্ধ call details লিখে রাখুন।

কমান্ড pnpm না থাকলে তৈরি অ্যাপে corepack enable চালান। peer-dependency error হলে সরকারি গাইড পুনরায় চেষ্টার আগে 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 পরীক্ষা করেনি।