{"id":28911532,"url":"https://github.com/codeer-ai/generative-ui","last_synced_at":"2026-04-16T04:02:52.075Z","repository":{"id":300237495,"uuid":"1005616686","full_name":"codeer-ai/generative-ui","owner":"codeer-ai","description":"Transform your data into beautiful, interactive React components using AI. Powered by Google Gemini 2.5 Flash Lite with real-time streaming and modern UI components.","archived":false,"fork":false,"pushed_at":"2026-01-14T14:51:25.000Z","size":261,"stargazers_count":5,"open_issues_count":1,"forks_count":1,"subscribers_count":0,"default_branch":"main","last_synced_at":"2026-01-14T18:21:47.636Z","etag":null,"topics":["ai","data-visualization","gemini","generative-ui","nextjs","react","typescript"],"latest_commit_sha":null,"homepage":"https://generative-ui-cyan.vercel.app/","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/codeer-ai.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null,"zenodo":null,"notice":null,"maintainers":null,"copyright":null,"agents":null,"dco":null,"cla":null}},"created_at":"2025-06-20T14:14:14.000Z","updated_at":"2025-12-11T12:45:30.000Z","dependencies_parsed_at":null,"dependency_job_id":"4a2ba209-abbb-4d37-b26e-9bc8677e15f3","html_url":"https://github.com/codeer-ai/generative-ui","commit_stats":null,"previous_names":["codeer-ai/generative-ui"],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/codeer-ai/generative-ui","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/codeer-ai%2Fgenerative-ui","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/codeer-ai%2Fgenerative-ui/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/codeer-ai%2Fgenerative-ui/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/codeer-ai%2Fgenerative-ui/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/codeer-ai","download_url":"https://codeload.github.com/codeer-ai/generative-ui/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/codeer-ai%2Fgenerative-ui/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":31870516,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-04-15T15:24:51.572Z","status":"online","status_checked_at":"2026-04-16T02:00:06.042Z","response_time":69,"last_error":null,"robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":true,"can_crawl_api":true,"host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["ai","data-visualization","gemini","generative-ui","nextjs","react","typescript"],"created_at":"2025-06-21T19:08:50.742Z","updated_at":"2026-04-16T04:02:52.067Z","avatar_url":"https://github.com/codeer-ai.png","language":"TypeScript","readme":"# Generative UI\n\n\u003cdiv align=\"center\"\u003e\n  \u003cimg src=\"https://img.shields.io/badge/Next.js-15-black?style=flat-square\u0026logo=next.js\" alt=\"Next.js\" /\u003e\n  \u003cimg src=\"https://img.shields.io/badge/React-19-61DAFB?style=flat-square\u0026logo=react\u0026logoColor=black\" alt=\"React\" /\u003e\n  \u003cimg src=\"https://img.shields.io/badge/TypeScript-5.3-3178C6?style=flat-square\u0026logo=typescript\u0026logoColor=white\" alt=\"TypeScript\" /\u003e\n  \u003cimg src=\"https://img.shields.io/badge/Gemini_AI-2.5-4285F4?style=flat-square\u0026logo=google\u0026logoColor=white\" alt=\"Gemini AI\" /\u003e\n  \u003cimg src=\"https://img.shields.io/badge/License-MIT-green.svg?style=flat-square\" alt=\"License\" /\u003e\n\u003c/div\u003e\n\n\u003cdiv align=\"center\"\u003e\n  \u003ch3\u003eTransform your data into beautiful, interactive React components using AI\u003c/h3\u003e\n  \u003cp\u003ePowered by Google's Gemini AI • Real-time streaming \u003c/p\u003e\n\u003c/div\u003e\n\n\u003cdiv align=\"center\"\u003e\n  \u003ca href=\"#demo\"\u003eView Demo\u003c/a\u003e •\n  \u003ca href=\"#features\"\u003eFeatures\u003c/a\u003e •\n  \u003ca href=\"#quick-start\"\u003eQuick Start\u003c/a\u003e •\n  \u003ca href=\"#deployment\"\u003eDeploy\u003c/a\u003e •\n  \u003ca href=\"#contributing\"\u003eContributing\u003c/a\u003e\n\u003c/div\u003e\n\n---\n\n## 🎯 Overview\n\nGenerative 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. \n\n### 🚀 Key Highlights\n\n- **Zero-config component generation** - No templates or configurations needed\n- **Real-time streaming** - See components materialize as they're generated\n- **Production-ready output** - Generated components use shadcn/ui and Recharts\n- **Dark/Light theme support** - Seamless theme switching with system preference detection\n- **Type-safe** - Full TypeScript support with proper type inference\n- **Edge-optimized** - Runs on Vercel Edge Runtime for maximum performance\n\n## 📸 Demo\n\n🔗 **[Try the Live Demo](https://generative-ui-cyan.vercel.app/)**\n\n\u003cdetails\u003e\n\u003csummary\u003eView Screenshots\u003c/summary\u003e\n\n### Light Mode\n![Light Mode Preview](./public/demo.png)\n\n\u003c/details\u003e\n\n## ✨ Features\n\n### Core Capabilities\n\n- **🤖 AI-Powered Generation** - Transforms raw data into React components using Gemini 2.5 Flash Lite\n- **📊 Smart Visualizations** - Automatically selects appropriate chart types based on data structure\n- **🌓 Theme Support** - Beautiful dark and light themes with smooth transitions\n- **🎲 Sample Data Generation** - AI can create realistic datasets for testing\n\n### Supported Data Formats\n\n- **CSV** - Comma-separated values with headers\n- **JSON** - Objects, arrays, and nested structures\n- **Plain Text** - Markdown tables, lists, or structured text\n- **Markdown** - Tables and formatted content\n\n### Generated Component Types\n\n- 📊 **Charts** - Bar, Line, Area, Pie, Radar, and Composed charts\n- 📋 **Tables** - Sortable, filterable data tables with pagination\n- 🃏 **Cards** - Metric cards, stat cards, and info cards\n- 📈 **Dashboards** - Multi-widget analytical dashboards\n- 🗂️ **Tabs** - Organized multi-view interfaces\n- 📝 **Lists** - Task lists, timelines, and activity feeds\n\n## 🛠️ Tech Stack\n\n### Frontend\n- **[Next.js 15](https://nextjs.org/)** - React framework with App Router\n- **[React 19](https://react.dev/)** - Latest React with improved performance\n- **[TypeScript](https://www.typescriptlang.org/)** - Type safety and better DX\n- **[Tailwind CSS v4](https://tailwindcss.com/)** - Utility-first styling\n- **[shadcn/ui](https://ui.shadcn.com/)** - High-quality React components\n- **[Recharts](https://recharts.org/)** - Composable charting library\n\n### AI \u0026 Backend\n- **[Google Gemini AI](https://ai.google.dev/)** - Gemini 2.5 Flash Lite model\n- **[Vercel AI SDK](https://sdk.vercel.ai/)** - Streaming AI responses\n\n### Development\n- **[next-themes](https://github.com/pacocoursey/next-themes)** - Theme management\n- **[Lucide Icons](https://lucide.dev/)** - Beautiful open-source icons\n\n## 🚀 Quick Start\n\n### Prerequisites\n\n- Node.js 18.17 or later\n- npm, yarn, or pnpm\n- Google AI Studio API key\n\n### Installation\n\n1. **Clone the repository**\n   ```bash\n   git clone https://github.com/codeer-ai/generative-ui.git\n   cd generative-ui\n   ```\n\n2. **Install dependencies**\n   ```bash\n   npm install\n   # or\n   yarn install\n   # or\n   pnpm install\n   ```\n\n3. **Set up environment variables**\n   ```bash\n   cp .env.example .env.local\n   ```\n\n4. **Add your Google API key**\n   \n   Get your API key from [Google AI Studio](https://aistudio.google.com/app/apikey) and add it to `.env.local`:\n   ```env\n   GOOGLE_API_KEY=your_api_key_here\n   ```\n\n5. **Start the development server**\n   ```bash\n   npm run dev\n   # or\n   yarn dev\n   # or\n   pnpm dev\n   ```\n\n6. **Open the app**\n   \n   Visit [http://localhost:3000](http://localhost:3000) in your browser\n\n## 📖 Usage Guide\n\n### Basic Usage\n\n1. **Input your data** in one of the supported formats:\n   ```csv\n   Month,Revenue,Expenses\n   Jan,50000,30000\n   Feb,60000,35000\n   Mar,75000,40000\n   ```\n\n2. **Click \"Generate UI\"** to create a component\n\n3. **View the result** - Your component will render below with full interactivity\n\n### Advanced Features\n\n#### Generate Sample Data\nClick \"Generate Sample Data\" to let AI create realistic datasets:\n- Fitness tracking with activities and metrics\n- Library book collections with ratings\n- Restaurant order management\n- Weather monitoring across locations\n- Employee directories with departments\n- And more...\n\n#### Customize Output\nThe AI understands context, so you can guide generation:\n- Add a title row for dashboard layouts\n- Include metadata for specific chart types\n- Use descriptive column names for better components\n\n### Example Inputs\n\n\u003cdetails\u003e\n\u003csummary\u003eSales Dashboard CSV\u003c/summary\u003e\n\n```csv\nProduct,Q1,Q2,Q3,Q4,Total\nWidget A,12500,15000,18000,22000,67500\nWidget B,8000,9500,11000,13500,42000\nWidget C,5500,6000,7500,9000,28000\n```\n\u003c/details\u003e\n\n\u003cdetails\u003e\n\u003csummary\u003eTask Management JSON\u003c/summary\u003e\n\n```json\n[\n  {\n    \"task\": \"Implement user authentication\",\n    \"status\": \"completed\",\n    \"priority\": \"high\",\n    \"assignee\": \"John Doe\"\n  },\n  {\n    \"task\": \"Design dashboard layout\",\n    \"status\": \"in-progress\",\n    \"priority\": \"medium\",\n    \"assignee\": \"Jane Smith\"\n  }\n]\n```\n\u003c/details\u003e\n\n## 🏗️ Architecture\n\n### System Design\n\n```mermaid\ngraph LR\n    A[User Input] --\u003e B[API Route]\n    B --\u003e C[Gemini AI]\n    C --\u003e D[Component String]\n    D --\u003e E[Streaming Response]\n    E --\u003e F[Dynamic Component]\n    F --\u003e G[Babel Transform]\n    G --\u003e H[Rendered UI]\n```\n\n### Key Components\n\n#### `/app/api/generate/route.ts`\nHandles AI component generation with streaming support:\n- Validates input data\n- Constructs optimized prompts\n- Streams component code\n- Implements error recovery\n\n#### `/components/dynamic-component.tsx`\nRuntime component renderer with:\n- Babel transformation\n- Error boundaries\n- Component validation\n- Auto-fixing common issues\n\n#### `/app/page.tsx`\nMain application interface featuring:\n- Real-time updates\n- Theme-aware styling\n- Responsive layout\n\n### AI Prompt Engineering\n\nThe system uses carefully crafted prompts that:\n- Specify component requirements\n- Include shadcn/ui component imports\n- Define Recharts chart configurations\n- Handle edge cases and data validation\n\n## 🚀 Deployment\n\n### Deploy to Vercel (Recommended)\n\n[![Deploy with Vercel](https://vercel.com/button)](https://vercel.com/new/clone?repository-url=https%3A%2F%2Fgithub.com%2Fcodeer-ai%2Fgenerative-ui\u0026env=GOOGLE_API_KEY\u0026envDescription=Google%20API%20key%20for%20Gemini%20AI\u0026envLink=https%3A%2F%2Faistudio.google.com%2Fapp%2Fapikey\u0026project-name=generative-ui\u0026repository-name=generative-ui)\n\n### Manual Deployment\n\n1. **Fork or clone the repository**\n2. **Push to your GitHub account**\n3. **Import to Vercel**:\n   - Go to [vercel.com/new](https://vercel.com/new)\n   - Import your repository\n   - Add environment variables\n   - Deploy\n\n### Environment Variables\n\n| Variable | Description | Required |\n|----------|-------------|----------|\n| `GOOGLE_API_KEY` | Google AI Studio API key | ✅ Yes |\n\n## 🧪 Development\n\n### Project Structure\n\n```\ngenerative-ui/\n├── app/\n│   ├── api/\n│   │   ├── generate/          # Component generation endpoint\n│   │   └── generate-data/     # Sample data generation\n│   ├── fonts/                # Local font files\n│   ├── globals.css           # Global styles \u0026 theme tokens\n│   ├── layout.tsx            # Root layout with providers\n│   └── page.tsx              # Main application UI\n├── components/\n│   ├── ui/                   # shadcn/ui components\n│   ├── dynamic-component.tsx # Runtime renderer\n│   ├── theme-provider.tsx   # Theme context\n│   └── theme-toggle.tsx     # Theme switcher\n├── lib/\n│   └── utils.ts             # Utility functions\n├── public/                  # Static assets\n├── .env.example            # Environment template\n├── components.json         # shadcn/ui config\n├── next.config.ts         # Next.js configuration\n├── tailwind.config.ts     # Tailwind configuration\n└── vercel.json           # Deployment config\n```\n\n### Available Scripts\n\n```bash\n# Development\nnpm run dev          # Start dev server\nnpm run build       # Build for production\nnpm run start       # Start production server\nnpm run lint        # Run ESLint\nnpm run type-check  # Run TypeScript compiler\n\n# Component Management\nnpx shadcn@latest add [component]  # Add shadcn/ui components\n```\n","funding_links":[],"categories":[],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fcodeer-ai%2Fgenerative-ui","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fcodeer-ai%2Fgenerative-ui","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fcodeer-ai%2Fgenerative-ui/lists"}