معرفی Agent-Native: فریم‌ورک متن‌باز تایپ‌اسکریپت برای ساخت نسل جدید وب‌اپلیکیشن‌های ایجنت‌محور

با فراگیر شدن عامل‌های خودمختار هوش مصنوعی (AI Agents)، ساختار وب‌اپلیکیشن‌های سنتی با چالش بنیادین مواجه شده است. فریم‌ورک متن‌باز Agent-Native که توسط تیم Builder.io توسعه یافته و امروز با جهش بیش از ۶۰۰ ستاره در صدر ترندهای گیت‌هاب قرار گرفته، رویکردی نوآورانه برای ساخت اپلیکیشن‌هایی ارائه می‌دهد که هم برای کاربران انسانی و هم برای عامل‌های هوش مصنوعی به‌صورت نیتیو قابل تعامل هستند.

مساله بنیادین: چرا معماری وب نیازمند Agent-Native است؟

در وب سنتی، تمام کامپوننت‌ها و رابط‌های کاربری (UI) برای تعامل چشمی و کلیک انسان بهینه‌سازی شده‌اند. زمانی که یک ایجنت (مانند Claude Computer Use یا Gemini Agent) قصد استفاده از یک وب‌اپلیکیشن را دارد، ناچار است از طریق بینایی کامپیوتر (Screen Scraping) و تلاش برای کلیک بر روی مختصات پیکسلی با سامانه ارتباط برقرار کند؛ فرآیندی که کند، پرهزینه و بسیار شکننده در برابر تغییرات CSS است.

معماری Agent-Native این معادله را دگرگون می‌کند. این فریم‌ورک کامپوننت‌های فرانت‌اند و وضعیت (State) اپلیکیشن را به‌گونه‌ای مدل‌سازی می‌کند که ایجنت‌ها بتوانند از طریق یک لایه انتزاعی از ابزارها (Tools)، اکشن‌ها و اسکیمای ساخت‌یافته JSON مستقیماً با هسته نرم‌افزار صحبت کنند، در حالی که کاربر همزمان بازخورد بصری آنی را روی صفحه مشاهده می‌کند.

ویژگی‌های کلیدی فریم‌ورک Agent-Native

• سیستم ابزارسازی خودکار (Automatic Tool Generation): هر تابع و فرم در اپلیکیشن با دکوراتورهای ساده تایپ‌اسکریپت به یک Tool استاندارد برای مدل‌های زبانی (مانند OpenAI Functions یا Anthropic Tool Use) تبدیل می‌شود.
• همگام‌سازی دوطرفه وضعیت (Bi-directional State Sync): زمانی که کاربر تغییری در فرم ایجاد می‌کند، ایجنت از آن آگاه می‌شود؛ و برعکس، زمانی که ایجنت وظیفه‌ای را اجرا می‌کند، کامپوننت‌های React فوراً به‌روزرسانی می‌شوند.
• رندرینگ رابط‌های کاربری زاینده (Generative UI): امکان بازگرداندن کامپوننت‌های بصری ری‌اکت در جریان استریم پاسخ مدل هوش مصنوعی.
• پشتیبانی مستقل از ارائه‌دهنده (Provider-Agnostic): سازگاری کامل با Vercel AI SDK، لنگ‌چین (LangChain)، مدل‌های محلی Ollama و پروتکل MCP.

راهنمای سریع راه‌اندازی و کد نمونه (Quickstart)

نصب پکیج هسته فریم‌ورک با استفاده از npm یا pnpm:

npm install @builder.io/agent-native @ai-sdk/openai ai

نمونه پیاده‌سازی یک اکشن ایجنت‌محور در React / Next.js:

import { createAgentApp, agentTool } from '@builder.io/agent-native';
import { z } from 'zod';

// تعریف اکشن قابل فراخوانی توسط ایجنت و انسان
export const updateInventoryAction = agentTool({
  name: 'updateInventory',
  description: 'به‌روزرسانی موجودی انبار برای کالای مشخص',
  parameters: z.object({
    productId: z.string().describe('شناسه کالا'),
    newQuantity: z.number().int().positive().describe('تعداد جدید موجودی'),
  }),
  execute: async ({ productId, newQuantity }) => {
    const res = await db.inventory.update({ where: { id: productId }, data: { stock: newQuantity } });
    return { success: true, updatedStock: res.stock };
  },
});

مشخصات پروژه در گیت‌هاب