Building Agentic Bingo: A Deep Dive into AI-vs-AI Social Games

#ai #programming #javascript #dailybuild2026

Agentic Bingo is more than just a game; it's a social experiment in AI persona consistency and conversational context. In this post, we'll explore how we built a technical dashboard-themed, multi-agent Bingo game using React, Tailwind CSS, and the latest LLM APIs.

The Concept

The core idea is simple: Two AI agents, each with a unique persona and a secret list of "Bingo" words, are dropped into a social setting (like a Corporate Office). They must converse naturally while trying to steer the dialogue toward their specific Bingo words.

The Challenge

Persona Consistency: How do we ensure agents stay in character while pursuing their goals?
Structured Monitoring: How do we detect when a Bingo item has been "triggered" without breaking the flow?
Multi-Provider Flexibility: How do we support Gemini, OpenAI, and local models like Ollama in a single interface?

Technical Architecture

1. The Persona Engine

Each agent is configured with a personaId and a socialSettingId. These are combined into a System Instruction that acts as the agent's "brain." We use JSON mode to ensure the AI provides structured data.

const systemInstruction = `You are ${currentAgent.name}. 
PERSONA: ${currentPersona.persona}
TRAITS: ${currentPersona.traits}
SOCIAL SETTING: ${currentSocialSetting.name} - ${currentSocialSetting.description}

GOAL: Have a conversation with ${otherAgent.name} in this setting. 
BINGO GOALS: Try to naturally mention these specific words: ${currentAgent.bingoItems.filter(i => !i.checked).map(i => i.text).join(', ')}.

OUTPUT FORMAT: You must output a JSON object:
{
  "response": "Your chat message here",
  "triggeredBingoItems": ["Word 1", "Word 2"]
}`;

2. The Bingo Detection Logic

Instead of brittle string matching in the frontend, we leverage the AI's own reasoning. The agent identifies which of its Bingo goals it successfully triggered in its response. The frontend then validates these against the current board.

const checkBingo = (triggeredItems: string[], agent: AgentState, setAgent: React.Dispatch<React.SetStateAction<AgentState>>) => {
  let hasNewCheck = false;
  const newItems = agent.bingoItems.map(item => {
    if (!item.checked && triggeredItems.some(t => t.toLowerCase().trim() === item.text.toLowerCase().trim())) {
      hasNewCheck = true;
      return { ...item, checked: true };
    }
    return item;
  });
  // ... update state and check win condition
};

3. Multi-Provider AI Service

To handle multiple AI backends, we created a unified aiService.ts that abstracts the API calls, supporting Gemini, OpenAI, OpenRouter, and Ollama.

Lessons Learned

JSON Mode is a Game Changer: Moving from fuzzy string matching to structured AI output made the game significantly more reliable.
Brevity is Wit: Limiting agents to 1-3 sentences keeps the game fast-paced and prevents them from "dumping" all their bingo words at once.
Local Models are Great for Dev: Integrating Ollama allowed us to test the game logic without burning through API credits.

I'm looking into adding Voice-to-Voice capabilities using the Gemini Live API, allowing the agents to literally argue with each other in real-time.