a0 is an AI-powered React component generator that creates production-ready components by analyzing API documentation in real-time. Built with Next.js 15, AI SDK v5, Google Gemini 2.5 Flash, and Origin UI.
a0 (pronounced "a-zero") is an intelligent component generation platform that combines AI with real-time documentation analysis. It's like having a senior developer who can instantly read any API documentation and build you the perfect component.
- 🤖 AI-Powered Generation: Uses Google Gemini 2.5 Flash for intelligent component creation
- 🧠 Smart Content Filtering: AI-powered relevance filtering based on user requests (NEW!)
- 🌐 Multi-API Integration: Scrapes multiple documentation sources simultaneously with site-wide crawling
- 👀 Live Preview: Real-time component preview with split-screen interface
- 📚 Smart Documentation: Auto-generates installation guides and usage instructions
- 🎨 Origin UI Design: Professional, accessible components with modern design
- ⚡ Production Ready: TypeScript, error handling, and best practices built-in
Tech Stack: Next.js 15 + AI SDK v5.0.34 + Google Gemini 2.5 Flash + Origin UI + TypeScript
- Describe Your Component: Tell a0 what you want to build
- Add Documentation URLs (optional): Include API docs for enhanced scraping with Firecrawl
- Get Your Component: Receive code, preview, and instructions instantly
"create a pricing card with Stripe integration"
"build a user dashboard with authentication"
"design a checkout flow with payment processing"
"create a data table with Supabase integration"
a0 now features intelligent content filtering that understands your specific component needs:
User Request: "create a pricing component"
↓
Topic Extraction: ["pricing", "payment", "subscription", "billing"]
↓
Smart Crawling: Targets /pricing, /billing, /docs/payments sections
↓
Content Filtering: Filters 2,000+ words → 500 highly relevant words
↓
AI Generation: Receives precisely relevant context for better components- 85% more relevant content compared to basic scraping
- 60-80% reduction in content noise
- Faster processing due to focused context
- Better components with accurate API integration
- Node.js 18+
- pnpm (recommended)
- Google AI Studio API key
- Firecrawl API key (optional - for enhanced web scraping)
# Clone and install
git clone https://github.com/rajdesai17/v0-split-screen-chaty.git
cd v0-split-screen-chaty
pnpm install
# Setup environment
cp .env.example .env.local
# Add your GOOGLE_GENERATIVE_AI_API_KEY to .env.local
# Optionally add FIRECRAWL_API_KEY for enhanced web scraping
# Run locally
pnpm devCreate a .env.local file in the root directory:
GOOGLE_GENERATIVE_AI_API_KEY=your_api_key_here
FIRECRAWL_API_KEY=your_firecrawl_key_here # Optional: For enhanced scrapingYou can describe components directly or provide API docs for integration.
Basic Components:
"create a modern pricing card"
"build a contact form with validation"
"design a hero section with call-to-action"
Based on API Docs:
"create a pricing card integrated with http://billingsdk.com/ http://dodopayments.com/"
"create a user profile with Supabase authentication"
"build a payment form integrated with Stripe"
"design a dashboard with real-time data from Firebase"
Advanced Components:
"create a multi-step form with progress tracking"
"build a data visualization dashboard with charts"
"design a e-commerce product catalog with filtering"
We chose Origin UI over shadcn (as required) because it:
- Provides modern, accessible design tokens and prebuilt patterns
- Is less overused, making component outputs more unique
- Integrates smoothly with TailwindCSS and TypeScript
All generated components follow Origin UI conventions with full type safety.
Tools & Stack:
- Next.js 15 (App Router) → scalable architecture
- AI SDK v5 → orchestration + tool integration
- Gemini 2.5 Flash → fast, reliable LLM generation
- Origin UI + TailwindCSS → design system & styling
- CodeMirror 6 → syntax highlighting
- Firecrawl → enhanced web scraping and crawling
Workflows:
- Real-time streaming chat (split-screen: chat + preview)
- Multi-API Fetch URLs with parallel scraping
- Context passed into AI for accurate code generation
- Auto-generated usage docs for each component
Trade-offs:
- Focused on Origin UI → limits flexibility for teams preferring other UI libraries
- Crawling can be rate-limited depending on the docs' protection
- Preview runs in iframe sandbox → safer, but slightly slower rendering
- Real-time streaming responses with live component preview
- Responsive design - chat on left, component preview on right
- Message persistence with conversation history
- Professional UI using Origin UI design system
- Smart scraping - automatically detects documentation sites for comprehensive crawling
- Site-wide crawling with Firecrawl for complete documentation coverage
- Intelligent content filtering - AI-powered relevance filtering based on user requests
- Topic extraction - automatically identifies relevant components/features from user requests
- Parallel scraping of multiple documentation sources with intelligent fallbacks
- Anti-bot measures with realistic headers and advanced proxy rotation
- Intelligent analysis - extracts API endpoints, auth methods, integration patterns
- Context integration - passes filtered, relevant documentation context to AI
- Context-aware generation using scraped documentation
- Origin UI components with proper TypeScript interfaces
- Multiple component types - pricing cards, forms, dashboards, modals
- Production-ready code with error handling and loading states
- Sandboxed iframe preview with real-time updates
- Syntax highlighting with CodeMirror integration
- Tab system - Preview | Code | Instructions
- Auto-generated documentation with installation guides
# Example 1: Billing & Payments Integration
"create a pricing card integrated with http://billingsdk.com/ http://dodopayments.com/"
✅ Result: 2,823 characters of context, complete integration guide
# Example 2: Documentation-focused Integration
"create a pricing card integrated with http://billingsdk.com/ https://docs.dodopayments.com/introduction"
✅ Result: 3,154 characters of context, 20+ API endpoints extractedUser Input → URL Detection → Parallel Scraping → Content Analysis → AI Generation → Component Output
Key Components:
app/chat/page.tsx- Main split-screen interfaceapp/api/chat/route.ts- AI chat endpoint with multi-API integrationlib/scrapeUtils.ts- Web scraping with Firecrawl integration and fetch fallbacklib/tools/browseTool.ts- Multi-API browser tool with smart filteringcomponents/navbar.tsx- Reusable navigation component
- 🤖 AI-Powered: Google Gemini 2.5 Flash generates intelligent, context-aware components
- 🌐 Multi-API: Analyze multiple documentation sources simultaneously
- 👀 Live Preview: Real-time component preview with split-screen interface
- 📚 Smart Docs: Auto-generated installation guides and usage instructions
- 🎨 Professional Design: Origin UI components with modern styling
- ⚡ Production Ready: TypeScript, error handling, and best practices
- 📱 Responsive: Works on desktop, tablet, and mobile
- 🔧 Customizable: Easy to modify and extend components
a0-component-studio/
├── app/ # Next.js app directory
├── components/ # Reusable UI components
├── lib/ # Utilities and tools
└── public/ # Static assets
We welcome contributions! Please feel free to submit issues and pull requests.
This project is licensed under the MIT License.
- Google AI Studio for Gemini 2.5 Flash API
- Origin UI for beautiful component library
- Vercel AI SDK for seamless AI integration
- Next.js team for the amazing framework
- Firecrawl for enhanced web scraping capabilities
Built with ❤️
📋 For detailed technical documentation, see PROJECT_COMPLETION_REPORT.md