ChitChat AI

AI chatbot agents with a multi-layered content safety filter. Create conversations with different agent personalities, each powered by Google Gemini.

Agents

• Direct - Conversational AI assistant
• Thinker - Shows reasoning step by step (chain of thought)
• Critic - Analyzes and critiques responses

Content Safety Filter

Four-layer filtering system that catches toxic content, profanity, and evasion attempts:

1. Text normalization - Strips character substitutions, Unicode tricks, leetspeak, and spacing evasion before checking
2. Keyword blocklist - Curated list of blocked terms checked against the normalized text
3. TF.js toxicity model - ML-based context-aware toxicity detection that understands intent, not just keywords
4. Expanded text check - Reassembles spaced-out letters and re-runs through the toxicity model to catch creative evasion

Blocked messages show what was detected and are visually marked in the conversation.

Stack

• React 19, TypeScript, Vite, Tailwind CSS
• Google Gemini API (free tier)
• TensorFlow.js toxicity model (client-side)

Run locally

npm install
echo "VITE_GEMINI_API_KEY=your-key" > .env
npm run dev

Get a free Gemini API key at https://aistudio.google.com/apikey

Before / After

v1 (Original)

• Create React App, plain JavaScript
• Peer-to-peer chat with Firebase Auth and Firestore
• Single TF.js toxicity check on outgoing messages
• moment.js for timestamps
• One 420-line CSS file
• Monolithic Home.js component handling everything

v2 (Current)

• Vite + TypeScript + Tailwind CSS
• AI chatbot agents powered by Gemini (Direct, Thinker, Critic)
• Four-layer content filter (normalization, blocklist, TF.js, expanded text)
• No auth required, all state is local
• Model fallback chain (tries multiple Gemini models on rate limit)
• Streaming responses with typing indicator
• Mobile-responsive sidebar with agent management (create, rename, delete)
• Chain-of-thought reasoning steps displayed inline
• Critic annotations with severity levels