Generative UI چیست؟ آموزش ساخت رابط کاربری مولد با هوش مصنوعی

بیشتر برنامه‌های مبتنی بر هوش مصنوعی هنوز از یک الگوی آشنا استفاده می‌کنند: کاربر پیامی می‌نویسد و مدل نیز با چند پاراگراف متن پاسخ می‌دهد. این الگو برای پرسش‌وپاسخ مناسب است، اما همیشه بهترین روش تعامل با نرم‌افزار نیست.

اگر کاربر بخواهد چند محصول را مقایسه کند، نمایش یک جدول از پاسخ متنی مفیدتر است. اگر به دنبال برنامه انجام کار باشد، یک چک‌لیست تعاملی تجربه بهتری می‌سازد. برای انتخاب میان چند گزینه نیز کارت، دکمه یا فرم می‌تواند مناسب‌تر از یک متن طولانی باشد.

اینجاست که Generative UI یا «رابط کاربری مولد مولد» مطرح می‌شود.

در رابط کاربری مولد، هوش مصنوعی فقط محتوای داخل صفحه را تولید نمی‌کند؛ بلکه می‌تواند با توجه به هدف کاربر، نوع نمایش مناسب را نیز انتخاب کند. خروجی ممکن است یک جدول، کارت، فرم، نمودار، چک‌لیست، تایم‌لاین یا ترکیبی از اجزای ازپیش‌تعریف‌شده باشد.

در این مقاله بررسی می‌کنیم:

• Generative UI چیست و چگونه کار می‌کند؟
• چه تفاوتی با طراحی UI/UX به کمک هوش مصنوعی دارد؟
• تفاوت رابط مولد با چت‌بات چیست؟
• A2UI و AG-UI چه کاربردی دارند؟
• چه معماری‌ای برای ساخت رابط مولد مناسب است؟
• چگونه یک نمونه ساده را با React و API درواره بسازیم؟
• چه مدل‌هایی برای این کاربرد مناسب‌اند؟
• رابط کاربری مولد چه کاربردهایی برای کسب‌وکارهای ایرانی دارد؟

پاسخ کوتاه: Generative UI چیست؟

Generative UI روشی برای ساخت رابط‌های کاربری است که در آن، شکل یا ترکیب رابط هنگام اجرای برنامه و براساس درخواست، وضعیت و هدف کاربر تعیین می‌شود.

در این معماری، مدل هوش مصنوعی می‌تواند تصمیم بگیرد که نتیجه چگونه نمایش داده شود. برای مثال:

• پاسخ ساده با یک کادرادر متنی
• مقایسه چند گزینه با جدول
• مراحل انجام کار با چک‌لیست
• آمار با کارت و نمودار
• پیشنهادها با مجموعه‌ای از کارت‌ها
• دریافت اطلاعات تکمیلی با فرم
• نمایش فرایند با تایم‌لاین

مدل معمولاً کد خام رابط را مستقیماً اجرا نمی‌کند. روش قابل‌کنترل‌تر این است که مدل یک ساختار داده یا نام Component تولید کند و برنامه آن را به اجزای واقعی رابط تبدیل کند.

Generative UI چگونه کار می‌کند؟

یک پیاده‌سازی ساده رابط کاربری مولد از پنج مرحله تشکیل می‌شود:

1. کاربر هدف یا درخواست خود را وارد می‌کند.
2. برنامه درخواست و اطلاعات لازم را برای مدل می‌فرستد.
3. مدل نوع رابط و محتوای موردنیاز را انتخاب می‌کند.
4. خروجی مدل به یک ساختار مشخص مانند JSON تبدیل می‌شود.
5. برنامه ساختار دریافتی را با Componentهای واقعی نمایش می‌دهد.

برای نمونه، کاربر می‌نویسد:

سه پلن اشتراک را براساس قیمت، امکانات و مناسب‌بودن برای تیم‌های کوچک مقایسه کن.

مدل می‌تواند چنین ساختاری برگرداند:

{
  "component": "comparison",
  "title": "مقایسه پلن‌های اشتراک",
  "items": [
    {
      "label": "پلن پایه",
      "value": "مناسب استفاده شخصی"
    },
    {
      "label": "پلن تیمی",
      "value": "مناسب تیم‌های کوچک"
    },
    {
      "label": "پلن سازمانی",
      "value": "مناسب مجموعه‌های بزرگ"
    }
  ]
}

برنامه مقدار component را می‌خواند و Component مربوط به مقایسه را نمایش می‌دهد. اگر درخواست کاربر درباره مراحل اجرای پروژه باشد، مدل می‌تواند مقدار checklist را انتخاب کند.

