Разговорите со вештачка интелигенција можат да го подобрат корисничкото искуство и ефективно да ги автоматизираат одговорите. Во ова упатство, ќе научите како брзо да изградите чет-бот користејќи   ,   и   со интеграција на заднината користејќи   . Со својата едноставност и брзина, Vite го олеснува поставувањето модерни JavaScript апликации. React Vite API на Cohere, Express  Оваа архитектура спречува изложување на чувствителни API клучеви со рутирање на барања преку сервер.  Што ќе научите  Поставување основен проект React со Vite.  Користење на платформата за вештачка интелигенција на Cohere за генерирање на природен јазик.  Креирање на Експрес сервер за интеракција со API на Cohere.  Изградба на одговорен интерфејс за четбот во React.  Предуслови  Основно познавање на React, JavaScript и Node.js.  Node.js е инсталиран на вашиот систем.  Сметка на Cohere (регистрирајте се   за да добиете клуч за API) овде  Чекор 1: Поставете го вашиот проект React  Создадете нов проект React користејќи Vite:   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.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}`); });  Направете датотека   во директориумот   : .env server   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: Додајте стил  Создадете датотека со име   за стилизирање на интерфејсот за chatbot: 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: Тестирајте го вашиот Chatbot  Вклучете ја апликацијата React и серверот истовремено. Можете да користите истовремено или да отворите два терминали:  Терминал 1:   npm run dev  Терминал 2 (внатре   ): server   node server.js  Отворете ја апликацијата React во вашиот прелистувач.  Напишете порака и испратете ја. Барањето ќе оди до вашиот Express сервер, кој безбедно ќе го повика Cohere's API и ќе го врати резултатот.   Складиште  Целосниот изворен код за овој проект можете да го најдете на GitHub:   . Слободно клонирајте го, истражете го кодот и приспособете го според вашите потреби! AI Chatbot со React и Cohere  Заклучок  Создадовте функционален чет-бот со вештачка интелигенција користејќи   ,   ,   и   . Овој проект може да се подобри со карактеристики како што се: React Vite Cohere Express  Интеграција од говор во текст и текст во говор.  Постојани разговори зачувани во база на податоци.  Пополиран дизајн користејќи CSS рамка како Tailwind.  Распоредете го серверот користејќи услуги како 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

Ова аудио е произведено на оригиналниот јазик на приказната!

Премногу долго; Да чита

Get Free Unlimited IP Geo Data With IPinfo Lite

Направете AI Chatbot побрзо од вашето утринско кафе со овој водич

About Author

КОМЕНТАРИ

ВИСЕТЕ ТАГОВИ

ОВОЈ СТАТИЈА БЕШЕ ПРЕТСТАВЕН ВО

Related Stories

Light-Mode

Classic

Newspaper

Dark-Mode

Neon Noir

Minty

HN StartUps