How I Built an AI-Powered Demo Generator in 4 Weeks
DemoDonkey started as a frustration.
I was building Monkey Mentor — an AI study tool — and needed a demo video for the Product Hunt launch. Setting up a clean recording environment took three hours. The result looked mediocre. I thought: there has to be a better way.
Four weeks later, DemoDonkey is live.
Here's how it works under the hood.
The core idea
Instead of recording a real app, generate an interactive React component that simulates the app. The component is designed specifically for screen recording — browser chrome, smooth animations, realistic mock data, branded ending screen.
The user describes their product. Claude generates the component. Sandpack renders it live in the browser. The user screen records it.
The tech stack
- Next.js 16 (App Router) — full-stack framework
- Anthropic Claude (claude-sonnet-4-6) — component generation
- Sandpack (CodeSandbox) — live in-browser React rendering
- PostgreSQL + Prisma (Neon) — data persistence
- Upstash Redis — rate limiting
- Vercel — deployment
The hardest part: prompt engineering
Getting Claude to generate a consistent, runnable React component every time was the core engineering challenge.
The naive approach — "write a React component that simulates this product" — produces wildly inconsistent results. Sometimes great. Sometimes broken JSX. Sometimes missing the entire point of the product.
The solution was a highly constrained system prompt that enforces a rigid structural scaffold:
- Browser chrome wrapper is always present
- Four panels following a fixed flow pattern
- All mock data defined as top-level constants
- No external dependencies
- Specific keyframe animations required
- Fixed export format
Claude fills in the content — product-specific copy, realistic mock data, appropriate color schemes — but the structure is non-negotiable. This reduced variance dramatically.
Category biasing
Different product categories need different demo structures. An AI chat tool should look nothing like an analytics dashboard.
I built a categoryBias map that injects layout hints and interaction suggestions into the prompt based on the product category. An analytics product gets: "animate metric numbers counting up on mount, bar chart draws progressively." An AI tool gets: "show a thinking state before results appear."
This alone improved output quality by roughly 50%.
Sandpack integration
Sandpack renders arbitrary React code in a sandboxed iframe with no build step. This was the right call — alternatives like CodeSandbox embeds or spinning up a server-side renderer would have added significant complexity.
The main challenge was scaling. The generated component is designed at 1280x800px for screen recording quality. The preview panel is smaller. The solution: CSS transform: scale() using a ResizeObserver to calculate the correct scale factor dynamically.
Rate limiting without auth
DemoDonkey is currently pre-auth. Anyone can generate a demo without an account.
To prevent API abuse, every generation is rate-limited per IP using Upstash's sliding window implementation. The IP is extracted from the rightmost x-forwarded-for header to prevent spoofing.
Current limits: 1 generation per IP (prototype trial), 3 refinements per IP.
What's next
- Clerk authentication + Stripe billing
- Prompt caching to reduce Claude API costs
- MP4 export via Remotion Lambda
- More demo structure templates
The whole thing is running on Vercel with a Neon Postgres database. Total infrastructure cost at current scale: about $0/month.
If you want to try it, it's free at demodonkey.com.