A comprehensive full-stack AI-powered admin dashboard showcasing Cloudflare's complete suite of cloud and AI capabilities. Built on the foundation of the popular shadcn-admin template, this project demonstrates advanced integration with Cloudflare Workers, AI models, and real-time features.
🚀 Live Demo: Experience the full power of Cloudflare's edge computing and AI capabilities in a production-ready dashboard.
This isn't just another admin template - it's a comprehensive showcase of modern cloud-native architecture with AI at its core. Starting from the excellent shadcn-admin template, we've transformed it into a full-stack application that demonstrates:
- Edge-First Architecture: Built for Cloudflare Workers with sub-10ms cold starts
- Advanced AI Integration: Multiple AI models for chat, voice, image generation, and embeddings
- Real-Time Features: WebSocket-based live chat and voice transcription
- Production-Ready: Comprehensive authentication, state management, and testing
- Developer Experience: Hot reload, TypeScript, and extensive tooling
- Advanced Chat Interface: Streaming AI responses with Vercel AI SDK integration
- Voice Transcription: Real-time speech-to-text using Cloudflare's Whisper model
- Text Generation: Multiple AI models including Llama and Nova-3
- Image Generation: AI-powered image creation with Stable Diffusion
- Embeddings & Vector Search: Semantic search capabilities
- Artifact System: Interactive code and content generation with persistence
- Live Chat: WebSocket-based AI conversations with connection stability
- Voice AI: Real-time voice transcription with manual controls
- Cross-Device Sync: Session management across multiple devices
- Connection Recovery: Robust WebSocket reconnection handling
- Workers: Serverless compute with global edge deployment
- D1 Database: Planet-scale SQLite with Drizzle ORM
- KV Storage: Global key-value store for sessions and caching
- R2 Object Storage: File uploads and media management
- Durable Objects: Stateful WebSocket connections
- Workers AI: Complete AI model integration
- Modern Design: ShadcnUI components with TailwindCSS
- Responsive Layout: Mobile-first design with sidebar navigation
- Dark/Light Mode: Seamless theme switching
- RTL Support: Right-to-left language compatibility
- Accessibility: WCAG compliant with keyboard navigation
- Global Search: Command palette for quick navigation
- Better Auth: Email/password and OAuth (Google, GitHub)
- Session Management: Secure session handling with auto-expiry
- API Documentation: Interactive OpenAPI documentation
- Rate Limiting: Built-in protection against abuse
Customized Components (click to expand)
This project uses Shadcn UI components, but some have been slightly modified for better RTL (Right-to-Left) support and other improvements. These customized components differ from the original Shadcn UI versions.
If you want to update components using the Shadcn CLI (e.g., npx shadcn@latest add <component>), it's generally safe for non-customized components. For the listed customized ones, you may need to manually merge changes to preserve the project's modifications and avoid overwriting RTL support or other updates.
If you don't require RTL support, you can safely update the 'RTL Updated Components' via the Shadcn CLI, as these changes are primarily for RTL compatibility. The 'Modified Components' may have other customizations to consider.
- scroll-area
- sonner
- separator
- alert-dialog
- calendar
- command
- dialog
- dropdown-menu
- select
- table
- sheet
- sidebar
- switch
Notes:
- Modified Components: These have general updates, potentially including RTL adjustments.
- RTL Updated Components: These have specific changes for RTL language support (e.g., layout, positioning).
- For implementation details, check the source files in
src/components/ui/. - All other Shadcn UI components in the project are standard and can be safely updated via the CLI.
- React 19 - Latest React with concurrent features
- TypeScript - Type-safe development
- Vite - Lightning-fast build tool with HMR
- ShadcnUI - Modern component library (TailwindCSS + RadixUI)
- TanStack Router - Type-safe file-based routing
- TanStack Query - Powerful server state management
- Vercel AI SDK - AI chat components and streaming
- Legend State v3 - Reactive state management
- Cloudflare Workers - Edge serverless compute
- Hono - Ultra-fast web framework with OpenAPI
- Cloudflare D1 - Serverless SQLite database
- Drizzle ORM - Type-safe database operations
- Better Auth - Modern authentication with OpenAPI docs
- Cloudflare Workers AI - Complete AI model suite
- Durable Objects - Stateful edge computing
- ESLint & Prettier - Code quality and formatting
- Playwright - E2E testing with MCP integration
- Vitest - Fast unit testing
- TypeScript - Full type safety across stack
- Node.js 18+
- npm/pnpm/yarn
- Cloudflare account (for deployment)
- Clone the repository
git clone https://github.com/codevibesmatter/ShadFlareAi.git
cd ShadFlareAi- Install dependencies
npm install- Start development server
npm run devThe app will start at http://localhost:5174 with the integrated Cloudflare Workers runtime.
For immediate testing:
- Email:
demo@example.com - Password:
password123
- Swagger UI:
http://localhost:5174/api/ui - Auth Reference:
http://localhost:5174/api/auth/reference
/ai-chat- Advanced AI chat with streaming responses/voice-ai- Real-time voice transcription/ai-chat-enhanced- Feature-rich chat with artifacts/conversation-ai- Multi-modal AI conversations
- Global Distribution: Deployed across 300+ Cloudflare edge locations
- Sub-10ms Latency: Workers cold start in under 10ms worldwide
- Automatic Scaling: Handles millions of requests without provisioning
- WebSocket Stability: Custom connection manager with automatic recovery
- Durable Objects: Stateful connections that survive edge failures
- Cross-Device Sync: Sessions synchronized across multiple devices
- Streaming Responses: Non-blocking AI responses with proper error handling
- Model Flexibility: Easy switching between different AI providers
- Artifact System: Persistent code generation with version control
# Development
npm run dev # Start dev server with Workers runtime
npm run build # Production build
npm run preview # Preview production build
# Code Quality
npm run lint # ESLint checking
npm run format # Prettier formatting
npm run typecheck # TypeScript validation
# Testing
npm run test # Run unit tests
npm run test:e2e # Playwright E2E tests
npm run test:coverage # Coverage report
# Cloudflare
wrangler deploy # Deploy to Cloudflare
wrangler d1 migrations apply <DB> # Run database migrationsComprehensive guides and API documentation:
- Getting Started Guide - Complete setup walkthrough
- AI Features Guide - Using AI models and chat
- WebSocket Guide - Real-time feature implementation
- Deployment Guide - Production deployment steps
- API Reference - Interactive OpenAPI docs
We welcome contributions! Please see our Contributing Guide for details.
This project builds upon the excellent shadcn-admin template by @satnaing.
Original Template Credits: Crafted with 🤍 by @satnaing
ShadFlare AI Enhancements: Built with ⚡ by the ShadFlare AI team
Licensed under the MIT License
- Cloudflare Team - For the incredible Workers platform and AI models
- Vercel Team - For the excellent AI SDK integration patterns
- shadcn - For the beautiful UI component system
- Original shadcn-admin - @satnaing for the excellent foundation
⭐ If this project helps you, please consider giving it a star!
