React JSでプロのようにチャットボットを作る方法

執筆者

Ben Luks

計算言語学者、AI研究者、AI音声技術の修士号取得者

ステップ1. ステップのタイトルがここに入ります

概要

Reactでウェブサイト用チャットボットを作るには、LLMや各種フレームワーク、UIコンポーネントを組み合わせる必要があります。
まずはチャットボットのロジックとナレッジベースを作成し、その後Webやメッセージングアプリなど複数のチャネルで統合できるようにデプロイします。
Next.jsはReactアプリの基盤として最適です。Botpressのwebchatコンポーネントを組み込めば、ボットをシームレスに埋め込めます。

ReactでAIチャットボットを作る方法

予約受付、FAQ、商品提案など、ほとんどのウェブサイトがAIエージェントやチャットボットの導入でメリットを得られます。

実際、多くのブランドでチャットボットは最も急成長しているコミュニケーションチャネルとなっています。今こそ導入のチャンスです。

では、これらの要素をどう組み合わせればよいのでしょうか？Reactの上に、LLMプロバイダーやAIエージェントフレームワークを選び、それらをユーザーが操作できるUIコンポーネントとしてまとめる必要があります。

幸いなことに、チャットボットプラットフォームがその課題を解決してくれます。このガイドでは、以下の手順を紹介します。

カスタムチャットボットの構築
Next.jsとReactでウェブサイトを作成
Reactフロントエンドにチャットボットを統合
チャットボットのUIスタイルをカスタマイズ

少しの手間で、プロフェッショナルで高性能なチャットボットをReactサイトにシームレスに組み込めます。

ちなみに、チュートリアルを飛ばしてコードを直接見ることもできます。

AIチャットボットを構築

カスタムエージェント型チャットボットを作成

今すぐ始める

2. チャットボットを作成する

最初の大きなステップはチャットボットの作成です。

ボットを作成するには、スタジオにアクセスし、Create Bot +をクリックします。

目的を決めておくと良いですが、特に練られたアイデアがなくても大丈夫です。会社には方針文書やFAQ、商品カタログなどがあるはずです。これらの情報にアクセスできるシンプルなチャットボットでも、繰り返しの質問対応にかかる時間を大幅に削減できます。

今回は、外部のワインカタログをもとにワイン選びをアドバイスするデジタルソムリエボットを作ります。

フローを定義する

どんな用途でも、ボットにはフロー（流れ）が必要です。これはボットの動作を決めるロジックです。

スタジオの左パネルでWorkflowsをクリックします。

複雑である必要はありません。ドキュメントにアクセスできる自律ノード（デフォルトボット）1つだけでも十分に効果的です。

Botpress workflow with a single autonomous node

ボットには指示を与えることが重要です。例えば：

丁寧、フレンドリー、ユーザーの口調を真似るなど、どんなペルソナにするか
メッセージの始め方や終わり方
特定の質問への対応方法
どのタイミングでどのドキュメントを参照するか

ナレッジベースを追加する

これは、ボットがRAG（検索拡張生成）で参照する情報です。設定自体は簡単ですが、ファイルの最適化方法を知っておくと、より良いRAGが実現できます。

私のデジタルソムリエWynonaはワインリストにアクセスできます。これはWine Reviewsデータセットの一部で、ワイン名、産地、テイスティングノートが含まれています。

デプロイ

ボットが完成したら、スタジオでPublishをクリックすると公開されます。

これで、WhatsAppやTelegram、今回作成するWebアプリなど、さまざまなチャネルで統合できるようになります。

2. Reactアプリを作成する

チャットボットはできましたが、ユーザーが操作できる場所が必要です。そこで、ボットと対話できる簡単なReactアプリを作りましょう。

ここではNext.jsを使います。通常のReactよりも実用的で機能が充実しており、このチュートリアルでReactユーザーが必要とする内容もすべてカバーします。

`create-next-app`を実行

次のコマンドを実行します：

npx create-next-app@14

