Google A2UI v0.9: واجهات الذكاء الاصطناعي من كتالوج آمن

# 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:

اللي بيحصل فعلاً: الـ 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