【ITニュース解説】Build a Docs‑Aware Chatbot with React, Vite, Node, and OpenAI (plus fun DALL·E avatars)

この記事は、React、Vite、Node.js、そしてOpenAIという技術を組み合わせて、自分自身のドキュメントに特化したチャットボットを作成する方法を解説している。単に質問に答えるだけでなく、DALL·Eという画像生成AIを使って自動生成された可愛らしいアバターも表示される点がユニークな特徴だ。システムエンジニアを目指す初心者でも、基本的なWeb開発の知識があれば、どのようにAIを活用したアプリケーションが作られるのか理解できるだろう。

このプロジェクトを始めるにあたり、いくつかの準備が必要となる。まず、Node.jsのバージョン18以上がインストールされていること。Node.jsはJavaScriptをWebブラウザの外で動かすための実行環境で、サーバーサイドの開発や開発ツールの実行に広く使われている。次に、OpenAIのAPIキーが必要となる。このAPIキーはOpenAIが提供するAIサービスを利用するための認証情報であり、非常に重要だ。APIキーはサーバー側で安全に管理し、Webブラウザのコードや公開リポジトリに決して含めないように注意する必要がある。これは、APIキーが漏洩すると不正利用される可能性があるため、セキュリティの基本中の基本だ。

プロジェクトのフロントエンド（ユーザーが直接触れる部分）は、ReactとViteを使って構築する。Reactは、UI（ユーザーインターフェース）を構築するためのJavaScriptライブラリで、コンポーネントという部品を組み合わせてWebページを作る。Viteは、開発を高速化するためのビルドツールで、プロジェクトの作成や開発サーバーの起動を簡単に行える。 まず、npm create vite@latestコマンドでReactのテンプレートを使って新しいプロジェクトを作成し、必要なライブラリをインストールする。開発中にフロントエンドとバックエンドが異なるポートで動いている場合に発生するCORS（Cross-Origin Resource Sharing）という問題を避けるため、Viteの設定ファイル（vite.config.js）にはプロキシ設定が加えられている。これにより、フロントエンドからの/apiへのリクエストがバックエンドのサーバーに転送されるようになり、開発がスムーズに進む。

次に、チャットのUIを構築する。これはReactのApp.jsxというファイルに記述される。useStateフックを使って、チャットメッセージのリスト、ユーザーの入力メッセージ、現在の状態（処理中かどうか）、ユーザーとアシスタントのアバター画像といった、画面の状態を管理する。useEffectフックは、コンポーネントが表示されたり、特定の状態が変化したりしたときに実行される処理を定義するために使われる。ここでは、新しいメッセージが追加されたときにチャット画面を自動的に一番下までスクロールさせる処理や、ページが読み込まれたときにバックエンドからアバター画像を生成・取得する処理が記述されている。 ユーザーがメッセージを送信すると、sendMessage関数が実行される。この関数は、ユーザーの入力メッセージを現在のメッセージリストに追加し、バックエンドの/api/chatエンドポイントに送信する。バックエンドからの応答を受け取ると、それをメッセージリストに追加して画面を更新する。また、チャットの履歴を表示する部分ではReactMarkdownというライブラリが使われており、AIが生成したMarkdown形式のテキストをきれいに表示できるようにしている。

バックエンド（サーバー側の処理）は、Node.jsとExpressというフレームワークを使って構築する。Expressは、Webサーバーを簡単に作成するためのフレームワークだ。プロジェクトのルートにbackendというフォルダを作り、その中にserver.jsファイルを作成する。Express、環境変数管理のためのdotenv、そしてOpenAIのAPIを操作するためのopenaiライブラリをインストールする。 APIキーは.envファイルに記述し、dotenvライブラリを使ってNode.jsアプリケーションから安全に読み込む。これにより、APIキーがソースコードに直接書かれることを防ぐ。 サーバーコードでは、まずOpenAIクライアントを初期化する。次に、このチャットボットがCloudinaryのドキュメントについて回答するように「学習」させるための「デモモデル」という会話例が定義されている。これは、特定の質問に対してどのような回答を期待するかを示す、チャットボットの挙動を誘導するための重要な要素だ。 /api/chatエンドポイントでは、フロントエンドから送られてきたチャット履歴と、先ほどのデモモデル、そして「あなたは役に立つ開発者ドキュメントアシスタントです。Cloudinaryの公式ドキュメントを優先し、役立つ場合はリンクを含めてください」といった「システムプロンプト」を組み合わせて、OpenAIのResponses APIに送信する。システムプロンプトは、AIの役割や振る舞いを明確に指示するためのものだ。OpenAIはこれらの情報に基づいて、ユーザーの質問に対する適切な回答を生成し、そのテキストがフロントエンドに返される。 /api/avatarエンドポイントでは、OpenAIのImages API（DALL·E）を使用して、ユーザーとアシスタント向けに2つのアバター画像を生成する。プロンプトには「ミニマルで可愛い丸い動物のアバター」といった具体的な指示が与えられており、これにより生成される画像のスタイルが制御される。生成された画像のURLはフロントエンドに返され、画面に表示される。

最後に、開発を効率化するためのスクリプトをpackage.jsonに追加する。npm run devでフロントエンドのVite開発サーバーを、npm run server:devでバックエンドのNode.jsサーバーをそれぞれ起動できるように設定する。server:devではnodemonが使われており、サーバーコードに変更があった場合に自動的に再起動してくれるため、開発中の手間が省ける。 両方のサーバーを起動したら、Webブラウザでhttp://localhost:3000にアクセスし、チャットボットを試すことができる。記事に示された「How do I use the Cloudinary React SDK?」のような質問を投げかけると、事前に設定されたデモモデルやシステムプロンプトに基づいて、Cloudinaryのドキュメントに関する役立つ情報が返ってくるはずだ。

このプロジェクトを通じて、AIを活用したアプリケーションを開発する際の基本的な流れを学ぶことができる。特に重要なのは、APIキーのような機密情報を適切に管理すること、そしてAIに対してどのような指示（プロンプトやデモモデル）を与えるかによって、その応答が大きく変わるという点だ。 さらに発展的な内容として、今回はハードコードされたデモモデルを使っていたが、実際のドキュメントから情報を取得する「Retrieval」の仕組みには、OpenAIのAssistants API with ToolsやRetrieval機能が活用できる。また、よりスムーズなユーザー体験のために、AIからの回答を一文字ずつ表示するストリーミングUIの実装や、AIの出力が特定の形式（JSONなど）になっているかを検証する仕組みを追加することも考えられる。

このチャットボットの構築は、AIとWeb技術を組み合わせた現代的なアプリケーション開発の入門として、システムエンジニアを目指す初心者にとって非常に有益な経験となるだろう。