How We Generate Bingo Cards with AI in 10 Seconds

#ai #nextjs #gemini #webdev

Type "Super Bowl party" into BingWow and you get 25 themed bingo clues in about 10 seconds. Clues stream in one at a time while you watch. You can swap any clue with an AI-generated replacement, adjust the tone (playful vs. realistic), or edit the text directly.

Here's how the generation pipeline works.

The Streaming Approach

We use Google's Gemini API with server-sent events (SSE). The prompt includes the topic, desired tone, grid size, and any existing clues to avoid duplicates. Clues stream to the client as they're generated -- the board fills in progressively instead of making the user wait for all 25.

POST /api/templates/generate-clues
→ SSE stream of clues
→ Client appends each clue to the board in real time

The tone control gives users three options: Playful (puns, exaggeration, humor), Balanced (mix of funny and realistic), and Realistic (things that actually happen). The prompt engineering for each tone took more iteration than any other part of the system.

Why Not Just GPT-4?

We use Gemini for clue generation and Claude for content moderation. The split is intentional:

Gemini (clue generation): Faster streaming, cheaper per token, good at creative list generation. The clues are short (under 50 characters each), so the model's creative writing quality matters less than speed.
Claude (moderation): Better at nuanced content review. When a user-created card goes through moderation, Claude classifies it as KEEP, DELETE, or IMPROVE (rewrite + publish). The IMPROVE path rewrites inappropriate clues while preserving the card's theme.

Semantic Deduplication

A common failure mode: the AI generates "Someone scores a touchdown" and "A touchdown is scored." Same clue, different words. We run semantic dedup after generation -- computing embedding similarity between all clue pairs and replacing duplicates.

Background Image Generation

When you create a card, we also generate a background image via Replicate's FLUX Schnell model. The image goes through a text detection step (Claude Haiku vision) -- if readable text is detected in the image, we discard it and assign a fallback background. Text in background images makes clue text unreadable.

The full pipeline (clue generation + background image) completes in under 15 seconds. The image usually finishes before the clues.

Content Moderation Pipeline

Every user-created card runs through:

Deterministic checks (blocked words, spam patterns)
AI review (Claude classifies KEEP/DELETE/IMPROVE)
Auto-categorization (assigns the card to the right topic category)
Icon assignment (matches a Noun Project icon via embedding similarity)

Cards are playable immediately (even before moderation completes). The moderation runs in after() so it doesn't block the response.

DEV Community