Composition d'interface pilotée par l'IA : du prompt à la modification de mise en page en 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.

Le goulot d'étranglement : la dépendance à l'ingénierie dans la gestion de contenu

Dans le flux de travail standard d'une plateforme OTT, une demande d'ajout d'une nouvelle rangée « Oscar Winners » à la page d'accueil déclenche un ticket Jira, la planification d'un sprint de développement, le codage, l'assurance qualité et le déploiement.

Notre objectif est de permettre à un responsable de mettre en œuvre ce changement via une commande dans le CMS :

« Créez un carrousel “Oscar Winners” sur la page d'accueil avec 5 films de notre catalogue ayant remporté ce prix. »

La solution : la composition d'interface déclarative vs la génération de code

De nombreuses applications d'IA se concentrent sur les grands modèles de langage (LLM) qui écrivent du code React ou Vue à la volée. En environnement d'entreprise, cette approche introduit des risques :

• Incohérence : le modèle pourrait inventer des classes qui ne correspondent pas à la charte de marque.
• Menaces de sécurité : l'injection de code généré crée des vulnérabilités.
• Fragilité : le résultat est non déterministe.

Nous utilisons la composition d'interface pilotée par l'IA. Le LLM agit comme la couche logique qui décide quel bloc choisir et quelles données y insérer.

Architecture : le Model Context Protocol (MCP) comme « port USB-C » pour l'IA

Pour interagir avec le CMS, l'Agent a besoin d'un moyen standardisé d'appeler des fonctions et d'accéder à des sources de données externes. C'est là qu'intervient le Model Context Protocol (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.

L'architecture MCP se compose de trois parties :

1. Hôte MCP : L'application où résident les agents IA (par exemple, notre interface CMS ou un IDE comme Cursor).
   
2. Clients MCP : le connecteur qui maintient la connexion 1:1 avec le serveur.
   
3. Serveurs MCP : services légers qui exposent des outils et des ressources au client.

Voici un extrait de code fonctionnel simplifié d'un serveur MCP développé en Python. Ce serveur agit comme un pont, permettant l'appel de fonctions pour rechercher du contenu et modifier la mise en page.

# 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()

Composition d'interface utilisateur pilotée par l'IA

Découvrez nos solutions

Découvrez nos solutions

Exécution : comment l'agent traduit l'intention en action

Lorsqu'un utilisateur saisit une invite, l'outil d'IA la décompose en un plan et une séquence d'utilisation d'outils. Le Model Context Protocol gère la couche de transport, garantissant que le modèle reçoit les informations pertinentes sur les outils disponibles.

1. Invite :
« Créez un carrousel “Oscar Winners” sur la page d'accueil avec 5 films de notre catalogue ayant remporté ce prix. »

2. Plan de l'agent (raisonnement interne) :

• « Je dois d'abord identifier le contenu à partir des sources de données. »
• « Avec les identifiants obtenus, je vais configurer un carrousel. »
• « Je placerai le composant sur la page d'accueil. »

3. Exécution (séquence d'appels d'outils MCP) :

• findContentByQuery -> Renvoie la liste des ID depuis le référentiel de contenu.
• createUiComponent -> Crée l'objet.
• addComponentToPage -> Met à jour la mise en page.

4. Réponse de l'utilisateur (dans le CMS) :
« C'est fait. La section « Oscar Winners » a été ajoutée à la page d'accueil. »

L'IA génère-t-elle du code frontend dans cette approche ?

Cette approche est puissante, mais une implémentation naïve échouera en production. Chez Spyrosoft BSG, nous avons identifié cinq problèmes critiques.

1. Idempotence et déduplication

Les applications LLM peuvent être imprévisibles. Pour éviter les composants en double, l'outil createUiComponent utilise une clé de déduplication (par exemple, un hachage des paramètres). Si la clé correspond à un brouillon existant, l'agent le réutilise au lieu de créer une copie.

2. Validation et intervention humaine

L'agent ne peut pas agir à l'aveugle. Si la récupération des informations depuis le catalogue est imprécise, le système doit s'interrompre. L'agent demande : « J'ai trouvé 3 films correspondant à ‘Oscar Winners’. Dois-je continuer ? » Cela maintient l'humain aux commandes.

3. Sécurité et autorisations des outils

Les intégrations standard négligent souvent les permissions des outils. Dans notre architecture, chaque requête via le protocole de contexte est autorisée. Notre SDK vérifie si l'utilisateur dispose des droits nécessaires pour modifier la page d'accueil avant d'exécuter une action d'écriture.

4. Environnement de test et gestion des versions

Nous ne permettons jamais aux modèles d'IA de toucher directement la production. L'Agent opère sur une « version brouillon ». Ce n'est qu'après revue qu'un outil publishChanges pousse les modifications vers les systèmes externes en production.

5. Transactionnalité et annulation

Nous traitons la séquence d'actions comme une transaction. Si l'ajout à la page échoue, l'étape de création doit être annulée. Nous mettons en œuvre une pile d'annulation, en utilisant des opérations compensatoires (comme delete_ui_component) pour garantir l'intégrité des données.

Conclusion : l'ingénierie avant les modèles

Nous passons d'une ère où l'IA aide à écrire du code à une ère où l'IA utilise du code écrit par des experts.

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.

Prêt à construire l'avenir du streaming ?

Découvrez nos réalisations enMédias et divertissement et discutons de la manière dont nous pouvons élever votre plateforme.

FAQ