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 میں 18 اکتوبر 2026 کو ورژن 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 تازہ کریں اور چیٹ سے 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 ابتدائی رہنما 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 نہیں جانچی۔