Workspace 3 colonnes style Claude avec Hermes WebUI (2026)

Introduction

L'application Web de Claude a mis en page une mise en page que de nombreux utilisateurs expérimentés refusent d'abandonner : historique à gauche, conversation au centre et Artefacts/fichiers à droite. Le problème réside dans l'abonnement à 20 $/mois et les limites de débit de session – ce qui convient pour les discussions informelles, pénible pour les agents, les boucles d'outils et les recherches quotidiennes.

Hermes WebUI (plus de 10 000 étoiles GitHub en 2026) est une interface Web communautaire pour Hermes Agent — l'environnement d'exécution d'agent auto-améliorable de Nous Research. Vous ne réécrivez pas le code de l'agent. Vous exécutez une commande Docker (ou docker compose up) et obtenez une interface en mode sombre à trois volets avec cartes d'appel d'outils en direct et un navigateur de fichiers Workspace qui semble plus proche de l'interface utilisateur du produit de Claude qu'un terminal brut.

Ce guide est un tutoriel pratique Hermes WebUI pour les lecteurs qui souhaitent une interface utilisateur de chat IA auto-hébergée et une interface open source de style Claude sans payer de frais SaaS par siège. Nous couvrons l'architecture, l'installation, la sécurité et six pièges courants.

Si vous exécutez déjà des agents ailleurs, consultez notre Guide orchestration multi-agents OpenClaw — Hermes propose aussi hermes claw migrate. Grands dépôts : Visualisation Understand Anything.

Qu'est-ce que Hermes WebUI (et ce que ce n'est pas)

Hermes WebUI est pas un clone de l'API Claude hébergé. Vous apportez vos propres clés de modèle (Anthropic, OpenRouter, Nous Portal, points de terminaison locaux, etc.) via hermes model — même flexibilité que la CLI, documentée sur hermes-agent.nousresearch.com/docs.

Fonctionnalités de l'interface utilisateur qui correspondent au modèle mental « Espace de travail Claude »

Disposition en trois colonnes

Mode sombre et transparence des outils

Contrairement à une bulle de discussion plate, Hermes WebUI étend les appels d'outils en temps réel (commandes shell, modifications de fichiers, recherche) sous forme de cartes que vous pouvez numériser sans fouiller dans les journaux. Cela reflète la raison pour laquelle les utilisateurs expérimentés de Claude restent dans l'application Web au lieu des scripts API uniquement.

Navigateur de fichiers Workspace

Le volet de droite correspond à votre répertoire /workspace monté (chemin d'accès de l'hôte configurable). Les agents qui écrivent des graphiques, du code ou des rapports s'affichent immédiatement dans le navigateur – plus proche des fichiers de projet Claude Artifacts + que de la vue à fil unique de ChatGPT.

Démo officielle et captures d'écran : Hermes WebUI sur GitHub et le site de démonstration communautaire .

Claude / ChatGPT web vs Hermes WebUI (matrice de décision)

Chemin recommandé :

• Si vous n'avez besoin que de discussions occasionnelles et valorisez zéro opération → gardez Claude/ChatGPT.
• Si vous atteignez les limites, avez besoin d'un travail d'agent volumineux ou souhaitez Telegram + web sur le même agent → Agent Hermes + WebUI.
• Si vous migrez depuis OpenClaw → exécutez hermes claw migrate puis attachez WebUI (voir Hermes docs).

Prérequis

Sur les Mac Apple Silicon, les montages de liaison utilisent votre véritable UID (id -u — souvent 501, et non 1000). Les exemples Docker ci-dessous définissent explicitement WANTED_UID / WANTED_GID.

Étape par étape : installation de Docker (chemin rapide)

Étape 1 — Installer la configuration de l'agent Hermes (première fois uniquement)

curl -fsSL https://raw.githubusercontent.com/NousResearch/hermes-agent/main/scripts/install.sh | coup source ~/.bashrc # ou ~/.zshrc Assistant de configuration Hermes : fournisseur de modèles + clés API

Ignorer si vous utilisez uniquement l'image WebUI tout-en-un avec ~/.hermes.

Étape 2 — Extrayez l'image WebUI

docker pull ghcr.io/nesquena/hermes-webui:latest

Étape 3 — Exécuter un conteneur (one-liner officiel)

docker run -d \ -e WANTED_UID=$(id -u) -e WANTED_GID=$(id -g) \ -v ~/.hermes:/home/hermeswebui/.hermes \ -e HERMES_WEBUI_STATE_DIR=/home/hermeswebui/.hermes/webui \ -v ~/espace de travail:/espace de travail \ -p 127.0.0.1:8787:8787 \ ghcr.io/nesquena/hermes-webui:latest

Ouvrir http://localhost:8787.

Étape 4 — Définir le modèle dans l'interface utilisateur ou CLI

numéro de modèle Hermes par ex. anthropique:claude-sonnet-4-6 ou openrouter route

WebUI lit ~/.hermes/config.yaml à partir du volume monté.

Étape 5 — Accès à distance sécurisé (facultatif)

La liaison par défaut est localhost uniquement (127.0.0.1:8787). Pour un VPS :

# Sur le serveur : définissez HERMES_WEBUI_PASSWORD dans compose/.env, liez 0.0.0.0 uniquement derrière le proxy inverse ssh -N -L 8787:127.0.0.1:8787 utilisateur@votre-serveur

Puis parcourez http://localhost:8787 localement. Pour connaître les bases de SSH sur un boîtier Mac/Linux sans tête, consultez notre Guide SSH Mac mini M4.

Étape 6 — Docker Compose (production)

git clone https://github.com/nesquena/hermes-webui cd hermes-webui cp .env.docker.exemple .env # Corrigez l'UID/GID sur macOS si nécessaire docker compose -d

Voir docs/docker.md dans le dépôt pour les configurations à deux conteneurs (agent + interface utilisateur) et les notes de mise à niveau.

Étape 7 — Agent de test de fumée + UI

Demandez dans le volet central : « Listez les fichiers dans l'espace de travail et créez hello.md.

Architecture : comment WebUI communique avec l'agent

Navigateur (:8787)
    │
    ▼
Hermès WebUI (Node/React)
    │ API WebSocket / HTTP
    ▼
Processus Hermes Agent (outils, LLM, mémoire)
    │
    ├── ~/.hermes/ (config, sessions, compétences)
    └── ~/workspace/ (fichiers du projet → colonne de droite)