تكوين واجهة المستخدم المدعوم بالذكاء الاصطناعي: من الأمر النصي إلى تعديل التخطيط في OTT

The lifecycle of a digital product often hits a specific wall: the dependency of business teams on engineering capacity. Marketing managers wait days for simple layout changes, while developers spend valuable time moving pixels instead of solving complex backend problems.

At Spyrosoft BSG, we addressed this by building an architecture where an authorized CMS user modifies the frontend using natural language. We demonstrate how to move beyond simple chat interfaces by connecting AI assistants directly to your infrastructure using the Model Context Protocol (MCP).

The core concept here is declarative UI composition. Generative AI should not write frontend code (HTML/CSS/JS) in production, as it is prone to errors. Instead, the AI systems intelligently assemble predefined, styled components. This article outlines the MCP architecture, code implementation, and the specific engineering challenges we solved.

عنق الزجاجة: الاعتماد الهندسي في إدارة المحتوى

في سير العمل القياسي لمنصة OTT، يؤدي طلب إضافة صف جديد بعنوان "الفائزون بجوائز أوسكار" إلى الصفحة الرئيسية إلى إنشاء تذكرة Jira، وتخطيط سبرنت التطوير، والبرمجة، وضمان الجودة، والنشر.

هدفنا هو تمكين المدير من تنفيذ هذا التغيير عبر أمر في نظام إدارة المحتوى:

«أنشئ دوّارة 'الفائزون بالأوسكار' على الصفحة الرئيسية مع 5 أفلام من كتالوجنا فازت بهذه الجائزة.»

الحل: تكوين واجهة المستخدم التصريحي مقابل توليد الكود

تركز العديد من تطبيقات الذكاء الاصطناعي على نماذج اللغة الكبيرة (LLMs) التي تكتب كود React أو Vue بشكل فوري. في بيئة المؤسسات، يطرح هذا النهج مخاطر:

• عدم الاتساق: قد يبتكر النموذج فئات لا تتوافق مع دليل العلامة التجارية.
• التهديدات الأمنية: حقن الكود المُولَّد يخلق ثغرات أمنية.
• الهشاشة: المخرجات غير حتمية.

نستخدم تكوين واجهة المستخدم المدعوم بالذكاء الاصطناعي. يعمل LLM كطبقة منطقية تحدد الكتلة التي يجب اختيارها والبيانات التي يجب وضعها بداخلها.

البنية: بروتوكول سياق النموذج (MCP) بوصفه "منفذ USB-C" للذكاء الاصطناعي

للتفاعل مع نظام إدارة المحتوى (CMS)، يحتاج الوكيل إلى طريقة موحدة لاستدعاء الوظائف والوصول إلى مصادر البيانات الخارجية. وهنا يأتي دور بروتوكول سياق النموذج (MCP).

Think of MCP as a USB-C port for AI models. Just as USB-C provides a standardized connector for peripherals, MCP provides an open standard for connecting LLMs to external tools and content repositories. It eliminates the need to build custom integrations for every new model.

تتكون بنية MCP من ثلاثة أجزاء:

1. مضيف MCP: التطبيق الذي تعمل فيه وكلاء الذكاء الاصطناعي (مثل واجهة نظام إدارة المحتوى لدينا أو بيئة تطوير متكاملة مثل Cursor).
   
2. عملاء MCP: الموصل الذي يحافظ على اتصال فردي 1:1 مع الخادم.
   
3. خوادم MCP: خدمات خفيفة الوزن تُتيح الأدوات والموارد للعميل.

فيما يلي مقتطف برمجي مبسط ووظيفي لخادم MCP مبني بلغة Python. يعمل هذا الخادم كجسر، مما يتيح استدعاء الدوال للبحث في المحتوى وتعديل التخطيط.

# mcp_server.py
from typing import List, Literal, Dict, Any
from fastmcp import FastMcp
 
# [cite_start]In a real implementation, you would import your internal SDK here [cite: 38]
# import our_ott_cms_sdk as cms
 
# --- MOCK (for the article's purpose, to ensure code readability) ---
class MockCMS:
    def search(self, query, limit): return []
    class Layouts:
        def create_component(self, title, type, content): return "comp_123"
        def add_to_page(self, page_id, component_id, position): return True
        def delete_component(self, component_id): return True
    layouts = Layouts()
 
cms = MockCMS() 
# --------------------------------------------------------------------
 
# [cite_start]Initialize the server which will expose capabilities to MCP Clients [cite: 39]
mcp = FastMcp("OTTCmsAgent")
 
# --- Toolset for layout and content manipulation ---
 
@mcp.tool()
async def find_content_by_query(query: str, limit: int = 5) -> List[Dict[str, Any]]:
    """
    [cite_start]Searches for content in the catalog based on a query[cite: 43].
    """
    # [cite_start]Accessing external data sources (OTT Catalog) [cite: 44]
    content_items = cms.search(query=query, limit=limit)
    # Assuming content_items have a to_dict() method
    return [item.to_dict() for item in content_items] if content_items else []
 