ここではNext.js 14を使っています。理由は、React 18が必要だからです。@latestを使うとNext.js 15とReact 19になります。上記コマンドを使うのが、正しいバージョンのReactとNextの互換性を確保する最も簡単な方法です。

アプリの設定を行う

いくつか質問が表示されます。私はデフォルト設定を使うので、このチュートリアルでも同じ設定で進めます。

問題なく進めば、成功ログが表示されます。

3. チャットボットをReactアプリに統合する

いよいよBarbie同士をキスさせます。

Botpress Reactボイラープレートを取得

チャットボットをアプリに統合するには、以下が必要です：

クライアントID
事前構築済みのwebchat Reactコンポーネント

Botpressには両方を含むボイラープレートコードがあります。取得方法は：

studioに移動し、右上のShareをクリックします。
ポップアップ右下のConfigureをクリック

右上のReactタブをクリックします。
ここにBotpressのボイラープレートと、インストールコマンド、クライアントIDが表示されます。

The "React" tab of Botpress share-bot modal

ちなみに、クライアントIDをすぐに確認したい場合は：

Botpressダッシュボードにアクセス
サイドパネルでWebchatを選択
Advanced Settingsをクリック

本来は環境変数に保存するのが推奨ですが、今回はコンポーネント内に記載します。

AIエージェントを導入しますか？

AIエージェント導入のためのブループリントを読む

今すぐ読む

アプリ内にチャットコンポーネントを作成

プロジェクトディレクトリでchat.tsxファイルを作成します。

Next app file structure in the VSCode file explorer

次に、チャットボットクライアント用のコードを記述します。

"use client"
import { useState } from 'react';


import {
   Webchat,
   WebchatProvider,
   Fab,
   getClient,
   Configuration,
} from '@botpress/webchat';


const clientId = "";


const configuration: Configuration = {
   color: '#000',
};


export default function Chat() {
   const client = getClient({
       clientId,
   });


   const [isWebchatOpen, setIsWebchatOpen] = useState(false);


   const toggleWebchat = () => {
       setIsWebchatOpen((prevState) => !prevState);
   };


   return (
       <div
           style={{
               position: 'fixed',
               display: 'flex',
               flexDirection: 'column',
               bottom: 0,
               right: 0,
               alignItems: 'flex-end',
               gap: '12px',
               padding: '24px', // give some breathing room
               zIndex: 9999,
           }}
       >
           <WebchatProvider client={client} configuration={configuration}>


               <div
                   style={{
                       // position: '',
                       marginTop: '12px',
                       marginBottom: '72px',
                       width: '350px',
                       maxHeight: '500px',
                       overflow: 'scroll',
                       borderRadius: '16px',
                       backgroundColor: '#fff',
                       transform: isWebchatOpen ? 'scale(1)' : 'scale(0)',
                       transformOrigin: 'bottom right',
                       transition: 'transform 0.3s ease-in-out',
                   }}
               >
                   <Webchat />
               </div>
               <Fab onClick={toggleWebchat} style={{ position: 'absolute', bottom: '24px', right: '24px' }} />
           </WebchatProvider>
       </div>
   );
}

これはBotpressのコードですが、いくつかポイントがあります：

状態管理を扱うコンポーネント用に冒頭に"use client"を記載
関数名をAppからChatに変更
スタイリングの追加

次にapp/page.tsxに移動し、フッターの直前でインポートします。

import Image from "next/image";
import styles from "./page.module.css";
import Chat from "./chat";


