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

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 React , Vite en Cohere's API, met een backend-integratie met Express . Met zijn eenvoud en snelheid maakt Vite het eenvoudig om moderne JavaScript-applicaties op te zetten.

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 hier aan om een API-sleutel te krijgen)

Stap 1: Stel uw React-project in

1. Maak een nieuw React-project met behulp van Vite:

   
   

 npm create vite@latest ai-chatbot -- --template react cd ai-chatbot npm install

2. Start de ontwikkelserver:

   
   

 npm run dev

3. Open het project in uw favoriete code-editor.

Stap 2: De Express-server aanmaken

1. Initialiseer een nieuw Node.js-project in dezelfde directory:

    mkdir server && cd server npm init -y

2. Installeer de vereiste pakketten:

    npm install express cors dotenv node-fetch

3. Werk het bestand package.json bij om de module te gebruiken om het gebruik van native imports mogelijk te maken:

    { "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. Maak een bestand met de naam server.js in de server en voeg de volgende code toe:

    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. Maak een .env bestand in de server :

    COHERE_API_KEY=your_cohere_api_key_here

6. Start de server:

    node server.js

   
   

   Belangrijk: Deel nooit uw .env bestand en commit het niet naar versiebeheer. Voeg .env toe aan uw .gitignore bestand.

   
   

Stap 3: Bouw de chatbotinterface

Werk het App.jsx bestand bij met de volgende code:

 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 App.css voor het stylen van de chatbotinterface:

 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

1. 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

2. Open de React-app in uw browser.
3. 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: AI Chatbot met React en Cohere . Kloon het gerust, verken de code en pas het aan uw behoeften aan!

Conclusie

Je hebt een functionele AI-aangedreven chatbot gebouwd met React , Vite , Cohere en Express . Dit project kan worden uitgebreid met functies zoals:

• 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!