A minimal creative playground for generating images and video with Grok AI via Vercel AI Gateway, built with Next.js and the AI SDK.
- Image generation with Grok Imagine via AI Gateway
- Video generation with Grok Imagine Video via AI Gateway
- Image and video editing (remix mode)
- Explore grid with 30 built-in seed generations
- Local text search (no external services needed)
- Works with just one environment variable (
AI_GATEWAY_API_KEY)
cp .env.example .env.local
# Add your AI_GATEWAY_API_KEY to .env.local
npm install
npm run devOpen http://localhost:3000.
| Variable | Required | Description |
|---|---|---|
AI_GATEWAY_API_KEY |
Yes | Vercel AI Gateway key (docs) |
DATABASE_URL |
No | Neon PostgreSQL connection string |
BLOB_READ_WRITE_TOKEN |
No | Vercel Blob storage token |
MUX_TOKEN_ID |
No | Mux video token ID |
MUX_TOKEN_SECRET |
No | Mux video token secret |
MIXEDBREAD_API_KEY |
No | Mixedbread vector search key |
| Feature | AI_GATEWAY_API_KEY only |
+ DATABASE_URL |
+ All integrations |
|---|---|---|---|
| Explore grid | 30 seed items | DB-backed | DB-backed |
| Image generation | Base64 output | Persisted to DB | + Blob URLs + visual search |
| Video generation | Temporary URL | Persisted to DB | + HLS streaming (Mux) |
| Search | Local text filter | SQL ILIKE | + Visual search (Mixedbread) |
| Permanent URLs | No | No | Yes (Vercel Blob) |
If you want persistent storage:
# Set DATABASE_URL in .env.local, then:
npm run db:setup # Creates tables
npm run db:seed # Populates with sample data- Next.js 16 with App Router
- AI SDK + Vercel AI Gateway
- Vercel Blob for file storage
- Mux for video streaming
- Neon for PostgreSQL
- Tailwind CSS for styling