Free Claude-Style Three-Column Workspace with Hermes WebUI (2026)

Introduction

Claude’s web app nailed a layout many power users refuse to give up: history on the left, conversation in the center, and Artifacts / files on the right. The problem is the $20/month subscription and session rate limits — fine for casual chat, painful for agents, tool loops, and daily research.

Hermes WebUI (10,000+ GitHub stars as of 2026) is a community web front-end for Hermes Agent — Nous Research’s self-improving agent runtime. You do not rewrite agent code. You run one Docker command (or docker compose up) and get a dark-mode, three-pane interface with live tool-call cards and a Workspace file browser that feels closer to Claude’s product UI than a raw terminal.

This guide is a practical Hermes WebUI tutorial for readers who want a self-hosted AI chat UI and a Claude-style open source interface without paying per-seat SaaS fees. We cover architecture, install, security, and six common pitfalls.

If you already run agents elsewhere, compare with our OpenClaw multi-agent routing guide — Hermes even ships hermes claw migrate for OpenClaw users.

What Hermes WebUI is (and is not)

Hermes WebUI is not a hosted Claude API clone. You bring your own model keys (Anthropic, OpenRouter, Nous Portal, local endpoints, etc.) via hermes model — same flexibility as the CLI, documented at hermes-agent.nousresearch.com/docs.

UI features that match the “Claude workspace” mental model

Three-column layout

Dark mode and tool transparency

Unlike a flat chat bubble, Hermes WebUI expands tool calls in real time — shell commands, file edits, search — as cards you can scan without digging through logs. That mirrors why Claude power users stay in the web app instead of API-only scripts.

Workspace file browser

The right pane maps to your mounted /workspace directory (host path configurable). Agents that write charts, code, or reports show up immediately in the browser — closer to Claude Artifacts + project files than ChatGPT’s single thread view.

Official demo and screenshots: Hermes WebUI on GitHub and the community demo site.

Claude / ChatGPT web vs Hermes WebUI (decision matrix)

Recommended path:

• If you only need occasional chat and value zero ops → keep Claude/ChatGPT.
• If you hit limits, need file-heavy agent work, or want Telegram + web on the same agent → Hermes Agent + WebUI.
• If you migrate from OpenClaw → run hermes claw migrate then attach WebUI (see Hermes docs).

Prerequisites

On Apple Silicon Macs, bind mounts use your real UID (id -u — often 501, not 1000). The Docker examples below set WANTED_UID / WANTED_GID explicitly.

Step-by-step: Docker install (fast path)

Step 1 — Install Hermes Agent config (first time only)

curl -fsSL https://raw.githubusercontent.com/NousResearch/hermes-agent/main/scripts/install.sh | bash source ~/.bashrc # or ~/.zshrc hermes setup # wizard: model provider + API keys

Skip if you only use the all-in-one WebUI image with existing ~/.hermes.

Step 2 — Pull the WebUI image

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

Step 3 — Run one container (official one-liner)

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 ~/workspace:/workspace \ -p 127.0.0.1:8787:8787 \ ghcr.io/nesquena/hermes-webui:latest

Open http://localhost:8787.

Step 4 — Set model inside UI or CLI

hermes model # e.g. anthropic:claude-sonnet-4-6 or openrouter route

WebUI reads ~/.hermes/config.yaml from the mounted volume.

Step 5 — Secure remote access (optional)

Default bind is localhost only (127.0.0.1:8787). For a VPS:

# On server: set HERMES_WEBUI_PASSWORD in compose/.env, bind 0.0.0.0 only behind reverse proxy ssh -N -L 8787:127.0.0.1:8787 user@your-server

Then browse http://localhost:8787 locally. For SSH basics on a headless Mac/Linux box, see our Mac mini M4 SSH guide.

Step 6 — Docker Compose (production)

git clone https://github.com/nesquena/hermes-webui cd hermes-webui cp .env.docker.example .env # Fix UID/GID on macOS if needed docker compose up -d

See docs/docker.md in the repo for two-container setups (agent + UI) and upgrade notes.

Step 7 — Smoke test agent + UI

Ask in the center pane: “List files in the workspace and create hello.md.” Confirm the right pane updates and a tool card appears for the shell/file tool.

Architecture: how WebUI talks to the agent

Browser (:8787)
    │
    ▼
Hermes WebUI (Node/React)
    │  WebSocket / HTTP API
    ▼
Hermes Agent process (tools, LLM, memory)
    │
    ├── ~/.hermes/          (config, sessions, skills)
    └── ~/workspace/        (project files → right column)

You can run CLI (hermes), gateway (hermes gateway), and WebUI against the same ~/.hermes state — pick the interface per device. Details: Architecture docs.

Troubleshooting

Blank UI or “cannot connect” after docker run

Symptom: Browser spins on :8787.

Fix: Check container logs (docker logs <id>), confirm port mapping, ensure nothing else uses 8787. On Linux, try curl -s http://127.0.0.1:8787.

Permission denied on ~/.hermes mount

Symptom: Agent starts but config missing; empty model list.

Fix: Pass WANTED_UID / WANTED_GID matching host id -u / id -g. macOS users: edit .env in compose — defaults assume UID 1000.

WebUI shows workspace but agent does not respond

Symptom: Chat hangs, no streaming.

Fix: Validate API key in ~/.hermes/config.yaml, run hermes doctor on host, check provider quota. Test CLI: hermes in terminal first.

Exposed port without password

Symptom: You changed bind to 0.0.0.0:8787 for LAN access.

Fix: Set HERMES_WEBUI_PASSWORD and put nginx/Caddy with TLS in front. Never expose raw :8787 to the public internet.

FAQ

Hermes WebUI is the closest free, self-hosted path to a Claude-style three-column workspace for agent power users: history, chat, and files in one view — plus transparent tool cards Docker can launch in minutes on port 8787.

Start with the official docker run, mount ~/.hermes and ~/workspace, configure your model with hermes setup, then stress-test with real file-writing tasks. Official repos: nesquena/hermes-webui · NousResearch/hermes-agent.