بنابراین مدل درباره نحوه نمایش تصمیم می‌گیرد، اما پیاده‌سازی ظاهری هر Component همچنان در اختیار توسعه‌دهنده است.

تفاوت Generative UI با طراحی UI/UX به کمک هوش مصنوعی

این دو مفهوم به یکدیگر نزدیک‌اند، اما هدف یکسانی ندارند.

اگر از هوش مصنوعی بخواهید کد یک داشبورد را تولید کند و سپس آن کد را در پروژه قرار دهید، از هوش مصنوعی برای طراحی رابط استفاده کرده‌اید.

اگر برنامه هنگام پاسخ‌گویی به هر کاربر، Component مناسب را انتخاب و نمایش دهد، با رابط کاربری مولد روبه‌رو هستید.

برای مطالعه فرایند طراحی و تولید نمونه اولیه می‌توانید راهنمای طراحی UI/UX با هوش مصنوعی را بخوانید.

تفاوت رابط کاربری مولد با چت‌بات

چت‌بات معمولی تقریباً تمام نتایج را به شکل متن داخل حباب‌های مکالمه نمایش می‌دهد. حتی زمانی که پاسخ شامل داده، مراحل یا چند انتخاب است، کاربر باید آن را از متن استخراج کند.

Generative UI محدود به حباب چت نیست. سیستم می‌تواند متناسب با وظیفه، رابط مناسب‌تری بسازد.

نمونه پاسخ چت‌بات

برای شروع پروژه ابتدا هدف را مشخص کنید، سپس داده‌ها را جمع‌آوری کنید،
مدل را انتخاب کنید، نمونه اولیه بسازید و نتیجه را ارزیابی کنید.

نمونه پاسخ رابط مولد

برنامه شروع پروژه

☐ تعریف هدف
☐ جمع‌آوری داده
☐ انتخاب مدل
☐ ساخت نمونه اولیه
☐ ارزیابی نتیجه

محتوای دو پاسخ مشابه است، اما پاسخ دوم برای دنبال‌کردن یک فرایند کاربردی‌تر است.

آیا Generative UI همان Agentic UI است؟

این دو اصطلاح هم‌پوشانی دارند، ولی کاملاً مترادف نیستند.

Generative UI بیشتر روی تولید یا انتخاب رابط تمرکز دارد. Agentic UI به رابطی گفته می‌شود که با یک ایجنت هوش مصنوعی در تعامل است و وضعیت، اقدامات، نتایج ابزارها و درخواست‌های بعدی ایجنت را نمایش می‌دهد.

یک Generative UI ممکن است فقط براساس خروجی یک مدل، Component مناسب را انتخاب کند. در مقابل، یک Agentic UI معمولاً باید اجرای چندمرحله‌ای ایجنت را نیز مدیریت کند.

برای مثال، یک ایجنت تحلیل فروش ممکن است:

1. فایل گزارش را دریافت کند.
2. داده‌ها را تحلیل کند.
3. چند شاخص مهم را استخراج کند.
4. کارت‌های آماری نمایش دهد.
5. نمودار مناسب بسازد.
6. برای جزئیات بیشتر از کاربر سؤال کند.

در این سناریو، رابط مولد بخشی از تجربه کامل ایجنت است. برای آشنایی با معماری ایجنت‌ها می‌توانید مقاله AI Agent و Agent Skills چیست؟ را مطالعه کنید.

انواع رابط کاربری مولد

۱. رابط مبتنی بر Component

در این روش، مجموعه‌ای از Componentهای مجاز از قبل ساخته می‌شود:

• SummaryCard
• ComparisonTable
• Checklist
• Timeline
• Chart
• Form
• ProductGrid

مدل فقط Component مناسب و داده‌های آن را انتخاب می‌کند.

این روش برای بیشتر پروژه‌های واقعی مناسب است، زیرا طراحی ظاهری، واکنش‌گرایی و رفتار Componentها در اختیار تیم محصول باقی می‌ماند.

۲. رابط مبتنی بر ابزار

در این الگو، هر Component مانند یک Tool به مدل معرفی می‌شود. مدل با فراخوانی ابزار مشخص می‌کند چه رابطی باید نمایش داده شود.

راهنمای رسمی AI SDK UI رابط مولد را به‌عنوان اتصال نتیجه یک Tool Call به یک Component توضیح می‌دهد. برای مثال، فراخوانی ابزار نمایش وضعیت آب‌وهوا می‌تواند به Component مخصوص پیش‌بینی هوا متصل شود.

