Erstellen eines KI-Chatbots mit CopilotKit: Eine Schritt-für-Schritt-Anleitung mit Flask und React

Das Erstellen eines KI-Chatbots mit CopilotKit, integriert mit einem Flask-Backend, kann ein spannendes Projekt sein. Nachfolgend finden Sie eine Schritt-für-Schritt-Anleitung zum Einrichten Ihres Projekts, einschließlich der erforderlichen Komponenten sowohl für das Frontend (mit React und CopilotKit) als auch für das Backend (mit Flask).

Projektübersicht

Komponenten

1. Flask Backend: Verarbeitet API-Anfragen und bedient das Frontend.
2. React Frontend: Verwendet CopilotKit, um eine interaktive KI-Chatbot-Schnittstelle zu erstellen.
3. KI-Integration: Stellt eine Verbindung zu einem KI-Modell (wie Googles Gemini) her, um Antworten zu generieren.

Schritt 1: Richten Sie das Flask-Backend ein

1. Flask installieren

Erstellen Sie zunächst eine virtuelle Umgebung und installieren Sie Flask:

mkdir chatbot-backend
cd chatbot-backend
python -m venv venv
source venv/bin/activate  # On Windows use `venv\Scripts\activate`
pip install Flask flask-cors

2. Erstellen Sie die Flask-App

Erstellen Sie eine Datei mit dem Namen app.py:

from flask import Flask, request, jsonify
from flask_cors import CORS
import openai  # Make sure to install OpenAI SDK if you're using it

app = Flask(__name__)
CORS(app)  # Allow CORS for all domains

# Set your OpenAI API key
openai.api_key = 'YOUR_OPENAI_API_KEY'

@app.route('/api/chat', methods=['POST'])
def chat():
    user_message = request.json.get('message')

    # Call the AI model (e.g., OpenAI GPT)
    response = openai.ChatCompletion.create(
        model="gpt-3.5-turbo",
        messages=[{"role": "user", "content": user_message}]
    )

    bot_message = response.choices[0].message['content']
    return jsonify({'response': bot_message})

if __name__ == '__main__':
    app.run(debug=True)

3. Führen Sie die Flask-App aus

Führen Sie Ihre Flask-App aus:

python app.py

Ihr Backend sollte jetzt unter http://127.0.0.1:5000 laufen.

Schritt 2: Richten Sie das React-Frontend mit CopilotKit ein

1. Erstellen Sie eine Reaktions-App

Erstellen Sie in einem neuen Verzeichnis Ihre React-App:

npx create-react-app chatbot-frontend
cd chatbot-frontend

2. Installieren Sie CopilotKit

Installieren Sie CopilotKit und Axios, um API-Aufrufe durchzuführen:

npm install @copilotkit/react axios

3. Erstellen Sie die Chatbot-Komponente

Erstellen Sie eine Datei mit dem Namen Chatbot.js im src-Verzeichnis:

import React, { useState, useEffect } from 'react';
import axios from 'axios';
import { CopilotSidebar, useCopilotChat } from '@copilotkit/react';
import './Chatbot.css'; // Importing CSS file for styling

