About

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: 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.

Play

To be able to play with the app, you can visit the live demo at: https://kathleenwest.github.io/wacky-madlib-frontend/

wacky-madlib-frontend

A playful web app for generating wacky, AI-powered stories and images. Built with Vite and vanilla JS, it connects to an OpenAI backend via Cloudflare Workers and the Cloudflare AI Gateway for secure and efficient AI API usage. Great for fun, creativity, and demoing modern AI integration.

cloudflare-openai-worker

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.

😂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

Code

View the Code on GitHub

• Backend
• Frontend

The following resources were helpful in building this project:

Scrimba – The AI Engineer Path: https://scrimba.com/the-ai-engineer-path-c02v