BotAI 🤖

Agentic Chatbot Webapp with Google ADK + LiteLLM

Architecture

botai/
├── frontend/          # React + Vite + TailwindCSS
│   └── Chat interface with streaming support
├── backend/           # Python + FastAPI + Google ADK
│   ├── gRPC service (port 50051)
│   └── HTTP streaming (port 8000)
└── README.md

Stack

Frontend:

• React 18 + TypeScript
• Vite 6
• TailwindCSS 3
• Dark mode UI

Backend:

• FastAPI
• Google ADK (Agent Development Kit)
• LiteLLM (multi-provider LLM gateway)
• gRPC + HTTP streaming

Quick Start

1. Backend Setup

cd backend

# Create virtual environment
python -m venv venv
source venv/bin/activate  # Linux/Mac
# or: venv\Scripts\activate  # Windows

# Install dependencies
pip install -r requirements.txt

# Configure environment
cp .env.example .env
# Edit .env and add your LITELLM_API_KEY

# Generate gRPC files (optional, for gRPC mode)
chmod +x generate_grpc.sh
./generate_grpc.sh

# Start server
python main.py

Backend runs on:

• HTTP: http://localhost:8000
• gRPC: localhost:50051

2. Frontend Setup

cd frontend

# Install dependencies
npm install

# Start dev server
npm run dev

Frontend runs on: http://localhost:3000

Service Management

Use the service manager script to start/stop/restart all services:

# Make executable (first time only)
chmod +x services.sh

# Start all services
./services.sh start

# Stop all services
./services.sh stop

# Restart all services
./services.sh restart

# Check status
./services.sh status

# View logs
./services.sh logs frontend
./services.sh logs backend
./services.sh logs all

Services:

Service	Port	URL
Frontend	3001	http://localhost:3001
Backend	8000	http://localhost:8000

Logs location: /tmp/botai-logs/

Configuration

Backend (.env)

# LiteLLM Configuration
LITELLM_API_KEY=your_key_here          # Required
LITELLM_MODEL=gpt-4o-mini              # Model to use
LITELLM_BASE_URL=https://api.openai.com/v1  # Optional

# Server Configuration
GRPC_PORT=50051
HTTP_PORT=8000

LiteLLM Models

You can use any model supported by LiteLLM:

• OpenAI: gpt-4o, gpt-4o-mini, gpt-4-turbo
• Anthropic: claude-3-opus-20240229, claude-3-sonnet-20240229
• Google: gemini-pro, gemini-1.5-pro
• Open source: meta-llama/llama-3-70b, mistral/mistral-large

Full list: https://docs.litellm.ai/docs/providers

Usage

1. Open http://localhost:3000 in your browser
2. Type a message and press Enter or click Send
3. Watch the AI response stream in real-time
4. Continue the conversation with context

API Endpoints

HTTP (Simple)

POST /chat

{
  "message": "Hello!",
  "session_id": "optional-session-id"
}

Returns: Streaming response (text/plain)

GET /health

{
  "healthy": true,
  "version": "1.0.0"
}

gRPC (Advanced)

ChatService.StreamChat

• Bidirectional streaming
• Proto: backend/proto/chatbot.proto

Development

Add Google ADK Agents

The backend is ready for Google ADK integration. Add your agents in backend/grpc/chat_service.py:

from google.adk import Agent

agent = Agent(
    name="assistant",
    instructions="You are a helpful assistant",
    # Add tools, memory, RAG, etc.
)

Add RAG (Retrieval Augmented Generation)

from google.adk.memory import VectorMemory

memory = VectorMemory(
    collection="chat_history",
    embedder="text-embedding-3-small"
)

Production

For production deployment:

1. Environment variables: Use proper secrets management
2. CORS: Configure allowed origins in main.py
3. Session storage: Replace in-memory dict with Redis
4. gRPC: Use Envoy proxy for gRPC-Web in frontend
5. Monitoring: Add logging, metrics, tracing

License

MIT