Powered by Google's Gemini AI • Real-time streaming
Generative UI is an innovative application that leverages Google's Gemini AI to automatically generate React components from your data. Simply paste CSV, JSON, or plain text, and watch as AI transforms it into beautiful, interactive visualizations.
- Zero-config component generation - No templates or configurations needed
- Real-time streaming - See components materialize as they're generated
- Production-ready output - Generated components use shadcn/ui and Recharts
- Dark/Light theme support - Seamless theme switching with system preference detection
- Type-safe - Full TypeScript support with proper type inference
- Edge-optimized - Runs on Vercel Edge Runtime for maximum performance
- 🤖 AI-Powered Generation - Transforms raw data into React components using Gemini 2.5 Flash Lite
- 📊 Smart Visualizations - Automatically selects appropriate chart types based on data structure
- 🌓 Theme Support - Beautiful dark and light themes with smooth transitions
- 🎲 Sample Data Generation - AI can create realistic datasets for testing
- CSV - Comma-separated values with headers
- JSON - Objects, arrays, and nested structures
- Plain Text - Markdown tables, lists, or structured text
- Markdown - Tables and formatted content
- 📊 Charts - Bar, Line, Area, Pie, Radar, and Composed charts
- 📋 Tables - Sortable, filterable data tables with pagination
- 🃏 Cards - Metric cards, stat cards, and info cards
- 📈 Dashboards - Multi-widget analytical dashboards
- 🗂️ Tabs - Organized multi-view interfaces
- 📝 Lists - Task lists, timelines, and activity feeds
- Next.js 15 - React framework with App Router
- React 19 - Latest React with improved performance
- TypeScript - Type safety and better DX
- Tailwind CSS v4 - Utility-first styling
- shadcn/ui - High-quality React components
- Recharts - Composable charting library
- Google Gemini AI - Gemini 2.5 Flash Lite model
- Vercel AI SDK - Streaming AI responses
- next-themes - Theme management
- Lucide Icons - Beautiful open-source icons
- Node.js 18.17 or later
- npm, yarn, or pnpm
- Google AI Studio API key
-
Clone the repository
git clone https://github.com/codeer-ai/generative-ui.git cd generative-ui -
Install dependencies
npm install # or yarn install # or pnpm install
-
Set up environment variables
cp .env.example .env.local
-
Add your Google API key
Get your API key from Google AI Studio and add it to
.env.local:GOOGLE_API_KEY=your_api_key_here
-
Start the development server
npm run dev # or yarn dev # or pnpm dev
-
Open the app
Visit http://localhost:3000 in your browser
-
Input your data in one of the supported formats:
Month,Revenue,Expenses Jan,50000,30000 Feb,60000,35000 Mar,75000,40000 -
Click "Generate UI" to create a component
-
View the result - Your component will render below with full interactivity
Click "Generate Sample Data" to let AI create realistic datasets:
- Fitness tracking with activities and metrics
- Library book collections with ratings
- Restaurant order management
- Weather monitoring across locations
- Employee directories with departments
- And more...
The AI understands context, so you can guide generation:
- Add a title row for dashboard layouts
- Include metadata for specific chart types
- Use descriptive column names for better components
Sales Dashboard CSV
Product,Q1,Q2,Q3,Q4,Total
Widget A,12500,15000,18000,22000,67500
Widget B,8000,9500,11000,13500,42000
Widget C,5500,6000,7500,9000,28000
Task Management JSON
[
{
"task": "Implement user authentication",
"status": "completed",
"priority": "high",
"assignee": "John Doe"
},
{
"task": "Design dashboard layout",
"status": "in-progress",
"priority": "medium",
"assignee": "Jane Smith"
}
]graph LR
A[User Input] --> B[API Route]
B --> C[Gemini AI]
C --> D[Component String]
D --> E[Streaming Response]
E --> F[Dynamic Component]
F --> G[Babel Transform]
G --> H[Rendered UI]
Handles AI component generation with streaming support:
- Validates input data
- Constructs optimized prompts
- Streams component code
- Implements error recovery
Runtime component renderer with:
- Babel transformation
- Error boundaries
- Component validation
- Auto-fixing common issues
Main application interface featuring:
- Real-time updates
- Theme-aware styling
- Responsive layout
The system uses carefully crafted prompts that:
- Specify component requirements
- Include shadcn/ui component imports
- Define Recharts chart configurations
- Handle edge cases and data validation
- Fork or clone the repository
- Push to your GitHub account
- Import to Vercel:
- Go to vercel.com/new
- Import your repository
- Add environment variables
- Deploy
| Variable | Description | Required |
|---|---|---|
GOOGLE_API_KEY |
Google AI Studio API key | ✅ Yes |
generative-ui/
├── app/
│ ├── api/
│ │ ├── generate/ # Component generation endpoint
│ │ └── generate-data/ # Sample data generation
│ ├── fonts/ # Local font files
│ ├── globals.css # Global styles & theme tokens
│ ├── layout.tsx # Root layout with providers
│ └── page.tsx # Main application UI
├── components/
│ ├── ui/ # shadcn/ui components
│ ├── dynamic-component.tsx # Runtime renderer
│ ├── theme-provider.tsx # Theme context
│ └── theme-toggle.tsx # Theme switcher
├── lib/
│ └── utils.ts # Utility functions
├── public/ # Static assets
├── .env.example # Environment template
├── components.json # shadcn/ui config
├── next.config.ts # Next.js configuration
├── tailwind.config.ts # Tailwind configuration
└── vercel.json # Deployment config
# Development
npm run dev # Start dev server
npm run build # Build for production
npm run start # Start production server
npm run lint # Run ESLint
npm run type-check # Run TypeScript compiler
# Component Management
npx shadcn@latest add [component] # Add shadcn/ui components