はじめに
OpenClaw がサポートする多くのチャットチャンネルの中で、WebChat はユニークな存在です。サードパーティのプラットフォームに依存せず、OpenClaw のウェブコントロールパネル（Dashboard）に直接組み込まれており、WebSocket プロトコルを通じてブラウザと AI アシスタント間のリアルタイム通信を実現します。自分のウェブサイトに AI 対話の入り口を提供したい場合や、ブラウザで素早く AI モデルをテストしたい場合、WebChat は最も直接的な選択肢です。
WebChat の技術アーキテクチャ
WebChat は WebSocket プロトコル上に構築されており、OpenClaw Gateway インターフェースの一部です。従来の HTTP リクエスト-レスポンスモデルとは異なり、WebSocket は永続的な双方向通信接続を確立し、サーバーとクライアント間でメッセージを即座にやり取りでき、接続を繰り返し確立する必要がありません。
ブラウザクライアント OpenClaw Gateway
│ │
│──── WebSocket ハンドシェイク ──▶│
│◀─── 101 Switching Protocol ──│
│ │
│──── ユーザーメッセージ ────────▶│
│ │──▶ AI モデル処理
│◀─── AI ストリーミング返信 ────│◀──
│◀─── AI ストリーミング返信 ────│
│◀─── 返信完了シグナル ─────────│
│ │
このアーキテクチャには 2 つの顕著な利点があります。一つはメッセージの遅延が極めて低いこと——ユーザーが送信するとほぼ即座に AI の返信を受け取り始めます。もう一つはストリーミング出力（Streaming）をサポートすること——AI の回答を一文字ずつ画面に表示でき、すべて生成が完了するまで待つ必要がありません。
WebChat の有効化
WebChat は OpenClaw のネイティブ統合（Native Integration）に属し、デフォルトで Dashboard と共に有効化されます。OpenClaw Gateway サービスが動作していれば、WebChat はすでに使用可能です。
Gateway サービスが起動していることを確認します。
openclaw up -d
続いてブラウザで Dashboard にアクセスします。
http://localhost:18789/dashboard
Dashboard のサイドバーに WebChat の入り口があります。クリックするとウェブチャットインターフェースに入ります。
設定ファイルで WebChat の有効状態を明示的に管理したい場合は、~/.config/openclaw/openclaw.json5 を編集します。
{
channels: {
webchat: {
enabled: true,
// WebSocket 接続パス（デフォルトのまま可）
wsPath: "/ws/chat",
// 許可するオリジンドメイン（CORS 制御）
allowedOrigins: ["*"],
// 単一接続の最大アイドル時間（秒）
idleTimeout: 300,
// 最大同時 WebSocket 接続数
maxConnections: 50
}
}
}
WebChat の独立設定
他のチャンネルと同様に、WebChat も独立したモデル、ペルソナ、スキルの設定をサポートしています。Telegram や Discord とは完全に異なる AI の動作を WebChat に指定できます。
{
channels: {
webchat: {
enabled: true,
model: {
provider: "claude",
name: "claude-sonnet-4-20250514",
apiKey: "sk-ant-xxxxx"
},
persona: {
name: "ウェブアシスタント",
systemPrompt: "あなたはプロフェッショナルなオンラインカスタマーサポートアシスタントです。製品やサービスに関するユーザーの質問に答えてください。フレンドリーかつプロフェッショナルな口調で。"
},
skills: ["faq", "product-docs", "weather"],
temperature: 0.7,
maxTokens: 2048
}
}
}
他のチャンネルとの並行運用
WebChat の最大の利点の一つは、他のすべてのチャンネルと同時に実行でき、互いに干渉しないことです。同じ OpenClaw インスタンスで Telegram、WhatsApp、Discord、WebChat を同時に有効にでき、各チャンネルが独立してメッセージフローと対話コンテキストを処理します。
{
channels: {
telegram: { enabled: true, botToken: "your-token" },
whatsapp: { enabled: true, phoneNumber: "+8613800138000" },
webchat: { enabled: true }
}
}
あるチャンネルで異常が発生しても（例：Telegram が切断されても）、WebChat の正常な動作には影響しません。逆も同様です。OpenClaw のチャンネル隔離アーキテクチャが各チャンネルの独立性を保証しています。
セキュリティ設定
WebChat はブラウザ側に直接公開されるため、セキュリティ設定は特に重要です。以下の対策を推奨します。
アクセスオリジンの制限：allowedOrigins で許可するドメインを設定し、未承認のウェブサイトがあなたの WebChat インターフェースを呼び出すことを防止します。
{
channels: {
webchat: {
enabled: true,
allowedOrigins: ["https://yourdomain.com", "https://app.yourdomain.com"]
}
}
}
Dashboard パスワードとの組み合わせ：Dashboard にアクセスパスワードを設定し、承認されたユーザーのみが WebChat を使用できるようにします。
openclaw config set dashboard.password "your-secure-password"
openclaw restart
HTTPS のデプロイ：WebChat がパブリックネットワークに公開される場合、必ず Nginx リバースプロキシで HTTPS を設定してください。WebSocket 接続も自動的に暗号化された WSS プロトコルにアップグレードされます。
適用シーン
WebChat は特に以下の利用シーンに適しています。
- クイックテスト：新しいモデルの設定やペルソナの調整後、ブラウザで直接効果をテストでき、他のチャットアプリに切り替える必要がありません。
- ウェブサイトカスタマーサポート：自社の製品ウェブサイトに AI 対話の入り口を埋め込み、訪問者にインスタント Q&A サービスを提供。
- 社内ツール：チームメンバーがブラウザから直接 AI アシスタントと対話でき、追加のチャットクライアントのインストールが不要。
- デモ展示：他の人に OpenClaw の機能をデモンストレーションする際、WebChat は最も直感的な方法。
よくある質問
WebChat と Dashboard の「新規対話」の違いは？
Dashboard の対話機能は、主に各チャンネルからの履歴会話を管理・閲覧するためのものです。一方、WebChat は独立したチャットチャンネルであり、独自の設定項目（モデル、ペルソナ、スキルなど）を持ち、対話記録も WebChat チャンネルの記録として保存されます。
WebSocket 接続が切断された場合は？
WebChat には自動再接続機構が組み込まれています。ネットワークの変動により WebSocket 接続が中断した場合、クライアントは自動的に再接続を試みます。継続的に接続できない場合は、Gateway サービスが正常に動作しているか確認してください。
openclaw doctor
モバイルブラウザに対応していますか？
対応しています。WebChat インターフェースはレスポンシブ適応を行っており、スマートフォンやタブレットのブラウザでも正常に使用できます。
まとめ
WebChat は OpenClaw 内蔵のウェブチャットチャンネルとして、ゼロ依存・低閾値の AI 対話体験を提供します。WebSocket ベースのリアルタイム通信アーキテクチャがスムーズなインタラクション効果を保証し、ネイティブ統合の設計により他のチャンネルとシームレスに並行運用できます。日常のテスト、ウェブサイト統合、チーム内部での使用のいずれにおいても、WebChat は有効にする価値のあるチャンネルです。