۳. رابط مبتنی بر Schema

در این روش، مدل یک ساختار توصیفی تولید می‌کند:

{
  "type": "card",
  "props": {
    "title": "نتیجه تحلیل",
    "description": "فروش این ماه نسبت به ماه قبل افزایش یافته است."
  }
}

Renderer برنامه این Schema را به رابط واقعی تبدیل می‌کند.

مزیت این روش آن است که رابط از مدل و فریم‌ورک Frontend جدا می‌شود. همان ساختار می‌تواند با Rendererهای مختلف در وب یا اپلیکیشن موبایل نمایش داده شود.

۴. رابط کاملاً تولیدشده

در این حالت، مدل کد HTML، CSS یا React تولید می‌کند. این روش برای نمونه‌سازی سریع جذاب است، اما مدیریت کیفیت ظاهری، سازگاری و رفتار خروجی دشوارتر می‌شود.

برای محصولات عملیاتی، معمولاً استفاده از Component Registry یا Schema مشخص نتیجه قابل‌پیش‌بینی‌تری دارد.

A2UI چیست؟

A2UI مخفف Agent-to-User Interface و یک قالب باز برای رابط‌هایی است که توسط ایجنت تولید می‌شوند.

گوگل در دسامبر ۲۰۲۵ پروژه A2UI را به‌صورت عمومی معرفی کرد. هدف این پروژه، ارائه قالبی برای ارسال رابط‌های تولیدشده یا تکمیل‌شده توسط ایجنت به برنامه‌های مختلف است. براساس معرفی رسمی A2UI توسط گوگل، Rendererها می‌توانند اجزای مشترک یا Componentهایی را که برنامه میزبان معرفی کرده است، در چارچوب‌هایی مانند Angular، Lit و Flutter نمایش دهند.

A2UI به‌جای ارسال کد اجرایی، رابط را با داده‌ای توصیفی بیان می‌کند. برنامه مقصد این داده را دریافت و با Componentهای بومی خود رندر می‌کند.

ساختار کلی چنین معماری‌ای به این صورت است:

درخواست کاربر
→ ایجنت
→ پیام A2UI
→ Renderer برنامه
→ Componentهای بومی

طبق وب‌سایت رسمی A2UI، هدف این پروتکل ایجاد رابط‌های تعاملی است که بتوانند در وب، موبایل و دسکتاپ به‌شکل بومی نمایش داده شوند.

A2UI چه مسئله‌ای را حل می‌کند؟

بدون یک قالب مشترک، هر تیم باید قرارداد اختصاصی خود را برای ارتباط مدل با رابط بسازد. یک تیم component_name تولید می‌کند، تیم دیگر از Tool Calling استفاده می‌کند و تیم بعدی Schema متفاوتی دارد.

A2UI تلاش می‌کند یک زبان مشترک برای توصیف رابط میان ایجنت و برنامه ایجاد کند.

AG-UI چیست؟

AG-UI مخفف Agent–User Interaction است. این استاندارد با A2UI یکسان نیست.

AG-UI یک پروتکل رویدادمحور برای هماهنگ‌کردن ایجنت، کاربر و برنامه است. این پروتکل می‌تواند رویدادهایی مانند تغییر وضعیت، ارسال پیام، فراخوانی ابزار و به‌روزرسانی رابط را میان Backend ایجنت و Frontend منتقل کند.

تفاوت ساده این دو:

A2UI می‌تواند ساختار رابط را تعریف کند و AG-UI جریان رویدادها را انتقال دهد. پروژه‌های ساده لزوماً به هیچ‌کدام از این پروتکل‌ها نیاز ندارند و می‌توانند با JSON و چند Component مشخص شروع کنند.

ابزارهای قابل استفاده برای توسعه‌دهندگان ایرانی

برای ساخت رابط مولد می‌توان از ابزارهای متن‌باز و قابل اجرا روی زیرساخت خود استفاده کرد:

React و Next.js

برای ساخت Componentها و Renderer رابط مناسب‌اند. استفاده از Next.js الزامی نیست و همین معماری را می‌توان با React، Vue، Angular یا Flutter اجرا کرد.

Vercel AI SDK

AI SDK یک کتابخانه متن‌باز برای ساخت برنامه‌های مبتنی بر مدل، Streaming، Tool Calling و رابط مولد است. راهنمای فعلی آن، اتصال Tool Callها به Componentهای رابط را پوشش می‌دهد.