const Chatbot = () => {
    const [message, setMessage] = useState('');
    const [chatHistory, setChatHistory] = useState([]);
    const [selectedPrompt, setSelectedPrompt] = useState('');
    const [conversations, setConversations] = useState([]);
    const [prompts, setPrompts] = useState([]);
    const [newPrompt, setNewPrompt] = useState('');
    const [searchTerm, setSearchTerm] = useState('');
    const [showPromptInput, setShowPromptInput] = useState(false); // State to toggle prompt input visibility
    const { addMessage } = useCopilotChat();

    useEffect(() => {
        // Load conversations and prompts from local storage on component mount
        const storedChats = JSON.parse(localStorage.getItem('chatHistory')) || [];
        const storedPrompts = JSON.parse(localStorage.getItem('prompts')) || [];
        setConversations(storedChats);
        setPrompts(storedPrompts);

        // Load the most recent conversation into chat history if available
        if (storedChats.length > 0) {
            setChatHistory(storedChats[storedChats.length - 1].history);
        }
    }, []);

    const handleSendMessage = async () => {
        const userMessage = { sender: 'User', text: message };
        const updatedChatHistory = [...chatHistory, userMessage];
        setChatHistory(updatedChatHistory);
        setMessage('');

        try {
            const response = await axios.post('http://127.0.0.1:5000/api/chat', { message });
            const botMessage = { sender: 'Bot', text: response.data.response };
            updatedChatHistory.push(botMessage);
            setChatHistory(updatedChatHistory);

            // Add messages to Copilot
            addMessage(userMessage);
            addMessage(botMessage);

            // Save updated chat history to local storage
            localStorage.setItem('chatHistory', JSON.stringify(updatedChatHistory));
        } catch (error) {
            console.error('Error sending message:', error);
        }
    };

    const handlePromptSelect = (prompt) => {
        setSelectedPrompt(prompt);
        setMessage(prompt);
    };

    const handleConversationClick = (conversation) => {
        setChatHistory(conversation.history);
    };

    const handleSaveConversation = () => {
        const title = prompt("Enter a title for this conversation:");
        if (title) {
            const newConversation = { title, history: chatHistory };
            const updatedConversations = [...conversations, newConversation];
            setConversations(updatedConversations);
            localStorage.setItem('chatHistory', JSON.stringify(updatedConversations));
        }
    };

    const handleAddPrompt = () => {
        if (newPrompt.trim()) {
            const updatedPrompts = [...prompts, newPrompt.trim()];
            setPrompts(updatedPrompts);
            localStorage.setItem('prompts', JSON.stringify(updatedPrompts));
            setNewPrompt('');
            setShowPromptInput(false); // Hide the input after adding
        }
    };

    // Function to delete a conversation
    const handleDeleteConversation = (index) => {
        const updatedConversations = conversations.filter((_, i) => i !== index);
        setConversations(updatedConversations);
        localStorage.setItem('chatHistory', JSON.stringify(updatedConversations));

        // Optionally reset chat history if the deleted conversation was currently loaded
        if (chatHistory === conversations[index].history) {
            setChatHistory([]);
        }
    };

    // Filtered prompts based on search term
    const filteredPrompts = prompts.filter(prompt => 
        prompt.toLowerCase().includes(searchTerm.toLowerCase())
    );

    // Filtered conversations based on search term
    const filteredConversations = conversations.filter(conversation =>
        conversation.title.toLowerCase().includes(searchTerm.toLowerCase())
    );

    return (
        <div className="chatbot-container">
            <CopilotSidebar title="Recent Conversations">
                <input 
                    type="text" 
                    placeholder="Search Conversations..." 
                    value={searchTerm} 
                    onChange={(e) => setSearchTerm(e.target.value)} 
                    className="search-input"
                />
                {filteredConversations.map((conversation, index) => (
                    <div key={index} className="conversation-title">
                        <span onClick={() => handleConversationClick(conversation)}>
                            {conversation.title}
                        </span>
                        <button className="delete-button" onClick={() => handleDeleteConversation(index)}>
                            ?️ {/* Delete icon */}
                        </button>
                    </div>
                ))}
                <button onClick={handleSaveConversation} className="save-button">Save Conversation</button>
            </CopilotSidebar>
            <div className="chat-area">
                <h2>AI Chatbot</h2>
                <div className="chat-history">
                    {chatHistory.map((chat, index) => (
                        <div key={index} className={`message ${chat.sender === 'User' ? 'user' : 'bot'}`}>
                            <strong>{chat.sender}:</strong> {chat.text}
                        </div>
                    ))}
                </div>
                <div className="input-area">
                    <select 
                        value={selectedPrompt} 
                        onChange={(e) => handlePromptSelect(e.target.value)} 
                        className="prompt-select"
                    >
                        <option value="">Select a prompt...</option>
                        {filteredPrompts.map((prompt, index) => (
                            <option key={index} value={prompt}>{prompt}</option>
                        ))}
                    </select>

                    {/* Button to toggle visibility of the new prompt input */}
                    <button onClick={() => setShowPromptInput(!showPromptInput)} className="toggle-prompt-button">
                        {showPromptInput ? "Hide Prompt Input" : "Add New Prompt"}
                    </button>

                    {/* New Prompt Input Field */}
                    {showPromptInput && (
                        <input 
                            type="text" 
                            value={newPrompt} 
                            onChange={(e) => setNewPrompt(e.target.value)} 
                            placeholder="Add a new prompt..." 
                            className="new-prompt-input"
                        />
                    )}

                    {/* Button to add the new prompt */}
                    {showPromptInput && (
                        <button onClick={handleAddPrompt} className="add-prompt-button">Add Prompt</button>
                    )}

                    {/* Message Input Field */}
                    <input 
                        type="text" 
                        value={message} 
                        onChange={(e) => setMessage(e.target.value)} 
                        placeholder="Type your message..." 
                        className="message-input"
                    />
                    <button onClick={handleSendMessage} className="send-button">Send</button>
                </div>
            </div>
        </div>
    );
};

export default Chatbot;