export default function Home() {
 return (
   <div className={styles.page}>
     <main className={styles.main}>
      
       <Image
         className={styles.logo}
         src="https://nextjs.org/icons/next.svg"
         alt="Next.js logo"
         width={180}
         height={38}
         priority
       />
       <ol>
         <li>
           Get started by editing <code>app/page.tsx</code>.
         </li>
         <li>Save and see your changes instantly.</li>
       </ol>


       <div className={styles.ctas}>
         <a
           className={styles.primary}
           href="https://vercel.com/new?utm_source=create-next-app&utm_medium=appdir-template&utm_campaign=create-next-app"
           target="_blank"
           rel="noopener noreferrer"
         >
           <Image
             className={styles.logo}
             src="https://nextjs.org/icons/vercel.svg"
             alt="Vercel logomark"
             width={20}
             height={20}
           />
           Deploy now
         </a>
         <a
           href="https://nextjs.org/docs?utm_source=create-next-app&utm_medium=appdir-template&utm_campaign=create-next-app"
           target="_blank"
           rel="noopener noreferrer"
           className={styles.secondary}
         >
           Read our docs
         </a>
       </div>
      
     </main>
     <Chat/>
     <footer className={styles.footer}>
       <a
         href="https://nextjs.org/learn?utm_source=create-next-app&utm_medium=appdir-template&utm_campaign=create-next-app"
         target="_blank"
         rel="noopener noreferrer"
       >
         <Image
           aria-hidden
           src="https://nextjs.org/icons/file.svg"
           alt="File icon"
           width={16}
           height={16}
         />
         Learn
       </a>
       <a
         href="https://vercel.com/templates?framework=next.js&utm_source=create-next-app&utm_medium=appdir-template&utm_campaign=create-next-app"
         target="_blank"
         rel="noopener noreferrer"
       >
         <Image
           aria-hidden
           src="https://nextjs.org/icons/window.svg"
           alt="Window icon"
           width={16}
           height={16}
         />
         Examples
       </a>
       <a
         href="https://nextjs.org?utm_source=create-next-app&utm_medium=appdir-template&utm_campaign=create-next-app"
         target="_blank"
         rel="noopener noreferrer"
       >
         <Image
           aria-hidden
           src="https://nextjs.org/icons/globe.svg"
           alt="Globe icon"
           width={16}
           height={16}
         />
         Go to nextjs.org →
       </a>
     </footer>
   </div>
 );
}

これで、プロジェクトディレクトリのターミナルでnpm run devを実行すればローカルサーバーで動作します。

チャットボットでReactアプリを強化

大規模なWebフレームワークでは、コア機能の開発に集中でき、追加機能に悩む必要がありません。

Botpressは、事前構築済みコンポーネントやビジュアルのドラッグ＆ドロップビルダー、柔軟なカスタマイズ性を備えています。シンプルな統合でもパフォーマンスは損なわれません。

Reactで開発するなら、品質重視のはずです。チャットボットもそれにふさわしいものにしましょう。

今すぐ構築を始めましょう。無料です。

AIチャットボットを構築

カスタムエージェント型チャットボットを作成

今すぐ始める

よくある質問

1. このチャットボットを本番環境にデプロイできますか？

はい、Botpress Studioで公開し、Reactアプリに組み込んだ後は本番環境にデプロイできます。組み込んだアプリ全体をVercelなどのプラットフォームや、利用している技術スタックに対応したホスティングサービスで公開可能です。

2. チャットボットのUIをカスタマイズできますか？

はい、Botpress Webchatコンポーネントを使えば、チャットボットのUIを完全にカスタマイズできます。色やサイズ、配置、スタイルのプロパティを指定でき、独自のCSSでデフォルトスタイルを上書きしてブランドデザインに合わせられます。

3. ボットのペルソナを設定する必要がありますか？また、それは会話にどう影響しますか？

はい、ボットのペルソナを設定することは重要です。これにより、チャットボットの口調や表現方法が決まり、ブランドの声に合った会話ができるようになり、ユーザーの信頼感も高まります。

4. チャットボットフローの目的は何ですか？どうやって定義しますか？

チャットボットフローの目的は、ボットがユーザーにどう応答するかのロジックを制御することです。Botpressでは、「Workflows」タブでノードを使ってアクションやメッセージ、条件、遷移を視覚的に定義できます。

5. 既存のドキュメント（FAQや商品カタログなど）を使ってボットを学習させられますか？

はい、FAQやマニュアルなどの既存ドキュメントをBotpressナレッジベースにアップロードできます。ボットは検索拡張生成（RAG）を使い、それらのドキュメントから直接関連情報を抽出して質問に回答します。