OpenClawSkills
GitHub
チャンネル • Instant

WebChat ガイド

内蔵ブラウザインターフェースでAIアシスタントに直接アクセス。設定不要。

OpenClaw初心者？''入門チュートリアル''で基本を学びましょう。このページではWebChat固有の機能とGatewayコントロールUIを説明します。

WebChatはOpenClawの内蔵Webインターフェースで、AIアシスタントと対話するために使用します。Gateway WebSocket接続を使用し、GatewayコントロールUIからアクセス可能で、最新のWebブラウザを搭載したあらゆるデバイスで動作する便利なブラウザベースのチャットインターフェースを提供します。

Tutorial.step

クイックスタート

WebChatへのアクセスは簡単です：

  • OpenClaw Gatewayを起動
  • Webブラウザを開く
  • GatewayコントロールUIに移動
  • チャットを開始！
Tutorial.step

WebChatへのアクセス

ローカルアクセス

Gatewayをローカルで実行している場合、以下のURLでWebChatにアクセス：

http://127.0.0.1:18789/

Gatewayはデフォルトでポート18789で実行されます（セキュリティのためループバックのみ）。

リモートアクセス

リモートアクセスには、以下が必要です：

  • ポート転送またはSSHトンネリングの設定
  • Tailscaleまたは同様のVPNソリューションの使用
  • Gatewayがリモート接続を受け入れるよう設定（適切なセキュリティ対策が必要）
  • 詳細な手順については、リモートアクセスガイドを参照してください。
Tutorial.step

GatewayコントロールUI

GatewayコントロールUI（ダッシュボードとも呼ばれます）は、OpenClawを管理するための包括的なWebインターフェースを提供します：

  • WebChatインターフェース - AIアシスタントとチャット
  • 設定管理 - 設定の表示と編集
  • セッション監視 - アクティブなセッションの監視
  • ノード管理 - 接続されたノードの管理（iOS/Androidアプリ）
  • Gatewayステータス - Gatewayの健全性とステータスの表示
  • チャンネルステータス - 接続されたチャンネルの監視
Tutorial.step

WebChatの機能

チャットインターフェース

WebChatはモダンでレスポンシブなチャットインターフェースを提供します：

  • リアルタイムメッセージング - WebSocketによる即時メッセージ配信
  • メッセージ履歴 - 会話履歴の表示
  • ストリーミング応答 - リアルタイムでの応答ストリーム表示
  • Markdownサポート - リッチテキストフォーマット
  • コードブロック - シンタックスハイライト付きコードブロック
  • ファイル添付 - ファイルの送受信

セッション管理

WebChatはデフォルトでメインセッションを使用しますが、以下のことが可能です：

  • セッション切り替え - 異なる会話セッションへのアクセス
  • 分離セッション作成 - 新しい分離された会話の開始
  • セッション履歴表示 - 過去の会話の閲覧

Gateway WebSocket

WebChatはリアルタイム通信のためにGateway WebSocket接続を使用します：

  • 別ポート不要 - 同じGatewayポート（18789）を使用
  • WebSocketプロトコル - リアルタイム双方向通信
  • 自動再接続 - 接続切断を優雅に処理
  • 低レイテンシ - Gatewayへの直接接続

WebSocketエンドポイント

WebSocketエンドポイントは以下で利用可能：

WebSocket URL
ws://127.0.0.1:18789/ws

HTTPS接続の場合、ws://ではなくws://を使用してください。

Tutorial.step

Configuration

WebChatは個別の設定を必要としません。Gatewayが実行されているときに自動的に利用可能です。ただし、WebChatに影響するGateway設定を構成できます：

Gatewayポート

必要に応じてGatewayポートを変更：

Gatewayポート設定
{
  "gateway": {
    "port": 18789
  }
}

リモートアクセス

リモートアクセスを有効にするには（注意して適切なセキュリティ対策で使用）：

リモートアクセス設定
{
  "gateway": {
    "port": 18789,
    "host": "0.0.0.0"
  }
}

セキュリティ警告

適切な認証とHTTPSなしでGatewayをインターネットに公開することはセキュリティリスクです。SSHトンネル、VPN、または認証付きリバースプロキシを使用してください。
Tutorial.step

ブラウザ互換性

WebChatは以下をサポートする最新のWebブラウザで動作します：

  • WebSocket - リアルタイム通信用
  • ES6+ JavaScript - 最新のJavaScript機能
  • CSS Grid/Flexbox - レイアウト機能

対応ブラウザ

  • Chrome/Edge (latest versions)
  • Firefox (latest versions)
  • Safari (latest versions)
  • Opera (latest versions)

Mobile Browsers

WebChatはレスポンシブでモバイルブラウザでも動作しますが、ネイティブアプリ（iOS/Android）の方がより良いモバイルエクスペリエンスを提供します。

Tutorial.step

セキュリティ考慮事項

ローカルアクセス（デフォルト）

デフォルトでは、Gatewayはlocalhost（127.0.0.1）からの接続のみを受け入れ、これはローカル使用には安全です。

リモートアクセスのセキュリティ

リモートアクセスが必要な場合、安全な方法を使用してください：

  • SSHトンネリング - SSH経由でGatewayをトンネリング
  • VPN - Tailscaleまたは同様のVPNを使用
  • リバースプロキシ - 認証付きnginx/traefikを使用
  • HTTPS - リモートアクセスには常にHTTPSを使用
  • 認証 - 認証レイヤーの追加

ベストプラクティス

  • デフォルト設定を維持 - 必要ない限りlocalhostのみを使用
  • リモート用VPN使用 - 直接公開よりVPNを優先
  • 定期的な更新 - OpenClawを最新に保つ
  • アクセス監視 - Gatewayログを定期的に確認
Tutorial.step

トラブルシューティング

WebChatにアクセスできない

WebChatにアクセスできない場合：

  • Gatewayが実行中か確認：openclaw status
  • Gatewayがポート18789でリッスン中か確認
  • http://127.0.0.1:18789/に直接アクセスを試行
  • ファイアウォールがポートをブロックしていないか確認
  • Gatewayログでエラーを確認

WebSocket接続の問題

WebSocketが接続できない場合：

  • ブラウザコンソールでエラーを確認
  • Gatewayが実行中か確認
  • ネットワーク接続を確認
  • ページの更新を試行
  • ブラウザのWebSocketサポートを確認

メッセージが送信されない

メッセージが送信されない場合：

  • WebSocket接続ステータスを確認
  • Gatewayがメッセージを処理中か確認
  • ブラウザコンソールでエラーを確認
  • WebSocketへの再接続を試行
  • Gatewayログを確認