Outil MCP Propulsé par Claude Génère des Composants HTML Interactifs Sans Outils de Construction

✍️ OpenClawRadar📅 Publié: March 16, 2026🔗 Source
Outil MCP Propulsé par Claude Génère des Composants HTML Interactifs Sans Outils de Construction
Ad

Architecture et flux de travail

Un développeur a créé daub.dev, un système où Claude sert de cerveau à un serveur MCP (Model Context Protocol) qui génère des composants HTML interactifs à la demande. La configuration implique que Claude se connecte au serveur MCP et appelle un outil generate_ui avec une description en langage naturel de ce qui est nécessaire.

L'outil renvoie un extrait HTML+CSS+JS autonome prêt à être inséré dans n'importe quelle page, sans nécessiter React, un bundler ou un pipeline de construction.

Pourquoi Claude fonctionne bien pour ce cas d'usage

Selon le développeur, la capacité de Claude à suivre des instructions sur des schémas d'outils structurés est remarquablement cohérente. L'outil generate_ui possède un schéma d'entrée précis avec des paramètres pour le type de composant, les données et les contraintes de style, et Claude hallucine rarement des champs ou ignore les contraintes.

Avec d'autres modèles, le développeur devait ajouter un parsing défensif important, mais avec Claude, la sortie est propre de manière prévisible. De plus, la compréhension de Claude du HTML sémantique est suffisamment solide pour que les composants qu'il produit soient accessibles par défaut—avec des rôles de repère corrects, des associations d'étiquettes et une navigation au clavier—sans instructions explicites.

Ad

Format de sortie de l'outil

L'outil MCP produit un render_spec—un objet JSON décrivant la mise en page, les emplacements et les données du composant—que le client hydrate en HTML. Cette approche est plus propre que de renvoyer des chaînes HTML brutes car elle est plus facile à différencier, à mettre en cache et à mettre à jour lors de changements d'état sans nécessiter un re-rendu complet.

Le développeur mentionne être disponible pour discuter de la conception du schéma d'outil, du pipeline de rendu ou du fonctionnement de la validation en 7 étapes selfCheck. Un bac à sable pour essayer le système est disponible sur daub.dev/playground.

📖 Lire la source complète : r/ClaudeAI

Ad

👀 See Also

Combat de Bots : Arène d'Agents IA pour Jeux Multijoueurs Construite avec Claude Code
Tools

Combat de Bots : Arène d'Agents IA pour Jeux Multijoueurs Construite avec Claude Code

Bot Fight est une arène où des agents d'IA s'affrontent dans des jeux comme le poker, le billard, Gorillas et le serpent, entièrement construit avec du code Claude sous forme d'un monorepo Next.js + Node avec WebSockets et des moteurs de jeu en temps réel.

OpenClawRadar
Pipeline de Code Claude Automatisée Réduit l'Utilisation de Tokens de 78k à 15k par Fonctionnalité
Tools

Pipeline de Code Claude Automatisée Réduit l'Utilisation de Tokens de 78k à 15k par Fonctionnalité

Un pipeline open-source pour Claude Code automatise 12 phases incluant l'analyse préalable du code existant, réduisant l'utilisation de tokens d'environ 78k à 15k par fonctionnalité. Il propose trois profils (yolo, standard, paranoïaque) et remplace les scores de confiance par une validation basée sur grep.

OpenClawRadar
SWE-rebench-V2 publié : le plus grand ensemble de données multilingues ouvert pour l'entraînement d'agents de code
Tools

SWE-rebench-V2 publié : le plus grand ensemble de données multilingues ouvert pour l'entraînement d'agents de code

Nebius a publié SWE-rebench-V2, actuellement le plus grand ensemble de données ouvert pour l'entraînement d'agents de codage, comprenant un pipeline automatisé pour extraire des environnements d'apprentissage par renforcement à grande échelle et conçu spécifiquement pour l'entraînement à grande échelle en apprentissage par renforcement.

OpenClawRadar
Serveur MCP Implémente le Document de Réflexion pour une Mémoire Persistante de l'Agent de Codage
Tools

Serveur MCP Implémente le Document de Réflexion pour une Mémoire Persistante de l'Agent de Codage

Un développeur a implémenté l'article Reflexion (Shinn et al., NeurIPS 2023) en tant que serveur MCP pour donner aux agents de codage locaux une mémoire persistante de leurs erreurs. Le système utilise une correspondance de motifs basée sur des expressions régulières pour les messages d'erreur et stocke les leçons dans SQLite avec FTS5.

OpenClawRadar