بعضی آموزش‌های قدیمی از streamUI و AI SDK RSC استفاده می‌کنند. در صفحه رسمی نمونه RSC اعلام شده که توسعه آن مسیر متوقف شده است؛ بنابراین بهتر است قبل از پیاده‌سازی، مستندات جاری AI SDK بررسی شود.

A2UI

A2UI برای پروژه‌هایی مناسب است که می‌خواهند رابط توصیفی را میان چند پلتفرم یا Renderer جابه‌جا کنند. کد و مشخصات آن به‌صورت متن‌باز در مخزن رسمی A2UI منتشر شده است.

AG-UI و CopilotKit

AG-UI برای اتصال Frontend به Backend ایجنت و مدیریت رویدادهای تعاملی طراحی شده است. مخزن AG-UI در GitHub نیز به‌صورت عمومی در دسترس است.

Zod

Zod برای تعریف و بررسی ساختار خروجی مدل در پروژه‌های TypeScript کاربرد دارد. با آن می‌توان تعیین کرد مدل فقط Componentها و فیلدهای شناخته‌شده را انتخاب کند.

API درواره

درواره لایه دسترسی به مدل هوش مصنوعی را فراهم می‌کند. برنامه می‌تواند با رابط سازگار با OpenAI، درخواست خود را به مدل انتخابی ارسال کند:

https://api.darvareh.ir/v1

منطق رابط، Componentها و Renderer در برنامه شما پیاده‌سازی می‌شوند و درواره وظیفه اتصال به مدل را بر عهده دارد.

معماری پیشنهادی Generative UI با API درواره

برای یک محصول ساده، اجزای زیر کافی است:

کاربر
→ رابط React
→ API برنامه
→ API درواره
→ خروجی JSON
→ بررسی Schema
→ انتخاب Component
→ نمایش نتیجه

در این معماری:

• React رابط اصلی را نمایش می‌دهد.
• Backend درخواست کاربر را دریافت می‌کند.
• API درواره دسترسی به مدل را فراهم می‌کند.
• مدل نوع رابط و محتوای آن را پیشنهاد می‌دهد.
• Zod ساختار پاسخ را بررسی می‌کند.
• Component Registry خروجی را به رابط واقعی تبدیل می‌کند.

آموزش ساخت Generative UI با React و API درواره

در این نمونه، مدل می‌تواند یکی از سه رابط را انتخاب کند:

• خلاصه
• چک‌لیست
• مقایسه

مرحله اول: نصب وابستگی‌ها

npm install openai zod

مرحله دوم: تعریف Schema رابط

فایل lib/ui-schema.ts را بسازید:

import { z } from "zod";

export const GeneratedUISchema = z.object({
  component: z.enum(["summary", "checklist", "comparison"]),
  title: z.string().min(1),
  description: z.string().default(""),
  items: z.array(
    z.object({
      label: z.string(),
      value: z.string()
    })
  ).max(10)
});

export type GeneratedUI = z.infer<typeof GeneratedUISchema>;

مدل فقط می‌تواند یکی از سه Component تعریف‌شده را انتخاب کند. اضافه‌کردن رابط جدید نیز با توسعه Schema و Registry انجام می‌شود.

مرحله سوم: اتصال Backend به API درواره

در Next.js می‌توان Route زیر را ایجاد کرد:

import OpenAI from "openai";
import { GeneratedUISchema } from "@/lib/ui-schema";

const client = new OpenAI({
  apiKey: process.env.DARVAREH_API_KEY,
  baseURL: "https://api.darvareh.ir/v1"
});

export async function POST(request: Request) {
  const { prompt } = await request.json();

  const completion = await client.chat.completions.create({
    model: process.env.DARVAREH_MODEL_ID!,
    response_format: { type: "json_object" },
    messages: [
      {
        role: "system",
        content: `
شما موتور انتخاب رابط کاربری هستید.

براساس درخواست کاربر یکی از Componentهای زیر را انتخاب کنید:
- summary: برای توضیح یا جمع‌بندی
- checklist: برای مراحل و فهرست کارها
- comparison: برای مقایسه گزینه‌ها

فقط یک JSON با این ساختار برگردانید:
{
  "component": "summary | checklist | comparison",
  "title": "عنوان فارسی",
  "description": "توضیح کوتاه فارسی",
  "items": [
    {
      "label": "برچسب",
      "value": "مقدار"
    }
  ]
}
        `
      },
      {
        role: "user",
        content: prompt
      }
    ]
  });

  const content = completion.choices[0]?.message?.content;

  if (!content) {
    return Response.json(
      { message: "پاسخی از مدل دریافت نشد." },
      { status: 502 }
    );
  }

  const parsed = GeneratedUISchema.parse(JSON.parse(content));

  return Response.json(parsed);
}

