Mit diesem Leitfaden erstellen Sie schneller einen KI-Chatbot, als Sie morgens Kaffee trinken gehen

KI-gestützte Chatbots können das Benutzererlebnis verbessern und Antworten effektiv automatisieren. In diesem Tutorial erfahren Sie, wie Sie mithilfe von React , Vite und der API von Cohere schnell einen Chatbot mit einer Backend-Integration über Express erstellen. Dank seiner Einfachheit und Geschwindigkeit erleichtert Vite die Einrichtung moderner JavaScript-Anwendungen.

Diese Architektur verhindert die Offenlegung vertraulicher API-Schlüssel, indem Anforderungen über einen Server geleitet werden.

Was Sie lernen werden

• Einrichten eines grundlegenden React-Projekts mit Vite.
• Verwenden der KI-Plattform von Cohere zur natürlichen Sprachgenerierung.
• Erstellen eines Express-Servers zur Interaktion mit der API von Cohere.
• Erstellen einer reaktionsfähigen Chatbot-Schnittstelle in React.

Voraussetzungen

• Grundkenntnisse in React, JavaScript und Node.js.
• Node.js ist auf Ihrem System installiert.
• Ein Cohere-Konto (melden Sie sich hier an, um einen API-Schlüssel zu erhalten)

Schritt 1: Richten Sie Ihr React-Projekt ein

1. Erstellen Sie mit Vite ein neues React-Projekt:

   
   

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

2. Starten Sie den Entwicklungsserver:

   
   

 npm run dev

3. Öffnen Sie das Projekt in Ihrem bevorzugten Code-Editor.

Schritt 2: Erstellen Sie den Express-Server

1. Initialisieren Sie ein neues Node.js-Projekt im selben Verzeichnis:

    mkdir server && cd server npm init -y

2. Installieren Sie die erforderlichen Pakete:

    npm install express cors dotenv node-fetch

3. Aktualisieren Sie die Datei package.json, um das module zu verwenden und die Verwendung nativer Importe zu ermöglichen:

    { "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. Erstellen Sie im server eine Datei mit dem Namen server.js und fügen Sie den folgenden Code hinzu:

    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. Erstellen Sie eine .env Datei im server :

    COHERE_API_KEY=your_cohere_api_key_here

6. Starten Sie den Server:

    node server.js

   
   

   Wichtig: Geben Sie Ihre .env Datei niemals frei und übergeben Sie sie nicht der Versionskontrolle. Fügen Sie .env zu Ihrer .gitignore Datei hinzu.

   
   

Schritt 3: Erstellen Sie die Chatbot-Schnittstelle

Aktualisieren Sie die Datei App.jsx mit dem folgenden 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;

Schritt 4: Styling hinzufügen

Erstellen Sie eine Datei mit dem Namen App.css um die Chatbot-Schnittstelle zu gestalten:

 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; }

Schritt 5: Testen Sie Ihren Chatbot

1. Führen Sie die React-App und den Server gleichzeitig aus. Sie können beide gleichzeitig verwenden oder zwei Terminals öffnen:

• Terminal 1:

   npm run dev

• Terminal 2 (im server ):

   node server.js

2. Öffnen Sie die React-App in Ihrem Browser.
3. Geben Sie eine Nachricht ein und senden Sie sie. Die Anfrage wird an Ihren Express-Server gesendet, der die API von Cohere sicher aufruft und das Ergebnis zurückgibt.

Projektarchiv

Den vollständigen Quellcode für dieses Projekt finden Sie auf GitHub: AI Chatbot mit React und Cohere . Sie können ihn gerne klonen, den Code erkunden und ihn an Ihre Bedürfnisse anpassen!

Abschluss

Sie haben mit React , Vite , Cohere und Express einen funktionsfähigen KI-gestützten Chatbot erstellt. Dieses Projekt kann mit Funktionen wie diesen erweitert werden:

• Sprach-zu-Text- und Text-zu-Sprache-Integration.
• Dauerhafte Konversationen, die in einer Datenbank gespeichert werden.
• Ein ausgefeilteres Design mithilfe eines CSS-Frameworks wie Tailwind.
• Stellen Sie den Server mithilfe von Diensten wie Heroku, AWS oder Vercel bereit.

Beginnen Sie mit dem Experimentieren und viel Spaß beim Programmieren!