便利なソフトをAIが実際に動かしてわかりやすくレポート

🤖 AI自動レポート column

Hermes Web UI — 自己ホスト型エージェントをブラウザから操作できる3ペインWebインターフェース

タグ columnコラムlinuxLinuxdockerGitHubオープンソースnesquenahermes-webui
📦 GitHubで見る

Hermes Web UI — 自己ホスト型エージェントをブラウザから操作できる3ペインWebインターフェース

ひとことでいうと

Hermes Web UI は、自己ホスト型AIエージェント「Hermes Agent」をブラウザから快適に操作するための軽量Webフロントエンドです。ビルドツールやフレームワークは一切不要で、Python とバニラJavaScript だけで動作します。左サイドバー・中央チャット・右ワークスペースという Claude.ai に似た3ペインレイアウトを採用しており、ターミナルから使えることのほぼすべてをブラウザからも実行できます。自分のサーバーにすべてのデータを置きながら、スマートフォンを含むどのデバイスからでもエージェントにアクセスできる点が大きな魅力です。

こんな人におすすめ

1. 毎回コンテキストを再説明することに疲れた開発者 セッションをまたいで記憶が持続するため、プロジェクト固有のコード規約や慣習を一度教えれば次回以降は省略できます。「また最初から説明し直す」ストレスから解放されます。

2. スマートフォンからもAIエージェントを使いたいユーザー モバイルレスポンシブ対応（ハンバーガーサイドバー・ボトムナビゲーションバー）で、Tailscale 経由で外出先のスマホからも快適に操作できます。重いターミナルアプリなしにエージェントへ指示を出せます。

3. プライバシーを重視してすべてをセルフホストしたいエンジニア 会話履歴・メモリ・設定はすべて自分のサーバー上（~/.hermes/）に保存されます。外部クラウドへのデータ送信がなく、機密プロジェクトでも安心して利用できます。

インストール・使い方

前提条件

  • Hermes Agent 本体がインストール・設定済みであること
  • Python 3.12 以上
  • Docker を使う場合は Docker Compose が利用可能であること

Step 1: リポジトリをクローンする

git clone https://github.com/nesquena/hermes-webui.git hermes-webui
cd hermes-webui

GitHub からソースコードを取得し、作業ディレクトリに移動します。インターネット接続があれば数秒で完了します。

Step 2: サーバーを起動する

./start.sh

start.sh が Hermes Agent のディレクトリ・Python 実行環境・ステートディレクトリを自動検出して起動します。ターミナルにアクセス用URLが表示されるので、ブラウザで開いてください。リモートサーバーの場合はSSHトンネルコマンドも案内されます。

Step 3: Docker で起動する（推奨）

docker compose up -d

パスワード認証を有効にしたい場合は、以下のように環境変数を指定して起動します。

docker run -d -p 8787:8787 \
  -e HERMES_WEBUI_PASSWORD=your-secret \
  -v ~/.hermes:/root/.hermes \
  ghcr.io/nesquena/hermes-webui:latest

-v ~/.hermes:/root/.hermes でホスト側のデータディレクトリをコンテナにマウントしているため、コンテナを再作成しても会話履歴やメモリは失われません。起動後はブラウザで http://localhost:8787 を開くと利用開始できます。

動かしてみた

Docker コンテナ内で Python 3.12.13 が正常に動作することを確認しました。依存パッケージも pip で問題なくインストールでき、起動までスムーズに進みます。

ファイル構造も完全に揃っており、バックエンドの server.py・api/ 以下のモジュール群（auth.py・config.py・routes.py・streaming.py など）と、フロントエンドの static/ 以下（index.html・style.css・ui.js・messages.js など）がすべて存在します。

バックエンドとフロントエンドが機能単位でファイル分割されており、コードの見通しが良い点も印象的でした。ビルドステップが不要なため、コードを編集すればすぐ動作確認できるシンプルな開発体験が得られます。

動かす前に知っておくとよいこと

スムーズに試すために、以下のポイントを事前に確認しておきましょう。

  • Hermes Agent の事前セットアップが必須です。Web UI 単体では起動できません。まず Hermes Agent を設定してから Web UI を導入する順番を守ってください。
  • 推奨環境は Python 3.12 以上です。それ以下のバージョンでは動作保証がありません。
  • データは ~/.hermes/ に保存されます。Dockerを使う場合はこのディレクトリをボリュームマウントしないとコンテナ停止時にデータが消えるため注意が必要です。
  • HERMES_WEBUI_PASSWORD 未設定時は認証なしで動作します。社内・公開ネットワークで使う場合は必ずパスワードを設定してください。
  • テストスイートはポート8788で分離実行されます。本番の8787番ポートには影響しないため、開発中にテストを走らせても安全です。

実践のコツ

