このガイドを使って、朝のコーヒータイムよりも早く AI チャットボットを構築しましょう

AI 搭載のチャットボットは、ユーザー エクスペリエンスを向上させ、応答を効果的に自動化できます。このチュートリアルでは、 React 、 Vite 、 Cohere の API を使用してチャットボットをすばやく構築し、 Express を使用したバックエンド統合を行う方法を学びます。Vite はシンプルで高速なので、最新の JavaScript アプリケーションを簡単にセットアップできます。

このアーキテクチャは、リクエストをサーバー経由でルーティングすることにより、機密性の高い API キーが公開されるのを防ぎます。

学習内容

• Vite を使用して基本的な React プロジェクトをセットアップします。
• 自然言語生成に Cohere の AI プラットフォームを使用します。
• Cohere の API と対話するための Express サーバーを作成します。
• React でレスポンシブなチャットボット インターフェースを構築します。

前提条件

• React、JavaScript、Node.js に関する基本的な知識。
• システムに Node.js がインストールされています。
• Cohere アカウント (API キーを取得するには、こちらにサインアップしてください)

ステップ1: Reactプロジェクトを設定する

1. Vite を使用して新しい React プロジェクトを作成します。

   
   

 npm create vite@latest ai-chatbot -- --template react cd ai-chatbot npm install

2. 開発サーバーを起動します。

   
   

 npm run dev

3. お気に入りのコード エディターでプロジェクトを開きます。

ステップ2: Expressサーバーを作成する

1. 同じディレクトリに新しい Node.js プロジェクトを初期化します。

    mkdir server && cd server npm init -y

2. 必要なパッケージをインストールします。

    npm install express cors dotenv node-fetch

3. type module使用してネイティブ インポートの使用を有効にするように package.json ファイルを更新します。

    { "name": "server", "version": "1.0.0", "description": "", "main": "index.js", "type": "module", "scripts": { "test": "echo \"Error: no test specified\" && exit 1" }, "keywords": [], "author": "", "license": "ISC", "dependencies": { "cors": "^2.8.5", "dotenv": "^16.4.7", "express": "^4.21.2", "node-fetch": "^3.3.2" } }

4. serverディレクトリにserver.jsという名前のファイルを作成し、次のコードを追加します。

    import 'dotenv/config' import express from 'express'; import cors from 'cors'; import fetch from 'node-fetch'; const app = express(); const PORT = 5000; app.use(cors()); app.use(express.json()); app.post('/generate', async (req, res) => { const { prompt } = req.body; if (!prompt) { return res.status(400).json({ error: 'Prompt is required' }); } try { const response = await fetch('https://api.cohere.ai/v1/generate', { method: 'POST', headers: { 'Content-Type': 'application/json', Authorization: `Bearer ${process.env.COHERE_API_KEY}`, }, body: JSON.stringify({ model: 'command-xlarge-nightly', prompt: `User: ${prompt}\nBot:`, max_tokens: 100, }), }); const data = await response.json(); res.json(data.generations[0].text.trim()); } catch (error) { console.error('Error calling Cohere API:', error); res.status(500).json({ error: 'Failed to generate response' }); } }); app.listen(PORT, () => { console.log(`Server running on http://localhost:${PORT}`); });

5. serverディレクトリに.envファイルを作成します。

    COHERE_API_KEY=your_cohere_api_key_here

6. サーバーを起動します。

    node server.js

   
   

   重要: .envファイルを共有したり、バージョン管理にコミットしたりしないでください.envを.gitignoreファイルに追加してください。

   
   

ステップ3: チャットボットインターフェースを構築する

次のコードでApp.jsxファイルを更新します。

 import React, { useState } from 'react'; import './App.css'; const App = () => { const [messages, setMessages] = useState([]); const [userInput, setUserInput] = useState(''); const [loading, setLoading] = useState(false); const sendMessage = async () => { if (!userInput.trim()) return; const newMessages = [...messages, { sender: 'user', text: userInput }]; setMessages(newMessages); setUserInput(''); setLoading(true); try { const response = await fetch('http://localhost:5000/generate', { method: 'POST', headers: { 'Content-Type': 'application/json', }, body: JSON.stringify({ prompt: userInput }), }); const botReply = await response.text(); setMessages([...newMessages, { sender: 'bot', text: botReply }]); } catch (error) { console.error('Error fetching bot reply:', error); setMessages([ ...newMessages, { sender: 'bot', text: 'Sorry, something went wrong.' }, ]); } finally { setLoading(false); } }; return ( <div className="chat-container"> <div className="chatbox"> {messages.map((msg, index) => ( <div key={index} className={`message ${msg.sender}`}> {msg.text} </div> ))} {loading && <div className="message bot">Typing...</div>} </div> <div className="input-container"> <input type="text" value={userInput} onChange={(e) => setUserInput(e.target.value)} placeholder="Type your message..." /> <button onClick={sendMessage}>Send</button> </div> </div> ); }; export default App;

ステップ4: スタイルを追加する

チャットボット インターフェースのスタイルを設定するためのApp.cssという名前のファイルを作成します。

 code.chat-container { font-family: Arial, sans-serif; max-width: 500px; margin: 20px auto; } .chatbox { border: 1px solid #ccc; padding: 10px; height: 400px; overflow-y: auto; border-radius: 5px; margin-bottom: 10px; } .message { margin: 5px 0; padding: 10px; border-radius: 5px; } .message.user { background-color: #d1e7dd; text-align: right; } .message.bot { background-color: #f8d7da; text-align: left; } .input-container { display: flex; } input { flex: 1; padding: 10px; border: 1px solid #ccc; border-radius: 5px 0 0 5px; } button { padding: 10px; border: 1px solid #ccc; border-radius: 0 5px 5px 0; background-color: #007bff; color: white; cursor: pointer; }

ステップ5: チャットボットをテストする

1. React アプリとサーバーを同時に実行します。同時に使用することも、2 つのターミナルを開くこともできます。

• ターミナル1:

   npm run dev

• ターミナル2（ server内）:

   node server.js

2. ブラウザでReact アプリを開きます。
3. メッセージを入力して送信します。リクエストは Express サーバーに送信され、そこで Cohere の API が安全に呼び出され、結果が返されます。

リポジトリ

このプロジェクトの完全なソースコードは、GitHub の「React と Cohere を使用した AI チャットボット」で見つかります。自由にクローンを作成し、コードを調べ、ニーズに合わせてカスタマイズしてください。

結論

React 、 Vite 、 Cohere 、 Express を使用して、機能的な AI 搭載チャットボットを構築しました。このプロジェクトは、次のような機能で強化できます。

• 音声テキスト変換とテキスト音声変換の統合。
• データベースに保存される永続的な会話。
• Tailwind のような CSS フレームワークを使用した、より洗練されたデザイン。
• Heroku、AWS、Vercel などのサービスを使用してサーバーをデプロイします。

実験を始めて、楽しいコーディングをしましょう!