Forem: Victor Pascal Dike

Building Intelligent Applications using Google's Gemini API

Victor Pascal Dike — Thu, 02 Oct 2025 19:30:21 +0000

Google's Gemini AI is revolutionizing the way developers build intelligent applications. With powerful multimodal capabilities and a flexible API, Gemini offers an unprecedented toolkit for creating smart, context-aware software. This guide will walk you through the four essential patterns for mastering Gemini AI: basic prompts, file processing, tool integration, and conversation memory.

Getting Started: Your Development Environment

Before we dive in, let's set up your environment. This involves installing a few Python libraries and gathering your API keys.

1. Install the Libraries
Open your terminal and run the following command:

pip install google-genai python-dotenv tavily-python

google-genai: The official Python SDK for the Gemini API.
python-dotenv: A handy utility to manage secret keys from a .env file.
tavily-python: The client library for Tavily, a search API we'll use to give our AI live internet access.

2. Set Up Your API Keys
Create a file named .env in your project's main directory. This is where you'll securely store your secret keys.

# .env file
GOOGLE_API_KEY="your_gemini_api_key_here"
TAVILY_API_KEY="your_tavily_api_key_here"

How to get your Gemini API Key: Visit Google AI Studio, sign in with your Google account, and click "Get API key" to generate a new key.
How to get your Tavily API Key: We'll explain this in the "Tool Integration" section below. For now, just know this is where it will go.

Pattern 1: Basic Prompts — The Foundation of AI Interaction

The simplest way to interact with Gemini is through a direct prompt. This pattern is perfect for straightforward tasks like generating content, answering questions, or summarizing text.

Why it Matters: Basic prompts are the fundamental building block of any AI application. Mastering this simple pattern allows you to tap into Gemini's power for a huge variety of tasks with minimal code. It's the "hello, world" of generative AI.

import os
from dotenv import load_dotenv
from google import genai
from google.genai import types

load_dotenv()
client = genai.Client()

response = client.models.generate_content(
    model="models/gemini-2.5-flash",
    contents="Help me create: Social Media Content Series for my brand called Markita, an ai marketing tool for small businesses",
    config=types.GenerateContentConfig(
        system_instruction="You are a helpful assistant that creates social media content series for small businesses"
    )
)
print(response.text)

Best Practices for Prompts

Be Specific: Clear, detailed prompts lead to more accurate and relevant results.
Define the Role: Use a system_instruction to set the AI's persona, ensuring a consistent tone and style.
Choose the Right Model: Use gemini-1.5-flash for speed and efficiency or gemini-1.5-pro for more complex reasoning.

Pattern 2: File Processing — Unlocking Multimodal Capabilities

Gemini can understand more than just text. Its ability to process various file types opens up a world of possibilities for image analysis, document processing, and multimedia applications.

Why it Matters: The world's data isn't just text. By enabling your app to understand images, videos, audio, and PDFs, you can build far more intuitive and powerful user experiences that mirror how humans interact with information.

import os
from dotenv import load_dotenv
from google import genai
from google.genai import types

load_dotenv()
client = genai.Client()

# Upload and analyze an image
uploaded_file = client.files.upload(file="cat.jpg")
response = client.models.generate_content(
    model="models/gemini-2.5-flash",
    contents=["What do you see in this image?", uploaded_file],
    config=types.GenerateContentConfig(
        system_instruction="You are a helpful assistant"
    )
)
print(response.text)

Relatable Use Cases

E-commerce: Automatically generate compelling product descriptions from images.
Accessibility: Generate descriptive alt-text for images to help visually impaired users.
Document Analysis: Quickly extract key insights and summaries from lengthy PDF reports.

Pattern 3: Tool Integration — Giving Your AI Superpowers

This is where Gemini truly becomes a dynamic assistant. By giving it tools, you can connect it to custom functions or external APIs, allowing it to access live data and perform real-world actions.

Why it Matters: By default, an LLM like Gemini has no access to the internet. Its knowledge is "frozen" at the time it was trained. If you ask about recent events, it won't know the answer. By connecting Gemini to an external tool—like a search engine—you transform it from a static knowledge base into an active assistant that can find real-time information.