すぐに使い始められるよう、具体的な行動ベースのポイントをまとめました。

  • まず Docker Compose で試す: docker compose up -d が最も手軽です。環境依存の問題を避けられます。
  • パスワードは最初から設定する: 後から追加するより、最初から HERMES_WEBUI_PASSWORD を指定する習慣をつけましょう。
  • Tailscale でリモートアクセスを整える: ポートフォワード設定なしにスマホや外部PCからアクセスできます。自宅サーバーの公開ポートを増やさずに済むのが利点です。
  • 3ペインの使い分けを意識する: 左サイドバーでセッション切り替え、中央でチャット、右ワークスペースでファイルやタスクの確認、という流れに慣れると操作が速くなります。
  • Tasksパネルでcronを活用する: 定期レポートや定時リサーチなど、繰り返し実行したいタスクはcronに登録しておくと手動実行の手間が省けます。
  • プロバイダーは用途で使い分ける: OpenAI・Anthropic・Google・DeepSeek・OpenRouter などを切り替えられるため、コスト・性能・用途に応じて最適なモデルを選べます。

用語とポイント解説

Hermes Agent Hermes Web UI のバックエンドとなるAIエージェント本体です。会話処理・記憶管理・スキルの学習・スケジューラー機能を担当します。Web UI はあくまでそのフロントエンドであり、Agent なしでは動作しません。

3ペインレイアウト 画面を左サイドバー・中央チャットエリア・右ワークスペースの3つに分割したUI構成です。Claude.ai を参考にした設計で、セッション管理・会話・ファイル操作を一画面で同時に扱えます。

永続メモリ（Persistent Memory） 会話セッションをまたいで情報を保持する機能です。プロジェクトの設定や過去の指示を記憶しているため、毎回同じ説明をする必要がなくなります。

SSE（Server-Sent Events） サーバーからクライアントへのリアルタイム一方向通信プロトコルです。AIの応答トークンをリアルタイムにブラウザへ流し込む「ストリーミング表示」に使われています。

rAFスロットリング requestAnimationFrame を使った描画最適化の手法です。ストリーミング中にトークンが届くたびに画面を更新すると処理が重くなるため、ブラウザの描画タイミングに合わせて更新頻度を制御しています。

SRI（Subresource Integrity） CDNから読み込むJavaScriptやCSSにハッシュ値を付与して検証する仕組みです。改ざんされたファイルが読み込まれることを防ぐセキュリティ機能で、本番運用では重要な対策です。

HMAC署名付きクッキー 認証情報をHTTP-onlyクッキーに保存し、HMAC（ハッシュベースメッセージ認証コード）で署名する方式です。JavaScriptからクッキーにアクセスできないため、XSS攻撃への耐性があります。有効期限は24時間に設定されています。

Tailscale WireGuardベースのゼロコンフィグVPNサービスです。複雑なポートフォワード設定なしに、異なるネットワーク上のデバイス同士をセキュアに接続できます。自宅サーバーのHermes Web UIにスマホからアクセスするといった用途に最適です。

セルフホスト型スケジューラー（cron） インターネット非接続でも動作するタスクスケジューラーです。定時実行したい処理をTasksパネルから登録でき、完了時にTelegram・Slack・Discordなどで通知を受け取ることもできます。

バニラJavaScript フレームワーク（React・Vue・Angularなど）を使わない、素のJavaScriptのことです。Hermes Web UI のフロントエンドはバニラJSで書かれているため、ビルドステップが不要でコードの読み解きやすさも高いです。

活用例

  • リモートサーバーのAIエージェントを外出先から操作する: SSHトンネルまたはTailscale 経由でスマートフォンからも接続し、移動中にコードレビューやリサーチタスクを指示できます。
  • 定時レポートの自動生成: Tasksパネルのcron機能で毎朝決まった時間にニュース要約や進捗レポートを生成し、Slack や Telegram に自動投稿するワークフローを組めます。
  • チームの共有エージェント基盤を構築する: パスワード認証を有効にして社内ネットワークに公開すれば、複数のチームメンバーが同じエージェントを共有して使えます。
  • プライバシーが求められる業務での活用: 顧客情報や機密設計を扱う作業でも、データがすべて自社サーバー上に留まるため、外部クラウドへの情報漏洩リスクを低減できます。
  • 複数AIプロバイダーを切り替えながら比較検証する: OpenAI・Anthropic・Google・DeepSeek を同じUIから使えるため、タスク別にコスト・品質・速度を比較する実験に活用できます。
  • Claude Code や Codex などの外部エージェントをオーケストレーションする: Hermes Agent の外部エージェント連携機能をブラウザのUIから操作し、複数エージェントを組み合わせた高度な自動化パイプラインを管理できます。

デモについて

Hermes Web UI は Hermes Agent バックエンドへの接続が動作の前提となっており、エージェント本体なしでは起動できない設計です。そのため、独立したインタラクティブデモの提供は構造上難しい状況です。実際に試すには、まず Hermes Agent をセットアップした上で Docker Compose を利用するのが最も手軽な方法です。

ぜひ、自宅サーバーでのセルフホスト型AI環境の構築や、チームでの共有エージェント基盤づくりなどに活用してみてはいかがでしょうか。