مقدار DARVAREH_MODEL_ID باید با شناسه یکی از مدل‌های موجود در فهرست فعلی درواره جایگزین شود.

پشتیبانی از JSON Mode، Structured Outputs و Tool Calling به مدل انتخابی وابسته است. پیش از انتخاب مدل، قابلیت‌های درج‌شده در کاتالوگ جاری را بررسی کنید. اگر مدل از response_format پشتیبانی نمی‌کند، می‌توان آن گزینه را حذف کرد و همچنان پاسخ نهایی را با Zod بررسی کرد.

مرحله چهارم: ساخت Component Registry

import type { GeneratedUI } from "@/lib/ui-schema";

function Summary({ data }: { data: GeneratedUI }) {
  return (
    <article className="rounded-xl border p-5">
      <h2 className="text-xl font-bold">{data.title}</h2>
      <p className="mt-2 text-gray-600">{data.description}</p>
    </article>
  );
}

function Checklist({ data }: { data: GeneratedUI }) {
  return (
    <section className="rounded-xl border p-5">
      <h2 className="text-xl font-bold">{data.title}</h2>
      <p className="mt-2 text-gray-600">{data.description}</p>

      <ul className="mt-4 space-y-3">
        {data.items.map((item, index) => (
          <li key={index} className="flex gap-3">
            <input type="checkbox" />
            <span>
              <strong>{item.label}</strong>
              {item.value && ` — ${item.value}`}
            </span>
          </li>
        ))}
      </ul>
    </section>
  );
}

function Comparison({ data }: { data: GeneratedUI }) {
  return (
    <section className="rounded-xl border p-5">
      <h2 className="text-xl font-bold">{data.title}</h2>

      <div className="mt-4 grid gap-3 md:grid-cols-3">
        {data.items.map((item, index) => (
          <div key={index} className="rounded-lg bg-gray-50 p-4">
            <h3 className="font-bold">{item.label}</h3>
            <p className="mt-2 text-sm">{item.value}</p>
          </div>
        ))}
      </div>
    </section>
  );
}

export function GeneratedUIRenderer({
  data
}: {
  data: GeneratedUI;
}) {
  const registry = {
    summary: Summary,
    checklist: Checklist,
    comparison: Comparison
  };

  const Component = registry[data.component];

  return <Component data={data} />;
}

مرحله پنجم: دریافت درخواست کاربر

"use client";

import { useState } from "react";
import type { GeneratedUI } from "@/lib/ui-schema";
import { GeneratedUIRenderer } from "./generated-ui-renderer";

export default function GenerativeUIPage() {
  const [prompt, setPrompt] = useState("");
  const [result, setResult] = useState<GeneratedUI | null>(null);
  const [loading, setLoading] = useState(false);

  async function generateUI() {
    setLoading(true);

    const response = await fetch("/api/generate-ui", {
      method: "POST",
      headers: {
        "Content-Type": "application/json"
      },
      body: JSON.stringify({ prompt })
    });

    const data = await response.json();

    setResult(data);
    setLoading(false);
  }

  return (
    <main className="mx-auto max-w-3xl p-6" dir="rtl">
      <h1 className="text-2xl font-bold">
        رابط کاربری مولد
      </h1>

      <textarea
        value={prompt}
        onChange={(event) => setPrompt(event.target.value)}
        placeholder="برای مثال: یک برنامه پنج‌مرحله‌ای برای شروع فروشگاه اینترنتی بساز"
        className="mt-5 min-h-32 w-full rounded-xl border p-4"
      />

      <button
        onClick={generateUI}
        disabled={loading || !prompt.trim()}
        className="mt-3 rounded-lg bg-black px-5 py-3 text-white"
      >
        {loading ? "در حال ساخت..." : "ساخت رابط"}
      </button>

      {result && (
        <div className="mt-8">
          <GeneratedUIRenderer data={result} />
        </div>
      )}
    </main>
  );
}

اکنون یک درخواست مقایسه‌ای به Component مقایسه، یک برنامه مرحله‌ای به چک‌لیست و یک سؤال توضیحی به کارت خلاصه تبدیل می‌شود.

چه مدلی برای Generative UI مناسب است؟

برای این کاربرد، بزرگ‌ترین مدل همیشه بهترین انتخاب نیست. مدل باید در چند ویژگی عملکرد مناسبی داشته باشد:

