AI 搭載のチャットボットは、ユーザー エクスペリエンスを向上させ、応答を効果的に自動化できます。このチュートリアルでは、   、   、    使用したバックエンド統合を行う方法を学びます。Vite はシンプルで高速なので、最新の JavaScript アプリケーションを簡単にセットアップできます。 React Vite Cohere の API を使用してチャットボットをすばやく構築し、 Express を このアーキテクチャは、リクエストをサーバー経由でルーティングすることにより、機密性の高い API キーが公開されるのを防ぎます。 学習内容 Vite を使用して基本的な React プロジェクトをセットアップします。 自然言語生成に Cohere の AI プラットフォームを使用します。  Cohere の API と対話するための Express サーバーを作成します。  React でレスポンシブなチャットボット インターフェースを構築します。 前提条件 React、JavaScript、Node.js に関する基本的な知識。 システムに Node.js がインストールされています。  Cohere アカウント (API キーを取得するには サインアップしてください) 、こちらに ステップ1: Reactプロジェクトを設定する Vite を使用して新しい React プロジェクトを作成します。   npm create vite@latest ai-chatbot -- --template react cd ai-chatbot npm install 開発サーバーを起動します。   npm run dev お気に入りのコード エディターでプロジェクトを開きます。 ステップ2: Expressサーバーを作成する 同じディレクトリに新しい Node.js プロジェクトを初期化します。   mkdir server && cd server npm init -y 必要なパッケージをインストールします。   npm install express cors dotenv node-fetch  type  使用してネイティブ インポートの使用を有効にするように package.json ファイルを更新します。 module   { "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" } }   ディレクトリに という名前のファイルを作成し、次のコードを追加します。 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}`); });   ディレクトリに ファイルを作成します。 server .env   COHERE_API_KEY=your_cohere_api_key_here サーバーを起動します。   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: チャットボットをテストする React アプリとサーバーを同時に実行します。同時に使用することも、2 つのターミナルを開くこともできます。 ターミナル1:   npm run dev ターミナル2（  内）: server   node server.js ブラウザでReact アプリを開きます。 メッセージを入力して送信します。リクエストは Express サーバーに送信され、そこで Cohere の API が安全に呼び出され、結果が返されます。  リポジトリ このプロジェクトの完全なソースコードは、GitHub の で見つかります。自由にクローンを作成し、コードを調べ、ニーズに合わせてカスタマイズしてください。 「React と Cohere を使用した AI チャットボット」 結論  、   、   、  使用して、機能的な AI 搭載チャットボットを構築しました。このプロジェクトは、次のような機能で強化できます。 React Vite Cohere Express を 音声テキスト変換とテキスト音声変換の統合。 データベースに保存される永続的な会話。  Tailwind のような CSS フレームワークを使用した、より洗練されたデザイン。  Heroku、AWS、Vercel などのサービスを使用してサーバーをデプロイします。 実験を始めて、楽しいコーディングをしましょう!

The code in this story is for educational purposes. The readers are solely responsible for whatever they build with it.

Read My Stories

このオーディオは、ストーリーの元の言語で制作されています。

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

About Author

コメント

ラベル

この記事は

Related Stories

暗号通貨の成長: 効果的なユーザーペルソナの作成

HackerNoon ライティングコンテストで優勝したいですか? #crypto-api コンテスト優勝者のおすすめはこちら

フォーラムからフィードへ: ソーシャルメディアアルゴリズムがデジタルインタラクションを形作る仕組み

フロキのヴァルハラがインドのスリランカツアーのアソシエイトスポンサーに加わる

暗号通貨の成長: 効果的なユーザーペルソナの作成

HackerNoon ライティングコンテストで優勝したいですか? #crypto-api コンテスト優勝者のおすすめはこちら

フォーラムからフィードへ: ソーシャルメディアアルゴリズムがデジタルインタラクションを形作る仕組み

フロキのヴァルハラがインドのスリランカツアーのアソシエイトスポンサーに加わる

Light-Mode

Classic

Newspaper

Minty

Dark-Mode

Neon Noir

Minty

HN StartUps