PlayableAdStudio is an AI-powered platform that generates playable ads — interactive HTML mini-games used in hyper-casual mobile ad campaigns — by combining LLM-driven code generation with a serverless edge runtime on Cloudflare Workers. The result is a marketing automation pipeline that produces production-ready ad creatives in under 30 seconds, at near-zero incremental cost, while giving each client full control over their AI model keys through a bring-your-own-key (BYOK) architecture.
The Problem
Hyper-casual mobile game advertisers face a brutal creative churn problem. A single campaign might need 50+ unique playable ad variants to A/B test hooks, rewards, difficulty curves, and visual themes. Each playable ad is a self-contained HTML/JS/CSS mini-game — an interactive experience, not a static image — and each variant must render reliably across thousands of device configurations.
Before PlayableAdStudio, agencies and in-house creative teams built these by hand. A single playable ad could take 4–8 hours of development time. Multiply that by 50 variants across 14 game genres, and the math is punishing: 200–400 engineering hours per campaign. The bottleneck isn't creative ideation — it's the sheer mechanical effort of writing, testing, and packaging interactive HTML ads.
Existing solutions fell into two camps. Template-based WYSIWYG editors were fast but inflexible — every ad looked formulaic and conversion rates suffered. Manual HTML development produced high-quality ads but couldn't scale. The market needed a third path: automate the engineering without sacrificing the creative.
The Solution
PlayableAdStudio treats playable ad generation as a code synthesis problem. At its core, the platform uses a multi-stage LLM pipeline that takes a campaign brief (game genre, brand assets, conversion goal, difficulty parameters) and outputs a complete, self-contained HTML page with embedded JavaScript and CSS.
The key architectural insight was to make the LLM pipeline hybrid: the platform orchestrates generation, but each client supplies their own API keys (OpenAI, Anthropic, or compatible endpoints). This BYOK model solved two problems at once. It eliminated per-token infrastructure costs for the platform — the serverless Workers only pay for compute, not inference — and it let enterprise clients route generation through their own audited AI accounts, satisfying procurement and compliance requirements.
Architecture
The platform runs entirely on Cloudflare Workers, using D1 for relational storage and KV for caching and session state. The architecture breaks into five layers:
**Ingestion Layer**: A Worker endpoint accepts campaign briefs as JSON payloads. A brief includes game genre (from 14+ supported genres like "runner," "tapper," "stacker"), visual style, CTA text, target metrics, and brand colors/assets.
**LLM Orchestration Layer**: This is the brain. A Worker function constructs a chain of prompts — genre-specific system prompts, few-shot examples drawn from D1, and the user's campaign parameters. It streams requests to the client-configured OpenAI or Anthropic endpoint. The BYOK credential is fetched from KV (keyed on tenant ID) so the key never touches the request path.
**Code Assembly Layer**: The LLM returns raw HTML, JS, and CSS — but it's rarely perfect on the first pass. A secondary validation Worker runs the generated code through a headless DOM checker: it verifies syntax, confirms the game loop initializes without errors, checks asset references, and validates responsive viewport sizing. If validation fails, the orchestrator retries with error feedback.
**Canva MCP Pipeline**: Once the code passes validation, a Canva MCP integration overlays branded templates — logos, font families, CTA buttons — onto the generated ad. This decouples brand rigidity from creative flexibility. The game logic is LLM-generated and unique; the chrome around it is template-driven and brand-compliant.
**Delivery Layer**: The finished playable ad is stored in KV with a short TTL, and a signed URL is returned for immediate preview or direct ad network upload. The entire pipeline, from brief submission to playable URL, averages 18–28 seconds.
Implementation
Here is how the core LLM orchestration Worker is structured:
```typescript
export default {
async fetch(request: Request, env: Env): Promise<Response> {
const brief = await request.json() as CampaignBrief;
// 1. Fetch tenant BYOK credential from KV
const apiKey = await env.KV_KEYS.get(brief.tenantId);
const modelConfig = await env.DB
.prepare("SELECT provider, model FROM tenant_config WHERE tenant_id = ?")
.bind(brief.tenantId).first();
// 2. Retrieve few-shot examples from D1 by genre
const examples = await env.DB
.prepare("SELECT code_snippet FROM genre_examples WHERE genre = ?")
.bind(brief.genre).all();
// 3. Construct the prompt chain
const systemPrompt = buildSystemPrompt(brief.genre, examples.results);
const userPrompt = buildUserPrompt(brief);
// 4. Call the LLM (OpenAI or Anthropic based on tenant config)
const generated = await callLLM(modelConfig, apiKey, systemPrompt, userPrompt);
// 5. Validate generated code in headless check
const validation = await validateCode(generated.html);
if (!validation.passed) {
// Retry with error feedback up to 2 times
return retryWithFeedback(brief, validation.errors);
}
// 6. Route to Canva MCP for templating
const finalAd = await applyCanvaTemplate(generated.html, brief.brandConfig);
// 7. Cache and return signed URL
const adKey = `ad:${crypto.randomUUID()}`;
await env.KV.put(adKey, finalAd, { expirationTtl: 86400 });
return new Response(JSON.stringify({ url: `/preview/${adKey}` }));
}
};
```
A few design decisions deserve emphasis. The retry-with-feedback loop is the single highest-lift feature — it accounts for roughly 40% of the Worker's CPU time but improves first-pass quality from 62% to 89%. The BYOK credentials are stored encrypted at rest in KV, decrypted only in-memory at request time, and never logged. The Canva MCP integration runs as a separate sub-request to keep the template overlay logic decoupled from the generation pipeline.
Results
Production metrics from the first three months of operation, during which the platform generated over 4,200 playable ads across 14 genres:
- **Average generation time**: 23 seconds (p95: 41 seconds)
- **First-pass validation pass rate**: 89% after retry-with-feedback
- **Worker invocation cost**: $0.000003 per ad generated (essentially zero)
- **Inference cost**: borne entirely by clients via BYOK — platform pays $0
- **Ad variants generated per campaign**: up to 200 without incremental engineering cost
- **Manual development time eliminated**: ~6 hours per ad, or ~1,200 hours over the 200-ad campaign lifecycle
One enterprise client running simultaneous iOS and Android campaigns for a puzzle game reported that their previous workflow required three front-end engineers working full-time to produce 30 playable variants per week. With PlayableAdStudio, the same team produced 120 variants in a single afternoon, then A/B tested them all in parallel. Their campaign CPI dropped 34% because they could rapidly find and double down on winning creative formats.
Key Takeaways
PlayableAdStudio demonstrates a template worth borrowing for any marketing automation product that involves content generation:
**LLMs as the assembly line, not the factory.** The LLM generates the unique game logic, but the platform's structural integrity comes from validation, retry logic, template overlays, and serverless orchestration. Treat the LLM as a skilled but fallible contractor — never as the final arbiter of quality.
**BYOK is a go-to-market superpower for B2B AI products.** Letting clients use their own API keys removes the single biggest objection to AI-powered SaaS: "We don't want our data touching your model provider." It also eliminates margin compression on inference costs. PlayableAdStudio's variable cost per ad is effectively zero.
**Serverless edge compute flips the economics of ad tech.** Each playable ad generation involves multiple Workers, D1 queries, KV lookups, an LLM round trip, and a Canva API call — and it costs less than a fraction of a cent. That makes the unit economics viable for free tier, self-serve onboarding, and high-volume enterprise campaigns alike.
**Dev+marketing hybrid requires both a pipeline and a feedback loop.** The retry-with-validation architecture is the bridge between "the LLM wrote some code" and "this code runs reliably on a million phones." Marketing automation powered by generated code needs runtime validation — not just prompt engineering — to work at scale.
PlayableAdStudio's architecture proves that the intersection of LLM code generation and serverless edge infrastructure isn't just a technical curiosity — it's a practical blueprint for the next generation of marketing automation tools.