React チャットボット：React アプリにAIチャットボットを追加する方法（Vite、CRA、SPA）

コードに手を付ける前に、次の2つを用意してください。

• Nexoply のアカウントとチャットボットのキー。無料で登録し（無料プランには月50会話が含まれ、カードは不要です）、ダッシュボードで チャットボット を開きます。そこにある設置コードには、すでにキーが含まれています。キーは公開情報です。秘密ではなく、アカウントへのアクセス権もないため、クライアント側のコードに含めても問題ありません。
• アシスタントが回答に使うビジネス情報：サービスと料金、よくある質問、ポリシー、営業時間、対応エリア。最も手早いのは、ウェブサイトのアドレスを入力して Nexoply に公開ページを取り込ませる方法です。JavaScript で作られたページも読み込めるため、React のサイトでも使えます。承認するまで、何も追加されません。

src/components/Chatbot.tsx を作成します。このコンポーネント自体は何も描画しません。Nexoply のスクリプトをページに一度だけ追加し、チャットボタンとチャットウィンドウはウィジェットが表示します。

// src/components/Chatbot.tsx
import { useEffect } from "react";

type ChatbotProps = { chatbotKey: string };

export function Chatbot({ chatbotKey }: ChatbotProps) {
  useEffect(() => {
    // キーがない、またはスクリプトがすでにページにある場合は何もしない。
    if (!chatbotKey || document.querySelector("script[data-chatbot]")) return;
    const s = document.createElement("script");
    s.src = "https://nexoply.com/widget.js";
    s.async = true;
    s.dataset.chatbot = chatbotKey;
    document.body.appendChild(s);
  }, [chatbotKey]);

  return null;
}

訪問中ずっとマウントされたままのコンポーネント（通常は App）で一度だけ描画します。Vite の場合は、.env ファイルに VITE_NEXOPLY_KEY=YOUR-KEY と書きます。

// src/App.tsx
import { Chatbot } from "./components/Chatbot";

export default function App() {
  return (
    <>
      {/* レイアウトとルート */}
      <Chatbot chatbotKey={import.meta.env.VITE_NEXOPLY_KEY} />
    </>
  );
}

このコンポーネントは、Vite や Create React App の TypeScript プロジェクトでそのまま動作します。JavaScript の場合は、ファイル名を Chatbot.jsx にして ChatbotProps の型を削除してください。Create React App には import.meta.env がないため、代わりに process.env.REACT_APP_NEXOPLY_KEY を渡します。通常のコンポーネントなので、{hasConsent && <Chatbot chatbotKey={key} />} のように条件付きで描画し、訪問者が Cookie バナーに同意した後にだけチャットを読み込むこともできます。

• クリーンアップ関数がない理由。 ウィジェットには読み込み後に削除する API がなく、React のツリーの外にあるため、コンポーネントをアンマウントしても元に戻す処理は必要ありません。
• StrictMode でも問題ない理由。 開発中、React の StrictMode はエフェクトを2回実行します。querySelector のチェックで2回目はスキップされ、仮にスクリプトが2回追加されても、ウィジェットはチャットボットのキーごとに一度しか表示されません。同じ理由で、ホットリロードも安全です。
• 属性は残してください。 ウィジェットは自分の script タグから設定を読み取るため、タグには data-chatbot 属性と、widget.js を含む src が必要です。s.dataset.chatbot を設定すると、その属性が作られます。

コードから読み込みを制御する必要がなければ、コンポーネントは不要です。React の SPA にはどれも HTML の土台があります。Vite ではプロジェクト直下の index.html、Create React App では public/index.html です。閉じタグ </body> の直前にコードを貼り付けます。

<body>
  <div id="root"></div>
  <script type="module" src="/src/main.tsx"></script>

  <!-- Nexoply AIチャットボット -->
  <script src="https://nexoply.com/widget.js" data-chatbot="YOUR-KEY" async></script>
</body>

YOUR-KEY を、チャットボットページに表示されているキーに置き換えます。スクリプトは非同期で読み込まれるため、アプリの描画を妨げることはありません。読み込み時にチャットウィンドウを開きたい場合は、タグに data-open="true" を追加します。設置作業はこれだけです。ビルドしてデプロイすれば、すべてのルートにボタンが表示されます。

「React チャットボット」で検索すると2種類のツールが見つかりますが、解決する課題は異なります。

