Build a Simple AI Chat App with Chainlit and Gemini API

TL;DR

What you’ll build

Clean and modern chat interface.
Connects to Google's Gemini AI model
Handles real-time conversations
Includes proper error handling and user feedback

Prerequisites

Before we start, make sure you have:

Python 3.9 or higher installed
Basic knowledge of Python
A Google AI Studio account (free)
A text editor or IDE (I recommend Windsurf. I just like it, not endorsed ✌️😁)

1. Set Up Your Environment

First, on your Terminal, create a new project directory and set up a virtual environment:

mkdir ai-chat-app
cd ai-chat-app
python -m venv venv

Then activate the virtual environment.

On Windows

venv\Scripts\activate

On Mac/Linux

source venv/bin/activate

Note: You can do all the things above via GUI using your IDE.

2. Setup Required Packages

Install the necessary dependencies:

pip install chainlit google-genai python-dotenv

Let's break down what each package does:

chainlit: Provides the chat interface and handles the web application
google-genai: Official Google SDK for accessing Gemini API
python-dotenv: Manages environment variables securely

3. Get Gemini API Key

Visit Google AI Studio
Sign in with your Google account
Click "Get API Key" and create a new API key
Copy the API key (keep it secure!)

Create a .env file in your project directory:

GEMINI_API_KEY=your_api_key_here

Important: Never commit your API key to version control. Add .env to your .gitignore file.

4. Create the Chat App

Create a file called app.py and input this code:

import os
import google.generativeai as genai
import chainlit as cl
from dotenv import load_dotenv

# Load the env
load_dotenv()

# Configure Gemini API
genai.configure(api_key=os.getenv("GEMINI_API_KEY"))
model = genai.GenerativeModel("gemini-2.5-flash-preview-05-20")


@cl.on_message
async def main(message: cl.Message):
    """Handle incoming messages and generate responses using Gemini"""
    # Show a loading indicator
    msg = cl.Message(content="Thinking...")
    await msg.send()

    try:
        response = await cl.make_async(model.generate_content)(
            message.content, stream=True
        )

        # Clear the "Thinking..." message
        msg.content = ""
        await msg.update()

        # Stream the response
        for chunk in response:
            # Safely get text from the chunk
            chunk_text = getattr(chunk, 'text', None)
            if chunk_text:
                await msg.stream_token(chunk_text)

        # Update the message with the full response
        await msg.update()

    except Exception as e:
        await cl.Message(content=f"An error occurred: {str(e)}").send()

5. Run the App

Start your application:

chainlit run app.py

Your browser should automatically open to http://localhost:8000 where you'll see your chat interface!

Voila!

Chainlit-based chat app

Yup, that’s all.

This article is part 1 of the Smart Knowledge Base series where I try to build an LLM powered chat app that can retrieve information from an embedded knowledge base (pdfs, docs, etc.)