• پیروی دقیق از دستور
• تولید JSON منظم
• انتخاب درست میان Componentها
• درک مناسب زبان فارسی
• سرعت پاسخ قابل‌قبول
• هزینه متناسب با تعداد درخواست‌ها
• پشتیبانی از Tool Calling یا Structured Outputs در صورت نیاز

یک معماری اقتصادی می‌تواند از مدل سریع‌تر برای انتخاب Component و از مدل قوی‌تر برای تحلیل‌های پیچیده استفاده کند.

درواره امکان اتصال به مدل‌های مختلف از طریق یک API سازگار با OpenAI را فراهم می‌کند. در نتیجه می‌توانید مدل‌ها را با تغییر Model ID آزمایش کنید، بدون اینکه ساختار اصلی Backend را بازنویسی کنید.

برای آشنایی بیشتر، راهنمای API سازگار با OpenAI را مطالعه کنید.

کاربردهای Generative UI در بازار ایران

دستیار انتخاب محصول

کاربر نیاز خود را با زبان طبیعی توضیح می‌دهد و سیستم نتیجه را به شکل کارت یا جدول مقایسه نمایش می‌دهد.

برای مثال:

برای یک دفتر ده‌نفره سه چاپگر مناسب را براساس سرعت، هزینه مصرفی و حجم چاپ مقایسه کن.

دستیار فروش

مدل می‌تواند براساس مرحله فعلی مکالمه، یکی از رابط‌های زیر را نمایش دهد:

• فرم دریافت نیاز
• جدول مقایسه پلن‌ها
• کارت پیشنهاد محصول
• فهرست امکانات
• دکمه درخواست مشاوره

گزارش‌ساز هوشمند

کاربر داده یا سؤال خود را وارد می‌کند و برنامه براساس نوع نتیجه، کارت آماری، جدول، نمودار یا جمع‌بندی نمایش می‌دهد.

آموزش تعاملی

به‌جای ارائه یک متن ثابت، سیستم می‌تواند رابط مناسب مرحله یادگیری را انتخاب کند:

• فلش‌کارت
• آزمون کوتاه
• چک‌لیست تمرین
• برنامه مطالعه
• توضیح مرحله‌ای

پشتیبانی مشتری

درخواست ساده با پاسخ متنی نمایش داده می‌شود، اما درخواست مربوط به وضعیت سفارش می‌تواند کارت سفارش و درخواست عیب‌یابی می‌تواند مراحل قابل علامت‌گذاری را نمایش دهد.

سازنده فرم هوشمند

کاربر هدف فرم را شرح می‌دهد و سیستم فیلدهای مناسب را از میان Componentهای تعریف‌شده انتخاب می‌کند. برای نمونه:

یک فرم کوتاه برای ثبت درخواست دموی محصول بساز.

دستیار مدیریت پروژه

مدل می‌تواند توضیح آزاد کاربر را به یکی از این نمایش‌ها تبدیل کند:

• فهرست وظایف
• جدول اولویت‌ها
• تایم‌لاین
• وضعیت مراحل
• خلاصه موانع پروژه

معیارهای ارزیابی رابط مولد

ارزیابی فقط نباید بر زیبایی متن مدل متمرکز باشد. معیارهای مهم عبارت‌اند از:

صحت انتخاب Component

آیا مدل برای درخواست مقایسه‌ای جدول یا کارت مقایسه را انتخاب می‌کند؟ آیا برای مراحل انجام کار، چک‌لیست مناسب‌تر را تشخیص می‌دهد؟

کامل‌بودن داده‌ها

آیا تمام فیلدهای موردنیاز Component تولید شده‌اند؟

کیفیت زبان فارسی

عنوان‌ها، برچسب‌ها و توضیحات باید طبیعی، کوتاه و متناسب با فضای رابط باشند.

زمان نمایش نتیجه

رابط مولد نباید کاربر را برای یک تصمیم ساده مدت زیادی منتظر بگذارد. می‌توان ابتدا حالت Loading یا Skeleton نشان داد و Component نهایی را پس از تکمیل پاسخ جایگزین کرد.

ثبات طراحی

حتی اگر نوع رابط را مدل انتخاب می‌کند، رنگ‌ها، فاصله‌ها، تایپوگرافی و رفتار اجزا باید با Design System محصول هماهنگ بمانند.

نرخ تکمیل کار

مهم‌ترین سؤال این است که آیا رابط تولیدشده به کاربر کمک کرده وظیفه خود را سریع‌تر و ساده‌تر تمام کند؟