• チャットボットUIライブラリ は、チャットそのものの React コンポーネント（メッセージ一覧、入力欄、吹き出し、場合によっては決められた会話の流れ）を提供します。UIの裏側はすべて自分で作ります。固定のシナリオか、自分のAPIキーでAIモデルを呼び出すバックエンド、さらに回答のもとになるコンテンツ、会話の保存、不正利用対策も必要です。ユーザー自身のデータを扱うアシスタントなど、チャットが自社製品の一部である場合に向いています。
• ホスト型AIチャットボット（Nexoply など）は、UI、AI、バックエンドをまとめて提供します。追加または取り込んだビジネス情報（サービスと料金、よくある質問、ポリシー、営業時間）だけをもとに訪問者の質問に答え、わからないときはそう伝えます。AIキーもサーバー側のコードも不要で、会話、回答できなかった質問、スパム対策はダッシュボードで管理できます。ビジネスについての質問に答える必要がある、顧客向けのウェブサイトに向いています。

インターフェースとモデルを完全に制御したいなら、ライブラリから始めましょう。バックエンドを作らず運用もせずに訪問者の質問に答えることが目的なら、ホスト型ウィジェットのほうが手間がかかりません。Nexoply がビジネス情報をもとに答える仕組みもご覧ください。

• React のツリーの外で動作します。 ウィジェットは #root 要素の外、document.body 上に表示されるため、再レンダリングやルート変更で消えたり、見た目が変わったりすることはありません。
• Shadow DOM で双方向に分離。 あなたの CSS（Tailwind、CSS Modules、グローバルなリセット）はチャットに影響せず、チャットの CSS もアプリに影響しません。
• ルート変更にもそのまま対応。 React Router などの History ベースのルーターでは、訪問者はページを移動しても会話を続けられ、URL が変わるとページルール（/pricing だけにサイドタブを表示するなど）が再確認されます。追加のコードは不要です。
• Cookie は使いません。 匿名の訪問者IDを localStorage に、現在の会話を sessionStorage に保存します。

ヒーローセクションや料金ページに「チャットで質問する」ボタンを置きたい場合は、window で nexoply:open-chat イベントを発行します。

export function ChatButton() {
  return (
    <button onClick={() => window.dispatchEvent(new Event("nexoply:open-chat"))}>
      チャットで質問する
    </button>
  );
}

import は不要です。ウィジェットは window 上でこのイベントを待ち受けています。独自のボタンだけを表示したい場合は、ダッシュボードのページルールでメッセージボタンを「ボタンなし」に設定してください。

デプロイの前に、次の3つの設定を確認してください。

• 許可するウェブサイト。 許可するウェブサイト（ダッシュボード → チャットボット）を入力している場合は、開発用ホストをポート番号付きで追加します（Vite なら localhost:5173、Create React App なら localhost:3000）。テスト中は一覧を空のままにしてもかまいません。
• Content-Security-Policy。 アプリが CSP ヘッダーまたは meta タグを送信している場合は、script-src、connect-src、img-src で https://nexoply.com を許可してください。
• 最初から最後まで確認する。 アプリを起動してチャットボタンをクリックし、実際の質問をして、ダッシュボードの 会話 に表示されるか確認します。

それでもボタンが表示されない場合：

• キーが空。 キーがないと、コンポーネントは何も読み込みません。import.meta.env.VITE_NEXOPLY_KEY をログに出力してみてください。Vite が公開するのは VITE_ で始まる変数だけで、.env を編集した後は開発サーバーの再起動が必要です。
• リクエストがブロックされている。 ブラウザのコンソールと Network タブで、CSP エラーや widget.js のブロックがないか確認します。
• チャットボットがオフ。 チャットボットを有効にする のスイッチがオンになっているか確認します。
• 広告ブロッカー。 まれに、ブラウザの拡張機能がチャットウィジェットをブロックすることがあります。拡張機能なしのプライベートウィンドウで試してください。

スクリプトを設置すれば、もうコードに触れる必要はありません。ダッシュボードでの変更は、約1分でサイトに反映されます。チャットボット → カスタマイズ では、メッセージボタン（アイコンまたは独自の画像・SVG、テキストラベル、形、サイズ、色、位置）をデザインしたり、代わりに画面の端に サイドタブ を表示したりできます。スマートフォンでは別のデザインにでき、ページルール で特定のルート（/pricing や /services/* など）だけ表示を変えることもできます。チャットウィンドウにはあなたのフォント、色、ロゴを使え、スタート画面には予約、電話、WhatsApp などのボタンを置けます。

別のフレームワークをお使いですか。next/script で Next.js にチャットボットを追加する方法やVue・Nuxt チャットボットガイドをご覧ください。WordPress のマーケティングサイトならWordPress ガイドをどうぞ。全体像を知るには、アシスタントがビジネスを学ぶ仕組みを読むか、プランと会話数の上限を比較してください。