AI-aangedreven chatbots kunnen de gebruikerservaring verbeteren en reacties effectief automatiseren. In deze tutorial leert u hoe u snel een chatbot bouwt met behulp van   ,   en   met een backend-integratie met   . Met zijn eenvoud en snelheid maakt Vite het eenvoudig om moderne JavaScript-applicaties op te zetten. React Vite Cohere's API, Express  Deze architectuur voorkomt dat gevoelige API-sleutels worden blootgesteld door verzoeken via een server te routeren.  Wat je leert  Een eenvoudig React-project opzetten met Vite.  Gebruik van het AI-platform van Cohere voor het genereren van natuurlijke taal.  Een Express-server maken voor interactie met de API van Cohere.  Een responsieve chatbotinterface bouwen in React.  Vereisten  Basiskennis van React, JavaScript en Node.js.  Node.js op uw systeem geïnstalleerd.  Een Cohere-account (meld u   aan om een API-sleutel te krijgen) hier  Stap 1: Stel uw React-project in  Maak een nieuw React-project met behulp van Vite:   npm create vite@latest ai-chatbot -- --template react cd ai-chatbot npm install  Start de ontwikkelserver:   npm run dev  Open het project in uw favoriete code-editor.  Stap 2: De Express-server aanmaken  Initialiseer een nieuw Node.js-project in dezelfde directory:   mkdir server && cd server npm init -y  Installeer de vereiste pakketten:   npm install express cors dotenv node-fetch  Werk het bestand package.json bij om de   te gebruiken om het gebruik van native imports mogelijk te maken: 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" } }  Maak een bestand met de naam   in de   en voeg de volgende code toe: 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}`); });  Maak een   bestand in de   : .env server   COHERE_API_KEY=your_cohere_api_key_here  Start de server:   node server.js    Deel nooit uw   bestand en commit het niet naar versiebeheer. Voeg   toe aan uw   bestand. Belangrijk: .env .env .gitignore  Stap 3: Bouw de chatbotinterface  Werk het   bestand bij met de volgende code: 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;  Stap 4: Styling toevoegen  Maak een bestand met de naam   voor het stylen van de chatbotinterface: 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; }  Stap 5: Test uw chatbot  Voer de React-app en de server tegelijkertijd uit. U kunt gelijktijdig twee terminals gebruiken of openen:  Terminale 1:   npm run dev  Terminal 2 (binnen   ): server   node server.js  Open de React-app in uw browser.  Typ een bericht en verstuur het. Het verzoek gaat naar uw Express-server, die veilig de API van Cohere aanroept en het resultaat retourneert.   Opslagplaats  De volledige broncode voor dit project vindt u op GitHub:   . Kloon het gerust, verken de code en pas het aan uw behoeften aan! AI Chatbot met React en Cohere  Conclusie  Je hebt een functionele AI-aangedreven chatbot gebouwd met   ,   ,   en   . Dit project kan worden uitgebreid met functies zoals: React Vite Cohere Express  Integratie van spraak-naar-tekst en tekst-naar-spraak.  Blijvende gesprekken worden opgeslagen in een database.  Een meer verfijnd ontwerp met behulp van een CSS-framework zoals Tailwind.  Implementeer de server met behulp van services zoals Heroku, AWS of Vercel.  Begin met experimenteren en veel plezier met coderen!

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

Read My Stories

Deze audio wordt geproduceerd in de originele taal van het verhaal!

Bouw een AI-chatbot sneller dan uw ochtendkoffie met deze gids

About Author

OPMERKINGEN

LABELS

DIT ARTIKEL WERD GEPRESENTEERD IN

Related Stories

Light-Mode

Classic

Newspaper

Dark-Mode

Neon Noir

Minty

HN StartUps