اشتباهات رایج در ساخت Generative UI

تولید کد کامل برای هر درخواست

در بسیاری از محصولات نیازی نیست مدل هر بار کد React جدید تولید کند. انتخاب از میان Componentهای آماده، ساده‌تر و پایدارتر است.

تعریف Componentهای بیش از حد

اگر ده‌ها Component مشابه به مدل معرفی شوند، احتمال انتخاب نامناسب بیشتر می‌شود. ابتدا با سه تا پنج Component کاملاً متفاوت شروع کنید.

استفاده از توضیحات مبهم

نام و توضیح هر Component باید دقیق باشد:

comparison:
برای مقایسه دو یا چند گزینه براساس ویژگی‌های مشترک

توضیح دقیق به مدل کمک می‌کند رابط درست را انتخاب کند.

ترکیب محتوا و ظاهر

مدل بهتر است داده و نوع Component را تولید کند. اندازه فونت، رنگ، فاصله، Breakpoint و جزئیات Design System باید در کد برنامه تعریف شوند.

نداشتن رابط پیش‌فرض

اگر خروجی با هیچ Component تخصصی سازگار نبود، یک Component عمومی مانند summary می‌تواند نتیجه را نمایش دهد.

انتخاب مدل بدون آزمایش فارسی

عملکرد مدل در تولید متن فارسی لزوماً با توانایی آن در تولید JSON یا انتخاب Component یکسان نیست. مدل را با درخواست‌های واقعی محصول آزمایش کنید.

نقشه راه پیاده‌سازی

برای شروع، این مسیر عملی پیشنهاد می‌شود:

1. سه کاربرد پرتکرار محصول را شناسایی کنید.
2. برای هر کاربرد یک Component مشخص بسازید.
3. Schema مشترک خروجی را تعریف کنید.
4. مدل را از طریق API درواره متصل کنید.
5. Component Registry ایجاد کنید.
6. نمونه‌های فارسی واقعی را آزمایش کنید.
7. خطاهای انتخاب Component را ثبت کنید.
8. Prompt و توضیحات Componentها را اصلاح کنید.
9. در صورت نیاز Streaming یا Tool Calling اضافه کنید.
10. پس از اثبات نیاز، A2UI یا AG-UI را بررسی کنید.

برای نسخه اولیه، JSON و Component Registry معمولاً کافی است. استانداردهای کامل‌تر زمانی ارزش بیشتری دارند که چند ایجنت، چند Frontend یا تعامل‌های چندمرحله‌ای وارد معماری شوند.

نقش API درواره در رابط کاربری مولد

Generative UI از چند لایه تشکیل می‌شود:

• مدل هوش مصنوعی
• Prompt یا Toolها
• Schema خروجی
• Backend
• Component Registry
• Design System
• Frontend

درواره لایه دسترسی به مدل‌های هوش مصنوعی را فراهم می‌کند. شما می‌توانید با یک API سازگار با OpenAI، مدل مناسب پروژه را فراخوانی کنید:

https://api.darvareh.ir/v1

مزیت این معماری برای تیم‌های ایرانی عبارت است از:

• اتصال با ساختار آشنای OpenAI-compatible
• امکان آزمایش مدل‌های مختلف با تغییر محدود کد
• پرداخت ریالی
• استفاده از یک API واحد برای توسعه نمونه اولیه و محصول
• انتخاب مدل متناسب با کیفیت، سرعت و هزینه

پشتیبانی قابلیت‌های پیشرفته در سطح مدل متفاوت است؛ بنابراین فهرست مدل‌ها و مشخصات جاری را پیش از پیاده‌سازی بررسی کنید.

پرسش‌های متداول

Generative UI چیست؟

Generative UI رابطی است که شکل یا ترکیب آن هنگام اجرای برنامه و براساس درخواست و وضعیت کاربر تعیین می‌شود. مدل می‌تواند از میان Componentهای مشخص، رابط مناسب را انتخاب کند.

آیا Generative UI همان تولید کد رابط است؟

خیر. تولید کد یکی از روش‌های ممکن است، اما در معماری‌های عملی معمولاً مدل یک Component یا Schema مشخص را انتخاب می‌کند و برنامه آن را رندر می‌کند.

تفاوت Generative UI و UI/UX Design چیست؟

در طراحی UI/UX با هوش مصنوعی، مدل به طراح یا برنامه‌نویس برای ساخت رابط کمک می‌کند. در Generative UI، رابط هنگام استفاده کاربر و متناسب با درخواست او تغییر می‌کند.

