AI-ээр ажилладаг чатботууд нь хэрэглэгчийн туршлагыг сайжруулж, хариултыг үр дүнтэй автоматжуулах боломжтой. Энэ зааварт та   ,   болон   мөн   ашиглан backend нэгтгэх боломжтой. Vite нь энгийн бөгөөд хурдны ачаар орчин үеийн JavaScript програмуудыг тохируулахад хялбар болгодог. React Vite Cohere-ийн API ашиглан чатботыг хэрхэн хурдан бүтээх талаар сурах болно, Express  Энэхүү архитектур нь серверээр дамжуулан хүсэлтийг чиглүүлэх замаар эмзэг API түлхүүрүүдийг ил гаргахаас сэргийлдэг.  Та юу сурах вэ  Vite-тэй үндсэн React төслийг бий болгож байна.  Байгалийн хэл үүсгэхийн тулд Cohere-ийн AI платформыг ашиглах.  Cohere-ийн API-тай харилцахын тулд Экспресс сервер үүсгэх.  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: Экспресс сервер үүсгэнэ үү  Нэг директорт шинэ Node.js төслийг эхлүүлэх:   mkdir server && cd server npm init -y  Шаардлагатай багцуудыг суулгана уу:   npm install express cors dotenv node-fetch  Төрөл   ашиглахын тулд 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 .gitignore .env  Алхам 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 програм болон серверийг нэгэн зэрэг ажиллуул. Та хоёр терминалыг зэрэг ашиглаж эсвэл нээж болно:  Терминал 1:   npm run dev  Терминал 2 (   дотор): server   node server.js  React програмыг хөтөч дээрээ нээнэ үү.  Зурвас бичээд илгээнэ үү. Хүсэлт нь таны Express сервер рүү очих бөгөөд энэ нь Cohere-ийн API-г найдвартай дуудаж үр дүнг нь буцаана.   Хадгалах газар  Та энэ төслийн бүрэн эх кодыг GitHub дээрээс олж болно:   . Үүнийг хуулбарлаж, кодыг судалж, өөрийн хэрэгцээнд тохируулаарай! React and Cohere бүхий AI Chatbot  Дүгнэлт  Та   ,   ,   ,   ашиглан хиймэл оюун ухаанаар ажилладаг чатбот бүтээв. Энэ төслийг дараах шинж чанаруудаар сайжруулж болно: 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

Энэхүү аудио нь түүхийн эх хэлээр хийгдсэн болно!

Хэтэрхий урт; Унших

Make resilience your competitive advantage

Энэхүү гарын авлагыг ашиглан өглөөний кофе уухаас илүү хурдан хиймэл оюун ухаантай чатбот бүтээгээрэй

About Author

Сэтгэгдлүүд

TAG ҮҮ

ЭНЭ ӨГҮҮЛЛИЙГ ТОЛГОЙЛУУЛСАН

Related Stories

Light-Mode

Classic

Newspaper

Dark-Mode

Neon Noir

Minty

HN StartUps