Chat applications are among the most useful and popular projects for developers beginning or mastering full-stack programming. In this blog post, I'll explain how I created a React-based chat app with advanced design that interfaces with a Flask server powered by the Gemini API to provide intelligent, generative responses. ### Overview The program uses React for a dynamic and responsive front-end, and Flask with Gemini API on the back-end to process and respond to user queries. Here's what we'll discuss: ### What we are Going to Create ? Let's have a look at what we want to produce for this fantastic blog. ![Image](https://res.cloudinary.com/dpbf0ecva/image/upload/v1731839815/gemini_flask_01_pim0gy.png) ![Image](https://res.cloudinary.com/dpbf0ecva/image/upload/v1731839818/gemini_flask_02_xz5zar.png) ![Image](https://res.cloudinary.com/dpbf0ecva/image/upload/v1731839818/gemini_flask_03_grefvz.png) ![Image](https://res.cloudinary.com/dpbf0ecva/image/upload/v1731839814/gemini_flask_04_kw4ffj.png) ### Setting Up the Flask Back-End Before starting, ensure you have the following installed: Install dependencies by running: ```bash pip install flask flask-cors google-generativeai ``` ### Flask API Code The Flask back-end processes user messages and retrieves AI-generated responses using the Gemini API. Here’s the complete server code: > **Get You Google Gemini API key from the below link** [Google Gemini API](https://aistudio.google.com/app/apikey) ```python from flask import Flask, request, jsonify import google.generativeai as genai from flask_cors import CORS app = Flask(__name__) CORS(app) # Set the Google API key key = "XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX" # Your API key here genai.configure(api_key=key) model = genai.GenerativeModel("gemini-1.5-flash") @app.route('/api/chat', methods=['POST']) def chat(): user_message = request.json.get('message') response = model.generate_content(user_message) return jsonify({'response': response.text}) if __name__ == '__main__': app.run(debug=True) ``` Creating the React Front-End Install the required packages: ```bash npm install react framer-motion lucide-react ``` ### React Component Code Below is the main React component for our chat application: ```javascript import React, { useState, useRef, useEffect } from 'react' import { motion, AnimatePresence } from 'framer-motion' import { ChevronLeft, ChevronRight, Plus, Trash, Edit, Send, Sparkles, Bot, User, Sun, Moon, Menu, Shield, ArrowDown, X } from 'lucide-react' const models = [ { id: 'gpt-3.5', name: 'GPT-3.5' }, { id: 'gpt-4', name: 'GPT-4' }, ] const examplePrompts = [ "Explain quantum computing in simple terms", "Write a poem about artificial intelligence", "How do I make a perfect cup of coffee?", "What are the best practices for sustainable living?", ] export default function Main() { const [sidebarOpen, setSidebarOpen] = useState(false) const [chats, setChats] = useState([]) const [currentChat, setCurrentChat] = useState(null) const [input, setInput] = useState('') const [selectedModel, setSelectedModel] = useState(models[0]) const [darkMode, setDarkMode] = useState(true) const [isLoading, setIsLoading] = useState(false) const [showScrollButton, setShowScrollButton] = useState(false) const messagesEndRef = useRef(null) const chatContainerRef = useRef(null) const scrollToBottom = () => { messagesEndRef.current?.scrollIntoView({ behavior: "smooth" }) } useEffect(() => { scrollToBottom() }, [chats]) useEffect(() => { const mediaQuery = window.matchMedia('(min-width: 768px)') const handleChange = (e) => { setSidebarOpen(e.matches) } mediaQuery.addListener(handleChange) setSidebarOpen(mediaQuery.matches) return () => mediaQuery.removeListener(handleChange) }, []) useEffect(() => { const handleScroll = () => { if (chatContainerRef.current) { const { scrollTop, scrollHeight, clientHeight } = chatContainerRef.current setShowScrollButton(scrollHeight - scrollTop > clientHeight + 100) } } const chatContainer = chatContainerRef.current if (chatContainer) { chatContainer.addEventListener('scroll', handleScroll) } return () => { if (chatContainer) { chatContainer.removeEventListener('scroll', handleScroll) } } }, []) const handleNewChat = () => { const newChat = { id: Date.now(), name: 'New Chat', messages: [] } setChats([...chats, newChat]) setCurrentChat(newChat.id) } const handleSwitchChat = (id) => { setCurrentChat(id) if (window.innerWidth < 768) { setSidebarOpen(false) } } const handleRenameChat = (id, newName) => { setChats(chats.map(chat => chat.id === id ? { ...chat, name: newName } : chat)) } const handleDeleteChat = (id) => { setChats(chats.filter(chat => chat.id !== id)) if (currentChat === id) { setCurrentChat(null) } } const handleSendMessage = async (e) => { e.preventDefault(); if (!input.trim() || isLoading) return; const updatedChats = chats.map(chat => { if (chat.id === currentChat) { return { ...chat, messages: [...chat.messages, { role: 'user', content: formatResponse(input) }] }; } return chat; }); setChats(updatedChats); setInput(''); setIsLoading(true); try { const response = await fetch('http://localhost:5000/api/chat', { method: 'POST', headers: { 'Content-Type': 'application/json', }, body: JSON.stringify({ message: input }), }); if (response.ok) { const data = await response.json(); const aiResponse = { role: 'assistant', content: formatResponse(data.response) }; const updatedChatsWithAI = updatedChats.map(chat => { if (chat.id === currentChat) { return { ...chat, messages: [...chat.messages, aiResponse] }; } return chat; // You might not need to format the other chats' messages here }); setChats(updatedChatsWithAI); } else { console.error('Error fetching AI response:', response.statusText); } } catch (error) { console.error('Error:', error); } finally { setIsLoading(false); } }; function formatResponse(response) { // Wrap code blocks with

 and  tags for proper formatting
        return response
            .replace(/```([^`]+)```/g, function (match, p1) {
                // Split the code block into lines
                const lines = p1.trim().split('\n');
                let languageLine = '';  // To store the language identifier line

                // Check if the first line is a language identifier
                if (lines.length > 1 && /^[a-zA-Z]+$/.test(lines[0])) {
                    // Extract the language identifier
                    languageLine = lines.shift(); // Removes and stores the first line
                }

                // Join the remaining lines and escape HTML entities
                const code = lines.join('\n').replace(//g, '>');

                // Return formatted HTML with the language identifier and horizontal line
                return `${languageLine}
