Markdown সংস্করণ

AI-translated from English; not yet reviewed by a fluent editor.

# চ্যাট ও React পেজ থেকে একই Agent-Native action পরীক্ষা করুন

> Chat টেমপ্লেটের hello action এজেন্ট চ্যাট ও React route থেকে কল করুন, একটি return value বদলান এবং tool call-এর প্রমাণ দেখে নথিভুক্ত ফল তুলনা করুন।

By BIG CHANGE Editorial

Published: 2026-10-19T10:08:15.758Z
Updated: 2026-10-19T10:08:15.758Z
Canonical: https://bigchange.ai/blog/agent-native-chat-react-action-parity-guide

![Conceptual charcoal illustration of one laptop showing two blank side-by-side work areas: conversation shapes on the left and a plain input and output area on the right.](https://bigchange.ai/api/media/file/agent-native-chat-react-comparison-hero-v1.png)
AI-generated conceptual illustration by BIG CHANGE; no actual product interface, action invocation or test result is depicted.

Agent-Native-এর Chat টেমপ্লেটে `hello` action আছে, যা এজেন্ট কল করতে পারে। TypeScript ডেভেলপার একই action কল করা একটি ছোট React route যোগ করে একটি return value বদলাতে এবং দুই ফল তুলনা করতে পারেন। এই গাইড [Agent-Native-এর নথিভুক্ত উদাহরণ](https://www.agent-native.com/docs/) অনুসরণ করে; 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 প্যাকেজ](https://github.com/BuilderIO/agent-native/blob/8e8419361fb415682cdf0e0e68538671dbb6aed3/packages/core/package.json) ও npm registry-তে ১৮ অক্টোবর ২০২৬ তারিখে সংস্করণ ছিল `0.209.2` । সরকারি scaffold command পরিবর্তনশীল `@latest` ব্যবহার করে; কাজ শুরুর আগে আবার সংস্করণ দেখুন।

1. নতুন ডিরেক্টরিতে স্বতন্ত্র Chat অ্যাপ তৈরি করে চালু করুন:

```bash
   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 গাইড](https://www.agent-native.com/docs/environment-variables/) অনুযায়ী Custom keys সীমিত scope-এর credentials অ্যাপের encrypted, database-backed storage-এ রাখে। key source control-এ বা ব্রাউজারে প্রকাশিত `VITE_` variables-এ রাখবেন না। মডেল অনুরোধ key-মালিকের provider account ব্যবহার করে; সংবেদনশীল তথ্য পাঠানোর আগে বর্তমান মূল্য ও [data controls](https://developers.openai.com/api/docs/guides/your-data) দেখুন। এখানে task-এর খরচ বা data retention-এর আচরণ মাপা হয়নি।
3. Get started চ্যাটে বলুন: `Call the hello action for Alex.` নথি [শুরুর গাইড](https://www.agent-native.com/docs/)-এ প্রত্যাশিত উত্তর `Hello, Alex!` । ইন্টারফেস tool details দেখালে নিশ্চিত করুন যে `hello` কে `name: "Alex"` দিয়ে কল করা হয়েছে এবং ওই বার্তা ফিরেছে। কলের প্রমাণ ছাড়া একই বাক্য দেখলেই নিশ্চিত হওয়া যায় না।
4. ফাইল `actions/hello.ts` পরীক্ষা করুন। [নির্দিষ্ট revision-এর Chat টেমপ্লেট](https://github.com/BuilderIO/agent-native/blob/8e8419361fb415682cdf0e0e68538671dbb6aed3/templates/chat/actions/hello.ts) 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!` ।

5. বর্তমান `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 শুরুর গাইড](https://www.agent-native.com/docs/) scaffold, agent prompt, React hook, প্রত্যাশিত উত্তর ও recovery ব্যাখ্যা করে। action-এর উদ্ধৃত অংশে নির্দিষ্ট টেমপ্লেটের একটি property নেই, তাই তৈরি action-এর নিজস্ব ফাইলেই পরিবর্তন করুন।
- [নির্দিষ্ট revision-এর Chat `hello` action](https://github.com/BuilderIO/agent-native/blob/8e8419361fb415682cdf0e0e68538671dbb6aed3/templates/chat/actions/hello.ts) এখানে `mcpTool: true` -সহ source properties কে commit `8e8419361fb415682cdf0e0e68538671dbb6aed3` -এ নিশ্চিত করে। এই snapshot পরের scaffold কী install করবে তা প্রমাণ করে না।
- [Environment variables](https://www.agent-native.com/docs/environment-variables/) key scope, model selection ও `VITE_` -এর প্রকাশ্য সীমা ব্যাখ্যা করে। provider-এর শর্ত আলাদা দেখুন; এই গাইড প্রকৃত chat request পরীক্ষা করেনি।

## Sources

- [Agent-Native শুরুর গাইড](https://www.agent-native.com/docs/) — [Agent-Native শুরুর গাইড](https://www.agent-native.com/docs/) scaffold, agent prompt, React hook, প্রত্যাশিত উত্তর ও recovery ব্যাখ্যা করে। action-এর উদ্ধৃত অংশে নির্দিষ্ট টেমপ্লেটের একটি property নেই, তাই তৈরি action-এর নিজস্ব ফাইলেই পরিবর্তন করুন।
- [নির্দিষ্ট revision-এর Chat hello action](https://github.com/BuilderIO/agent-native/blob/8e8419361fb415682cdf0e0e68538671dbb6aed3/templates/chat/actions/hello.ts) — [নির্দিষ্ট revision-এর Chat `hello` action](https://github.com/BuilderIO/agent-native/blob/8e8419361fb415682cdf0e0e68538671dbb6aed3/templates/chat/actions/hello.ts) commit `8e8419361fb415682cdf0e0e68538671dbb6aed3`-এ `mcpTool: true`-সহ source properties নিশ্চিত করে। এই snapshot পরের scaffold কী install করবে তা প্রমাণ করে না।
- [নির্দিষ্ট revision-এর core প্যাকেজ](https://github.com/BuilderIO/agent-native/blob/8e8419361fb415682cdf0e0e68538671dbb6aed3/packages/core/package.json) — প্যাকেজ সংস্করণ, Node-এর প্রয়োজন ও লাইসেন্স।
- [Agent-Native environment variables](https://www.agent-native.com/docs/environment-variables/) — [Environment variables](https://www.agent-native.com/docs/environment-variables/) key scope, model selection ও `VITE_`-এর প্রকাশ্য সীমা ব্যাখ্যা করে। provider-এর শর্ত আলাদা দেখুন; এই গাইড প্রকৃত chat request পরীক্ষা করেনি।
- [OpenAI API data controls](https://developers.openai.com/api/docs/guides/your-data) — Provider-এর তথ্য প্রক্রিয়াকরণের সূত্র; এই task-এর প্রকৃত traffic দেখা হয়নি।