@mcp.tool()
async def create_ui_component(
    title: str, 
    component_type: Literal["carousel", "grid", "hero"], 
    content_ids: List[str]
) -> Dict[str, str]:
    """
    Creates a new, abstract UI component definition in the system.
    [cite_start]Note: We do not generate HTML here. We create a structured data object [cite: 53-54].
    """
    # [cite_start][Fixed syntax error from original: arguments are now correctly inside parentheses] [cite: 55-57]
    component_id = cms.layouts.create_component(
        title=title, 
        type=component_type, 
        content=content_ids
    )
    return {"component_id": component_id}
 
@mcp.tool()
async def add_component_to_page(
    component_id: str, 
    page_id: str, 
    position: int = -1
) -> Dict[str, str]:
    """
    Adds an existing component to a page.
    [cite_start]Defaults to adding at the end (position=-1) [cite: 61-62].
    """
    # [cite_start]Backend function call to update the layout [cite: 63]
    success = cms.layouts.add_to_page(
        page_id=page_id, 
        component_id=component_id, 
        position=position
    )
    return {"status": "success" if success else "failure"}
 
@mcp.tool()
async def delete_ui_component(component_id: str) -> Dict[str, str]:
    """
    [cite_start]Removes a UI component. Key for the rollback mechanism[cite: 69].
    """
    # Compensating operation for transaction rollback
    success = cms.layouts.delete_component(component_id=component_id)
    return {"status": "success" if success else "failure"}
 
if __name__ == "__main__":
    # Run the MCP server
    mcp.run()

تكوين واجهة المستخدم المدعوم بالذكاء الاصطناعي

اطّلع على حلولنا

اطّلع على حلولنا

التنفيذ: كيف يترجم الوكيل النية إلى فعل

When a user types a prompt, the AI tool decomposes it into a plan and a sequence of tool usage. The Model Context Protocol handles the transport layer, ensuring the model receives relevant information about available tools.

1. الأمر التوجيهي:
«أنشئ دوّارة 'الفائزون بالأوسكار' على الصفحة الرئيسية مع 5 أفلام من كتالوجنا فازت بهذه الجائزة.»

2. خطة الوكيل (الاستدلال الداخلي):

• "يجب أن أحدد المحتوى أولاً من مصادر البيانات."
• "باستخدام المعرّفات التي تم الحصول عليها، سأقوم بتهيئة عرض دوّار."
• «سأضع المكوّن على الصفحة الرئيسية.»

3. التنفيذ (تسلسل استدعاءات أدوات MCP):

• كيف يمنع النظام التغييرات غير المنضبطة على الواجهة؟
• createUiComponent -> ينشئ الكائن.
• addComponentToPage -> يحدّث التخطيط.

4. استجابة المستخدم (في نظام إدارة المحتوى):
«تم. تمت إضافة قسم "الفائزون بجوائز أوسكار" إلى الصفحة الرئيسية.»

هل يولّد الذكاء الاصطناعي كود الواجهة الأمامية في هذا النهج؟

هذا النهج فعّال، لكن التنفيذ الساذج سيفشل في بيئة الإنتاج. في Spyrosoft BSG، حددنا خمس مشكلات حرجة.

1. ضمان التنفيذ مرة واحدة وإزالة التكرار

LLM applications can be unpredictable. To prevent duplicate components, the createUiComponent tool uses a deduplication key (e.g., hash of parameters). If the key matches an existing draft, the agent reuses it instead of creating a copy.

2. التحقق وإشراك العنصر البشري

لا يمكن للوكيل التصرف بشكل أعمى. إذا كان استرجاع المعلومات من الكتالوج غير دقيق، يجب أن يتوقف النظام. يسأل الوكيل: «وجدت 3 أفلام تطابق 'الفائزون بجوائز الأوسكار'. هل أواصل؟» هذا يُبقي الإنسان مسيطرًا.

3. الأمان وأذونات الأدوات

Standard integrations often overlook tool permissions. In our architecture, every request via the context protocol is authorized. Our SDK verifies if the user has the rights to modify the homepage before executing a write action.

4. البيئة المعزولة وإدارة الإصدارات

لا نسمح أبداً لنماذج AI بالتعامل مع بيئة الإنتاج مباشرة. يعمل الوكيل على "نسخة مسودة". فقط بعد المراجعة تقوم أداة publishChanges بدفع التعديلات إلى الأنظمة الخارجية المباشرة.

5. المعاملاتية والتراجع

We treat the sequence of actions as a transaction. If adding to the page fails, the creation step must be reversed. We implement an undo stack, using compensating operations (like delete_ui_component) to ensure data integrity.

الخلاصة: الهندسة قبل النماذج

ننتقل من عصر يساعد فيه الذكاء الاصطناعي في كتابة الشيفرة البرمجية إلى عصر يستخدم فيه الذكاء الاصطناعي شيفرة برمجية كتبها خبراء.

The real value lies in designing atomic, idempotent tools and using an industry standard like MCP. It allows developers to build production-grade AI that safely interacts with remote resources. At Spyrosoft BSG, we focus on these architectural foundations to deliver real business value in the OTT space.

هل أنت مستعد لبناء مستقبل البث؟

استكشف أعمالنا فيالإعلام والترفيه ودعنا نناقش كيف يمكننا الارتقاء بمنصتك.

الأسئلة الشائعة