Our First Tool: Live Web Search with Tavily

To answer questions about current events (like "What are Apple's new products?"), we need to give Gemini a tool to search the web. We'll use the Tavily API, a search service designed specifically for AI agents.

How to Get Your Tavily API Key

Go to the Tavily AI website and sign up for a free account.

After signing in, navigate to your dashboard.

You will find your API key there. Copy it and paste it into your .env file.

Now, let's write the code to give Gemini its new web-searching ability.

import os
from dotenv import load_dotenv
from google import genai
from google.genai import types
from tavily import TavilyClient
from datetime import date

load_dotenv()
client = genai.Client()
tavily_client = TavilyClient(api_key=os.environ.get("TAVILY_API_KEY"))

def tavily_search(query: str) -> str:
    """
    Performs a web search for general information using the Tavily API.
    Args:
        query: The search query.
    """
    try:
        response = tavily_client.search(query=query, search_depth="basic")
        return response['results']
    except Exception as e:
        return f"An error occurred: {e}"

def get_todays_date() -> str:
    """
    Returns today's date in YYYY-MM-DD format.
    """
    return date.today().isoformat()

# The AI will automatically choose the appropriate tool
response = client.models.generate_content(
    model="models/gemini-1.5-pro",
    contents="What are Apple's new products?",
    config=types.GenerateContentConfig(
        system_instruction="Use the provided tools to answer questions.",
        tools=[tavily_search, get_todays_date]
    )
)
print(response.text)

Tool Design Principles

Clear Documentation: Write descriptive docstrings and use Python type hints. This is how the AI learns what your tool does.
Focused Functionality: Each tool should have a single, well-defined purpose.
Robust Error Handling: Always wrap your tool's logic in a try...except block.

Pattern 4: Conversation Memory — Building Natural Dialogues

Conversation memory transforms one-off Q&A sessions into meaningful, contextual dialogues. By remembering previous exchanges, your AI can follow up on questions and provide more personalized responses.

Why it Matters: Humans don't have amnesia between sentences in a conversation. By giving your AI a memory, you create a more natural and fluid user experience, which is essential for building engaging chatbots and virtual assistants.

import os
from dotenv import load_dotenv
from google import genai
from google.genai import types

load_dotenv()
client = genai.Client()

# Conversation memory (list of messages and files)
history = []

def ask_model(user_input, uploaded_file=None):
    global history

    # Add the new user input
    if uploaded_file:
        history.append(user_input)
        history.append(uploaded_file)
    else:
        history.append(user_input)

    # Call the model with full history
    response = client.models.generate_content(
        model="models/gemini-1.5-pro",
        contents=history,
        config=types.GenerateContentConfig(
            system_instruction="You are a helpful assistant that remembers context."
        )
    )

    # Save model response to history
    history.append(response.text)
    return response.text

# Example conversation flow
print(ask_model("Hi, I run a bakery. Can you help me create a marketing plan?"))
print(ask_model("Great. Can you make it specific for Instagram?"))

# Adding files to the conversation
uploaded_file = client.files.upload(file="bakery_photo.jpg")
print(ask_model("Use this photo to suggest promotional ideas:", uploaded_file))

Best Practices and Performance Tips

Model Selection:
- Gemini 1.5 Flash: Best for fast responses and cost-effectiveness in simpler tasks.
- Gemini 1.5 Pro: Ideal for complex reasoning, multi-turn conversations, and tool use.
Error Handling: Always wrap your API calls in try...except blocks to gracefully handle potential network or API errors.
Cost Optimization: Match the model to the task's complexity. Use caching for repeated queries and optimize prompt length to reduce costs.

Conclusion

Google Gemini AI is a remarkably powerful platform for building the next generation of intelligent software. By mastering these four core patterns—prompts, files, tools, and memory—you can create sophisticated AI solutions that deliver real value.

The key is to start simple with basic prompts and progressively layer in more complexity as your application requires it. Whether you're building a customer support bot, a creative content generator, or a complex data analysis tool, Gemini provides the foundation for software that can understand, reason, and interact in truly remarkable ways.

Ready to start building? Check out the official Google AI documentation and begin experimenting with these patterns in your own projects.

