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

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.

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.