Open WebUI — Web チャットインターフェース

もし、コマンドラインで動くAIエージェントに「もっと親しみやすい顔があったらなあ」と思ったことがあるなら、この記事はまさにうってつけです。

問題：エージェントがターミナルの中にいる

Hermes Agentは高性能ですが、暗いターミナル画面にコマンドを打ち込むのは、正直あまり魅力的ではありません。自分専用のチャットウィンドウ、会話履歴、そして他の人がログインしてエージェントを使える場所が欲しいところです。それを実現してくれるのが、まさにOpen WebUIなのです。

イメージとしては、Hermes Agentがボンネットの下にあるエンジンで、Open WebUIが実際に座って操作する洗練されたダッシュボード、といったところです。

シンプルな構成

セットアップは驚くほどシンプルです。Open WebUIはブラウザ上でポート3000番で動作し、Hermes Agentは独自のAPIサーバーをポート8642番で起動します。Open WebUIは、OpenAIと同じ形式でチャットメッセージをHermesに送信し、Hermesはその応答をストリーミングで返します。

flowchart LR
    A["Open WebUI<br/>ブラウザUI<br/>ポート3000"]
    B["hermes-agent<br/>ゲートウェイAPIサーバー<br/>ポート8642"]
    A -->|POST /v1/chat/completions| B
    B -->|SSEストリーミング応答| A

実行環境に関する非常に重要な注意点

すべてを接続する前に、この点を理解しておいてください。Hermesは、質問を言語モデルに転送するだけの単純なプロキシではありません。リクエストのたびに、APIサーバーが動作しているマシン上で完全なエージェントを生成します。つまり、エージェントに pwd を実行させたりファイルを開かせたりすると、そのコマンドはあなたのラップトップではなく、サーバーホスト上で実行されるということです。

もし、あなたのラップトップでOpen WebUIを実行し、リモートマシン上のHermesサーバーを指定している場合、エージェントはあなたのファイルではなく、リモートマシン上のファイルを操作することになります。セットアップを設計する際は、この点に留意してください。

クイックセットアップ：3つのステップ

ステップ1：APIサーバーを有効にする

ターミナルを開いて、次の2つのコマンドを実行します。

hermes config set API_SERVER_ENABLED true
hermes config set API_SERVER_KEY your-secret-key

最初のコマンドでAPIサーバーが有効になります。2番目のコマンドでシークレットキーを設定し、あなた（または許可したユーザー）だけがアクセスできるようにします。ゲートウェイがすでに実行中の場合は、再起動します。

hermes gateway stop && hermes gateway

ステップ2：ゲートウェイを起動する

hermes gateway

次のようなメッセージが表示されるはずです。

[API Server] API server listening on http://127.0.0.1:8642

ステップ3：動作確認をする

簡単なヘルスチェックを実行します。

curl -s http://127.0.0.1:8642/health

正常な応答が返ってきたら、Open WebUIをHermesに接続する準備は完了です。Open WebUIの設定で、APIベースURLに http://127.0.0.1:8642 を入力し、APIキーとしてシークレットキーを使用します。

最後に

Open WebUIとHermes Agentの組み合わせは、両方の長所を兼ね備えています。コードの実行、ウェブ検索、ファイル管理ができる本格的なエージェントの全機能を備えつつ、美しく多ユーザー対応のチャットインターフェースを提供します。

実用的なヒント： まずは簡単なテストから始めましょう。エージェントに pwd を実行させ、その出力がAPIサーバーが動作しているマシンと一致することを確認してください。この1つの確認だけで、後々の数時間の混乱を防ぐことができます。

---