KI-gestützte Chatbots können das Benutzererlebnis verbessern und Antworten effektiv automatisieren. In diesem Tutorial erfahren Sie, wie Sie mithilfe von   ,   und   schnell einen Chatbot mit einer Backend-Integration über   erstellen. Dank seiner Einfachheit und Geschwindigkeit erleichtert Vite die Einrichtung moderner JavaScript-Anwendungen. React Vite der API von Cohere Express  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   an, um einen API-Schlüssel zu erhalten) hier  Schritt 1: Richten Sie Ihr React-Projekt ein  Erstellen Sie mit Vite ein neues React-Projekt:   npm create vite@latest ai-chatbot -- --template react cd ai-chatbot npm install  Starten Sie den Entwicklungsserver:   npm run dev  Öffnen Sie das Projekt in Ihrem bevorzugten Code-Editor.  Schritt 2: Erstellen Sie den Express-Server  Initialisieren Sie ein neues Node.js-Projekt im selben Verzeichnis:   mkdir server && cd server npm init -y  Installieren Sie die erforderlichen Pakete:   npm install express cors dotenv node-fetch  Aktualisieren Sie die Datei package.json, um das   zu verwenden und die Verwendung nativer Importe zu ermöglichen: 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" } }  Erstellen Sie im   eine Datei mit dem Namen   und fügen Sie den folgenden Code hinzu: server server.js   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}`); });  Erstellen Sie eine   Datei im   : .env server   COHERE_API_KEY=your_cohere_api_key_here  Starten Sie den Server:   node server.js    Geben Sie Ihre   Datei niemals frei und übergeben Sie sie nicht der Versionskontrolle. Fügen Sie   zu Ihrer   Datei hinzu. Wichtig: .env .env .gitignore  Schritt 3: Erstellen Sie die Chatbot-Schnittstelle  Aktualisieren Sie die Datei   mit dem folgenden 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;  Schritt 4: Styling hinzufügen  Erstellen Sie eine Datei mit dem Namen   um die Chatbot-Schnittstelle zu gestalten: 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; }  Schritt 5: Testen Sie Ihren Chatbot  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  Öffnen Sie die React-App in Ihrem Browser.  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:   . Sie können ihn gerne klonen, den Code erkunden und ihn an Ihre Bedürfnisse anpassen! AI Chatbot mit React und Cohere  Abschluss  Sie haben mit   ,   ,   und   einen funktionsfähigen KI-gestützten Chatbot erstellt. Dieses Projekt kann mit Funktionen wie diesen erweitert werden: React Vite Cohere Express  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!

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

Read My Stories

Dieses Audio ist in der Originalsprache der Geschichte produziert!

Zu lang; Lesen

Make resilience your competitive advantage

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

About Author

KOMMENTARE

Hängeetiketten

DIESER ARTIKEL WURDE VORGESTELLT IN

Related Stories

HackerNoon Decoded 2024: Celebrating Our Tech Stories Community!

HackerNoon Decoded 2024: Celebrating Our Startups Community!

HackerNoon Decoded 2024: Wir feiern die Community unserer Technologieunternehmen!

Genuine Content Creation in the Age of AI: Why Startups Need Quality Content

HackerNoon Decoded 2024: Celebrating Our Tech Stories Community!

HackerNoon Decoded 2024: Celebrating Our Startups Community!

HackerNoon Decoded 2024: Wir feiern die Community unserer Technologieunternehmen!

Genuine Content Creation in the Age of AI: Why Startups Need Quality Content

Light-Mode

Classic

Newspaper

Dark-Mode

Neon Noir

Minty

HN StartUps