Vue チャットボット：Vue 3・Nuxt アプリにAIチャットボットを追加する方法

Nexoply のアカウントとチャットボットのキーが必要です。無料で登録し（無料プランには月50会話が含まれ、カードは不要です）、ビジネス情報を追加するかウェブサイトから取り込んだら、ダッシュボードで チャットボット を開いて設置コードをコピーします。コードは次のような形です。

<script src="https://nexoply.com/widget.js" data-chatbot="YOUR-KEY" async></script>

data-chatbot の値がキーです。キーは公開情報で秘密ではありません。ウィジェットがどのビジネスのものかを示すだけなので、クライアント側のコードやリポジトリに含めても問題ありません。ウィジェットは自分の script タグから設定を読み取るため、属性名と、widget.js を含む src は記載どおりにしてください。

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

<!-- src/components/Chatbot.vue -->
<script setup lang="ts">
import { onMounted } from "vue";

const props = defineProps<{ chatbotKey: string }>();

onMounted(() => {
  // キーがない、またはスクリプトがすでにページにある場合は何もしない。
  if (!props.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 = props.chatbotKey;
  document.body.appendChild(s);
});
</script>

<template><slot /></template>

訪問中ずっとマウントされたままの App.vue で一度だけ描画します。キーは .env に VITE_NEXOPLY_KEY=YOUR-KEY と書きます。

<!-- src/App.vue -->
<script setup lang="ts">
import Chatbot from "./components/Chatbot.vue";

const nexoplyKey = import.meta.env.VITE_NEXOPLY_KEY;
</script>

<template>
  <!-- レイアウトとルート -->
  <Chatbot :chatbot-key="nexoplyKey" />
</template>

JavaScript のプロジェクトでは、lang="ts" を削除し、型引数の代わりに defineProps({ chatbotKey: String }) と書きます。通常のコンポーネントなので、v-if="hasConsent" のように v-if で描画し、訪問者が同意バナーに同意した後にだけチャットを読み込むこともできます。

コンポーネントが不要なら、最もシンプルなのは、プロジェクト直下の index.html の </body> の直前にタグを貼り付ける方法です。非同期で読み込まれ、描画を妨げることはありません。

<body>
  <div id="app"></div>
  <script type="module" src="/src/main.ts"></script>
  <script src="https://nexoply.com/widget.js" data-chatbot="YOUR-KEY" async></script>
</body>

Nuxt ではコンポーネントは不要です。nuxt.config.ts でサイト全体にスクリプトを追加します。tagPosition: "bodyClose" を指定すると、</body> の直前に配置されます。

export default defineNuxtConfig({
  app: {
    head: {
      script: [
        {
          src: "https://nexoply.com/widget.js",
          async: true,
          "data-chatbot": "YOUR-KEY",
          tagPosition: "bodyClose",
        },
      ],
    },
  },
});

または、app.vue で useHead を使って追加します。キーを環境変数で管理したい場合は、nuxt.config.ts で runtimeConfig: { public: { nexoplyKey: "" } } を宣言して NUXT_PUBLIC_NEXOPLY_KEY を設定します。そうでなければ、キーをその場に直接書いてください。

<script setup lang="ts">
useHead({
  script: [
    {
      src: "https://nexoply.com/widget.js",
      async: true,
      "data-chatbot": useRuntimeConfig().public.nexoplyKey,
      tagPosition: "bodyClose",
    },
  ],
});
</script>

サーバーレンダリングでも問題ありません。Nuxt はタグを HTML に出力し、ウィジェットはブラウザでのみ動作します。アプリのマークアップには触れないため、ハイドレーションの不一致は起きません。

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

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

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

• アプリの外で動作します。 #app（または Nuxt のルート）の外、document.body 上に表示されるため、再レンダリング、レイアウトの変更、ルート変更で消えることはありません。
• Vue Router のナビゲーション。 訪問者がクライアント側でページを移動しても会話は続き、URL が変わるとページルール（/pricing だけにサイドタブを表示するなど）が再確認されます。追加のコードは不要です。
• Shadow DOM。 あなたの CSS、Tailwind のクラス、UIライブラリはチャットに影響せず、チャットのスタイルもアプリに影響しません。
• 軽量。 非同期で読み込まれ、Cookie は使わず、保存するのは localStorage の匿名の訪問者IDと、sessionStorage の現在の会話だけです。

ヒーローセクションや料金表に「ご質問はこちら」のようなボタンを置きたい場合は、クリックハンドラーから nexoply:open-chat イベントを発行します。

<script setup lang="ts">
function openChat() {
  window.dispatchEvent(new Event("nexoply:open-chat"));
}
</script>

<template>
  <button type="button" @click="openChat">ご質問はこちら</button>
</template>

ページの読み込みと同時にチャットを開くには、script タグに data-open="true" を追加します（Nuxt では "data-open": "true"）。

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

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

• タグを確認する。 ブラウザの開発者ツールで、data-chatbot 属性があり src に widget.js を含む script を探します。見つからない場合はキーが空の可能性があります。VITE_NEXOPLY_KEY または NUXT_PUBLIC_NEXOPLY_KEY が設定されているか確認し、.env を編集した後は開発サーバーを再起動してください。
• コンソールと Network タブを確認する。 CSP エラーは、nexoply.com がまだ許可されていないことを意味します。リクエストのブロックは広告ブロッカーが原因の場合もあるため、拡張機能なしのプライベートウィンドウで試してください。
• ダッシュボードを確認する。 チャットボットを有効にする のスイッチがオンか、また許可リストを使っている場合は、ドメイン（または localhost とポート番号）が含まれているか確認します。
• 意図的に非表示になっていないか。 「ボタンなし」に設定したページルールがあると、該当するページでは表示されません。

タグを設置したら、あとはすべてダッシュボードで行えます。変更は再デプロイなしで約1分でサイトに反映されます。チャットボット → カスタマイズ では、メッセージボタン（アイコンまたは独自の画像、ラベル、形、サイズ、色、位置）をデザインしたり、代わりに画面の端にサイドタブを表示したりできます。スマートフォンでは別のデザインにでき、ページルールで特定のページ（/blog/* など）だけボタンを変えたり非表示にしたりできます。チャットウィンドウをブランドに合わせてデザインし、スタート画面に予約、電話、WhatsApp などのボタンを追加しましょう。

アシスタントがビジネスを学ぶ仕組みとカスタマイズのオプション一覧をご覧いただくか、プランと会話数の上限を比較してください。別のフレームワークをお使いなら、React チャットボットコンポーネントのガイドとnext/script で Next.js にチャットボットを追加する方法をご覧ください。