AI bilen işleýän söhbetdeşlikler ulanyjy tejribesini ýokarlandyryp we jogaplary netijeli awtomatlaşdyryp biler. Bu gollanmada,   arkasy bilen integrasiýa bilen   ,   we   chatboty nädip gurmalydygyny öwrenersiňiz. Vite ýönekeýligi we tizligi bilen häzirki zaman JavaScript programmalaryny gurmagy aňsatlaşdyrýar. “Express” -iň “React” “Vite” “Cohere” API ulanyp,  Bu arhitektura, serwer arkaly haýyşlary ugrukdyrmak arkaly duýgur API düwmeleriniň açylmagynyň öňüni alýar.  Öwrenjek zadyňyz  “Vite” bilen esasy React taslamasyny gurmak.  Tebigy dil döretmek üçin Cohere-iň AI platformasyny ulanmak.  Cohere's API bilen täsirleşmek üçin Express serwerini döretmek.  React-da täsirli söhbetdeşlik interfeýsini gurmak.  Zerur şertler  React, JavaScript we Node.js.  Ulgamyňyzda gurnalan Node.js.  Cohere hasaby (API açary almak üçin   ýazylyň) şu ýere  1-nji ädim: Reakt taslamaňyzy düzüň  “Vite” ulanyp, täze “React” taslamasyny dörediň:   npm create vite@latest ai-chatbot -- --template react cd ai-chatbot npm install  Ösüş serwerine başlaň:   npm run dev  Taslamany halaýan kod redaktoryňyzda açyň.  2-nji ädim: Express Server dörediň  Şol bir katalogda täze Node.js taslamasyny başlaň:   mkdir server && cd server npm init -y  Gerekli paketleri guruň:   npm install express cors dotenv node-fetch  Nativeerli importdan peýdalanmak üçin görnüş   ulanmak üçin package.json faýly täzeläň: 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" } }    katalogynda   atly bir faýl dörediň we aşakdaky kody goşuň: 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}`); });    katalogynda   faýly dörediň: server .env   COHERE_API_KEY=your_cohere_api_key_here  Serweri işe giriziň:   node server.js      faýlyňyzy hiç haçan paýlaşmaň ýa-da wersiýa gözegçilik etmäň.   faýlyňyza   goşuň. Üns beriň: .env .gitignore .env  3-nji ädim: Chatbot interfeýsini guruň    faýlyny aşakdaky kod bilen täzeläň: 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-nji ädim: Stil goşuň  Chatbot interfeýsini düzmek üçin   atly bir faýl dörediň: 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-nji ädim: Chatbotyňyzy barlaň  React programmasyny we serweri bir wagtda işlediň. Şol bir wagtyň özünde ulanyp ýa-da iki terminaly açyp bilersiňiz:  Terminal 1:   npm run dev  Terminal 2 (   içinde): server   node server.js  Brauzeriňizde “React” programmasyny açyň.  Habar ýazyň we iberiň. Isleg, Cohere-iň API-sine ygtybarly jaň edip, netijäni gaýtaryp berjek Express serweriňize girer.   Ammar  Bu taslama üçin doly çeşme koduny GitHub:   tapyp bilersiňiz. Ony klonlamak, kody öwrenmek we zerurlyklaryňyza görä düzmek üçin arkaýyn boluň! AI Chatbot bilen React we Cohere  Netije    ,   ,   we   ulanyp, “AI” bilen işleýän chatbot gurduňyz. Bu taslama aşakdaky ýaly aýratynlyklar bilen ösdürilip bilner: “React” “Vite” “Cohere” “Express”  Gepleşikden tekste we tekstden sözleýiş integrasiýasy.  Maglumat bazasynda saklanýan dowamly gepleşikler.  Tailwind ýaly CSS çarçuwasyny ulanyp has owadan dizaýn.  Heroku, AWS ýa-da Vercel ýaly hyzmatlary ulanyp serweri ýerleşdiriň.  Synag we bagtly kodlamaga başlaň!

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

Read My Stories

Bu ses hekaýanyň asyl dilinde öndürildi!

Örän uzyn; Okamak

Make resilience your competitive advantage

Bu gollanma bilen ertirki kofeňizden has çalt AI Chatbot guruň

About Author

JOGAPLAR

HANG TAGS

BU madda öňe sürüldi

Related Stories

Light-Mode

Classic

Newspaper

Dark-Mode

Neon Noir

Minty

HN StartUps