Gradio UI updated

.gradio/certificate.pem

@@ -0,0 +1,31 @@
+-----BEGIN CERTIFICATE-----
+MIIFazCCA1OgAwIBAgIRAIIQz7DSQONZRGPgu2OCiwAwDQYJKoZIhvcNAQELBQAw
+TzELMAkGA1UEBhMCVVMxKTAnBgNVBAoTIEludGVybmV0IFNlY3VyaXR5IFJlc2Vh
+cmNoIEdyb3VwMRUwEwYDVQQDEwxJU1JHIFJvb3QgWDEwHhcNMTUwNjA0MTEwNDM4
+WhcNMzUwNjA0MTEwNDM4WjBPMQswCQYDVQQGEwJVUzEpMCcGA1UEChMgSW50ZXJu
+ZXQgU2VjdXJpdHkgUmVzZWFyY2ggR3JvdXAxFTATBgNVBAMTDElTUkcgUm9vdCBY
+MTCCAiIwDQYJKoZIhvcNAQEBBQADggIPADCCAgoCggIBAK3oJHP0FDfzm54rVygc
+h77ct984kIxuPOZXoHj3dcKi/vVqbvYATyjb3miGbESTtrFj/RQSa78f0uoxmyF+
+0TM8ukj13Xnfs7j/EvEhmkvBioZxaUpmZmyPfjxwv60pIgbz5MDmgK7iS4+3mX6U
+A5/TR5d8mUgjU+g4rk8Kb4Mu0UlXjIB0ttov0DiNewNwIRt18jA8+o+u3dpjq+sW
+T8KOEUt+zwvo/7V3LvSye0rgTBIlDHCNAymg4VMk7BPZ7hm/ELNKjD+Jo2FR3qyH
+B5T0Y3HsLuJvW5iB4YlcNHlsdu87kGJ55tukmi8mxdAQ4Q7e2RCOFvu396j3x+UC
+B5iPNgiV5+I3lg02dZ77DnKxHZu8A/lJBdiB3QW0KtZB6awBdpUKD9jf1b0SHzUv
+KBds0pjBqAlkd25HN7rOrFleaJ1/ctaJxQZBKT5ZPt0m9STJEadao0xAH0ahmbWn
+OlFuhjuefXKnEgV4We0+UXgVCwOPjdAvBbI+e0ocS3MFEvzG6uBQE3xDk3SzynTn
+jh8BCNAw1FtxNrQHusEwMFxIt4I7mKZ9YIqioymCzLq9gwQbooMDQaHWBfEbwrbw
+qHyGO0aoSCqI3Haadr8faqU9GY/rOPNk3sgrDQoo//fb4hVC1CLQJ13hef4Y53CI
+rU7m2Ys6xt0nUW7/vGT1M0NPAgMBAAGjQjBAMA4GA1UdDwEB/wQEAwIBBjAPBgNV
+HRMBAf8EBTADAQH/MB0GA1UdDgQWBBR5tFnme7bl5AFzgAiIyBpY9umbbjANBgkq
+hkiG9w0BAQsFAAOCAgEAVR9YqbyyqFDQDLHYGmkgJykIrGF1XIpu+ILlaS/V9lZL
+ubhzEFnTIZd+50xx+7LSYK05qAvqFyFWhfFQDlnrzuBZ6brJFe+GnY+EgPbk6ZGQ
+3BebYhtF8GaV0nxvwuo77x/Py9auJ/GpsMiu/X1+mvoiBOv/2X/qkSsisRcOj/KK
+NFtY2PwByVS5uCbMiogziUwthDyC3+6WVwW6LLv3xLfHTjuCvjHIInNzktHCgKQ5
+ORAzI4JMPJ+GslWYHb4phowim57iaztXOoJwTdwJx4nLCgdNbOhdjsnvzqvHu7Ur
+TkXWStAmzOVyyghqpZXjFaH3pO3JLF+l+/+sKAIuvtd7u+Nxe5AW0wdeRlN8NwdC
+jNPElpzVmbUq4JUagEiuTDkHzsxHpFKVK7q4+63SM1N95R1NbdWhscdCb+ZAJzVc
+oyi3B43njTOQ5yOf+1CceWxG1bQVs5ZufpsMljq4Ui0/1lvh+wjChP4kqKOJ2qxq
+4RgqsahDYVvTH9w7jXbyLeiNdd8XM2w9U/t7y0Ff/9yi0GE44Za4rF2LN9d11TPA
+mRGunUHBcnWEvgJBQl9nJEiU0Zsnvgc/ubhPgXRR4Xq37Z0j4r7g1SgEEzwxA57d
+emyPxgcYxn/eR44/KJ4EBs+lVDR3veyJm+kXQ99b21/+jh5Xos1AnX5iItreGCc=
+-----END CERTIFICATE-----

.idea/.gitignore

@@ -0,0 +1,8 @@
+# Default ignored files
+/shelf/
+/workspace.xml
+# Editor-based HTTP Client requests
+/httpRequests/
+# Datasource local storage ignored files
+/dataSources/
+/dataSources.local.xml

DEPLOYMENT.md

