Google A2UI v0.9: واجهات يولّدها الـ AI بدون كود خطر — متى تعتمد عليها

لو في أبريل 2026 شغّلت agent بيولّد واجهات عن طريق إنه يكتب React code على الطاير، إنت بتخلط مخاطر أمنية وتجربة مستخدم في نفس المكان. في 17 أبريل 2026 Google طلّعت A2UI v0.9، بروتوكول ساكت ومهم: الـ agent مش بيكتب كود، بيختار من كتالوج مكوّنات موثوق إنت محدّده. المقال ده بيقولك بالظبط متى تتبنّاه على شغلك، ومتى هو overkill.

المشكلة باختصار

فيه موجة AI بتقول "اديني prompt، هرجّعلك واجهة كاملة". المنتج شكله لطيف في الـ demos، لكن في production بتواجه تلاتة مشاكل: حقن كود ضار من hallucinations، مكوّنات مش بتطابق الـ design system بتاعك، وصعوبة اختبار سلوك بيتغيّر في كل طلب. A2UI بيحل التلاتة بطريقة واحدة: الـ agent مش بيبعت HTML أو JSX، بيبعت JSON وصفي (declarative) بيقول "ارندر Button اسمها ادفع، جواها Card فيها TextField رقم الفاتورة". الـ renderer عندك (React أو Flutter أو Angular أو Lit) هو اللي بيرسمها من كتالوجك إنت.

هنفهمها بمثال الأول

تخيّل مطعم قائمته ثابتة. العميل لما بيقعد، ميدخلش المطبخ يطبخ اللي عايزه؛ بيختار من المنيو اللي الشيف جهّزه. A2UI بالظبط كدا. الـ agent (العميل) بيختار من مكوّنات الواجهة اللي إنت (الشيف) جهّزتها وأمّنتها قبل كده. لو طلب حاجة مش في القائمة، المطبخ بيرفض. مفيش "اطبخ لي حاجة إنت بتقرّر شكلها"، الكل بيتحرّك داخل حدود واضحة.

التعريف العلمي بعد المثال

A2UI (Agent to UI) هو بروتوكول declarative لنقل نوايا واجهة المستخدم بين agent و client renderer. الـ agent بيبعت شجرة component descriptors في JSON مع props لكل مكوّن، والـ renderer على جهاز المستخدم بيستدعي المكوّن المطابق من كتالوج trusted pre-registered. لا يوجد code execution، لا eval، ولا HTML خام راجع من الـ LLM. ده بيلغي تمامًا فئة هجمات الـ UI injection وبيخلّي السلوك قابل للاختبار unit-by-unit.

اللي جديد فعلاً في v0.9

الإصدار ده (17 أبريل 2026) بيضيف 4 حاجات بيفرقوا في production:

1. Python Agent SDK رسمي: لحد دلوقتي، أغلب الـ backends المتكاملة مع A2UI كانت بتُكتب بـ TypeScript. Go و Kotlin في الـ Roadmap.
2. React renderer رسمي بجانب تحديثات لـ Flutter و Lit و Angular تحت web core library موحّدة.
3. Client-defined functions: تقدر تعرّف validation logic على الـ client، والـ agent بيطلب استدعاءها. مفيد جدًا للـ forms اللي قواعدها بتتغيّر حسب بيانات المستخدم.
4. Client-to-server data syncing: بيفتح الباب لـ collaborative editing بين الـ user والـ agent في الوقت الحقيقي بدون ما تبني WebSocket layer من الصفر.

مثال تنفيذي: form ديناميكي في أقل من 30 سطر

هنبني endpoint agent بيولّد form فاتورة، وفي الـ client هنرندره بـ React من كتالوج بتاعنا.

# backend agent (Python)
from a2ui import Agent, components as c

agent = Agent()

@agent.respond_to("create_invoice_form")
def build_form(context):
    return c.Card(children=[
        c.Heading(text="فاتورة جديدة"),
        c.TextField(id="customer", label="اسم العميل", required=True),
        c.NumberField(id="amount", label="المبلغ بالجنيه", min=1),
        c.Dropdown(id="currency", label="العملة", options=["EGP", "USD", "SAR"]),
        c.Button(id="submit", label="حفظ", action="submit_invoice"),
    ])

وعلى الـ client React:

import { A2UIRenderer } from "@a2ui-sdk/react";
import * as myCatalog from "./components"; // مكوّناتك المعتمدة

export default function InvoicePage() {
  return (
    <A2UIRenderer
      agentEndpoint="/api/agent"
      catalog={myCatalog}
      request={{ intent: "create_invoice_form" }}
    />
  );
}

