AI Bridge一部無料
実際のCLIと独立した会話を、承認・作業領域と一緒にMacで管理。
N8N Chat UI：n8nチャットボットをWebサイトへ
n8nワークフローに合わせたチャット画面を視覚的に作成
N8N Chat UIは、n8n チャットボットの画面を視覚的に作り、Webサイトへ設置するためのツールです。動作するワークフローを持つ開発者、制作会社、サイト運営者が、ブランドに合わせた窓口を用意する用途に向いています。
このサイトで何ができる？やさしく解説
n8nを裏側で作業する担当者、N8N Chat UIを訪問者が話しかける受付と考えると分かりやすくなります。画面からWebhookに質問を送り、ワークフローが返した結果を表示します。
問い合わせ対応、予約、情報検索には、それぞれの処理をバックエンドに用意する必要があります。n8nとは提携関係のない独立した製品で、画面のデザインだけで業務処理が完成するわけではありません。
ワークフローとサイトを接続する手順
- Chat TriggerまたはWebhookを使うワークフローと、サイトを編集する権限を用意します。
- 表示形式とデザインを設定し、プレビューを確認してWebhookを接続します。
- 通常の応答ではHTTP 200と有効なJSONを返し、outputに表示する文章を入れます。生成文の引用符は正しくエスケープします。
- 発行された埋め込みコードをサイトに追加します。テスト送信を行い、n8nの実行結果と画面の返信を確認します。
バックエンド連携ガイドでは、独自のPOSTエンドポイントも説明されています。WordPressでは ChatUI Widget for n8n をインストールして有効化し、Settings → N8N Chat UIでWidget IDまたはWebhookを保存します。表示しないページも指定できます。
ブランドに合う表示と使いどころ
色、フォント、アバター、挨拶文、起動ボタンをライブプレビューで調整できます。ページ内に配置する形式と、浮かぶポップアップ形式を選択でき、モバイル表示やRTLにも対応しています。
バックエンドが followUpPrompts を返すと、次の質問を選択肢として表示できます。同じワークフローに複数のウィジェットをつなぐ場合は、セッションキーで文脈を分ける設計が必要です。これは利用者の認可を保証するものではありません。
ファイル・音声・ストリーミングの準備
ファイルのアップロードでは、種類、容量、個数の制限を設定できます。ファイルはバイナリとしてn8nへ届きますが、文書解析や保存はワークフロー側で実装します。
音声入力は録音ファイルを送信します。公式例では、別の文字起こしサービスで文章にしてからエージェントへ渡します。ファイルと音声のmetadataはJSON文字列なので、オブジェクトとして使う前に解析します。
逐次表示には、Chat Trigger／WebhookとAI Agentの両方でstreamingを有効にします。画面設定だけでは有効になりません。
無料枠とライセンスの違い
2026年10月28日確認時点で、新規アカウントには30日間有効なManaged用100クレジットが付与されます。以降は前払いで、プロキシが処理する1メッセージにつき1クレジットを消費します。残高がなくなると新しいメッセージは処理されません。現行条件では2026年10月5日以降の購入分は失効せず、それ以前の購入分は従来条件が適用されます。
Standaloneは買い切りライセンスが必要で、Managedのメッセージクレジットを使いません。新規購入では永続的な基本ライセンスと、任意のサポート・更新期間を区別してください。最新の料金、決済通貨、税を確認し、n8n運用、モデル、文字起こしの費用は別に見積もります。
データの流れと導入時の制約
StandaloneではブラウザがWebhookへ直接接続し、URLはクライアント側コードに表示されます。Managedは提供元のプロキシ経由でURLを隠し、ドメイン・地域制限、レート制限、分析、集中管理を追加します。
プライバシーポリシーは、提供元が会話内容を保存、キャッシュ、ログ記録しないと説明しています。ただしプロキシはリアルタイムで処理し、設定と技術的な指標は保存します。自分のn8n、データベース、モデル提供元の保持方針は別途確認が必要です。
よくある質問
既存のWebサイトにも設置できますか？
はい。埋め込みコードまたは公式WordPressプラグインを利用します。サイト編集権限と動作するバックエンドが必要です。
n8nのワークフローも自動で作られますか？
モデル、データソース、実行する処理はn8nまたは互換バックエンドで設定します。画面作成とは別の作業です。
無料で無制限に使えますか？
初回100クレジットの有効期間は30日です。その後はManagedのクレジット購入かStandaloneライセンスと、バックエンドの運用が必要です。
公式ガイド
- 公式ドキュメント：機能設定とセッション管理。
- WordPressの導入方法：インストールとページ除外。
- MCP接続ガイド：OAuthまたはAPIキーで一覧取得、作成、テーマ調整。テーマ変更ツールはWebhookを変更しません。
- 公式サポート：アカウントや接続の問い合わせ。
