AI Platform Chat

A web-based chat interface that allows users to interact with multiple AI platforms (Gemini, Claude, and ChatGPT) through a unified dashboard built with Dash and Dash Mantine Components.

Features

• 🤖 Multi-Platform Support: Seamlessly switch between Gemini, Claude, and ChatGPT
• 🎨 Modern UI: Clean and responsive interface using Dash Mantine Components
• 💬 Real-time Responses: Send prompts and receive AI-generated responses instantly
• 🔄 Platform Switching: Easy toggle between different AI models
• 📝 Auto-resizing Input: Text area that adapts to your prompt length

Prerequisites

• Python 3.7+
• API keys for the AI platforms you want to use:
  • Gemini API key (Google AI)
  • Claude API key (Anthropic)
  • OpenAI API key (ChatGPT)

Installation

1. Clone the repository (or download the app.py file):

   git clone https://github.com/plotly/dash-ai-chat-tutorial.git

2. Install required dependencies:

   pip install dash dash-mantine-components dash-iconify google-genai anthropic openai

   Or pip install -r requirements.txt

Configuration

Set up your API keys as environment variables:

On Linux/Mac:

export GEMINI_API_KEY="your-gemini-api-key"
export CLAUDE_API_KEY="your-claude-api-key"
export OPENAI_API_KEY="your-openai-api-key"

On Windows (Command Prompt):

set GEMINI_API_KEY=your-gemini-api-key
set CLAUDE_API_KEY=your-claude-api-key
set OPENAI_API_KEY=your-openai-api-key

On Windows (PowerShell):

$env:GEMINI_API_KEY="your-gemini-api-key"
$env:CLAUDE_API_KEY="your-claude-api-key"
$env:OPENAI_API_KEY="your-openai-api-key"

Using a .env file (recommended):

Create a .env file in your project directory:

GEMINI_API_KEY=your-gemini-api-key
CLAUDE_API_KEY=your-claude-api-key
OPENAI_API_KEY=your-openai-api-key

Then modify your app.py to load from .env:

from dotenv import load_dotenv
load_dotenv()

(Remember to install python-dotenv: pip install python-dotenv)

Usage

1. Start the application:

   python app.py

2. Access the interface: Open your web browser and navigate to http://localhost:8210

3. Using the chat interface:

   • Select your preferred AI platform using the segmented control
   • Type your prompt in the text area
   • Click the "Send" button or press Enter
   • View the AI response in the response area

API Models

The application uses the following models:

• Gemini: gemini-2.5-flash-preview-05-20
• Claude: claude-3-haiku-20240307
• ChatGPT: gpt-4.1-nano-2025-04-14

Project Structure

ai-platform-chat/
│
├── app.py              # Main application file
├── .env                # Environment variables (create this)
├── requirements.txt    # Python dependencies
└── README.md          # This file

Troubleshooting

Common Issues

1. "API_KEY not found" error:

   • Ensure you've set the environment variables correctly
   • Restart your terminal/command prompt after setting variables
   • Check that the API key names match exactly (case-sensitive)

2. API errors:

   • Verify your API keys are valid and active
   • Check if you have sufficient credits/quota for each service
   • Ensure you have the correct permissions for the API models

3. Import errors:

   • Make sure all dependencies are installed
   • Use a virtual environment to avoid conflicts:

     python -m venv venv
     source venv/bin/activate  # On Windows: venv\Scripts\activate
     pip install -r requirements.txt

4. Port already in use:

   • The app runs on port 8210 by default
   • Change the port in app.run() if needed

License

This project is open source and available under the MIT License.

Acknowledgments

• Built with Dash by Plotly
• UI components from Dash Mantine Components
• Icons from Dash Iconify
• AI APIs from Google (Gemini), Anthropic (Claude), and OpenAI (ChatGPT)