בנה צ'טבוט AI מהר יותר מהקפה של הבוקר שלך עם המדריך הזה

צ'אטבוטים המופעלים על ידי בינה מלאכותית יכולים לשפר את חווית המשתמש ולהפוך תגובות לאוטומטיות ביעילות. במדריך זה, תלמד כיצד לבנות במהירות צ'אטבוט באמצעות React , Vite ו- API של Cohere, עם אינטגרציה עורפית באמצעות Express . עם הפשטות והמהירות שלו, Vite מקל על הגדרת יישומי JavaScript מודרניים.

ארכיטקטורה זו מונעת חשיפת מפתחות API רגישים על ידי ניתוב בקשות דרך שרת.

מה תלמד

• הגדרת פרויקט React בסיסי עם Vite.
• שימוש בפלטפורמת AI של Cohere ליצירת שפה טבעית.
• יצירת שרת אקספרס לאינטראקציה עם ה-API של Cohere.
• בניית ממשק צ'אט בוט רספונסיבי ב-React.

דרישות מוקדמות

• ידע בסיסי ב-React, JavaScript ו-Node.js.
• Node.js מותקן במערכת שלך.
• חשבון Cohere (הירשם כאן כדי לקבל מפתח API)

שלב 1: הגדר את פרויקט ה-React שלך

1. צור פרויקט React חדש באמצעות Vite:

   
   

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

2. הפעל את שרת הפיתוח:

   
   

 npm run dev

3. פתח את הפרויקט בעורך הקוד המועדף עליך.

שלב 2: צור את שרת האקספרס

1. אתחול פרויקט Node.js חדש באותה ספרייה:

    mkdir server && cd server npm init -y

2. התקן את החבילות הנדרשות:

    npm install express cors dotenv node-fetch

3. עדכן את קובץ 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" } }

4. צור קובץ בשם server.js בספריית server והוסף את הקוד הבא:

    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. צור קובץ .env בספריית server :

    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 ואת השרת בו זמנית. אתה יכול להשתמש במקביל או לפתוח שני מסופים:

• טרמינל 1:

   npm run dev

• טרמינל 2 (בתוך server ):

   node server.js

2. פתח את אפליקציית React בדפדפן שלך.
3. הקלד הודעה ושלח אותה. הבקשה תעבור לשרת האקספרס שלך, שיתקשר בצורה מאובטחת ל-API של Cohere ויחזיר את התוצאה.

מאגר

אתה יכול למצוא את קוד המקור המלא עבור הפרויקט הזה ב-GitHub: AI Chatbot עם React ו-Cohere . אל תהסס לשכפל אותו, לחקור את הקוד ולהתאים אותו לצרכים שלך!

מַסְקָנָה

בנית צ'אט בוט פונקציונלי המופעל על ידי בינה מלאכותית באמצעות React , Vite , Cohere ו- Express . ניתן לשפר את הפרויקט הזה עם תכונות כמו:

• שילוב דיבור לטקסט וטקסט לדיבור.
• שיחות מתמשכות המאוחסנות במסד נתונים.
• עיצוב מלוטש יותר באמצעות מסגרת CSS כמו Tailwind.
• פרוס את השרת באמצעות שירותים כמו Heroku, AWS או Vercel.

התחל להתנסות וקידוד שמח!