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

Разговорите со вештачка интелигенција можат да го подобрат корисничкото искуство и ефективно да ги автоматизираат одговорите. Во ова упатство, ќе научите како брзо да изградите чет-бот користејќи React , Vite и API на Cohere, со интеграција на заднината користејќи Express . Со својата едноставност и брзина, Vite го олеснува поставувањето модерни JavaScript апликации.

Оваа архитектура спречува изложување на чувствителни API клучеви со рутирање на барања преку сервер.

Што ќе научите

• Поставување основен проект React со Vite.
• Користење на платформата за вештачка интелигенција на 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 за стилизирање на интерфејсот за chatbot:

 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

1. Вклучете ја апликацијата React и серверот истовремено. Можете да користите истовремено или да отворите два терминали:

• Терминал 1:

   npm run dev

• Терминал 2 (внатре server ):

   node server.js

2. Отворете ја апликацијата React во вашиот прелистувач.
3. Напишете порака и испратете ја. Барањето ќе оди до вашиот Express сервер, кој безбедно ќе го повика Cohere's API и ќе го врати резултатот.

Складиште

Целосниот изворен код за овој проект можете да го најдете на GitHub: AI Chatbot со React и Cohere . Слободно клонирајте го, истражете го кодот и приспособете го според вашите потреби!

Заклучок

Создадовте функционален чет-бот со вештачка интелигенција користејќи React , Vite , Cohere и Express . Овој проект може да се подобри со карактеристики како што се:

• Интеграција од говор во текст и текст во говор.
• Постојани разговори зачувани во база на податоци.
• Пополиран дизајн користејќи CSS рамка како Tailwind.
• Распоредете го серверот користејќи услуги како Heroku, AWS или Vercel.

Започнете со експериментирање и среќно кодирање!