🎨 Vector Magic - AI SVG Generator

Transform text descriptions into beautiful SVG graphics using AI. Built with Next.js 16, React 19, and Groq's free AI platform.

✨ Features

• AI-Powered: Uses Groq's Llama 3.3 70B model for SVG generation
• Live Preview: See your SVG render instantly
• Export: Copy code or download as .svg file
• Beautiful UI: Dark theme with glassmorphic design
• 100% Free: Groq's free tier (14,400 requests/day)
• Type-Safe: Built with TypeScript

🚀 Quick Start

1. Clone and install

   git clone <your-repo-url>
   cd vector-magic   
   npm install

2. Get free Groq API key

   • Visit console.groq.com
   • Sign up and create an API key

3. Configure environment

   # Create .env.local
   GROQ_API_KEY=your_groq_api_key_here

4. Run

   npm run dev

   Open http://localhost:3000

🎯 Usage

1. Enter a description: "A broken heart in red" or "A retro sunburst"
2. Click "GENERATE SVG"
3. View preview and code
4. Copy or download your SVG

📁 Structure

app/
├── actions/generateSVG.ts    # AI generation
├── components/               # UI components  
├── globals.css              # Styles
└── page.tsx                 # Main page
lib/utils.ts                 # Utilities

🛠️ Tech Stack

• Next.js 16 + React 19
• TypeScript
• Tailwind CSS 4
• Groq AI (Llama 3.3 70B)
• Server Actions

📝 Example Prompts

• "A broken heart in red"
• "A retro sunburst pattern"
• "Geometric hexagon tessellation"
• "A simple book with a unicorn on the cover"

🚀 Deploy

Add GROQ_API_KEY as environment variable.

---

Built with Next.js + Groq AI