AI Chatbot - Embeddable Widget

June 22, 2025

ReactTypeScriptViteTailwind CSSFastAPIPythonDocker

An intelligent, embeddable chatbot widget designed for seamless integration into any website. This project demonstrates modern web development practices with a focus on user experience, performance, and developer-friendly integration.

Live Demo

Try the chatbot right here! Look for the chat widget in the bottom-right corner of this page. The widget features:

Real-time streaming responses - Watch AI responses appear word by word
Multiple display modes - Normal, fullscreen, and minimized states
Responsive design - Works perfectly on desktop and mobile
Smooth animations - Professional transitions and micro-interactions

Architecture

This project consists of two main components:

1. AI Chatbot API (Backend)

FastAPI backend with streaming chat endpoints
Google Gemini integration for AI responses
Docker containerization for easy deployment
Comprehensive error handling and rate limiting

2. AI Chatbot MFE - Embeddable Widget (Frontend)

React + TypeScript for type-safe, modern UI
Vite for optimized build performance
Tailwind CSS for consistent, responsive styling
UMD bundle for universal embedding compatibility

Key Features

Real-time Streaming: Responses appear as they're generated
Responsive Design: Optimized for all screen sizes
Multiple States: Normal, fullscreen, and minimized modes
Keyboard Shortcuts: Escape, Ctrl+M, Ctrl+F for power users
Easy Integration: Single script tag embedding
Framework Agnostic: Works with any website or framework

Technical Implementation

Frontend Architecture

Component-based design with reusable UI primitives
Custom hooks for state management and API integration
TypeScript interfaces for comprehensive type safety
Performance optimized with efficient re-rendering patterns

Backend Architecture

Streaming endpoints using Server-Sent Events (SSE)
Modular AI service architecture supporting multiple providers
Comprehensive logging and error handling
Docker deployment with environment-based configuration

Integration

The widget can be embedded in any website with just two lines of code:

<div id="ai-chatbot-root" data-api-url="your-api-url" data-api-key="your-api-key"></div>
<script src="path/to/chatbot-widget.umd.js"></script>

Development Highlights

Modern Development Stack: Leveraging the latest in web development tools
User Experience Focus: Smooth interactions and professional polish
Developer Experience: Clean APIs and comprehensive documentation
Production Ready: Error handling, performance optimization, and security considerations

Experience the future of web-based AI interaction with this live demo! The chatbot widget showcases modern web development practices while providing a seamless user experience.