Building a Full-Stack AI Chatbot with FastAPI (Backend) and React (Frontend)

Victor Pascal Dike — Mon, 21 Apr 2025 18:06:41 +0000

AI-powered chatbots are transforming how we interact with technology. From automating customer support to serving as personal assistants, their applications are vast and continually growing. This article is your comprehensive guide to building a fully functional AI chatbot from the ground up, demystifying the core principles of full-stack AI development.

We will construct the backend using FastAPI, a modern and high-speed Python framework, and craft the frontend interface with React, the leading JavaScript library for building dynamic user interfaces. This step-by-step tutorial will walk you through the entire process of connecting a powerful AI model to a user-friendly chat window, covering everything from capturing user input to displaying an AI-generated response.

What You'll Build

By the end of this guide, you will have a sleek, web-based chat application. You'll be able to type a message, send it to a secure backend, get an intelligent response from an AI model like OpenAI's GPT, and see the entire conversation unfold on your screen.

Prerequisites

Python 3.7+ and a basic understanding of its syntax.
Node.js and npm installed on your machine.
A foundational knowledge of React and JavaScript.
An OpenAI API key.

The Anatomy of Our AI Chatbot

Before we jump into the code, let's understand the three core components that work together to bring our chatbot to life.

1. The Brains of the Operation: Our FastAPI Backend

The backend is the engine of our application. It lives on a server, receives user messages from the frontend, communicates with the AI model, and sends the AI's response back. We're using FastAPI for several compelling reasons:

Blazing-Fast Performance: Built with modern, asynchronous Python, FastAPI is one of the fastest web frameworks available, ensuring your chatbot responds quickly.
Intuitive and Simple: Its clean syntax allows you to build powerful APIs with minimal code, making development faster and more enjoyable.
Automatic Interactive Docs: FastAPI automatically generates a user-friendly interface (Swagger UI) for you to test your API endpoints directly in the browser—an invaluable tool for development.
Built-in Data Validation: By using Python type hints, it automatically validates incoming data, catching bugs before they cause problems.

2. The Face of Our Chatbot: The React Frontend

The frontend is everything the user sees and interacts with. It provides the chat window, the input field, and the send button. React is the perfect tool for this job because:

Component-Based Architecture: It allows you to build self-contained, reusable components (like a message bubble or a chat input form), making your UI organized and easy to manage.
Efficient Updates with the Virtual DOM: React intelligently updates only the specific parts of the page that have changed. This is like having a blueprint of your house and only rebuilding the single wall you moved, instead of the entire house, resulting in a much faster and smoother user experience.
A Massive Ecosystem: The huge community behind React means you have access to countless libraries and tools to add any feature you can imagine.

3. The Waiter in the Middle: API Communication

The frontend and backend need a way to talk to each other. This is done through an API (Application Programming Interface). Think of it like ordering food at a restaurant:

You give your order (User Action): The user types a message in the React app and hits "Send."
The waiter takes the order to the kitchen (HTTP Request): The React app sends the message in an HTTP POST request to a specific URL on the FastAPI backend (e.g., /chat).
The kitchen prepares the food (Backend Processing): The backend receives the message and sends it to the OpenAI API to get a response from the language model.
The waiter brings the food back (HTTP Response): Once the AI model replies, the backend sends its answer back to the React app.
You get your meal (UI Update): The React app receives the response and adds the new message to the chat window for the user to see.

The intelligence of our chatbot comes from a Large Language Model (LLM), which we'll access via the OpenAI API. Remember to never expose your API key in your frontend code. We will use environment variables on the backend to keep it secure.

Let's Build It! A Step-by-Step Guide

Now, it's time to bring our chatbot to life.

Part 1: Setting Up the FastAPI Backend

First, let's create our backend service.

1. Initialize Your Project
Open your terminal and run these commands to create a project directory, set up a virtual environment, and install the necessary libraries.

# Create and navigate into the project folder
mkdir chatbot-backend
cd chatbot-backend

# Create and activate a virtual environment
# On Linux/macOS:
python3 -m venv .venv
source .venv/bin/activate

# On Windows:
python -m venv .venv
.venv\Scripts\activate

