CopilotKit으로 AI 챗봇 만들기: Flask와 React를 사용한 단계별 가이드

Flask 백엔드와 통합된 CopilotKit을 사용하여 AI 챗봇을 만드는 것은 흥미로운 프로젝트가 될 수 있습니다. 다음은 프런트엔드(React 및 CopilotKit 사용)와 백엔드(Flask 사용)에 필요한 구성 요소를 포함하여 프로젝트를 설정하는 방법에 대한 단계별 가이드입니다.

프로젝트 개요

구성요소

1. Flask 백엔드: API 요청을 처리하고 프런트엔드를 제공합니다.
2. React Frontend: CopilotKit을 사용하여 대화형 AI 챗봇 인터페이스를 만듭니다.
3. AI 통합: 응답 생성을 위해 AI 모델(예: Google의 Gemini)에 연결합니다.

1단계: Flask 백엔드 설정

1. 플라스크 설치

먼저 가상 환경을 만들고 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. Flask 앱 만들기

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. 플라스크 앱 실행

Flask 앱 실행:

python app.py

이제 백엔드는 http://127.0.0.1:5000에서 실행되어야 합니다.

2단계: CopilotKit을 사용하여 React 프런트엔드 설정

1. 리액트 앱 만들기

새 디렉터리에서 React 앱을 만듭니다.

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

2. CopilotKit 설치

API 호출을 위해 CopilotKit 및 Axios를 설치하세요.

npm install @copilotkit/react axios

3. 챗봇 컴포넌트 생성

src 디렉터리에 Chatbot.js라는 파일을 만듭니다.

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 id="AI-Chatbot">AI Chatbot</h2>
                <div classname="chat-history">
                    {chatHistory.map((chat, index) => (
                        <div key="{index}" classname="{`message" :>
                            <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. App.js 업데이트

src/App.js의 내용을 다음으로 바꾸세요.

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

function App() {
    return (
        <div classname="App">
            <chatbot></chatbot>
        </div>
    );
}

export default App;

5. 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. React 앱 실행

React 앱 시작:

npm start

이제 프런트엔드는 http://localhost:3000에서 실행되어야 합니다.

3단계: 챗봇 테스트

1. Flask 백엔드와 React 프론트엔드가 모두 실행되고 있는지 확인하세요.
2. 브라우저를 열고 http://localhost:3000으로 이동하세요.
3. 입력란에 메시지를 입력하면 AI 챗봇의 답변을 확인할 수 있습니다.

CopilotKit, Flask 및 React를 사용하여 챗봇 구축에 대한 게시물을 개발할 때 GitHub 저장소 URL을 포함하려면 다음과 같이 형식을 지정하면 됩니다.

---

CopilotKit, Flask 및 React를 사용하여 AI Chatbot 구축

이 게시물에서는 프런트엔드에 CopilotKit, 백엔드에 Flask, 사용자 인터페이스에 React를 사용하여 대화형 AI 챗봇을 만드는 단계를 단계별로 살펴보겠습니다.

GitHub 저장소

GitHub에서 이 프로젝트의 전체 코드를 찾을 수 있습니다: CopilotKit이 포함된 Chatbot

결론

이제 프런트엔드용 CopilotKit과 백엔드용 Flask를 사용하여 기본 AI 챗봇을 구축했습니다! 사용자 인증, 채팅 기록 저장, UI/UX 디자인 개선 등의 기능을 추가하여 이 프로젝트를 향상시킬 수 있습니다.

위 내용은 CopilotKit으로 AI 챗봇 만들기: Flask와 React를 사용한 단계별 가이드의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!