اللي بيحصل فعلاً: الـ agent بيبعت JSON واحد (حوالي 400 بايت)، الـ renderer بيلاقي المكوّنات في كتالوجك وبيرسمهم بستايلك إنت. الـ design system محفوظ، ومفيش سطر JSX واحد جاي من الـ LLM.

trade-offs لازم تحسبها

مفيش وجبة مجانية. A2UI بيكسّبك أمان وتطابق تصميمي، وبيخسّرك حاجتين:

• مرونة ديناميكية محدودة: أي مكوّن الـ agent محتاجه لازم يكون في الكتالوج مسبقًا. لو حالات استخدامك بتفاجأ بمكوّنات جديدة كل أسبوع، هتلاقي نفسك بتحدّث الكتالوج باستمرار. المكسب: كل مكوّن عدّى QA و accessibility checks. الخسارة: زمن تطوير إضافي لكل "نوع شاشة" جديد.
• overhead أولي: احسب 2-3 أيام شغل علشان تلف مكتبة مكوّناتك الحالية بـ A2UI adapters. على مشروع فيه 5 شاشات بس، الوقت ده ممكن يساوي وقت كتابة الشاشات كلها يدويًا.

الأمان: ليه الفرق مش تفصيلي

أكبر مشكلة في الـ agents اللي بتولّد كود: أي سطر بيرجع من LLM بيمر بـ interpreter عندك. hallucination واحد ممكن يرسم زر "Submit Payment" يبعت الفلوس على endpoint غلط، أو form يخزّن الـ PII في storage غير مُصرّح. A2UI بيقفل الباب ده لأن الـ agent ما يقدرش "يخترع" مكوّن. لو قال Button، لازم تكون Button معرّفة في كتالوجك. لو قال مكوّن مش موجود، الـ renderer بيرجّع validation error قبل ما أي حاجة ترسم.

مقارنة رقمية مبسّطة

في تقييم داخلي من CopilotKit نُشر حوالي 20 أبريل 2026 على 10,000 عينة agent outputs:

• Raw code generation: حوالي 4.2% من المخرجات فيها XSS محتمل أو component مش موجود (hallucination).
• A2UI declarative: 0% XSS. ~0.8% invalid catalog reference، بترجع خطأ آمن قبل الرندر.

الأرقام دي تقديرية ومعتمدة على مجموعة الاختبار تحديدًا، لكنها بتوضّح اتجاه واضح: إزالة code execution من المعادلة بتلغي فئة كاملة من المخاطر.

متى لا تستخدم A2UI

الافتراض هنا إن عندك ≥ 20 شاشة ديناميكية، أو agent بيتعامل مع inputs بتتغيّر كل جلسة. لو مشروعك أصغر من كدا، استخدم forms يدوية عادية؛ A2UI هيبقى overkill صريح. كمان، لو الواجهة عندك native iOS/Android بدون renderer A2UI جاهز (Android لسه في Roadmap)، ما تحاولش تلفّ الحتة دي يدويًا؛ هتبني طبقة هشّة أصعب في الصيانة من اللي بتهرب منه.

الخطوة التالية

لو عندك منتج فيه agent بيولّد شاشات الأسبوع ده، جرّب الـ quickstart الرسمي: ركّب @a2ui-sdk/react و a2ui package للـ Python، لفّ 3 مكوّنات من design system بتاعك كـ catalog، واعمل اختبار على شاشة واحدة. لو شغلك production-scale، استنى v1.0 (متوقع خلال 3 شهور) قبل ما تدخل في تحويل كامل — الـ API شبه مستقر لكن لسه فيه breaking changes محتملة قبل الـ GA. لو بتعمل POC أو داخلي، ابدأ دلوقتي.

المصادر

• Google Developers Blog — A2UI v0.9: The New Standard for Portable, Framework-Agnostic Generative UI: developers.googleblog.com/a2ui-v0-9-generative-ui
• A2UI Protocol Specification v0.9: a2ui.org/specification/v0.9-a2ui
• GitHub — google/A2UI: github.com/google/A2UI
• Developer Tech News — Google releases A2UI v0.9 to standardise generative UI: developer-tech.com
• CopilotKit Blog — Build with Google's new A2UI Spec: copilotkit.ai
• The New Stack — Agent UI Standards Multiply: MCP Apps and Google's A2UI: thenewstack.io
• @a2ui-sdk/react على npm: npmjs.com/package/@a2ui-sdk/react