آیا برای ساخت رابط مولد به ایجنت نیاز داریم؟

خیر. یک مدل با خروجی ساختاریافته می‌تواند Component مناسب را انتخاب کند. ایجنت زمانی لازم می‌شود که سیستم وظایف چندمرحله‌ای، ابزارها و وضعیت‌های پیچیده داشته باشد.

A2UI چیست؟

A2UI یک قالب باز برای توصیف رابط‌های تولیدشده توسط ایجنت است. برنامه مقصد پیام A2UI را دریافت و با Renderer و Componentهای خود نمایش می‌دهد.

تفاوت A2UI و AG-UI چیست؟

A2UI بیشتر نحوه توصیف رابط را مشخص می‌کند. AG-UI روی جریان تعامل، رویدادها و هماهنگی وضعیت میان ایجنت و برنامه تمرکز دارد.

آیا Generative UI فقط برای React است؟

خیر. این مفهوم را می‌توان در React، Vue، Angular، Flutter، اپلیکیشن موبایل و دیگر محیط‌های رابط کاربری پیاده‌سازی کرد.

آیا رابط مولد از زبان فارسی پشتیبانی می‌کند؟

بله. اگر مدل انتخابی در زبان فارسی عملکرد مناسبی داشته باشد و رابط برنامه از نمایش راست‌به‌چپ پشتیبانی کند، عنوان‌ها، توضیحات و محتوای Componentها می‌توانند فارسی باشند.

آیا همه مدل‌ها خروجی JSON یکسانی تولید می‌کنند؟

خیر. توانایی مدل‌ها در پیروی از Schema، JSON Mode، Tool Calling و زبان فارسی متفاوت است. خروجی باید در Backend بررسی شود و هر مدل با نمونه‌های واقعی محصول آزمایش شود.

چگونه Generative UI را به API درواره متصل کنیم؟

در SDK سازگار با OpenAI، مقدار Base URL را روی آدرس زیر قرار دهید و Model ID را از کاتالوگ جاری انتخاب کنید:

https://api.darvareh.ir/v1

جمع‌بندی

Generative UI مرحله‌ای فراتر از چت‌بات‌های متنی است. در این معماری، مدل فقط پاسخ تولید نمی‌کند؛ بلکه می‌تواند مناسب‌ترین روش نمایش پاسخ را نیز انتخاب کند.

رابط مولد ممکن است نتیجه را به شکل کارت، جدول، چک‌لیست، فرم، نمودار یا تایم‌لاین نمایش دهد. بااین‌حال، برای شروع لازم نیست رابط کاملاً توسط مدل کدنویسی شود. یک معماری شامل خروجی JSON، چند Component مشخص و Component Registry می‌تواند بخش بزرگی از نیازهای محصول را پوشش دهد.

A2UI قالبی برای توصیف رابط‌های تولیدشده توسط ایجنت ارائه می‌کند و AG-UI ارتباط رویدادمحور میان ایجنت و برنامه را استاندارد می‌سازد. این استانداردها برای پروژه‌های چندپلتفرمی و ایجنت‌های تعاملی اهمیت بیشتری پیدا می‌کنند.

برای ساخت نمونه اولیه می‌توانید از React، Zod و یک Backend ساده استفاده کنید و مدل هوش مصنوعی را از طریق API یکپارچه درواره فراخوانی کنید. سپس با آزمایش درخواست‌های واقعی فارسی، Componentها و Prompt را به‌تدریج بهبود دهید.

برای شروع، در درواره ثبت‌نام کنید، کلید API بگیرید، مدل مناسب را از فهرست جاری انتخاب کنید و اولین رابط کاربری مولد خود را بسازید.

مقالات مرتبط

• طراحی UI/UX با هوش مصنوعی؛ از ایده تا کد
• Structured Outputs چیست؟ آموزش دریافت خروجی JSON
• AI Agent و Agent Skills چیست؟
• API سازگار با OpenAI چیست؟
• API هوش مصنوعی چیست؟

منابع رسمی

• مستندات Generative UI در Vercel AI SDK
• معرفی رسمی A2UI توسط Google Developers
• وب‌سایت و مستندات رسمی A2UI
• مخزن رسمی A2UI در GitHub
• مستندات رسمی AG-UI
• مخزن رسمی AG-UI در GitHub

این مقاله صرفاً با هدف آموزش و اطلاع‌رسانی تهیه شده است. پیش از استفاده عملی، مستندات رسمی سرویس‌ها و صفحه سلب مسئولیت را مطالعه کنید.