Claude風3カラムUI｜Hermes WebUI自ホストガイド（2026）

はじめに

Claude の Web アプリは、多くのパワー ユーザーが諦めたがらないレイアウトを確立しました。履歴が左側、会話が中央、アーティファクト/ファイルが右側です。問題は、$20/月 のサブスクリプションとセッション レート制限 です。カジュアルなチャットには問題ありませんが、エージェント、ツール ループ、毎日の調査には苦痛です。

Hermes WebUI（2026年時点で GitHub スター 1 万超）は、Hermes Agent（Nous Research の自己改善型エージェントランタイム）向けのコミュニティ Web フロントエンドです。エージェントコードの書き換えは不要です。1 本の Docker コマンド（または docker compose up）で、ライブツール呼び出しカードとWorkspace ファイルブラウザ付きのダークモード 3 ペイン UI が手に入ります。

このガイドは、シートごとの SaaS 料金を支払うことなく、自己ホスト型 AI チャット UI と Claude スタイルのオープンソース インターフェイス を求める読者のための実践的な Hermes WebUI チュートリアル です。アーキテクチャ、インストール、セキュリティ、および 6 つの一般的な落とし穴について説明します。

すでに他の場所でエージェントを実行している場合は、OpenClaw マルチエージェント編成ガイドと比較してください。Hermes は OpenClaw ユーザー向けに hermes claw migrate も提供します。大規模リポには Understand Anything コードベース可視化 も参照できます。

Hermes WebUI とは何か (そしてそうでないもの)

Hermes WebUI は、 ではなく、ホストされた Claude API のクローンです。 hermes モデル 経由で独自のモデル キー (Anthropic、OpenRouter、Nous Portal、ローカル エンドポイントなど) を導入します。CLI と同じ柔軟性があり、hermes-agent.nousresearch.com/docs.

に記載されています。

「クロード ワークスペース」メンタル モデルに一致する UI 機能

3 列レイアウト

ダーク モードとツールの透明性

平面的なチャット バブルとは異なり、Hermes WebUI は、ツール呼び出しをリアルタイムで (シェル コマンド、ファイル編集、検索) として、ログを調べずにスキャンできるカードとして拡張します。これは、クロードのパワー ユーザーが API のみのスクリプトではなく Web アプリに留まる理由を反映しています。

ワークスペース ファイル ブラウザ

右側のペインは、マウントされた /workspace ディレクトリ (ホスト パスは構成可能) にマップされます。チャート、コード、またはレポートを作成するエージェントは、ブラウザーに すぐに 表示されます。これは、ChatGPT のシングル スレッド ビューよりもクロード アーティファクト + プロジェクト ファイルに近いものです。

公式デモとスクリーンショット: GitHub の Hermes WebUI および コミュニティ デモ サイト.

Claude / ChatGPT Web 対 Hermes WebUI (意思決定マトリックス)

推奨パス:

• の場合、チャットと値ゼロ操作のみが必要です → Claude/ChatGPT を維持します。
• が制限に達している場合、ファイルを大量に使用するエージェント作業が必要な場合、または同じエージェント上で Telegram + web が必要な場合 → Hermes Agent + WebUI.
• を OpenClaw から移行する場合は、hermes claw を実行 してから、WebUI をアタッチします (Hermes ドキュメント を参照)。

前提条件

Apple Silicon Mac では、バインド マウントは実際の UID (id -u — 多くの場合、1000 ではなく 501) を使用します。以下の Docker の例では、WANTED_UID / WANTED_GID を明示的に設定します。

ステップバイステップ: Docker のインストール (高速パス)

ステップ 1 —Hermes エージェント構成をインストールする (初回のみ)

curl -fsSL https://raw.githubusercontent.com/NousResearch/hermes-agent/main/scripts/install.sh |バッシュ ソース ~/.bashrc # または ~/.zshrc hermes セットアップ # ウィザード: モデルプロバイダー + API キー

既存の ~/.hermes.

でオールインワン WebUI イメージのみを使用する場合はスキップしてください。

ステップ 2 — WebUI イメージを取得する

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

ステップ 3 — 1 つのコンテナーを実行する (公式ワンライナー)

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 ~/ワークスペース:/ワークスペース \ -p 127.0.0.1:8787:8787 \ ghcr.io/nesquena/hermes-webui:latest

http://localhost:8787.

を開く

ステップ 4 — UI または CLI 内にモデルを設定する

hermes モデル番号 例: anthropic:claude-sonnet-4-6 または openrouter Route

WebUI は、マウントされたボリュームから ~/.hermes/config.yaml を読み取ります。

ステップ 5 — 安全なリモート アクセス (オプション)