4. Aktualisieren Sie App.js

Ersetzen Sie den Inhalt von src/App.js durch:

import React from 'react';
import Chatbot from './Chatbot';

function App() {
    return (
        <div className="App">
            <Chatbot />
        </div>
    );
}

export default App;

5. Erstellen Sie Chatbot.css

.chatbot-container {
    display: flex;
    height: 100vh;
}

.chat-area {
    margin-left: 20px;
    flex-grow: 1;
    padding: 20px;
    background-color: #f9f9f9;
    border-radius: 8px;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
}

.chat-history {
    border: 1px solid #ccc;
    padding: 10px;
    height: calc(100% - 120px); /* Adjust height based on input area */
    overflow-y: scroll;
    border-radius: 8px;
}

.message {
    margin-bottom: 10px;
}

.user {
    text-align: right;
}

.bot {
    text-align: left;
}

.input-area {
    display: flex;
    align-items: center;
}

.prompt-select {
    margin-right: 10px;
}

.message-input {
    flex-grow: 1;
    padding: 10px;
    border-radius: 4px;
    border: 1px solid #ccc;
}

.send-button {
    padding: 10px 15px;
    background-color: #007bff;
    color: white;
    border: none;
    border-radius: 4px;
    cursor: pointer;
}

.send-button:hover {
    background-color: #0056b3;
}

.conversation-title {
    padding: 10px;
    cursor: pointer;
}

.conversation-title:hover {
    background-color: #f0f0f0;
}

.save-button {
    margin-top: 10px;
    padding: 5px 10px;
    background-color: #28a745;
    color: white;
    border: none;
    border-radius: 4px;
    cursor: pointer;
}

.save-button:hover {
    background-color: #218838;
}

.prompt-select,
.new-prompt-input,
.message-input {
    margin-right: 10px;
}

.search-input {
    margin-bottom: 10px;
}

.new-prompt-input {
   flex-grow: 1; /* Allow it to take remaining space */
   padding: 10px;
   border-radius: 4px;
   border: 1px solid #ccc;
}

.add-prompt-button,
.send-button,
.save-button {
   padding: 10px 15px;
   background-color: #007bff;
   color: white;
   border: none;
   border-radius: 4px;
   cursor: pointer;
}

.add-prompt-button:hover,
.send-button:hover,
.save-button:hover {
   background-color: #0056b3; /* Darker shade for hover */
}

.conversation-title {
   padding: 10px;
   cursor: pointer;
}

.conversation-title:hover {
   background-color: #f0f0f0; /* Highlight on hover */
}

.toggle-prompt-button {
   margin-right: 10px;
   padding: 10px 15px;
   background-color: #17a2b8; /* Different color for visibility */
   color: white;
   border: none;
   border-radius: 4px;
   cursor: pointer;
}

.toggle-prompt-button:hover {
   background-color: #138496; /* Darker shade for hover */
}

5. Führen Sie die React-App aus

Starten Sie Ihre React-App:

npm start

Ihr Frontend sollte jetzt auf http://localhost:3000 laufen.

Schritt 3: Testen Sie Ihren Chatbot

1. Stellen Sie sicher, dass sowohl Ihr Flask-Backend als auch Ihr React-Frontend ausgeführt werden.
2. Öffnen Sie Ihren Browser und navigieren Sie zu http://localhost:3000.
3. Geben Sie Nachrichten in das Eingabefeld ein und sehen Sie sich die Antworten des KI-Chatbots an.

Um eine GitHub-Repository-URL in Ihren dev.to-Beitrag über die Erstellung eines Chatbots mit CopilotKit, Flask und React aufzunehmen, können Sie ihn wie folgt formatieren:

---

Erstellen eines KI-Chatbots mit CopilotKit, Flask und React

In diesem Beitrag gehen wir die Schritte zum Erstellen eines interaktiven KI-Chatbots mit CopilotKit für das Frontend, Flask als Backend und React für die Benutzeroberfläche durch.

GitHub-Repository

Den vollständigen Code für dieses Projekt finden Sie auf GitHub: Chatbot mit CopilotKit

Abschluss

Sie haben jetzt einen einfachen KI-Chatbot, der mit CopilotKit für das Frontend und Flask für das Backend erstellt wurde! Sie können dieses Projekt erweitern, indem Sie Funktionen wie Benutzerauthentifizierung, Speichern des Chatverlaufs oder die Verbesserung des UI/UX-Designs hinzufügen.

Das obige ist der detaillierte Inhalt vonErstellen eines KI-Chatbots mit CopilotKit: Eine Schritt-für-Schritt-Anleitung mit Flask und React. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!