${code}
                
    `;
            })
            .replace(/`([^`]+)`/g, function (match, p1) {
                // Format inline code with styling and escape HTML entities
                return `${p1.trim().replace(//g, '>')}`;
            })
            .replace(/\*\*([^*]+)\*\*/g, "$1")  // Bold text without asterisks
            .replace(/\n/g, "
");  // Line breaks
    }



    const handleStopResponse = () => {
        setIsLoading(false)
        // In a real implementation, you would also need to cancel the API request here
    }

    const toggleDarkMode = () => {
        setDarkMode(!darkMode)
    }

   

    return (
        
            {/* Sidebar */}
            
                {sidebarOpen && (
                    
                        
                            Chats
                            
                        
                        
                        
                            {chats.map(chat => (
                                 handleSwitchChat(chat.id)}
                                >
                                    {chat.name}
                                    
                                        
                                        
                                    
                                
                            ))}
                        
                        
                            
                        
                    
                )}
            

            {/* Main Content */}
            
                {/* Header */}
                
                     setSidebarOpen(!sidebarOpen)}
                        className={`${darkMode ? 'bg-gray-700 hover:bg-gray-600' : 'bg-gray-200 hover:bg-gray-300'} rounded-full p-3 transition-colors duration-300 shadow-lg`}
                    >
                        
                    
                    
                        {darkMode ?  : }
                    
                

                {/* Chat Area or Welcome Screen */}
                
                    {currentChat ? (
                        // Chat messages
                        chats.find(chat => chat.id === currentChat)?.messages.map((message, index) => (
                            
                                
                                    
                                        {message.role === 'user' ? (
                                            
                                        ) : (
                                            
                                        )}
                                    
                                    
                                     
                                    
                                
                            
                        ))
                    ) : (
                        // Welcome screen
                        
                            
                                
                                    Welcome to AI Chat
                                
                            
                            
                                Experience the power of AI-driven conversations
                            
                            
                                
                                    Intelligent
                                    Powered by advanced language models
                                
                                
                                    Versatile
                                    Capable of handling a wide range of topics
                                
                                
                                    Fast
                                    Get instant responses to your queries
                                
                                
                                    Secure
                                    Your conversations are private and protected
                                
                            
                            
                        
                    )}
                    
                

                {/* Scroll to Bottom Button */}
                
                    {showScrollButton && (
                        
                            
                        
                    )}
                

                {/* Loading Indicator and Stop Button */}
                
                    {isLoading && (
                        
                            
                            AI is thinking...
                            
                        
                    )}
                

                {/* Input Area */}
                {currentChat && (
                    
                        {chats.find(chat => chat.id === currentChat)?.messages.length === 0 && (
                            
                                Example prompts:
                                
                                    {examplePrompts.map((prompt, index) => (
                                         setInput(prompt)}
                                            className={`text-left p-4 ${darkMode ? 'bg-gray-700 hover:bg-gray-600' : 'bg-gray-200 hover:bg-gray-300'} rounded-xl transition-all duration-300 shadow-md`}
                                        >
                                            {prompt}
                                        
                                    ))}
                                
                            
                        )}
                        
                             setInput(e.target.value)}
                                placeholder="Type your message..."
                                disabled={isLoading}
                                className={`flex-grow p-4 ${darkMode ? 'bg-gray-700 text-white' : 'bg-gray-200 text-gray-900'} rounded-xl focus:outline-none focus:ring-2 focus:ring-indigo-500 transition-all duration-300 ${isLoading ? 'opacity-50 cursor-not-allowed' : ''}`}
                            />
                            
                                
                                Send
                            
                        
                        
                            
                                
                                By using this service, you agree to our Terms of Service and Privacy Policy.
                            
                        
                    
                )}
            
        
    )
}
```

Key Features in the Code:

### Integration

Start Flask Backend

```bash
python server.py
```

Start React Front-End

```bash
npm start
```

This chat app demonstrates how to use the Gemini API to integrate React with a Flask-based backend to provide intelligent responses. Its advanced features, such as dark mode, multiple chat handling, and fluid animations, make it an excellent full-stack solution. Add features like user authentication and message storage to this app to help you learn more!

Building an Advanced Chat Application with React and Flask Using Gemini API