﻿﻿{"id":2309,"date":"2026-02-10T17:03:37","date_gmt":"2026-02-10T16:03:37","guid":{"rendered":"https:\/\/elearningsamba.com\/index.php\/the-vibe-companion-une-interface-web-pour-piloter-claude-code\/"},"modified":"2026-02-10T17:03:37","modified_gmt":"2026-02-10T16:03:37","slug":"the-vibe-companion-une-interface-web-pour-piloter-claude-code","status":"publish","type":"page","link":"https:\/\/elearningsamba.com\/index.php\/the-vibe-companion-une-interface-web-pour-piloter-claude-code\/","title":{"rendered":"The Vibe Companion &#8211; Une interface web pour piloter Claude Code"},"content":{"rendered":"<p>Claude Code, c&#8217;est super puissant&#8230; mais faut avouer que dans un terminal, quand l&#8217;IA commence \u00e0 encha\u00eener les appels d&#8217;outils dans tous les sens, on se retrouve vite \u00e0 lire de la Matrice sans les lunettes de Neo. Surtout si vous tentez le coup depuis un iPad ou un mobile, \u00e7a pique.<\/p>\n<p>Mais c&#8217;\u00e9tait sans compter sur<br \/>\n<a href=\"https:\/\/github.com\/The-Vibe-Company\/companion\">Companion<\/a><br \/>\n, un projet open source qui vous colle une interface web par-dessus Claude Code. En gros, au lieu de scroller fr\u00e9n\u00e9tiquement dans votre terminal comme un hamster sous caf\u00e9ine, vous avez une vraie UI avec des blocs r\u00e9tractables, de la coloration syntaxique et une vue claire de ce que l&#8217;agent fabrique. \u00c7a tourne sur desktop, mobile, tablette&#8230; bref, partout o\u00f9 y&#8217;a un navigateur. D&#8217;ailleurs, si vous pr\u00e9f\u00e9rez une<br \/>\n<a href=\"https:\/\/korben.info\/opcode-gui-claude-code-asterisk.html\">app desktop native<\/a><br \/>\n, y&#8217;a aussi Opcode qui fait le taf.<\/p>\n<p>\n<img decoding=\"async\" src=\"https:\/\/korben.info\/cdn-cgi\/image\/width=1200,fit=scale-down,quality=90,f=avif\/the-vibe-companion-web-ui-claude-code\/the-vibe-companion-web-ui-claude-code-2.png\" alt=\"\" loading=\"lazy\">\n<\/p>\n<p>Le truc trop cool c&#8217;est que \u00e7a peut g\u00e9rer plusieurs sessions en parall\u00e8le. Vous pouvez donc jongler entre diff\u00e9rentes instances de Claude Code, chacune avec ses propres permissions. D&#8217;ailleurs, y&#8217;a 4 modes de permission : du &#8220;je valide tout \u00e0 la main&#8221; au &#8220;YOLO bypass all&#8221; pour ceux qui aiment vivre dangereusement&#8230; et qui n&#8217;ont pas install\u00e9 de<br \/>\n<a href=\"https:\/\/korben.info\/claude-code-safety-net-plugin-securite-agent-ia.html\">plugin de s\u00e9curit\u00e9<\/a><br \/>\n(on vous aura pr\u00e9venus).<\/p>\n<p>Chaque appel d&#8217;outil (Bash, Read, Write, WebSearch&#8230;) est affich\u00e9 et vous pouvez approuver, refuser ou m\u00eame \u00e9diter les commandes avant ex\u00e9cution. Si vous utilisez des sub-agents, Companion affiche les t\u00e2ches imbriqu\u00e9es sous le parent. C&#8217;est propre.<\/p>\n<p>Et puis y&#8217;a ce petit d\u00e9tail qui fait plaisir \u00e0 savoir une barre de progression color\u00e9e qui montre l&#8217;occupation de votre fen\u00eatre de contexte avec une estimation du co\u00fbt en temps r\u00e9el. Parce que bon, savoir que votre session de debug \u00e0 3h du mat&#8217; vient de vous co\u00fbter l&#8217;\u00e9quivalent d&#8217;un kebab, c&#8217;est quand m\u00eame pratique. Mais est ce que \u00e7a vous co\u00fbte vraiment de l&#8217;argent ??? H\u00e9 bien le projet utilise le flag un peu cach\u00e9 <code>--sdk-url<\/code> de Claude Code pour communiquer via WebSocket sur le port 3456.<\/p>\n<p>Et au cas o\u00f9 vous vous demanderiez, pas besoin de cl\u00e9 API suppl\u00e9mentaire puisque \u00e7a se branche directement sur votre abo Claude Pro ou Team (donc tout est dans le forfait).<\/p>\n<p>\n<img decoding=\"async\" src=\"https:\/\/korben.info\/cdn-cgi\/image\/width=1200,fit=scale-down,quality=90,f=avif\/the-vibe-companion-web-ui-claude-code\/the-vibe-companion-web-ui-claude-code-3.png\" alt=\"\" loading=\"lazy\">\n<\/p>\n<p>Pour l&#8217;installer, c&#8217;est pas la mer \u00e0 boire. Faut juste avoir Bun sur votre b\u00e9cane, et ensuite :<\/p>\n<div class=\"highlight\">\n<pre class=\"chroma\"><code class=\"language-fallback\" data-lang=\"fallback\"><span class=\"line\"><span class=\"cl\">bunx the-vibe-companion\n<\/span><\/span><\/code><\/pre>\n<p>Ensuite vous ouvrez <code>http:\/\/localhost:3456<\/code> et c&#8217;est parti. Pour les bidouilleurs, tout le code est sur GitHub, un <code>bun install<\/code> dans le dossier <code>companion\/web<\/code> et vous avez votre instance de dev. Apr\u00e8s y&#8217;a plus qu&#8217;\u00e0 installer<br \/>\n<a href=\"https:\/\/korben.info\/tailscale-reseau-prive-virtuel.html\">Tailscale<\/a><br \/>\n(ou votre propre VPN local) et vous avez acc\u00e8s \u00e0 votre Claude Code depuis n&#8217;importe o\u00f9.<\/p>\n<p>Attention quand m\u00eame, le protocole WebSocket est reverse-engineer\u00e9, donc si Anthropic change un truc demain&#8230; bon, vous voyez le d\u00e9lire, \u00e7a peut casser. Et si vous voulez en savoir plus sur les coulisses du<br \/>\n<a href=\"https:\/\/korben.info\/claude-anthropic-protocole-mcp-connexion-donnees.html\">protocole MCP<\/a><br \/>\nd&#8217;Anthropic, j&#8217;en avais parl\u00e9 il y a quelque temps. Mais en attendant, \u00e7a marche nickel et \u00e7a rend Claude Code nettement plus digeste qu&#8217;un terminal brut.<\/p>\n<p>Allez jeter un \u0153il !<\/p>\n<\/div>\n","protected":false},"excerpt":{"rendered":"<p>Claude Code, c&#8217;est super puissant&#8230; mais faut avouer que dans un terminal, quand l&#8217;IA commence \u00e0 encha\u00eener les appels d&#8217;outils dans tous les sens, on se retrouve vite \u00e0 lire de la Matrice sans les lunettes de Neo. Surtout si vous tentez le coup depuis un iPad ou un mobile, \u00e7a pique. Mais c&#8217;\u00e9tait sans compter sur Companion , un projet open source qui vous colle une interface web par-dessus Claude Code. En gros, au lieu de scroller fr\u00e9n\u00e9tiquement dans votre terminal comme un hamster sous caf\u00e9ine, vous avez une vraie UI avec des blocs r\u00e9tractables, de la coloration syntaxique et une vue claire de ce que l&#8217;agent fabrique. \u00c7a tourne sur desktop, mobile, tablette&#8230; bref, partout o\u00f9 y&#8217;a un navigateur. D&#8217;ailleurs, si vous pr\u00e9f\u00e9rez une app desktop native , y&#8217;a aussi Opcode qui fait le taf. Le truc trop cool c&#8217;est que \u00e7a peut g\u00e9rer plusieurs sessions en parall\u00e8le. Vous pouvez donc jongler entre diff\u00e9rentes instances de Claude Code, chacune avec ses propres permissions. D&#8217;ailleurs, y&#8217;a 4 modes de permission : du &#8220;je valide tout \u00e0 la main&#8221; au &#8220;YOLO bypass all&#8221; pour ceux qui aiment vivre dangereusement&#8230; et qui n&#8217;ont pas install\u00e9 de plugin de s\u00e9curit\u00e9 (on vous aura pr\u00e9venus). Chaque appel d&#8217;outil (Bash, Read, Write, WebSearch&#8230;) est affich\u00e9 et vous pouvez approuver, refuser ou m\u00eame \u00e9diter les commandes avant ex\u00e9cution. Si vous utilisez des sub-agents, Companion affiche les t\u00e2ches imbriqu\u00e9es sous le parent. C&#8217;est propre. Et puis y&#8217;a ce petit d\u00e9tail qui fait plaisir \u00e0 savoir une barre de progression color\u00e9e qui montre l&#8217;occupation de votre fen\u00eatre de contexte avec une estimation du co\u00fbt en temps r\u00e9el. Parce que bon, savoir que votre session de debug \u00e0 3h du mat&#8217; vient de vous co\u00fbter l&#8217;\u00e9quivalent d&#8217;un kebab, c&#8217;est quand m\u00eame pratique. Mais est ce que \u00e7a vous co\u00fbte vraiment de l&#8217;argent ??? H\u00e9 bien le projet utilise le flag un peu cach\u00e9 &#8211;sdk-url de Claude Code pour communiquer via WebSocket sur le port 3456. Et au cas o\u00f9 vous vous demanderiez, pas besoin de cl\u00e9 API suppl\u00e9mentaire puisque \u00e7a se branche directement sur votre abo Claude Pro ou Team (donc tout est dans le forfait). Pour l&#8217;installer, c&#8217;est pas la mer \u00e0 boire. Faut juste avoir Bun sur votre b\u00e9cane, et ensuite : bunx the-vibe-companion Ensuite vous ouvrez http:\/\/localhost:3456 et c&#8217;est parti. Pour les bidouilleurs, tout le code est sur GitHub, un bun install dans le dossier companion\/web et vous avez votre instance de dev. Apr\u00e8s y&#8217;a plus qu&#8217;\u00e0 installer Tailscale (ou votre propre VPN local) et vous avez acc\u00e8s \u00e0 votre Claude Code depuis n&#8217;importe o\u00f9. Attention quand m\u00eame, le protocole WebSocket est reverse-engineer\u00e9, donc si Anthropic change un truc demain&#8230; bon, vous voyez le d\u00e9lire, \u00e7a peut casser. Et si vous voulez en savoir plus sur les coulisses du protocole MCP d&#8217;Anthropic, j&#8217;en avais parl\u00e9 il y a quelque temps. Mais en attendant, \u00e7a marche nickel et \u00e7a rend Claude Code nettement plus digeste qu&#8217;un terminal brut. Allez jeter un \u0153il !<\/p>\n","protected":false},"author":1,"featured_media":2310,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"give_campaign_id":0,"_monsterinsights_skip_tracking":false,"_monsterinsights_sitenote_active":false,"_monsterinsights_sitenote_note":"","_monsterinsights_sitenote_category":0,"_kadence_starter_templates_imported_post":false,"footnotes":""},"class_list":["post-2309","page","type-page","status-publish","has-post-thumbnail","hentry"],"campaignId":"","_links":{"self":[{"href":"https:\/\/elearningsamba.com\/index.php\/wp-json\/wp\/v2\/pages\/2309","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/elearningsamba.com\/index.php\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/elearningsamba.com\/index.php\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/elearningsamba.com\/index.php\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/elearningsamba.com\/index.php\/wp-json\/wp\/v2\/comments?post=2309"}],"version-history":[{"count":0,"href":"https:\/\/elearningsamba.com\/index.php\/wp-json\/wp\/v2\/pages\/2309\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/elearningsamba.com\/index.php\/wp-json\/wp\/v2\/media\/2310"}],"wp:attachment":[{"href":"https:\/\/elearningsamba.com\/index.php\/wp-json\/wp\/v2\/media?parent=2309"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}