A playful web app that lets you create wacky, AI-powered stories and images! Choose from a list of silly creatures, verbs, and adjectives, then generate a unique story and an AI-generated picture to match.
To be able to play with the app, you can visit the live demo at: https://kathleenwest.github.io/wacky-madlib-frontend/
😂Wacky Madlib App Made THIS?! Watch on YouTube
🦝✨ Ever wondered what happens when you mix AI with total nonsense? Meet the Wacky Madlib App—where YOU choose the words (like “Disco Raccoon,” “Boogie,” and “Squishy”), and the AI turns them into a hilariously unhinged story… then generates an image to match. Yes, it’s as weird as it sounds—and yes, you’re going to love it.
🎉 In this short demo, watch the magic unfold as our AI spins your wildest word combos into a story that makes zero sense and 100% joy. Bonus: You get to see a raccoon in bell-bottoms. You’re welcome.
🧠 Built with Cloudflare Workers + AI wizardry 🎨 Story + Image = Instant chaos 😂 Try it. Share it. Confuse your friends. 👉 Like, comment, and subscribe for more AI-powered absurdity!
Watch the funny marketing demo video on YouTube
🎬 Madlibs, Mayhem & Magic: Behind the Code and Demo of My AI Generator Watch on Youtube
Ready for an AI-powered rollercoaster of absurdity and innovation? In this demo, I take you deep into the colorful chaos of my Madlib Generator web app, where users throw in wild nouns, quirky verbs, and eccentric adjectives to spark utterly ridiculous stories. Once a story is born, DALL·E jumps in to create matching visuals—unless you're stuck in cache déjà vu! 💥 This app is lightning-fast thanks to Cloudflare Workers and a strategically crafted AI Gateway that caches responses, reduces costs, and keeps the backend humming.
But it’s not just about the giggles—this walkthrough dives into the technical nuts and bolts. I break down the architecture from frontend to backend, show how token usage and caching strategies are logged in real time, and even zoom into analytics dashboards to analyze traffic patterns, response times, and OpenAI API usage legs. Whether you're here for the weird stories or the sleek design powered by vanilla JavaScript, it’s a wild blend of creativity, performance, and practical engineering. Buckle up, because this isn’t just a demo—it’s a celebration of playful problem-solving at the edge. 🚀🧠
Watch the complete video on Youtube
Wacky Madlib Generator is a simple, interactive frontend built with Vite and vanilla JavaScript. It connects to a backend powered by OpenAI (via Cloudflare Workers) to generate both stories and images based on user selections.
This frontend app communicates with the backend through a Cloudflare AI Gateway. The AI Gateway acts as a proxy between the frontend and the OpenAI-powered backend, providing enhanced security, observability, and cost management for AI API usage.
- Select from a list of wacky creatures, verbs, and adjectives.
- Instantly generate a unique, AI-created story.
- Create a matching AI-generated image for your story.
- Fun, colorful, and easy-to-use interface.
Frontend (Vite, JS, HTML, CSS)
|
| (POST /madlib, /image via Cloudflare AI Gateway)
v
Cloudflare AI Gateway
|
v
Backend (Cloudflare Worker, OpenAI API)
- Frontend: Handles user input, displays results, and communicates with the backend via fetch requests.
- Cloudflare AI Gateway: Proxies requests from the frontend to the backend, providing rate limiting, logging, and security for AI API calls.
- Backend: Receives requests, uses OpenAI's API to generate stories and images, and returns the results.
The Cloudflare AI Gateway is used to securely route all AI-related API requests from the frontend to the backend. This approach offers several benefits:
- Security: Hides backend endpoints and API keys from the client.
- Observability: Provides analytics and monitoring for AI API usage.
- Cost Control: Enables caching and rate limiting to manage AI costs.
- Reliability: Adds an extra layer of protection against abuse and downtime.
index.html– Main HTML pagestyle.css– App stylingscript.js– Handles UI logic and API callsvite.config.js– Vite configurationpackage.json– Project metadata and scriptslogo.png,favicon.ico– Branding assets
-
Clone the repository:
git clone <your-repo-url> cd wacky-madlib-chat-app-simple-example-frontend
-
Install dependencies:
npm install
-
Development mode:
npm run dev
Open http://localhost:5173 in your browser.
-
Production build:
npm run build npm run preview
- Select a creature, verb, and adjective from the dropdowns.
- Click Generate Story to create your wacky story.
- Click Create a Picture to generate an AI image based on your story.
/madlib– Accepts{ noun, verb, adjective }and returns a generated story./image– Accepts{ prompt }(the story) and returns a base64-encoded image.
Note: The backend is hosted at
https://openai-worker.kathleen-elizabeth-west.workers.dev/
All requests are routed through the Cloudflare AI Gateway for security and observability.
To reduce AI costs, story and image responses are cached for 1 month.
A Cloudflare Worker with simple HTTP endpoints for generating Madlib stories and images using OpenAI APIs. Features /madlib for story creation and /image for AI-generated images. Built with itty-router and the OpenAI Node.js SDK.
- 🚀 by Kathleen West
- Powered by OpenAI, Cloudflare Workers, and Cloudflare AI Gateway
Keep the nonsense alive!