Blog / Article #177

Astryx et l'IA : quand ton agent se met à faire du frontend, et c'est pas si moche

Ah, l'intégration d'agents IA dans nos applications ! C'est passionnant, mais soyons honnêtes, la partie interface utilisateur peut vite devenir un vrai casse-tête. Entre la logique backend en PHP, l'orchestration des agents, et la nécessité de présenter des informations de manière claire et cohérente à l'utilisateur final, on a vite fait de se retrouver avec des UIs dignes des années 90.

C'est là que j'ai découvert Astryx, le design system open-source de Meta. Leur promesse ? Un système 'agent ready'. Mon radar à 'simplification de vie' s'est immédiatement allumé. L'idée qu'un design system puisse être conçu pour être compris et utilisé par des agents IA, ça, c'est intrigant pour un développeur PHP qui jongle avec des agents comme ceux de phpClaw.

Astryx, le couteau suisse de l'UI par Meta

Imaginez un design system qui a été testé et éprouvé pendant huit ans chez Meta, alimentant plus de 13 000 applications. C'est Astryx. Il nous offre une bibliothèque de plus de 150 composants UI accessibles, des thèmes personnalisables (avec un mode sombre, bien sûr), des modèles prêts à l'emploi et une interface en ligne de commande (CLI) bien pensée. L'objectif est clair : aider les équipes à construire et livrer des interfaces plus rapidement. Actuellement en version bêta, il n'en reste pas moins un outil solide.

Ce qui rend Astryx particulièrement intéressant, c'est sa philosophie 'agent ready'. Mais qu'est-ce que ça signifie concrètement ?

'Agent Ready' : quand l'IA comprend ton design system

L'appellation 'agent ready' n'est pas juste un terme marketing. C'est une approche de conception où l'API, la documentation et la CLI d'Astryx sont structurées pour que les assistants IA puissent les naviguer et les utiliser aussi efficacement qu'un développeur humain. Fini les interfaces 'hallucinées' par l'IA qui ressemblent à rien !

• Documentation et API structurées : Les composants sont accompagnés d'annotations JSDoc détaillées, fournissant des indices de composition que les agents peuvent exploiter.
• CLI pensée pour l'IA : La CLI d'Astryx permet de lister les composants (npx astryx component --list), de générer des modèles (npx astryx template dashboard), et surtout, d'obtenir un manifeste lisible par machine (npx astryx manifest --json). Ce manifeste est une spécification structurée des commandes, arguments et types de réponse, un peu comme une spécification OpenAPI pour une CLI. Un agent IA peut lire ça et comprendre comment interagir avec Astryx.
• Intégration MCP : Un serveur Model Context Protocol (MCP) est intégré à Astryx. Cela permet aux agents IA de 'scaffolder', parcourir et documenter les interfaces utilisateur de manière structurée. C'est le même protocole que peut utiliser par exemple phpClaw pour exposer ses outils à des clients MCP.
• Règles pour agents : La commande npx @astryxdesign/cli init est un petit bijou. Elle génère des règles localisées pour les agents IA, leur interdisant par exemple d'utiliser des balises div brutes ou des styles en ligne. L'IA est ainsi forcée d'utiliser les tokens de design d'Astryx, garantissant une cohérence visuelle.

En bref, Astryx ne se contente pas de fournir des composants ; il fournit un langage que les IA peuvent parler pour construire des interfaces.

Intégrer Astryx dans un projet PHP/Symfony/Laravel : le rôle de l'orchestrateur

Soyons clairs : Astryx est une bibliothèque JavaScript basée sur React. Il ne s'intègre pas directement dans votre code PHP comme une dépendance Composer. Votre application PHP (que ce soit Symfony, Laravel, ou autre, potentiellement avec un framework d'agents comme phpClaw) agira comme le chef d'orchestre. Elle gérera la logique métier, l'interaction avec les agents IA, et servira le frontend généré par ces agents.

Installation d'Astryx (côté frontend)

Pour commencer avec Astryx, il vous faut un environnement JavaScript (Node.js) et React 19 ou ultérieur. L'installation est classique via npm :

npm install @astryxdesign/core @astryxdesign/theme-neutral @stylexjs/stylex
npm install -D @astryxdesign/cli

Ensuite, pour préparer votre projet à être 'agent ready', la CLI d'Astryx est votre amie :

npx @astryxdesign/cli init