@@ -0,0 +1,366 @@
+# Deployment Guide
+
+Complete guide for deploying your React Agent Builder to various platforms.
+
+---
+
+## 🚀 Option 1: Hugging Face Spaces (Easiest)
+
+**Best for:** Quick deployment, free hosting, automatic HTTPS
+
+### Steps:
+
+1. **Create requirements.txt for HF compatibility:**
+   ```bash
+   uv pip compile pyproject.toml -o requirements.txt
+   ```
+
+2. **Create a `app.py` file:**
+   ```bash
+   cp gradio_app.py app.py
+   ```
+
+3. **Create account on [Hugging Face](https://huggingface.co/join)**
+
+4. **Create a new Space:**
+   - Go to https://huggingface.co/spaces
+   - Click "Create new Space"
+   - Choose "Gradio" as SDK
+   - Name your space
+
+5. **Upload files:**
+   - `app.py`
+   - `requirements.txt`
+   - `firebase-credentials-template.json` (rename without "template")
+
+6. **Add Firebase credentials as Secret:**
+   - Go to Settings → Repository Secrets
+   - Add secret named `FIREBASE_CREDENTIALS`
+   - Paste your Firebase JSON
+
+7. **Deploy!** Space will auto-build and deploy
+
+**URL:** `https://huggingface.co/spaces/YOUR_USERNAME/SPACE_NAME`
+
+---
+
+## 🚂 Option 2: Railway (Recommended for Production)
+
+**Best for:** Production apps, custom domains, automatic deployments
+
+### Steps:
+
+1. **Install Railway CLI:**
+   ```bash
+   npm i -g @railway/cli
+   # or
+   brew install railway
+   ```
+
+2. **Login:**
+   ```bash
+   railway login
+   ```
+
+3. **Initialize project:**
+   ```bash
+   railway init
+   ```
+
+4. **Add Firebase credentials:**
+   ```bash
+   railway variables set FIREBASE_CREDENTIALS_JSON="$(cat firebase-credentials.json)"
+   ```
+
+5. **Deploy:**
+   ```bash
+   railway up
+   ```
+
+6. **Get URL:**
+   ```bash
+   railway domain
+   ```
+
+**Automatic deployments:** Railway auto-deploys on git push
+
+**Config file** (`railway.json`):
+```json
+{
+  "build": {
+    "builder": "NIXPACKS"
+  },
+  "deploy": {
+    "startCommand": "uv run python gradio_app.py",
+    "restartPolicyType": "ON_FAILURE"
+  }
+}
+```
+
+---
+
+## 🎨 Option 3: Render
+
+**Best for:** Free tier, simple deployment
+
+### Steps:
+
+1. **Push code to GitHub**
+
+2. **Go to [Render Dashboard](https://dashboard.render.com/)**
+
+3. **Create New Web Service**
+
+4. **Connect your GitHub repo**
+
+5. **Configure:**
+   - **Name:** your-agent-builder
+   - **Environment:** Python 3
+   - **Build Command:** `pip install uv && uv sync`
+   - **Start Command:** `uv run python gradio_app.py`
+
+6. **Add Environment Variables:**
+   - `FIREBASE_CREDENTIALS_JSON`: Paste your Firebase JSON
+
+7. **Deploy!**
+
+**Free tier limits:** 750 hours/month, sleeps after 15 min inactivity
+
+---
+
+## 🐳 Option 4: Docker + Any Platform
+
+**Best for:** Maximum control, can deploy anywhere
+
+### Create `Dockerfile`:
+
+```dockerfile
+FROM python:3.12-slim
+
+# Install uv
+RUN pip install uv
+
+# Set working directory
+WORKDIR /app
+
+# Copy project files
+COPY pyproject.toml uv.lock ./
+COPY gradio_app.py ./
+COPY firebase-credentials.json ./
+
+# Install dependencies
+RUN uv sync
+
+# Expose Gradio port
+EXPOSE 7860
+
+# Run the app
+CMD ["uv", "run", "python", "gradio_app.py"]
+```
+
+### Create `.dockerignore`:
+
+```
+.venv/
+__pycache__/
+*.pyc
+.git/
+.gitignore
+README.md
+```
+
+### Build and Run:
+
+```bash
+# Build image
+docker build -t react-agent-builder .
+
+# Run container
+docker run -p 7860:7860 react-agent-builder
+```
+
+### Deploy to:
+- **Google Cloud Run**
+- **AWS ECS/Fargate**
+- **Azure Container Instances**
+- **DigitalOcean App Platform**
+
+---
+
+## ☁️ Option 5: Google Cloud Run
+
+**Best for:** Serverless, scales to zero, pay per use
+
+### Steps:
+
+1. **Install Google Cloud CLI:**
+   ```bash
+   curl https://sdk.cloud.google.com | bash
+   ```
+
+2. **Login:**
+   ```bash
+   gcloud auth login
+   gcloud config set project YOUR_PROJECT_ID
+   ```
+
+3. **Build with Cloud Build:**
+   ```bash
+   gcloud builds submit --tag gcr.io/YOUR_PROJECT_ID/agent-builder
+   ```
+
+4. **Deploy:**
+   ```bash
+   gcloud run deploy agent-builder \
+     --image gcr.io/YOUR_PROJECT_ID/agent-builder \
+     --platform managed \
+     --region us-central1 \
+     --allow-unauthenticated
+   ```
+
+5. **Set Firebase credentials:**
+   ```bash
+   gcloud run services update agent-builder \
+     --set-env-vars FIREBASE_CREDENTIALS_JSON="$(cat firebase-credentials.json)"
+   ```
+
+---
+
+## 🌐 Option 6: Vercel (with Serverless Functions)
+
+**Best for:** Static sites with API routes
+
+Requires converting to serverless functions. Not recommended for this app (use Railway/Render instead).
+
+---
+
+## 🔧 Environment Variables
+
+All platforms need these environment variables:
+
+### Required (for Firebase):
+```bash
+FIREBASE_CREDENTIALS_JSON='{
+  "type": "service_account",
+  "project_id": "...",
+  ...
+}'
+```
+
+### Optional:
+```bash
+# Change default port
+PORT=8080
+
+# Set custom domain
+GRADIO_SERVER_NAME=0.0.0.0
+GRADIO_SERVER_PORT=7860
+
+# Enable sharing
+GRADIO_SHARE=false
+```
+
+---
+
+## 📊 Performance Comparison
+
+| Platform | Setup Time | Cost | Scaling | Custom Domain |
+|----------|-----------|------|---------|---------------|
+| HF Spaces | 5 min | Free | Limited | Yes ($9/mo) |
+| Railway | 10 min | $5/mo | Auto | Free |
+| Render | 10 min | Free/$7 | Auto | Free |
+| Cloud Run | 15 min | Pay-per-use | Excellent | Free |
+| Docker | 20 min | Varies | Manual | Varies |
+
+---
+
+## 🔐 Security Checklist
+
+Before deploying to production:
+
+- [ ] Move Firebase credentials to environment variables
+- [ ] Enable HTTPS (automatic on most platforms)
+- [ ] Set up Firebase Security Rules
+- [ ] Enable CORS if needed
+- [ ] Add rate limiting
+- [ ] Set up monitoring/logging
+- [ ] Add error tracking (Sentry)
+- [ ] Configure backups
+- [ ] Set up CI/CD pipeline
+- [ ] Add health check endpoint
+
+---
+
+## 🐛 Troubleshooting
+
+### "Module not found" error
+```bash
+# Regenerate lock file
+uv lock --upgrade
+```
+
+### "Port already in use"
+```bash
+# Change port in gradio_app.py
+server_port=8080
+```
+
+### Firebase connection fails
+```bash
+# Check credentials format
+cat firebase-credentials.json | jq .
+
+# Verify environment variable
+echo $FIREBASE_CREDENTIALS_JSON
+```
+
+### App crashes on startup
+```bash
+# Check logs
+railway logs  # Railway
+gcloud run logs read  # Cloud Run
+docker logs CONTAINER_ID  # Docker
+```
+
+---
+
+## 🎯 Recommended Setup
+
+**For Development:**
+- Local with `uv run python gradio_app.py`
+- Use mock mode (no Firebase needed)
+
+**For Staging:**
+- Hugging Face Spaces (free, easy)
+- Connect to Firebase
+
+**For Production:**
+- Railway or Cloud Run
+- Custom domain
+- Firebase with security rules
+- Monitoring enabled
+
+---
+
+## 📚 Next Steps
+
+After deployment:
+
+1. **Test authentication** thoroughly
+2. **Create your first agent**
+3. **Set up monitoring** (use Railway/Cloud metrics)
+4. **Configure custom domain**
+5. **Add more models** to the dropdown
+6. **Implement agent analytics**
+7. **Add email notifications**
+
+---
+
+## 🆘 Need Help?
+
+- Railway: https://railway.app/help
+- Render: https://render.com/docs
+- Cloud Run: https://cloud.google.com/run/docs
+- HF Spaces: https://huggingface.co/docs/hub/spaces
+
+Good luck with your deployment! 🚀

PROJECT_SUMMARY.md

@@ -0,0 +1,210 @@
+# React Agent Builder - Project Summary
+
+## 📦 What You Have
+
+A production-ready Gradio web application with:
+- ✅ User authentication (login/registration)
+- ✅ Dashboard with agent management
+- ✅ React agent creation interface
+- ✅ Firebase integration (with mock mode fallback)
+- ✅ Modern dependency management with uv
+
+## 🚀 Getting Started (3 Steps)
+
+### 1. Install uv
+```bash
+curl -LsSf https://astral.sh/uv/install.sh | sh
+```
+
+### 2. Install Dependencies
+```bash
+uv sync
+```
+
+### 3. Run the App
+```bash
+uv run python gradio_app.py
+```
+
+**That's it!** Open http://localhost:7860 in your browser.
+
+## 📁 Files Included
+
+| File | Purpose |
+|------|---------|
+| `gradio_app.py` | Main application code |
+| `pyproject.toml` | Project configuration & dependencies |
+| `uv.lock` | Locked dependencies for reproducibility |
+| `README.md` | Comprehensive documentation |
+| `QUICKSTART.md` | Quick reference guide |
+| `firebase-credentials-template.json` | Template for Firebase setup |
+| `.gitignore` | Git ignore rules |
+
+## 🎯 Key Features
+
+### Authentication System
+- Secure password hashing
+- Session management
+- Input validation
+- Works with or without Firebase
+
+### Dashboard
+- Large, prominent "Create React Agent" button (with plus icon)
+- List of all created agents
+- Refresh functionality
+- Clean, modern UI
+
+### Agent Creation
+1. **Agent Name** - Text input field
+2. **Model Selection** - Dropdown with:
+   - GPT-4 Turbo
+   - GPT-4
+   - GPT-3.5 Turbo
+3. **System Context Prompt** - Large text area
+4. **Submit Button** - Creates and saves agent
+5. **URL Generation** - Unique URL for each agent
+
+### Data Storage
+- Firebase Firestore integration
+- Mock mode for development/testing
+- Automatic user and agent data management
+
+## 🔧 Configuration
+
+### Add More Models
+Edit `gradio_app.py`, find the model dropdown:
+```python
+model_dropdown = gr.Dropdown(
+    choices=[
+        "gpt-4-turbo",
+        "gpt-4",
+        "gpt-3.5-turbo",
+        "gpt-4o",  # Add here
+        "gpt-3.5-turbo-16k",  # Add here
+    ],
+    ...
+)
+```
+
+### Firebase Setup (Optional)
+1. Go to [Firebase Console](https://console.firebase.google.com/)
+2. Create a project
+3. Download service account credentials
+4. Save as `firebase-credentials.json`
+5. Enable Firestore and Authentication
+
+**Note:** App works perfectly without Firebase in mock mode!
+
+## 🎨 UI Design
+
+The app features:
+- Clean, modern interface
+- Responsive design
+- Custom CSS styling
+- Tab-based navigation
+- Professional color scheme (gradient buttons)
+- Large, accessible buttons
+- Clear form layouts
+
+## 📊 Database Structure
+
+### Users Collection
+```
+users/{uid}
+  - username: string
+  - email: string
+  - created_at: timestamp
+```
+
+### Agents Collection
+```
+agents/{agent_id}
+  - agent_id: string
+  - agent_name: string
+  - model_name: string
+  - system_prompt: string
+  - created_by: string (email)
+  - created_at: string
+  - agent_url: string
+```
+
+## 🛠️ Development Workflow
+
+### Add Dependencies
+```bash
+uv add package-name
+```
+
+### Update Dependencies
+```bash
+uv lock --upgrade
+```
+
+### Run with Auto-reload
+```bash
+uv run gradio gradio_app.py
+```
+
+## 🌐 Deployment Options
+
+### Hugging Face Spaces
+```bash
+uv pip compile pyproject.toml -o requirements.txt
+# Upload to HF Spaces
+```
+
+### Railway / Render
+- Push to Git
+- Set start command: `uv run python gradio_app.py`
+- Deploy!
+
+### Docker
+```dockerfile
+FROM python:3.12
+RUN pip install uv
+COPY . /app
+WORKDIR /app
+RUN uv sync
+CMD ["uv", "run", "python", "gradio_app.py"]
+```
+
+## 🔐 Security Features
+
+- Password hashing (SHA-256)
+- Session management
+- Input validation
+- Firebase security rules (when enabled)
+- Protected routes
+- CSRF protection (via Gradio)
+
+## ⚡ Why uv?
+
+- **10-100x faster** than pip
+- **Single lock file** for reproducibility
+- **Disk efficient** with global cache
+- **Python version management** included
+- **Modern tooling** for Python projects
+
+## 📚 Learn More
+
+- [uv Documentation](https://docs.astral.sh/uv/)
+- [Gradio Documentation](https://www.gradio.app/docs/)
+- [Firebase Documentation](https://firebase.google.com/docs)
+
+## 🆘 Troubleshooting
+
+**App won't start?**
+```bash
+uv sync --reinstall
+```
+
+**Firebase errors?**
+- Check `firebase-credentials.json` path
+- Or just use mock mode (no Firebase needed!)
+
+**Port already in use?**
+Edit `gradio_app.py` and change `server_port=7860` to another port.
+
+## 🎉 You're All Set!
+
+Your Gradio app with authentication and agent creation is ready to go. Happy building!

QUICKSTART.md

@@ -0,0 +1,57 @@
+# Quick Start Guide
+
+## Installation & Setup (30 seconds)
+
+1. **Install uv** (if not already installed):
+   ```bash
+   curl -LsSf https://astral.sh/uv/install.sh | sh
+   ```
+
+2. **Install dependencies**:
+   ```bash
+   uv sync
+   ```
+
+3. **Run the app**:
+   ```bash
+   uv run python gradio_app.py
+   ```
+
+That's it! The app will open at http://localhost:7860
+
+## Common Commands
+
+```bash
+# Add a new package
+uv add package-name
+
+# Update dependencies
+uv lock --upgrade
+
+# Run Python scripts
+uv run python script.py
+
+# Activate virtual environment
+source .venv/bin/activate  # Unix
+.venv\Scripts\activate     # Windows
+```
+
+## Firebase Setup (Optional)
+
+For production use with Firebase:
+
+1. Get Firebase credentials from [Firebase Console](https://console.firebase.google.com/)
+2. Save as `firebase-credentials.json`
+3. Enable Firestore and Authentication
+
+For development, the app works in mock mode without Firebase.
+
+## Why uv?
+
+- ⚡ **10-100x faster** than pip
+- 🔒 **Reproducible builds** with lock file
+- 🎯 **Single tool** for all Python project needs
+- 💾 **Disk space efficient** with global cache
+- 🐍 **Python version management** built-in
+
+Learn more: https://docs.astral.sh/uv/

README.md

@@ -0,0 +1,347 @@
+# React Agent Builder - Gradio App
+
+A complete Gradio web application with authentication and React agent creation functionality.
+
+## Features
+
+✅ **User Authentication**
+- Registration page with validation
+- Login page with session management
+- Secure password hashing
+
+✅ **Dashboard**
+- Clean interface with large "Create React Agent" button
+- View all created agents
+- Refresh agent list
+
+✅ **Agent Creation**
+- Agent name input
+- Model selection (GPT-4o, GPT-4o-mini)
+- System context prompt editor
+- Firebase integration for data storage
+- Unique URL generation for each agent
+
+## Setup Instructions
+
+### Prerequisites
+
+This project uses [uv](https://github.com/astral-sh/uv) for dependency management. Install it first:
+
+```bash
+# On macOS and Linux
+curl -LsSf https://astral.sh/uv/install.sh | sh
+
+# On Windows
+powershell -c "irm https://astral.sh/uv/install.ps1 | iex"
+
+# Or with pip
+pip install uv
+```
+
+### 1. Install Dependencies
+
+Using uv, dependencies are automatically managed:
+
+```bash
+# Clone or navigate to the project directory
+cd gradio-react-agent
+
+# Install dependencies (uv will handle everything)
+uv sync
+```
+
+This will create a virtual environment and install all required packages from `pyproject.toml`.
+
+### 2. Configure Firebase
+
+#### Option A: Use Firebase (Production)
+
+1. Go to [Firebase Console](https://console.firebase.google.com/)
+2. Create a new project or select existing one
+3. Go to Project Settings → Service Accounts
+4. Click "Generate New Private Key"
+5. Save the JSON file as `firebase-credentials.json` in the project directory
+6. Enable Firestore Database and Authentication in Firebase Console
+
+#### Option B: Use Mock Mode (Development)
+
+The app works without Firebase in mock mode for testing. Just run it and it will use in-memory storage.
+
+### 3. Run the Application
+
+Using uv:
+
+```bash
+# Run with uv
+uv run python gradio_app.py
+
+# Or activate the virtual environment and run directly
+source .venv/bin/activate  # On Windows: .venv\Scripts\activate
+python gradio_app.py
+```
+
+The app will launch at `http://localhost:7860`
+
+## Usage Guide
+
+### Registration
+1. Navigate to the "Register" tab
+2. Fill in username, email, and password
+3. Click "Register"
+4. Switch to "Login" tab
+
+### Login
+1. Enter your email and password
+2. Click "Login"
+3. You'll be redirected to the Dashboard
+
+### Create React Agent
+1. Click the big "➕ Create React Agent" button
+2. Fill in:
+   - **Agent Name**: Give your agent a descriptive name
+   - **Model Name**: Choose from GPT-4 Turbo, GPT-4, or GPT-3.5 Turbo
+   - **System Context Prompt**: Define how your agent should behave
+3. Click "✅ Submit & Create Agent"
+4. Copy the generated Agent URL
+
+### View Your Agents
+- All created agents appear in the "Your Agents" section
+- Click "🔄 Refresh List" to update the list
+
+## Project Structure
+
+```
+react-agent-builder/
+├── gradio_app.py                      # Main application
+├── pyproject.toml                     # Project config & dependencies
+├── uv.lock                           # Lock file for reproducible builds
+├── firebase-credentials.json         # Firebase config (you create this)
+├── firebase-credentials-template.json # Template for Firebase config
+└── README.md                         # Documentation
+```
+
+## Dependency Management with uv
+
+### Add New Dependencies
+
+```bash
+# Add a new package
+uv add package-name
+
+# Add a development dependency
+uv add --dev package-name
+
+# Add a specific version
+uv add package-name==1.2.3
+```
+
+### Update Dependencies
+
+```bash
+# Update all dependencies
+uv lock --upgrade
+
+# Update a specific package
+uv lock --upgrade-package package-name
+```
+
+### Remove Dependencies
+
+```bash
+uv remove package-name
+```
+
+### View Installed Packages
+
+```bash
+uv pip list
+```
+
+#### Option A: Use Firebase (Production)
+
+1. Go to [Firebase Console](https://console.firebase.google.com/)
+2. Create a new project or select existing one
+3. Go to Project Settings → Service Accounts
+4. Click "Generate New Private Key"
+5. Save the JSON file as `firebase-credentials.json` in the project directory
+6. Enable Firestore Database and Authentication in Firebase Console
+
+#### Option B: Use Mock Mode (Development)
+
+The app works without Firebase in mock mode for testing. Just run it and it will use in-memory storage.
+
+### 3. Run the Application
+
+```bash
+python gradio_app.py
+```
+
+The app will launch at `http://localhost:7860`
+
+## Usage Guide
+
+### Registration
+1. Navigate to the "Register" tab
+2. Fill in username, email, and password
+3. Click "Register"
+4. Switch to "Login" tab
+
+### Login
+1. Enter your email and password
+2. Click "Login"
+3. You'll be redirected to the Dashboard
+
+### Create React Agent
+1. Click the big "➕ Create React Agent" button
+2. Fill in:
+   - **Agent Name**: Give your agent a descriptive name
+   - **Model Name**: Choose from GPT-4 Turbo, GPT-4, or GPT-3.5 Turbo
+   - **System Context Prompt**: Define how your agent should behave
+3. Click "✅ Submit & Create Agent"
+4. Copy the generated Agent URL
+
+### View Your Agents
+- All created agents appear in the "Your Agents" section
+- Click "🔄 Refresh List" to update the list
+
+## Firebase Database Structure
+
+### Collections
+
+**users**
+```json
+{
+  "uid": {
+    "username": "string",
+    "email": "string",
+    "created_at": "timestamp"
+  }
+}
+```
+
+**agents**
+```json
+{
+  "agent_id": {
+    "agent_id": "string",
+    "agent_name": "string",
+    "model_name": "string",
+    "system_prompt": "string",
+    "created_by": "string (user email)",
+    "created_at": "timestamp",
+    "agent_url": "string"
+  }
+}
+```
+
+## Configuration Options
+
+### Customize Models
+
+Edit the `model_dropdown` choices in the code:
+
+```python
+model_dropdown = gr.Dropdown(
+    choices=[
+        "gpt-4-turbo",
+        "gpt-4",
+        "gpt-3.5-turbo",
+        "gpt-4o",  # Add new models here
+    ],
+    ...
+)
+```
+
+### Customize Agent URL
+
+Modify the `agent_url` generation in the `create_agent` function:
+
+```python
+'agent_url': f"https://your-domain.com/agent/{agent_id}"
+```
+
+## Security Notes
+
+🔒 **Important Security Considerations:**
+
+1. **Password Storage**: Passwords are hashed using SHA-256 in mock mode. In production with Firebase, use Firebase Auth's built-in security.
+
+2. **Session Management**: Sessions are stored in-memory. For production, use a proper session store (Redis, database).
+
+3. **HTTPS**: Always use HTTPS in production to encrypt data in transit.
+
+4. **Firebase Rules**: Set up proper Firestore security rules:
+
+```javascript
+rules_version = '2';
+service cloud.firestore {
+  match /databases/{database}/documents {
+    match /users/{userId} {
+      allow read, write: if request.auth != null && request.auth.uid == userId;
+    }
+    match /agents/{agentId} {
+      allow read: if request.auth != null;
+      allow write: if request.auth != null;
+    }
+  }
+}
+```
+
+## Deployment
+
+### Deploy to Hugging Face Spaces
+
+1. Create a new Space on Hugging Face
+2. Add a `requirements.txt` file for Hugging Face compatibility:
+   ```bash
+   uv pip compile pyproject.toml -o requirements.txt
+   ```
+3. Upload all files including `requirements.txt`
+4. Add Firebase credentials as a Secret
+5. The app will automatically deploy
+
+### Deploy with uv on Cloud Platforms
+
+For platforms that support uv:
+
+1. Ensure `pyproject.toml` and `uv.lock` are in your repository
+2. Set the start command to: `uv run python gradio_app.py`
+3. The platform will automatically install dependencies using uv
+
+Compatible with:
+- Railway (supports uv natively)
+- Render
+- Google Cloud Run
+- AWS Lambda (with custom runtime)
+- Azure Functions
+
+## Troubleshooting
+
+### Firebase Connection Issues
+- Verify credentials file path
+- Check Firebase project configuration
+- Ensure Firestore and Auth are enabled
+
+### Mock Mode
+- If Firebase credentials are not found, the app runs in mock mode
+- Data is stored in memory and will be lost on restart
+- Perfect for testing and development
+
+## Features to Add
+
+Potential enhancements:
+- [ ] Email verification
+- [ ] Password reset functionality
+- [ ] Agent editing/deletion
+- [ ] Agent analytics dashboard
+- [ ] Team collaboration features
+- [ ] API key management
+- [ ] Agent deployment options
+
+## License
+
+MIT License
+
+## Support
+
+For issues or questions, please create an issue in the repository.

database.py

@@ -0,0 +1,376 @@
+import email
+import os
+import hashlib
+from datetime import datetime
+import firebase_admin
+from firebase_admin import credentials, firestore, auth as firebase_auth
+
+# Initialize Firebase
+FIREBASE_ENABLED = False
+db = None
+
+try:
+    cred = credentials.Certificate('firebase-credentials.json')
+    firebase_admin.initialize_app(cred)
+    db = firestore.client()
+    FIREBASE_ENABLED = True
+    print("Firebase initialized successfully!")
+except Exception as e:
+    print(f"Firebase not configured. Using mock mode. Error: {e}")
+    db = None
+
+# Mock databases for development/testing
+mock_users = {}
+mock_agents = {}
+mock_workspaces = {}
+
+# Default workspace ID (same for all users)
+DEFAULT_WORKSPACE_ID = "q7KfX2rP9Wb83hNa64RmTpUiAZ0vL3dS"
+
+
+def hash_password(password):
+    """Hash password for storage"""
+    return hashlib.sha256(password.encode()).hexdigest()
+
+
+def generate_workspace_data(user_id, workspace_id):
+    """
+    Generate workspace data with shareScript
+    """
+    share_script = f'''<script> (function (w, d) {{ w.CLIENT_IDENTIFIER = "{user_id}"; w.WORKSPACE_IDENTIFIER = '{workspace_id}'; w.AVATAR_IMAGE_URL = 'https://firebasestorage.googleapis.com/v0/b/curious-learner-3845a.appspot.com/o/avatars%2Fchatbot.png?alt=media&token=7d937685-197b-4947-b9f9-3c05f0271d20'; w.CHATBOT_IDENTIFIER = ''; var h = d.head || d.getElementsByTagName("head")[0]; var s = d.createElement('script'); s.setAttribute('type', 'text/javascript'); s.async = true; s.setAttribute('src', 'https://curious-learner-chatbot.web.app/client.js'); h.appendChild(s); }})(window, document); </script>'''
+
+    return {
+        'chatbotType': 'widget',
+        'id': workspace_id,
+        'shareScript': share_script,
+        'workspaceName': 'Default Workspace'
+    }
+
+
+def register_user(username, email, password):
+    """
+    Register a new user in Firebase
+    Returns: (success: bool, message: str, user_id: str or None)
+    """
+    try:
+        if FIREBASE_ENABLED:
+            # Create user in Firebase Auth
+            user = firebase_auth.create_user(
+                email=email,
+                password=password,
+                display_name=username
+            )
+
+            # Store user data in g_users collection
+            user_data = {
+                'name': username,
+                'email': email,
+                'created_at': firestore.SERVER_TIMESTAMP
+            }
+            db.collection('g_users').document(user.uid).set(user_data)
+
+            # Create default workspace as subcollection inside user's document
+            # Path: g_users/{user_id}/workspaces/{DEFAULT_WORKSPACE_ID}
+            workspace_data = generate_workspace_data(user.uid, DEFAULT_WORKSPACE_ID)
+            workspace_data['timestamp'] = firestore.SERVER_TIMESTAMP
+            db.collection('g_users').document(user.uid).collection('workspaces').document(DEFAULT_WORKSPACE_ID).set(
+                workspace_data)
+
+            return True, "Registration successful!", user.uid
+        else:
+            # Mock registration
+            if email in mock_users:
+                return False, "User already exists!", None
+
+            user_id = hashlib.sha256(f"{email}{datetime.now()}".encode()).hexdigest()[:28]
+
+            workspace_data = generate_workspace_data(user_id, DEFAULT_WORKSPACE_ID)
+            workspace_data['timestamp'] = datetime.now()
+
+            mock_users[email] = {
+                'user_id': user_id,
+                'name': username,
+                'email': email,
+                'password': hash_password(password),
+                'created_at': datetime.now(),
+                'workspaces': {
+                    DEFAULT_WORKSPACE_ID: workspace_data
+                }
+            }
+
+            return True, "Registration successful!", user_id
+
+    except Exception as e:
+        return False, f"Registration failed: {str(e)}", None
+
+
+def login_user(email, password):
+    """
+    Login user
+    Returns: (success: bool, message: str, user_id: str or None)
+    """
+    try:
+        if FIREBASE_ENABLED:
+            # In production, you'd verify with Firebase Auth
+            # For Gradio, we'll use a simplified approach
+            users = db.collection('g_users').where('email', '==', email).limit(1).get()
+            if users:
+                user_doc = list(users)[0]
+                user_id = user_doc.id
+                return True, "Login successful!", user_id
+            else:
+                return False, "Invalid credentials!", None
+        else:
+            # Mock login
+            if email in mock_users:
+                user_data = mock_users[email]
+                if user_data['password'] == hash_password(password):
+                    return True, "Login successful!", user_data['user_id']
+            return False, "Invalid credentials!", None
+
+    except Exception as e:
+        return False, f"Login failed: {str(e)}", None
+
+
+def generate_chatbot_share_script(user_id, workspace_id, chatbot_id):
+    """
+    Generate shareScript for chatbot
+    """
+    return f'''<script> (function (w, d) {{ w.CLIENT_IDENTIFIER = "{user_id}"; w.WORKSPACE_IDENTIFIER = '{workspace_id}'; w.AVATAR_IMAGE_URL = 'https://firebasestorage.googleapis.com/v0/b/curious-learner-3845a.appspot.com/o/avatars%2Ffemale_profile.png?alt=media&token=58bf4a74-24c8-41b1-b8bd-e381b798bb8d'; w.CHATBOT_IDENTIFIER = '{chatbot_id}'; var h = d.head || d.getElementsByTagName("head")[0]; var s = d.createElement('script'); s.setAttribute('type', 'text/javascript'); s.async = true; s.setAttribute('src', 'https://curious-learner-chatbot.web.app/client.js'); h.appendChild(s); }})(window, document); </script>'''
+
+
+def generate_chatbot_data(user_id, workspace_id, chatbot_id, chatbot_name, model_name, mcp_github_enabled, github_token,
+                          system_prompt):
+    """
+    Generate chatbot document data with agent configuration
+    """
+    # Build MCP config for chatMessageModels
+    mcp_config = {}
+    if mcp_github_enabled and github_token:
+        mcp_config["github"] = {
+            "url": "https://api.githubcopilot.com/mcp/",
+            "transport": "streamable_http",
+            "headers": {
+                "Authorization": f"Bearer {github_token}"
+            }
+        }
+
+    # Agent chat message model
+    agent_message_model = {
+        'chatMessageType': 'agent',
+        'chatMessage': 'Hi I am a GitHub MCP server bot, how can I help you today?',
+        'llm': {
+            'provider': 'openai',
+            'model': model_name
+        },
+        'mcp': mcp_config,
+        'systemPrompt': system_prompt,
+        'label': '',
+        'iconPath': '',
+        'errorText': '',
+        'validationRegex': '',
+        'switchButtonEntities': [
+            {
+                'title': 'Back Button',
+                'value': True,
+                'isDisabled': False
+            },
+            {
+                'title': 'Skip Button',
+                'value': True,
+                'isDisabled': False
+            }
+        ],
+        'optionEntities': []
+    }
+
+    return {
+        'chatMessageModels': [agent_message_model],
+        'chatbotName': chatbot_name,
+        'chatbotType': 'widget',
+        'designModel': {
+            'avatarModel': {
+                'avatarType': 'asset',
+                'value': 'asset/image/female_profile.png'
+            },
+            'branding': True,
+            'position': 'bottomRight',
+            'primaryColor': 4287203839,
+            'themeColor': 4294967295,
+            'welcomeMessage': True
+        },
+        'id': chatbot_id,
+        'shareScript': generate_chatbot_share_script(user_id, workspace_id, chatbot_id)
+    }
+
+
+def create_agent(user_id, agent_name, model_name, mcp_github_enabled, github_token, system_prompt):
+    """
+    Create a new React agent
+    Returns: (success: bool, message: str, agent_url: str or None)
+    """
+    if not user_id:
+        return False, "Please login first!", None
+
+    if not agent_name or not model_name or not system_prompt:
+        return False, "Agent name, model, and system prompt are required!", None
+
+    # Validate GitHub token if GitHub MCP is enabled
+    if mcp_github_enabled and not github_token:
+        return False, "GitHub token is required when GitHub MCP is enabled!", None
+
+    try:
+        agent_id = hashlib.sha256(f"{agent_name}{user_id}{datetime.now()}".encode()).hexdigest()[:12]
+
+        # Generate unique chatbot ID (UUID format)
+        import uuid
+        chatbot_id = str(uuid.uuid1())
+
+        # Build MCP config
+        mcp_config = {}
+        if mcp_github_enabled:
+            mcp_config["github"] = {
+                "url": "https://api.githubcopilot.com/mcp/",
+                "transport": "streamable_http",
+                "headers": {
+                    "Authorization": f"Bearer {github_token}"}
+            }
+
+        agent_data = {
+            'agent_id': agent_id,
+            'agent_name': agent_name,
+            'model_name': model_name,
+            'mcp_config': mcp_config,
+            'github_token': github_token if mcp_github_enabled else None,
+            'system_prompt': system_prompt,
+            'created_by': user_id,
+            'created_at': firestore.SERVER_TIMESTAMP if FIREBASE_ENABLED else datetime.now().isoformat(),
+            'agent_url': f"https://curious-learner-chatbot.web.app/#/chats?clientId={user_id}&workspaceId={DEFAULT_WORKSPACE_ID}&chatbotId={chatbot_id}",
+            'chatbot_id': chatbot_id
+        }
+
+        # Generate chatbot document data with agent configuration
+        chatbot_data = generate_chatbot_data(
+            user_id,
+            DEFAULT_WORKSPACE_ID,
+            chatbot_id,
+            agent_name,
+            model_name,
+            mcp_github_enabled,
+            github_token,
+            system_prompt
+        )
+
+        if FIREBASE_ENABLED:
+            # Save agent to agents collection
+            db.collection('agents').document(agent_id).set(agent_data)
+
+            # Create chatbot document inside workspace
+            # Path: g_users/{user_id}/workspaces/{DEFAULT_WORKSPACE_ID}/chatbots/{chatbot_id}
+            chatbot_data['timestamp'] = firestore.SERVER_TIMESTAMP
+            db.collection('g_users').document(user_id).collection('workspaces').document(
+                DEFAULT_WORKSPACE_ID).collection('chatbots').document(chatbot_id).set(chatbot_data)
+        else:
+            mock_agents[agent_id] = agent_data
+
+            # Store chatbot in mock workspace
+            for user_email, user_data in mock_users.items():
+                if user_data['user_id'] == user_id:
+                    if 'chatbots' not in user_data['workspaces'][DEFAULT_WORKSPACE_ID]:
+                        user_data['workspaces'][DEFAULT_WORKSPACE_ID]['chatbots'] = {}
+                    chatbot_data['timestamp'] = datetime.now()
+                    user_data['workspaces'][DEFAULT_WORKSPACE_ID]['chatbots'][chatbot_id] = chatbot_data
+                    break
+
+        success_msg = f"✅ Agent '{agent_name}' created successfully!"
+        return True, success_msg, chatbot_id
+
+    except Exception as e:
+        return False, f"Failed to create agent: {str(e)}", None
+
+
+def get_user_agents(user_id):
+    """
+    Get all agents/chatbots created by a user
+    Returns: list of agent info strings
+    """
+    if not user_id:
+        return []
+
+    try:
+        if FIREBASE_ENABLED:
+            # Fetch chatbots from the workspace subcollection
+            # Path: g_users/{user_id}/workspaces/{DEFAULT_WORKSPACE_ID}/chatbots
+            chatbots = db.collection('g_users').document(user_id).collection('workspaces').document(
+                DEFAULT_WORKSPACE_ID).collection('chatbots').get()
+            agent_list = []
+            for chatbot in chatbots:
+                data = chatbot.to_dict()
+                chatbot_id = data.get('id', chatbot.id)
+                chatbot_name = data.get('chatbotName', 'Unnamed Agent')
+                agent_url = f"https://curious-learner-chatbot.web.app/#/chats?clientId={user_id}&workspaceId={DEFAULT_WORKSPACE_ID}&chatbotId={chatbot_id}"
+                agent_list.append(f"• {chatbot_name}\n  {agent_url}")
+            return agent_list
+        else:
+            agent_list = []
+            for user_email, user_data in mock_users.items():
+                if user_data['user_id'] == user_id:
+                    workspaces = user_data.get('workspaces', {})
+                    default_workspace = workspaces.get(DEFAULT_WORKSPACE_ID, {})
+                    chatbots = default_workspace.get('chatbots', {})
+                    for chatbot_id, data in chatbots.items():
+                        chatbot_name = data.get('chatbotName', 'Unnamed Agent')
+                        agent_url = f"https://curious-learner-chatbot.web.app/#/chats?clientId={user_id}&workspaceId={DEFAULT_WORKSPACE_ID}&chatbotId={chatbot_id}"
+                        agent_list.append(f"• {chatbot_name}\n  {agent_url}")
+                    break
+            return agent_list
+
+    except Exception as e:
+        print(f"Error fetching agents: {e}")
+        return []
+
+
+def get_user_by_id(user_id):
+    """
+    Get user data by user ID
+    Returns: user data dict or None
+    """
+    try:
+        if FIREBASE_ENABLED:
+            user_doc = db.collection('g_users').document(user_id).get()
+            if user_doc.exists:
+                return user_doc.to_dict()
+            return None
+        else:
+            for email, data in mock_users.items():
+                if data['user_id'] == user_id:
+                    return data
+            return None
+
+    except Exception as e:
+        print(f"Error fetching user: {e}")
+        return None
+
+
+def get_user_workspace(user_id):
+    """
+    Get user's default workspace
+    Returns: workspace data dict or None
+    """
+    try:
+        if FIREBASE_ENABLED:
+            # Path: g_users/{user_id}/workspaces/{DEFAULT_WORKSPACE_ID}
+            workspace_doc = db.collection('g_users').document(user_id).collection('workspaces').document(
+                DEFAULT_WORKSPACE_ID).get()
+            if workspace_doc.exists:
+                return workspace_doc.to_dict()
+            return None
+        else:
+            for user_email, user_data in mock_users.items():
+                if user_data['user_id'] == user_id and 'workspaces' in user_data:
+                    return user_data['workspaces'].get(DEFAULT_WORKSPACE_ID)
+            return None
+
+    except Exception as e:
+        print(f"Error fetching workspace: {e}")
+        return None

firebase-credentials.json

@@ -0,0 +1,13 @@
+{
+  "type": "service_account",
+  "project_id": "curious-learner-3845a",
+  "private_key_id": "eb95158f55a274b71933c84128a9a608d079ec88",
+  "private_key": "-----BEGIN PRIVATE KEY-----\nMIIEvAIBADANBgkqhkiG9w0BAQEFAASCBKYwggSiAgEAAoIBAQDLAPxtOdioHs7i\ndrac6/mfyjTX6qZ5NKVLWiJTfx+73U89YYA6oDboKwMLez1xYQilRckCcyMPdfXx\nH/UW5iKR+8U/2aCkbgy5J4Jzzprj5PEoVO+h/4pum3aDpaKeShTKbQcmnTDCHl1q\nRkUg4k5cFv3IExR/iZk5kG3Lt84dDXrH7KhJRpr1MsFjpYQ33+ngoL0G/RJ9Hyu2\nkn4KUPpegZ+QqOgpcO5YhIv0EHdV59bcCqeX6E4Dj32bPcOKBg3Z7C45Ooxhl+Ep\nvq06UgmgZ08ul0SDI5DRMgje6VPI3VrTWEEKKvWmI395Kybqbi9FZV1o40pAYiGF\n5rW84/L5AgMBAAECggEAAqoWe2fadZ5t5bVcK+QW/dISw9C4cvfOFuvtw73JO1cq\nGT/52wsg8rF50+vqqwh0gMLROBSDHcqqZIn1rAwaNmNLu/ejGaAOJQdP5C2OhTY1\n32skorIuwsk3PX7DiyNQHDYLytBzruCPe6ZvdYEy48Izfi2YmRyZDmiHCw5Js2zk\ntj5WZoMvoZunJSYiMOIT9AzqcaUmB/lPnYPCzWKa3cjN9U+3hlaagqBWUV/fLj9w\nvLTF6HwK4KxWHLQf9oSK60YoizSz7R7Dx0j8XAWTUJhPgMK75XGT4D2DRaXlk+8l\ngoiNKjGWcDO8oVeIzyozdXE7NaMWH0G4rVrofS6a7wKBgQDsLixH/aETc8ybPEdw\ns8Y4BTlXOfEXpwVMI6Xk6+4T+r8OmEdkFtWLj7QKWncege6m7T7VbmIRNiR4Gs8m\nPrRrczHwfS9P230qHty40DuJchfX/O7WyQ2D6Zmx4ixnDq1DTl9hZtmddxGPjaTD\n8VxdmPY44fkAI5/WLKGGE/8q7wKBgQDcChZLgcl/h/YSEvKJEdWwO0aDPzRz7g58\n3dx7aalPh+tRMjcazJRJxAxkt8ArZ+cJfyMjL6PkMn6US9ULUgN6rKT3Vsfi2Faq\nVFC5bzdi6gUIQsyw73dsvemJL+C4ZaXELss6yNduXomUVG95iFHFFNdQHhDnDXpw\nhy1S8zhglwKBgAxGQgrjxZFLPWD7+wKCdVTIALjly//csEvKtn51PIRRTcimZV9w\nSFzedQ7ssLAnNI38Wn2hJPucAr0zN3zXWW0UKY5EE0dlMtYTkIkSWWXFRjP1czw6\nardmVpSGGqSogJy04AQh4kFqxMDfLab5TkGXB4ThSZ2WPGJXI3XiaCqFAoGAHUD2\nD9nUeTERRPvh5NlLKJ/o0wAvMA6BPJaefoXgraMrZOMhMl3qhRgccbOASAULUVbm\nzAHEb01LSNoAG/4uWjvjvsJ51q3eb8y/4rdnjK4CN0PyRL/Bh+KDzupfnQRekoOK\nH2meQp0s+1xyaZz3ChWoPo2Qv7cqBRXjr7iIUUcCgYAVuS9+VWu49pedZ/qiUWhJ\nLRraOm5LHgkC08BdCl78XfvxrbfhhzmrDyhaiK9Qa/z705Wz9TufLmUfjk8MzdZW\nu2EqnNugcAPGPCTjuZq+cpKAN4IwxweWZyQddqnffIQTltfAhZ5gC0wCo/7moS1D\nG/rRBqYnj1gDyliDyZL25g==\n-----END PRIVATE KEY-----\n",
+  "client_email": "firebase-adminsdk-hg5x7@curious-learner-3845a.iam.gserviceaccount.com",
+  "client_id": "100249815186071791369",
+  "auth_uri": "https://accounts.google.com/o/oauth2/auth",
+  "token_uri": "https://oauth2.googleapis.com/token",
+  "auth_provider_x509_cert_url": "https://www.googleapis.com/oauth2/v1/certs",
+  "client_x509_cert_url": "https://www.googleapis.com/robot/v1/metadata/x509/firebase-adminsdk-hg5x7%40curious-learner-3845a.iam.gserviceaccount.com",
+  "universe_domain": "googleapis.com"
+}

gitignore

@@ -0,0 +1,31 @@
+# Python-generated files
+__pycache__/
+*.py[oc]
+build/
+dist/
+wheels/
+*.egg-info
+
+# Virtual environments
+.venv
+
+# Firebase
+firebase-credentials.json
+
+# IDE
+.vscode/
+.idea/
+*.swp
+*.swo
+*~
+
+# OS
+.DS_Store
+Thumbs.db
+
+# Gradio
+gradio_cached_examples/
+flagged/
+
+# Logs
+*.log

gradio_app.py

@@ -0,0 +1,584 @@
+import gradio as gr
+from datetime import datetime
+import hashlib
+import json
+
+# Import database functions
+from database import (
+    register_user as db_register_user,
+    login_user as db_login_user,
+    create_agent as db_create_agent,
+    get_user_agents as db_get_user_agents,
+    get_user_by_id,
+    FIREBASE_ENABLED,
+    DEFAULT_WORKSPACE_ID
+)
+
+# Session management
+user_sessions = {}
+
+
+def get_chatbot_iframe(user_id):
+    """Generate iframe HTML for chatbot webview"""
+    if not user_id:
+        print("[DEBUG] get_chatbot_iframe: user_id is None or empty")
+        return ""
+
+    chatbot_url = f"https://curious-learner-chatbot.web.app/#/chats?clientId={user_id}&workspaceId={DEFAULT_WORKSPACE_ID}"
+    print(f"[DEBUG] get_chatbot_iframe URL: {chatbot_url}")
+    return f'''
+    <iframe 
+        src="{chatbot_url}" 
+        style="width: 100%; height: 100%; border: none;"
+        allow="clipboard-write; clipboard-read"
+    ></iframe>
+    '''
+
+
+def register_user(username, email, password, confirm_password):
+    """Register a new user"""
+    if not username or not email or not password:
+        return "All fields are required!", None
+
+    if password != confirm_password:
+        return "Passwords do not match!", None
+
+    if len(password) < 6:
+        return "Password must be at least 6 characters!", None
+
+    success, message, user_id = db_register_user(username, email, password)
+
+    if success:
+        return message + " Please login.", "login"
+    else:
+        return message, None
+
+
+def login_user(email, password):
+    """Login user"""
+    if not email or not password:
+        return "Email and password are required!", None, None, None, None
+
+    success, message, user_id = db_login_user(email, password)
+
+    if success:
+        session_id = hashlib.sha256(f"{email}{datetime.now()}".encode()).hexdigest()
+        user_sessions[session_id] = user_id
+
+        # Create session data for cookie storage
+        session_data = json.dumps({
+            "session_id": session_id,
+            "user_id": user_id})
+
+        return "Login successful!", "dashboard", session_id, session_data, user_id
+    else:
+        return message, None, None, None, None
+
+
+def logout_user():
+    """Logout user and clear session"""
+    return ""  # Return empty string to clear cookie
+
+
+def get_username(session_id):
+    """Get username for display"""
+    if not session_id or session_id not in user_sessions:
+        return ""
+
+    user_id = user_sessions[session_id]
+    user = get_user_by_id(user_id)
+
+    return user.get('name', 'User') if user else ""
+
+
+def create_agent(session_id, agent_name, model_name, mcp_github_enabled, github_token, system_prompt):
+    """Create a new React agent"""
+    if not session_id or session_id not in user_sessions:
+        return "Please login first!", None
+
+    user_id = user_sessions[session_id]
+    success, message, chatbot_id = db_create_agent(
+        user_id, agent_name, model_name, mcp_github_enabled, github_token, system_prompt
+    )
+
+    return message, chatbot_id if success else None
+
+
+def get_user_agents(session_id):
+    """Get all agents created by the user"""
+    if not session_id or session_id not in user_sessions:
+        return "Please login first!"
+
+    user_id = user_sessions[session_id]
+    agent_list = db_get_user_agents(user_id)
+
+    return "\n\n".join(agent_list) if agent_list else "No agents created yet."
+
+
+# Custom CSS for better styling
+custom_css = """
+<style>
+    /* Desktop-friendly layout */
+    .gradio-container {
+        max-width: 1400px !important;
+        margin: 0 auto !important;
+    }
+
+    /* Larger form elements */
+    .contain {
+        max-width: 100% !important;
+    }
+
+    /* Auth forms centered but wider */
+    .auth-form {
+        max-width: 500px;
+        margin: 0 auto;
+    }
+
+    /* Dashboard and form containers */
+    .dashboard-container, .form-container {
+        max-width: 800px;
+        margin: 0 auto;
+        padding: 30px;
+    }
+
+    /* Create Agent Button - Large and prominent */
+    .create-agent-btn button {
+        font-size: 24px !important;
+        padding: 40px 60px !important;
+        background: linear-gradient(135deg, #667eea 0%, #764ba2 100%) !important;
+        color: white !important;
+        border: none !important;
+        border-radius: 15px !important;
+        min-height: 120px !important;
+        width: 100% !important;
+        margin: 20px 0 !important;
+    }
+
+    .create-agent-btn button:hover {
+        transform: scale(1.02) !important;
+        box-shadow: 0 8px 16px rgba(0,0,0,0.2) !important;
+    }
+
+    /* Back button styling */
+    .back-btn button {
+        background: linear-gradient(135deg, #6B7280 0%, #4B5563 100%) !important;
+        color: white !important;
+        font-size: 16px !important;
+        padding: 12px 24px !important;
+        border-radius: 8px !important;
+    }
+
+    /* Logout button styling */
+    .logout-btn button {
+        background: linear-gradient(135deg, #ef4444 0%, #dc2626 100%) !important;
+        color: white !important;
+        font-size: 14px !important;
+        padding: 10px 20px !important;
+        border-radius: 8px !important;
+        margin-top: 30px !important;
+    }
+
+    .logout-btn button:hover {
+        background: linear-gradient(135deg, #dc2626 0%, #b91c1c 100%) !important;
+    }
+
+    /* MCP Config styling */
+    .mcp-config-box {
+        border: 2px solid #e5e7eb;
+        border-radius: 12px;
+        padding: 20px;
+        background: transparent !important;
+        margin: 15px 0;
+    }
+
+    /* Checkbox labels */
+    .mcp-checkbox label {
+        font-size: 16px !important;
+        font-weight: 500 !important;
+    }
+
+    /* Form inputs larger */
+    input[type="text"], input[type="email"], input[type="password"], textarea, select {
+        font-size: 16px !important;
+        padding: 12px !important;
+    }
+
+    /* Fix checkbox and password field backgrounds */
+    input[type="password"] {
+        background-color: var(--input-background-fill) !important;
+    }
+
+    input[type="checkbox"] {
+        background-color: transparent !important;
+    }
+
+    /* Buttons larger */
+    button {
+        font-size: 16px !important;
+        padding: 12px 24px !important;
+    }
+
+    /* Agent list styling */
+    .agent-list-container {
+        background: transparent !important;
+        border-radius: 12px;
+        padding: 20px;
+        margin-top: 20px;
+    }
+
+    /* Chatbot webview styling - floating chatbox */
+    #chatbot-webview {
+        position: fixed !important;
+        bottom: 20px !important;
+        right: 20px !important;
+        width: 380px !important;
+        height: 550px !important;
+        border: none !important;
+        border-radius: 16px !important;
+        overflow: hidden !important;
+        box-shadow: 0 8px 32px rgba(0, 0, 0, 0.15) !important;
+        z-index: 9999 !important;
+        background: white !important;
+    }
+
+    #chatbot-webview iframe {
+        width: 100% !important;
+        height: 100% !important;
+        border: none !important;
+    }
+
+    /* Remove top border from first block in tabs */
+    .tabitem > .column > .block:first-child {
+        border-top: none !important;
+    }
+
+    /* Remove border from blocks at the top of form containers */
+    .form-container > .block:first-child,
+    .dashboard-container > .block:first-child {
+        border-top: none !important;
+    }
+</style>
+"""
+
+# Build the Gradio interface
+with gr.Blocks(title="React Agent Builder") as app:
+    # Inject custom CSS
+    gr.HTML(custom_css)
+
+    # State variables
+    session_state = gr.State(None)
+    user_id_state = gr.State(None)
+
+    with gr.Tabs(selected="login") as tabs:
+        with gr.Tab("Login", id="login") as login_tab:
+            with gr.Column(elem_classes="auth-form"):
+                gr.Markdown("# 🔐 Login")
+                login_email = gr.Textbox(label="Email", placeholder="Enter your email", scale=1)
+                login_password = gr.Textbox(label="Password", type="password", placeholder="Enter your password",
+                                            scale=1)
+                login_btn = gr.Button("Login", variant="primary", size="lg", scale=1)
+                login_msg = gr.Textbox(label="Status", interactive=False, scale=1)
+                gr.Markdown("Don't have an account? Switch to the Registration tab.")
+
+        with gr.Tab("Register", id="register") as register_tab:
+            with gr.Column(elem_classes="auth-form"):
+                gr.Markdown("# 📝 Register")
+                reg_username = gr.Textbox(label="Username", placeholder="Choose a username", scale=1)
+                reg_email = gr.Textbox(label="Email", placeholder="Enter your email", scale=1)
+                reg_password = gr.Textbox(label="Password", type="password", placeholder="Choose a password", scale=1)
+                reg_confirm_password = gr.Textbox(label="Confirm Password", type="password",
+                                                  placeholder="Confirm your password", scale=1)
+                reg_btn = gr.Button("Register", variant="primary", size="lg", scale=1)
+                reg_msg = gr.Textbox(label="Status", interactive=False, scale=1)
+
+        with gr.Tab("Dashboard", id="dashboard", visible=False) as dashboard_tab:
+            with gr.Column(elem_classes="dashboard-container"):
+                gr.Markdown("# 🚀 React Agent Dashboard")
+
+                create_agent_btn = gr.Button(
+                    "➕ Create React Agent",
+                    size="lg",
+                    variant="primary",
+                    elem_classes="create-agent-btn"
+                )
+
+                with gr.Column(elem_classes="agent-list-container"):
+                    gr.Markdown("### 📋 Your Agents")
+                    agents_list = gr.Textbox(
+                        label="Created Agents",
+                        interactive=False,
+                        lines=10,
+                        placeholder="Your created agents will appear here...",
+                        scale=1
+                    )
+                    refresh_btn = gr.Button("🔄 Refresh List", size="sm")
+
+                # Logout button at the bottom of dashboard, inside the container
+                logout_btn_dashboard = gr.Button("🚪 Logout", size="sm", variant="secondary", elem_classes="logout-btn")
+
+            # Floating chatbot webview - outside the main container
+            chatbot_webview = gr.HTML(
+                value="",
+                elem_id="chatbot-webview"
+            )
+
+        with gr.Tab("Create Agent", id="create_agent", visible=False) as create_agent_tab:
+            with gr.Column(elem_classes="form-container"):
+                # Back button at the top
+                back_btn = gr.Button("← Back to Dashboard", size="lg", elem_classes="back-btn")
+
+                gr.Markdown("# 🤖 Create New React Agent")
+
+                agent_name_input = gr.Textbox(
+                    label="Agent Name",
+                    placeholder="Enter a name for your agent",
+                    info="Give your agent a descriptive name",
+                    scale=1
+                )
+
+                model_dropdown = gr.Dropdown(
+                    label="Model Name",
+                    choices=[
+                        "gpt-4o",
+                        "gpt-4o-mini"
+                    ],
+                    value="gpt-4o",
+                    info="Select the OpenAI model to use",
+                    scale=1
+                )
+
+                # MCP Server Config section
+                gr.Markdown("### 🔌 MCP Server Configuration")
+                with gr.Column(elem_classes="mcp-config-box"):
+                    mcp_github = gr.Checkbox(
+                        label="GitHub - Functions like commit, push, pull, update etc.",
+                        value=False,
+                        elem_classes="mcp-checkbox"
+                    )
+
+                    github_token_input = gr.Textbox(
+                        label="Token",
+                        placeholder="ghp_xxxxxxxxxxxxxxxxxxxx",
+                        type="password",
+                        visible=False,
+                        scale=1
+                    )
+
+                system_prompt_input = gr.Textbox(
+                    label="System Context Prompt",
+                    placeholder="Enter the system prompt for your agent...",
+                    lines=10,
+                    info="Define how your agent should behave and respond",
+                    scale=1
+                )
+
+                submit_btn = gr.Button("✅ Submit & Create Agent", variant="primary", size="lg", scale=1)
+
+                create_msg = gr.Textbox(label="Status", interactive=False, lines=2, scale=1)
+                agent_url_output = gr.Textbox(label="Agent URL", interactive=False, lines=3, scale=1)
+
+                # Logout button at the bottom of create agent form
+                logout_btn_create = gr.Button("🚪 Logout", size="sm", variant="secondary", elem_classes="logout-btn")
+
+
+    # Event handlers
+    def handle_login(email, password):
+        """Handle login and return all necessary updates"""
+        msg, page, sess_id, cookie, user_id = login_user(email, password)
+
+        print(f"[DEBUG] handle_login: page={page}, sess_id={sess_id}, user_id={user_id}")
+
+        if page == "dashboard" and sess_id:
+            # Successful login - show dashboard and load agents list
+            # Use user_id directly to fetch agents
+            agent_list = db_get_user_agents(user_id)
+            agents_text = "\n\n".join(agent_list) if agent_list else "No agents created yet."
+
+            print(f"[DEBUG] handle_login: Generating chatbot iframe for user_id={user_id}")
+            chatbot_html = get_chatbot_iframe(user_id)
+            print(f"[DEBUG] handle_login: chatbot_html length={len(chatbot_html)}")
+
+            return {
+                login_msg: msg,
+                login_tab: gr.update(visible=False),
+                register_tab: gr.update(visible=False),
+                dashboard_tab: gr.update(visible=True),
+                create_agent_tab: gr.update(visible=False),
+                session_state: sess_id,
+                user_id_state: user_id,
+                agents_list: agents_text,
+                chatbot_webview: chatbot_html,
+                tabs: gr.update(selected="dashboard")
+            }
+        else:
+            # Failed login - stay on login page
+            return {
+                login_msg: msg,
+                login_tab: gr.update(),
+                register_tab: gr.update(),
+                dashboard_tab: gr.update(),
+                create_agent_tab: gr.update(),
+                session_state: None,
+                user_id_state: None,
+                agents_list: gr.update(),
+                chatbot_webview: gr.update(),
+                tabs: gr.update()
+            }
+
+
+    def handle_logout():
+        """Handle logout"""
+        return {
+            login_tab: gr.update(visible=True),
+            register_tab: gr.update(visible=True),
+            dashboard_tab: gr.update(visible=False),
+            create_agent_tab: gr.update(visible=False),
+            session_state: None,
+            user_id_state: None,
+            login_email: "",
+            login_password: "",
+            login_msg: "",
+            chatbot_webview: "",
+            tabs: gr.update(selected="login")
+        }
+
+
+    def switch_to_create_agent():
+        return {
+            dashboard_tab: gr.update(visible=False),
+            create_agent_tab: gr.update(visible=True),
+            tabs: gr.update(selected="create_agent")
+        }
+
+
+    def switch_back_to_dashboard():
+        return {
+            dashboard_tab: gr.update(visible=True),
+            create_agent_tab: gr.update(visible=False),
+            agent_name_input: "",
+            mcp_github: False,
+            github_token_input: gr.update(value="", visible=False),
+            system_prompt_input: "",
+            create_msg: "",
+            agent_url_output: "",
+            tabs: gr.update(selected="dashboard")
+        }
+
+
+    def toggle_github_token(enabled):
+        """Show/hide GitHub token input based on checkbox"""
+        return gr.update(visible=enabled)
+
+
+    def handle_agent_creation(sess_id, user_id, name, model, mcp_enabled, github_token, prompt):
+        msg, chatbot_id = create_agent(sess_id, name, model, mcp_enabled, github_token, prompt)
+
+        # Build the agent URL locally if creation was successful
+        agent_url = ""
+        if chatbot_id and user_id:
+            agent_url = f"https://curious-learner-chatbot.web.app/#/chats?clientId={user_id}&workspaceId={DEFAULT_WORKSPACE_ID}&chatbotId={chatbot_id}"
+
+        # Also refresh the agents list and webview after creation
+        agent_list = db_get_user_agents(user_id) if user_id else []
+        updated_agents = "\n\n".join(agent_list) if agent_list else "No agents created yet."
+        return {
+            create_msg: msg,
+            agent_url_output: agent_url,
+            agents_list: updated_agents,
+            chatbot_webview: get_chatbot_iframe(user_id)
+        }
+
+
+    # Refresh agents list function
+    def refresh_agents_list(user_id):
+        """Refresh agents list using user_id"""
+        if not user_id:
+            return "Please login first!"
+        agent_list = db_get_user_agents(user_id)
+        return "\n\n".join(agent_list) if agent_list else "No agents created yet."
+
+
+    # Login event - chain refresh after login
+    login_btn.click(
+        fn=handle_login,
+        inputs=[login_email, login_password],
+        outputs=[login_msg, login_tab, register_tab, dashboard_tab, create_agent_tab, session_state,
+                 user_id_state, agents_list, chatbot_webview, tabs]
+    ).then(
+        fn=refresh_agents_list,
+        inputs=[user_id_state],
+        outputs=[agents_list]
+    )
+
+    # Logout events (both buttons do the same thing)
+    logout_outputs = [login_tab, register_tab, dashboard_tab, create_agent_tab, session_state,
+                      user_id_state, login_email, login_password, login_msg, chatbot_webview, tabs]
+
+    logout_btn_dashboard.click(
+        fn=handle_logout,
+        outputs=logout_outputs
+    )
+
+    logout_btn_create.click(
+        fn=handle_logout,
+        outputs=logout_outputs
+    )
+
+    # Register event
+    reg_btn.click(
+        fn=register_user,
+        inputs=[reg_username, reg_email, reg_password, reg_confirm_password],
+        outputs=[reg_msg, gr.State()]
+    )
+
+    # Create agent button
+    create_agent_btn.click(
+        fn=switch_to_create_agent,
+        outputs=[dashboard_tab, create_agent_tab, tabs]
+    )
+
+    # Back button
+    back_btn.click(
+        fn=switch_back_to_dashboard,
+        outputs=[dashboard_tab, create_agent_tab, agent_name_input, mcp_github,
+                 github_token_input, system_prompt_input, create_msg, agent_url_output, tabs]
+    )
+
+    # MCP GitHub checkbox toggle
+    mcp_github.change(
+        fn=toggle_github_token,
+        inputs=[mcp_github],
+        outputs=[github_token_input]
+    )
+
+    # Submit agent
+    submit_btn.click(
+        fn=handle_agent_creation,
+        inputs=[session_state, user_id_state, agent_name_input, model_dropdown, mcp_github,
+                github_token_input, system_prompt_input],
+        outputs=[create_msg, agent_url_output, agents_list, chatbot_webview]
+    )
+
+    # Refresh agents list button
+    refresh_btn.click(
+        fn=refresh_agents_list,
+        inputs=[user_id_state],
+        outputs=[agents_list]
+    )
+
+if __name__ == "__main__":
+    app.launch(
+        server_name="0.0.0.0",
+        server_port=7860,
+        share=True
+    )
+
+
+def main():
+    """Entry point for the application"""
+    app.launch(
+        server_name="0.0.0.0",
+        server_port=7860,
+        share=True
+    )

pyproject.toml

@@ -0,0 +1,13 @@
+[project]
+name = "gradio-react-agent"
+version = "0.1.0"
+description = "Gradio web application with authentication and React agent creation"
+readme = "README.md"
+requires-python = ">=3.12"
+dependencies = [
+    "firebase-admin>=7.1.0",
+    "gradio>=6.0.1",
+]
+
+[dependency-groups]
+dev = []