Build beautiful AI chat applications with SvelteKit, Flowbite UI, and LangGraph in minutes, not months.
A complete, production-ready framework for creating real-time AI chat applications with professional Flowbite components, advanced LangGraph assistants, streaming responses, and enterprise-grade deployment capabilities.
Experience the power of professional design systems with our integrated Flowbite theme:
- 🎯 50+ Pre-built Components - Buttons, cards, modals, forms ready to use
- 🌙 Dark/Light Mode - Automatic theme switching with user preferences
- 📱 Mobile-First Design - Responsive components that work everywhere
- ♿ Accessibility Built-in - WCAG compliant out of the box
- 🎨 Customizable Themes - Easy branding and styling system
<!-- Beautiful AI chat in one component -->
<script>
import { LangGraphFrontend } from 'svelte-langgraph';
</script>
<LangGraphFrontend
userId="user123"
theme="flowbite"
darkMode={true}
/>- 6 Specialized Graphs: Chatbot, Persistent Chatbot, Code Assistant, Data Analyst, Creative Writer, Research Assistant
- Open-Source LangGraph: Uses standard StateGraph/CompiledGraph - no Platform dependency required
- Optional Platform Support: Can be extended to use LangGraph Platform if desired
- Thread-based Conversations: Stateful conversations with automatic persistence (in-memory or external)
- Multiple AI Providers: OpenAI GPT-4, Anthropic Claude, with easy extensibility
- Streaming Responses: Real-time token-by-token response rendering
- Tool Integration: Web search, data analysis, and custom tools with intelligent routing
- JWT Authentication: Secure token-based auth with role-based access control
- Rate Limiting: Built-in protection against abuse and spam
- Input Validation: Comprehensive sanitization and validation
- Security Headers: CORS, CSP, and other security best practices
- Modular Socket.IO Architecture: Clean, maintainable WebSocket implementation
- Conversation Management: Thread-based conversation persistence (configurable backend)
- Graph Health Monitoring: Real-time status tracking for all LangGraph instances
- Memory Management: Advanced streaming with automatic cleanup
- Connection Resilience: Automatic reconnection and graceful error handling
- Docker Compose: One-command deployment with optional Postgres + Redis
- Production Config: Nginx, SSL, monitoring, and comprehensive health checks
- Flexible Persistence: In-memory (default) or PostgreSQL for conversation storage
- Optional Task Queue: Redis support for advanced workflows
- Cloud Ready: AWS, GCP, Azure deployment examples
- CI/CD Pipelines: GitHub Actions workflows included
- Node.js: 22.x or later (Current LTS)
- pnpm: 9.x or later
- Python: 3.12+ (for backend)
- Docker: Latest version (recommended for deployment)
Note: Node.js 20 and earlier versions are not supported. This project requires Node.js 22+ for optimal performance and latest ECMAScript features.
Get everything running in under 2 minutes:
# 1. Clone and setup
git clone https://github.com/synergyai-nl/svelte-langgraph.git
cd svelte-langgraph
# 2. Configure environment
cp .env.example .env
# Edit .env with your API keys:
# OPENAI_API_KEY=your-key-here
# ANTHROPIC_API_KEY=your-key-here
# LANGSMITH_API_KEY=your-langsmith-key
# 3. Launch everything
docker-compose up -d
# 4. Open your browser
open http://localhost:3000Demo credentials: demo / secret
For customization and development:
# Optional: Infrastructure for persistence (Terminal 1)
docker-compose up -d postgres redis
# Backend (Terminal 2)
cd examples/langgraph-backend
uv run serve
# Frontend (Terminal 3)
cd examples/dashboard
pnpm install && pnpm dev
# Visit http://localhost:5173Our worldclass documentation covers everything from 5-minute quickstart to enterprise deployment:
- Quick Start - Docker + development setup in 5 minutes
- Complete Tutorial - Build your first AI app in 30 minutes
📖 Guides
- Flowbite Theme System - Customize UI with professional components
- Authentication & Security - JWT, RBAC, and security best practices
- Production Deployment - Docker, Kubernetes, cloud platforms
- Component Library - Complete Svelte component documentation
- Socket.IO Events - Real-time event reference
- Store APIs - State management and reactive patterns
🔧 Advanced
- Architecture Deep Dive - System design and patterns
- Troubleshooting Guide - Debug and fix common issues
Built with modern, scalable architecture patterns:
┌─────────────────┐ WebSocket ┌─────────────────┐ HTTP/Streaming ┌─────────────────┐
│ Browser │ ◄─────────────► │ SvelteKit │ ◄──────────────────► │ FastAPI │
│ (Flowbite UI) │ │ Frontend │ │ LangGraph │
└─────────────────┘ └─────────────────┘ └─────────────────┘
│ │
▼ ▼
┌─────────────────┐ ┌─────────────────┐
│ Socket.IO │ │ LangGraph Server│
│ Server │ │ + AI Assistants │
└─────────────────┘ └─────────────────┘
- Frontend: SvelteKit 2.0 + Svelte 5 + TypeScript + Tailwind CSS v4
- UI Components: Flowbite Svelte with comprehensive theme system
- Backend: FastAPI + LangGraph (open-source) + LangChain + Socket.IO
- AI Integration: OpenAI GPT-4, Anthropic Claude, extensible agent system
- Database: Optional PostgreSQL + Redis (in-memory by default)
- Deployment: Docker Compose + Nginx + SSL + monitoring
Perfect for building:
- 🤖 AI Chat Applications - Customer support, personal assistants
- 💻 Code Assistant Tools - Developer productivity, code review
- 📊 Data Analysis Platforms - Business intelligence, reporting
- ✍️ Content Creation - Writing assistants, creative tools
- 🔍 Research Applications - Information gathering, analysis
- 🏢 Enterprise Chatbots - Internal tools, knowledge management
svelte-langgraph/
├── packages/
│ └── svelte-langgraph/ # 📦 Complete library package
│ ├── components/ # Flowbite UI components
│ ├── stores/ # Socket.IO & state management
│ ├── themes/ # Flowbite theme system
│ └── types.ts # LangChain-compatible types
├── examples/
│ ├── dashboard/ # 🎨 SvelteKit frontend example
│ └── langgraph-backend/ # 🚀 FastAPI backend example
├── docs/ # 📚 Comprehensive documentation
├── nginx/ # 🌐 Production nginx config
└── docker-compose.yml # 🐳 Full-stack deployment
📦 svelte-langgraph Package:
- Complete Svelte integration for LangGraph
- Socket.IO client with automatic reconnection
- Flowbite theme system with dark mode
- TypeScript definitions for LangChain compatibility
- Reactive stores for real-time state management
🎨 Frontend Example:
- Professional Flowbite UI components
- Real-time chat with streaming responses
- Multi-conversation management
- User authentication and authorization
- Internationalization with Inlang/Paraglide
🚀 Backend Example:
- 6 specialized LangGraph StateGraph implementations
- FastAPI with open-source LangGraph integration
- JWT authentication with RBAC
- Socket.IO server for real-time communication
- Production-ready logging and monitoring
<!-- Automatic Flowbite theming -->
<LangGraphFrontend userId="user123" theme="flowbite" />
<!-- Custom theme variants -->
<ThemeProvider theme={flowbiteTheme} variant="dark">
<ChatInterface />
</ThemeProvider>
<!-- Runtime theme customization -->
<ThemeProvider theme={customTheme} override={brandColors}>
<LangGraphFrontend userId="user123" />
</ThemeProvider>- Chat Interface: Professional message bubbles with avatars
- Sidebar Navigation: Collapsible conversation list with search
- Settings Panel: Form controls with validation and feedback
- Loading States: Skeleton screens and progress indicators
- Error Handling: Toast notifications and error boundaries
- Desktop: Full-featured layout with sidebars and panels
- Tablet: Adaptive layout with collapsible navigation
- Mobile: Touch-optimized interface with bottom navigation
Choose your journey:
| I want to... | Start here | Time needed |
|---|---|---|
| Try it quickly | Quick Start | 5 minutes |
| Learn step-by-step | Complete Tutorial | 30 minutes |
| Customize the UI | Flowbite Theme Guide | 15 minutes |
| Deploy to production | Deployment Guide | 1 hour |
| Understand the architecture | Architecture Deep Dive | 20 minutes |
Explore these demo routes in the example app:
/- Main dashboard with Flowbite components/flowbite- Flowbite theme showcase/demo/paraglide- Internationalization demo/api/health- Backend health check endpoint
# Install all dependencies (monorepo)
pnpm install
# Start backend
cd examples/langgraph-backend && uv run serve
# Start frontend (new terminal)
cd examples/dashboard && pnpm dev
# Visit http://localhost:5173# Build library package
cd packages/svelte-langgraph && pnpm build
# Run all tests
nx run-many -t test
# Lint and type check
nx run-many -t lint,check# Run all quality checks
nx run-many -t test,lint,check --output-style=stream
# Frontend-specific
cd examples/dashboard
pnpm test # Unit tests
pnpm test:e2e # End-to-end tests
pnpm check # TypeScript check
pnpm lint # ESLint
pnpm format # Prettier
# Backend-specific
cd examples/langgraph-backend
uv run pytest # Unit tests
uv run ruff check . # Lint
uv run ruff format . # Format
uv run pyright # Type check# Production deployment
cp .env.example .env # Configure with real API keys
docker-compose -f docker-compose.prod.yml up -d
# Includes:
# - Nginx reverse proxy with SSL
# - PostgreSQL database
# - Redis for session storage
# - Prometheus + Grafana monitoring- AWS: ECS + RDS deployment example
- Google Cloud: Cloud Run + Cloud SQL example
- Vercel: Frontend deployment with serverless backend
- Kubernetes: Complete K8s manifests with ingress
See the Deployment Guide for detailed instructions.
- JWT Tokens: Secure authentication with configurable expiration
- Role-Based Access: User, moderator, and admin permission levels
- Rate Limiting: API protection against abuse and spam
- Input Validation: Comprehensive sanitization with Pydantic
- Security Headers: CORS, CSP, and other security best practices
- SSL/TLS: Production-ready HTTPS configuration
- Health Checks: Comprehensive endpoint monitoring
- Structured Logging: JSON logs with correlation IDs
- Metrics Collection: Prometheus metrics for all services
- Error Tracking: Sentry integration for error monitoring
- Performance Monitoring: Response time and throughput tracking
We welcome contributions! See our Contributing Guide for:
- Development Setup: Local environment configuration
- Code Standards: TypeScript, ESLint, and formatting rules
- Testing Guidelines: Unit, integration, and E2E testing
- Pull Request Process: Review and merge workflow
MIT © Svelte LangServe Contributors
- 📖 Documentation: docs/ - Complete guides and API reference
- 🐛 Issues: GitHub Issues - Bug reports and feature requests
- 💬 Discussions: GitHub Discussions - Questions and community
- 🔧 Troubleshooting: Troubleshooting Guide - Debug common issues
Ready to build amazing AI applications? Start with our 5-minute Quick Start Guide →
Built with ❤️ using SvelteKit, Flowbite, and LangGraph