# Install required packages
pip install fastapi "uvicorn[standard]" python-dotenv openai

2. Secure Your API Key
Create a new file named .env inside the chatbot-backend directory. This file will store your secret OpenAI API key.

Important: Add .env to your .gitignore file to prevent accidentally committing your key to version control.

# .env
OPENAI_API_KEY="YOUR_OPENAI_API_KEY_HERE"

3. Create the Main Application File (main.py)
This file will contain all of our backend logic.

# main.py
import os
from fastapi import FastAPI, HTTPException
from fastapi.middleware.cors import CORSMiddleware
from pydantic import BaseModel
from openai import OpenAI
from dotenv import load_dotenv

# Load environment variables from the .env file
load_dotenv()

# --- 1. Initialize FastAPI and OpenAI Client ---
app = FastAPI()
client = OpenAI(api_key=os.getenv("OPENAI_API_KEY"))

# --- 2. Configure CORS ---
# This is crucial for allowing your React frontend to communicate with this backend.
# It's a security feature that browsers enforce.
origins = [
    "http://localhost:5173",  # Default Vite React dev server
    "http://localhost:3000",  # Common Create React App dev server
]

app.add_middleware(
    CORSMiddleware,
    allow_origins=origins,
    allow_credentials=True,
    allow_methods=["*"], # Allow all methods (GET, POST, etc.)
    allow_headers=["*"], # Allow all headers
)

# --- 3. Define the Request Data Structure ---
# Pydantic model ensures the incoming data has the correct format.
class ChatInput(BaseModel):
    user_message: str

# --- 4. Create API Endpoints ---
@app.get("/")
async def health_check():
    """A simple endpoint to confirm the server is running."""
    return {"status": "ok"}

@app.post("/chat")
async def chat_with_ai(input_data: ChatInput):
    """The main endpoint to handle chat interactions."""
    try:
        # Forward the user's message to the OpenAI API
        completion = client.chat.completions.create(
            model="gpt-3.5-turbo",
            messages=[
                {"role": "system", "content": "You are a helpful assistant."},
                {"role": "user", "content": input_data.user_message},
            ],
        )
        # Extract and return the AI's response
        bot_response = completion.choices[0].message.content
        return {"bot_response": bot_response}

    except Exception as e:
        # Properly handle potential API errors
        raise HTTPException(status_code=500, detail=str(e))

4. Run the Backend Server
Start your FastAPI server using Uvicorn.

uvicorn main:app --reload

The --reload flag automatically restarts the server whenever you save changes to your code. Your API is now live and accessible at http://127.0.0.1:8000.

Part 2: Building the React Frontend

Now, let's create the user interface.

1. Initialize Your Project
In your terminal (outside the backend folder), create a new React application using Vite for a fast and modern setup.

# Create a new React project
npm create vite@latest chatbot-frontend --template react

# Navigate into the new folder and install dependencies
cd chatbot-frontend
npm install

2. Create the Chat Component (src/App.jsx)
Replace the default content of src/App.jsx with the code below. This component will manage the chat state, handle user input, and communicate with our backend.

// src/App.jsx
import React, { useState, useEffect } from 'react';
import './App.css';