Cette commande va générer les fichiers nécessaires pour guider vos agents IA dans la création d'interfaces, en leur donnant les bonnes pratiques et les contraintes d'Astryx.

Le workflow avec un agent IA piloté par PHP

Imaginez que votre application PHP utilise phpClaw pour gérer un agent capable de suivre des commandes clients. Vous avez défini un OrderStatusTool :

<?php

namespace App\Tools;

use PhpClaw\Contracts\Tool;

class OrderStatusTool implements Tool
{
    public function getName(): string
    {
        return 'order_status_tool';
    }

    public function getDescription(): string
    {
        return 'Récupère le statut d\'une commande par son ID.';
    }

    public function getParameters(): array
    {
        return [
            'type' => 'object',
            'properties' => [
                'orderId' => [
                    'type' => 'string',
                    'description' => 'L\'ID de la commande',
                ],
            ],
            'required' => ['orderId'],
        ];
    }

    public function execute(array $parameters): string
    {
        $orderId = $parameters['orderId'];
        // Logique pour récupérer le statut de la commande
        $status = 'En cours de livraison'; // Exemple
        return json_encode(['orderId' => $orderId, 'status' => $status]);
    }
}

Votre agent PHP sait comment interagir avec cette commande. Maintenant, vous voulez une interface pour ça. C'est là que l'agent IA entre en jeu avec Astryx.

Votre application PHP pourrait envoyer une instruction à un agent IA (par exemple, via une API LLM) : "Génère une interface utilisateur pour interagir avec le 'order_status_tool' de phpClaw. L'utilisateur doit pouvoir entrer un ID de commande et voir le statut. Utilise les composants Astryx."

L'agent IA, grâce à sa compréhension du manifeste Astryx et des règles générées par npx @astryxdesign/cli init, saura qu'il doit utiliser des composants comme Input pour le champ ID, un Button pour déclencher la recherche, et un Text ou un Card pour afficher le résultat. Il générera alors le code React/HTML correspondant, en utilisant les tokens de design et les styles d'Astryx. Ce code frontend serait ensuite servi par votre application PHP.

L'avantage ? L'agent IA ne "hallucine" pas le style. Il utilise un design system cohérent et bien défini. Le développeur PHP se concentre sur la logique backend et l'orchestration, laissant à l'IA le soin de construire une UI propre et fonctionnelle, guidée par Astryx.

Mon avis : un futur prometteur, mais avec des bémols

Astryx est une proposition fascinante, surtout pour ceux d'entre nous qui cherchent à optimiser le développement d'interfaces avec des agents IA.

Points forts :

• Vraiment 'Agent Ready' : L'approche est bien pensée, avec une documentation et une CLI que les IA peuvent exploiter. C'est un gain de temps considérable pour éviter les UIs incohérentes.
• Robuste et éprouvé : Le fait qu'il vienne de Meta et qu'il ait été utilisé en interne pendant des années est un gage de qualité et de maturité, même en bêta publique.
• Pas de 'styling lock-in' : La possibilité de surcharger les styles avec Tailwind, CSS Modules ou du CSS pur est un vrai plus.
• Thèmes variés : Les 10 thèmes prêts à l'emploi sont une bonne base pour démarrer rapidement.

Limites et pièges à surveiller :

• Dépendance React 19+ : C'est un prérequis, et si votre stack frontend est différente, il faudra l'adapter.
• Statut Beta : Bien que stable chez Meta, le statut public en bêta implique une vigilance sur les évolutions futures.
• Personnalisation poussée : Si votre marque est très spécifique, la personnalisation profonde pourrait atteindre ses limites, les tokens de design pouvant être aplatis. Meta mentionne que l'éjection du code source d'un composant (via une commande 'swizzle') offre une flexibilité, mais transfère la maintenance au développeur, ce qui n'est pas anodin.
• Gouvernance : C'est un projet sponsorisé par Meta. Il faudra voir la dynamique de la communauté et la gouvernance à long terme.

Pour les développeurs PHP qui, comme moi, se lancent dans l'aventure des agents IA, Astryx représente une opportunité de déléguer une partie de la création d'UI à l'IA de manière contrôlée et cohérente. C'est un outil qui, bien que côté frontend, a un impact direct sur la productivité et la qualité des interfaces de nos applications PHP orientées IA.

Je pense que c'est une direction à suivre. L'avenir de nos interfaces pourrait bien être co-construit avec nos agents, et Astryx semble être un excellent médiateur pour cette collaboration.