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 writes الگ جانچیں۔

## دستاویزی 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 میں 18 اکتوبر 2026 کو ورژن `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` تازہ کریں اور چیٹ سے Alex کے لیے `hello` دوبارہ کال کرنے کو کہیں۔ دستاویز میں دونوں جگہ `Welcome, Alex.` متوقع ہے۔ صفحے کے پیغام کا چیٹ کے action result سے موازنہ کریں، اور دستیاب tool details بھی دیکھیں۔ صفحہ input کو React state میں رکھتا ہے؛ یہ سلام والا action کوئی مشترکہ record پڑھتا یا لکھتا نہیں۔

| جانچ | return بدلنے سے پہلے | return بدلنے کے بعد |
| --- | --- | --- |
| `/hello` میں ان پٹ `Alex` | `Hello, Alex!` | `Welcome, Alex.` |
| چیٹ action result، ان پٹ `name: "Alex"` | `Hello, Alex!` | `Welcome, Alex.` |

یہ دستاویز کے متوقع values ہیں۔ تجربہ مکمل سمجھنے سے پہلے اپنے نظر آنے والے values اور دستیاب 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 ابتدائی رہنما](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 کی data handling کا حوالہ؛ اس task کا اصل traffic نہیں دیکھا گیا۔