function App() {
    const [userInput, setUserInput] = useState('');
    const [chatLog, setChatLog] = useState([]);
    const [loading, setLoading] = useState(false);

    // Effect to load chat history from local storage when the app starts
    useEffect(() => {
        const storedChatLog = localStorage.getItem('chatLog');
        if (storedChatLog) {
            setChatLog(JSON.parse(storedChatLog));
        }
    }, []);

    const handleSubmit = async (event) => {
        event.preventDefault();
        if (!userInput.trim()) return; // Don't send empty messages

        const userMessage = { type: 'user', text: userInput };
        const newChatLog = [...chatLog, userMessage];
        setChatLog(newChatLog);
        setUserInput('');
        setLoading(true);

        try {
            // The API call to our FastAPI backend
            const response = await fetch('http://localhost:8000/chat', {
                method: 'POST',
                headers: { 'Content-Type': 'application/json' },
                body: JSON.stringify({ user_message: userInput }),
            });

            if (!response.ok) {
                throw new Error(`HTTP error! status: ${response.status}`);
            }

            const data = await response.json();
            const botMessage = { type: 'bot', text: data.bot_response };

            // Update the chat log with the bot's response
            const finalChatLog = [...newChatLog, botMessage];
            setChatLog(finalChatLog);

            // Save the updated chat log to local storage for persistence
            localStorage.setItem('chatLog', JSON.stringify(finalChatLog));

        } catch (error) {
            console.error('Error fetching chat response:', error);
            const errorMessage = { type: 'error', text: 'Sorry, something went wrong. Please try again.' };
            setChatLog(prev => [...prev, errorMessage]);
        } finally {
            setLoading(false);
        }
    };

    return (
        <div className="App">
            <h1>AI Chatbot</h1>
            <div className="chat-window">
                {chatLog.map((message, index) => (
                    <div key={index} className={`message ${message.type}`}>
                        {message.text}
                    </div>
                ))}
                {loading && <div className="message bot">Loading...</div>}
            </div>
            <form onSubmit={handleSubmit} className="chat-form">
                <input
                    type="text"
                    value={userInput}
                    onChange={(e) => setUserInput(e.target.value)}
                    placeholder="Type your message..."
                    disabled={loading}
                />
                <button type="submit" disabled={loading}>Send</button>
            </form>
        </div>
    );
}

export default App;

3. Add Some Style (src/App.css)
Replace the contents of src/App.css with the following CSS to make the chat interface look clean and modern.

/* src/App.css */
body {
    background-color: #f4f7f6;
    margin: 0;
}

.App {
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-between;
    height: 100vh;
    padding: 20px;
    box-sizing: border-box;
}

h1 {
    color: #333;
}

.chat-window {
    width: 100%;
    max-width: 600px;
    height: 80vh;
    border: 1px solid #e0e0e0;
    border-radius: 12px;
    overflow-y: auto;
    padding: 16px;
    margin-bottom: 20px;
    display: flex;
    flex-direction: column;
    gap: 12px;
    background-color: white;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.05);
}

.message {
    padding: 10px 16px;
    border-radius: 20px;
    max-width: 75%;
    word-wrap: break-word;
    line-height: 1.5;
}

.user {
    background-color: #007bff;
    color: white;
    align-self: flex-end;
    border-bottom-right-radius: 4px;
}

.bot, .error {
    background-color: #e9e9eb;
    color: #333;
    align-self: flex-start;
    border-bottom-left-radius: 4px;
}

.error {
    background-color: #f8d7da;
    color: #721c24;
}

.chat-form {
    display: flex;
    width: 100%;
    max-width: 600px;
}

input[type="text"] {
    flex-grow: 1;
    padding: 12px;
    border: 1px solid #ccc;
    border-radius: 8px;
    margin-right: 10px;
    font-size: 1rem;
}

button {
    padding: 12px 24px;
    border: none;
    border-radius: 8px;
    background-color: #007bff;
    color: white;
    cursor: pointer;
    font-size: 1rem;
    transition: background-color 0.2s;
}

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

button:disabled {
    background-color: #cccccc;
    cursor: not-allowed;
}

4. Run the Frontend Server
Start the React development server.

npm run dev

Your React application should now be running, typically at http://localhost:5173. Open it in your browser, and you can start chatting!

Conclusion

Congratulations! You have successfully built a full-stack AI chatbot, bridging the gap between a powerful Python backend and a dynamic React frontend. You now have a scalable and user-friendly foundation for any AI application you can dream of.

This project is just the beginning. Here are a few ideas to take it to the next level:

Stream Responses: Modify the backend and frontend to stream the AI's response token-by-token, creating a real-time typing effect like in ChatGPT.
Integrate More Models: Experiment with open-source models from providers like Hugging Face or other APIs like Google's Gemini.
Enhance the UI: Improve the user interface with features like user avatars, message timestamps, and a "copy message" button.
Deploy Your Chatbot: Deploy your backend and frontend to services like Vercel, Netlify, or a cloud provider to share your creation with the world. Use Arrow Up and Arrow Down to select a turn, Enter to jump to it, and Escape to return to the chat.