デフォルトのバインドは localhost のみ (127.0.0.1:8787) です。 VPS の場合:

# サーバー上: compose/.env で HERMES_WEBUI_PASSWORD を設定し、リバース プロキシの背後でのみ 0.0.0.0 をバインドします。 ssh -N -L 8787:127.0.0.1:8787 user@your-server

その後、http://lo を参照してくださいcalhost:8787 ローカル。ヘッドレス Mac/Linux ボックスでの SSH の基本については、Mac mini M4 SSH ガイド.

を参照してください。

ステップ 6 — Docker Compose (運用)

git クローン https://github.com/nesquena/hermes-webui cd エルメスウェブイ cp .env.docker.example .env # 必要に応じて macOS の UID/GID を修正します docker 構成 -d

2 つのコンテナーのセットアップ (エージェント + UI) とアップグレードに関する注意事項については、リポジトリの docs/docker.md を参照してください。

ステップ 7 — スモーク テスト エージェント + UI

中央ペインで質問します: 「ワークスペース内のファイルをリストし、hello.md を作成します。」 右ペイン の更新を確認し、シェル/ファイル ツールの ツール カード が表示されます。

アーキテクチャ: WebUI がエージェントと通信する方法

ブラウザ (:8787)
    │
    ▼
Hermes WebUI (Node/React)
    │ WebSocket / HTTP API
    ▼
Hermes Agent プロセス (ツール、LLM、メモリ)
    │
    §── ~/.hermes/ (設定、セッション、スキル)
    └── ~/workspace/ (プロジェクトファイル→右列)

同じ ~/.hermes 状態に対して、CLI (hermes)、gateway (hermes Gateway)、および WebUI を実行できます。デバイスごとにインターフェイスを選択します。詳細: アーキテクチャ ドキュメント.

トラブルシューティング

docker run

後に空白の UI または「接続できません」

症状: ブラウザが回転します:8787.

修正: コンテナー ログ (docker ログ <id>) を確認し、ポート マッピングを確認し、他に 8787 が使用されていないことを確認します。 Linux では、curl -s http://127.0.0.1:8787.

を試してください。

~/.hermes mount

で権限が拒否されました

症状: エージェントは起動しますが、設定がありません。空のモデル リスト。

修正: WANTED_UID / WANTED_GID をホスト id -u / id -g に渡します。 macOS ユーザー: 作成時に .env を編集します — デフォルトでは UID 1000.

を想定します

WebUI にワークスペースが表示されるが、エージェントが応答しない

症状: チャットがハングし、ストリーミングが行われません。

修正: ~/.hermes/config.yaml の API キーを検証し、ホスト上で hermes Doctor を実行し、プロバイダー クォータを確認します。 CLI をテストします: 最初にターミナルで hermes を実行します。

パスワードなしでポートを公開

症状: LAN アクセス用にバインドを 0.0.0.0:8787 に変更しました。

修正: HERMES_WEBUI_PASSWORD を設定し、TLS を使用した nginx/Caddy を前に置きます。 raw :8787 を公共のインターネットに公開しないでください。

よくある質問

携帯電話で使用できますか? +

はい — サーバーの URL を参照する (認証あり) か、SSH ポート転送 をローカルホストに使用します。 Hermes Gateway は、Web UI のないモバイル向けの Telegram もサポートしています。

クロード アーティファクトを正確に置き換えますか? +

ピクセル完璧ではありません。 ワークスペース ファイル + プレビュー + ツール トレース と セルフホスト コントロール を取得できます。トレードオフにより、洗練された SaaS よりもハッカーや研究者に有利になります。

コンテナは 1 つですか? +

1 つのコンテナ を試すには十分です。 2 つのコンテナ 構成 (エージェント + UI) は、アップグレードや重いツールのワークロードに適しています。アップストリームの docs/docker.md. を参照してください。

Hermes WebUI は、エージェント パワー ユーザー向けの Claude スタイルの 3 列ワークスペース への最も近い 無料のセルフホスト パスです。履歴、チャット、ファイルが 1 つのビューに表示され、透明なツール カードが追加されています。Docker は ポートで数分で起動できます。 8787.

公式の docker run から開始し、~/.hermes および ~/workspace をマウントし、hermes setup でモデルを構成してから、実際のファイル書き込みタスクでストレス テストを行います。公式リポジトリ: nesquena/hermes-webui · NousResearch/hermes-agent.

関連:スキル蒸留・閉ループ学習は Hermes スキル蒸留ガイド。マルチエージェントルーティングは OpenClaw マルチエージェント編成ガイド。コードベース可視化は Understand Anything コードベース可視化。ヘッドレスホストへのリモートSSHは Mac mini M4 SSHガイド。質問は ヘルプへ。