React JSでチャットボットを構築する方法

流れを定義する

何をするにしても、ボットにはフローが必要です。これは、ボットの動作を決定するロジックです。 

スタジオで、左パネルの「ワークフロー」をクリックします。

複雑にする必要はない。ドキュメントにアクセスできる単一の自律ノード（つまりデフォルトのボット）は、この上なく効果的だ。

ロボットに指示を与えることが重要です。これには以下が含まれます：

• ペルソナ（礼儀正しい、親しみやすい、ユーザーの口調を反映させるなど）。
• メッセージの始め方、終わり方
• 特定の問い合わせへの対応
• どの文書を参照するか

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

これは、ボットがRAG（retrieval-augmented generation）のために利用する情報、つまり、あなたのデータへの応答をケータリングするものです。これは比較的簡単ですが、可能な限り最高のRAGのためにファイルを最適化する方法を学ぶ価値があります。

ワイノナ、私のデジタル・ソムリエ(？)はワインリストにアクセスできる。これはWine Reviewsデータセットのサブセットで、ワインのリストと産地、テイスティングノートだ。

デプロイ

ボットに満足したら、スタジオで「Publish」を押してください。

そのため、以下のようなあらゆるコミュニケーション・チャンネルに統合することができる。 WhatsAppやTelegram、そして私たちが作っているようなウェブアプリに統合できる。

走る create-next-アプリ

走れ：

npx create-next-app@14

Next.js 14を使っていることにお気づきでしょう。アプリをチャットボット対応にするには、React 18が必要だからです。latestで実行すると、Next.js 15とReact 19でビルドされます。上記のコマンドを実行するのが、正しいバージョンのReactを実行し、Nextの互換性を確認する最も簡単な方法です。

アプリの設定を行う

一連の質問が表示されます。私は個人的にはデフォルトの設定にこだわる。

すべてが順調に進むと、成功のログが表示される。

Botpress React Boilerplateを入手する

チャットボットをアプリに組み込むには、以下のものが必要だ：

• クライアントID
• 事前構築されたwebchat Reactコンポーネント。

Botpress 、その両方を含む定型コードがあります。入手するには

• スタジオに移動し、右上の「共有」をクリックします。
• ポップアップの右下にある「設定」をクリックします。

• 右上のReactタブをクリックする。
• ここには、インストールコマンド、クライアントIDを含むBotpress 定型文があります。

ちなみに、顧客IDに素早くアクセスする必要がある場合は、こちらをご覧ください：

• Botpress ダッシュボードに移動する
• サイドパネルでWebchat 選択
• 詳細設定をクリック

これを環境変数に格納するのがベスト・プラクティスだが、今はコンポーネントに格納しておこう。

アプリにChat コンポーネントを作成する

プロジェクト・ディレクトリに、chat.tsxファイルを作ります。

次に、チャットボット・クライアントのコードを入力します：

"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 コードに少し手を加えたものだ：

• "クライアントを使う" トップに 状態管理を扱うコンポーネント用
• アプリから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 をプロジェクト・ディレクトリのターミナルで実行し、ローカル・サーバー上で実行する。