BRAINLESS : les interfaces de Claude Code, Codex et Grok en composants React
https://brainless.swerdlow.dev
📌 BRAINLESS est un registre shadcn de composants React qui reproduisent les interfaces de Claude Code, Codex et Grok dans une application web.
L’intérêt n’est pas de proposer un nouvel agent ni de capturer une interface en image. Brainless transforme plutôt les éléments familiers d’un terminal d’agent en vrais composants intégrables : en-têtes de session, messages, phases de réflexion, appels d’outils, permissions, diffs, listes de tâches et zones de saisie. On peut ainsi construire une démo, une documentation ou un produit qui parle le même langage visuel que les outils de code assisté.
Les composants sont distribués comme des éléments copiables via un registre compatible avec shadcn. Ils restent donc dans le projet qui les utilise, au lieu d’être enfermés dans une bibliothèque distante ou un iframe. Le dépôt précise aussi que les interfaces sont reproduites à partir de captures de sessions réelles, ce qui donne davantage de cohérence aux états de travail, aux sorties de commandes et aux changements de fichiers.
- 🧩 Interfaces d’agents prêtes à intégrer
- 🖥️ Sessions Claude Code, Codex et Grok
- 🔧 Messages, outils, diffs et permissions
- 📦 Installation via registre shadcn
- ♿ Composants React accessibles
- 🧱 Blocs complets pour démos et produits
Je trouve l’idée très pertinente pour les interfaces liées à l’IA. Beaucoup de projets affichent encore les sorties d’un agent dans un simple bloc de texte ou tentent de recréer un terminal en ASCII. Brainless fournit une grammaire visuelle plus crédible, avec des états que les utilisateurs reconnaissent immédiatement.
L’installation reste dans la logique shadcn : on enregistre le namespace, puis on ajoute les composants nécessaires au projet.
bash
bunx shadcn@latest registry add @brainless=https://brainless.swerdlow.dev/r/{name}.json
bunx shadcn@latest add @brainless/claude-session
Les composants couvrent aujourd’hui Claude, Codex et Grok, avec des blocs de session déjà composés pour aller plus vite. Le projet demande toutefois de conserver les sémantiques d’accessibilité, comme les listes, les détails et les zones aria-live, plutôt que de transformer les composants en simple décor de démonstration.
BRAINLESS se place finalement à l’endroit où les agents de code deviennent des produits : entre la sortie brute du terminal et l’interface web que l’on veut montrer. Un petit projet, mais une bonne base pour arrêter de dessiner des faux terminaux dès qu’une application veut raconter ce que fait son agent.
Sources
