Shoutout to the incredible folks at @gdgcloudpune, especially @antrixsh_gupta and @pratik_kale, for their inspiration and support in pushing the boundaries of what is possible with conversational AI and agentic workflows!
We are thrilled to introduce Captain Cool—an elite, multi-agent AI-powered tactical workspace engineered on the Google Gemini Stack and Next.js. It replicates the strategic mastermind of legendary IPL captains like MS Dhoni, Rohit Sharma, or Hardik Pandya by analyzing real-time match variables, orchestrating multi-agent debates, and generating high-conviction visual play calls.
Styled in a premium, responsive Miro-style visual whiteboard architecture, the workspace places crucial real-time stats and visual fielder configurations directly at your fingertips.
🔗 GitHub Repository: smitjogani/Captaincool-multiagents
🚀 Key Architectural Features
🧠 1. Decoupled Multi-Agent Orchestration Loop
The strategist backend operates using a highly coordinated chat loop featuring four specialized Gemini agents working in sequence:
[Data Analyst] ──> [Lead Strategist] ──> [Devil's Advocate] ──> Commander (Function Calls) (Risk Analysis) (Structured JSON)
Data Analyst (Gemini 2.5 Flash): Connects to Google Search Grounding to scrape Cricbuzz / ESPN Cricinfo for pitch conditions, wind speed, boundaries, and active bowler figures.
Lead Strategist (Gemini 2.5 Pro): Proposes the core play call. Integrates Function Calling (calculateWinProbability) to execute mathematical win-expectancy projections.
Devil's Advocate (Gemini 2.5 Flash): Challenges the captain's call by pinpointing risks, friction factors, and environmental anomalies.
Commander (Lead Strategist): Resolves the debate, compiles the arbitration resolution, and maps the final tactical setup into a structured JSON schema.
🏟️ 2. Interactive Fielding Setup Visualizer
Renders recommended field alignments in a stunning, graphical layout:
Turf Oval Field: Styled green cricket lawn with custom boundary borders.
30-Yard Circle: Visualizes inner-ring fielding constraints.
Central Wicket Strip: Renders a central pitch with stenciled white wickets.
Active Fielder Nodes: Interactive orange nodes representing the exact fielder coordinate list returned by Gemini.
Hover Tooltips: Mouse-hovering over the nodes pops up sleek, readable overlays detailing the exact field positions (e.g., "First Slip", "Deep Mid Wicket", "Third Man").
⚡ 3. Dense Cricbuzz Ticker with Whiteboard Sticky Tags
A compressed scorecard box taking up less than 150px of vertical height:
Shows live scores, run-rates, required run-rate, and match-status ticker inline.
Renders playing rosters as horizontally wrapped whiteboard sticky tags.
Strike Batsman is highlighted as a Pastel Yellow chip (★ STRIKE).
Non-Strike Batsman is highlighted as a Pastel Rose chip (☆ NON-STRIKE).
Active Bowler is highlighted as a Pastel Teal chip (☉ BOWLING).
🎙️ 4. Multimodal Accessibility
Voice Dictation: Dictate tactical overrides using the Web Speech Recognition microphone inline.
Speech Synthesis: Click Play Audio to hear the Commander's final decision and debate resolution read aloud in energetic captain/commentary vernacular.
🛠️ Technology Stack & Agent Tools Catalog
🌐 Core Web Technology Stack
Next.js 16 (Turbopack): Leveraging the App Router architecture for seamless page loads and serverless API endpoints (/api/live-matches and /api/strategy) for secure, server-side Gemini API calls. It utilizes Turbopack for superfast multi-threaded build compilation.
TypeScript: 100% static type coverage across multi-agent communication payloads, Cricbuzz API response models, and active squad variables, ensuring rock-solid type safety.
Vanilla CSS (Miro Whiteboard Archetype): Customized using flexible CSS variables for canvas bases, hairline borders, and responsive design scales. Employs Google Font's Outfit as a sleek, geometric typography fallback representing modern display faces.
Web Speech API Suite: SpeechRecognition handles microphone dictation for hands-free entry of tactical overrides, while SpeechSynthesis provides high-fidelity browser speech playback for the captain's final tactical decisions.
🧠 Google Gemini AI Stack
Official @google/genai SDK: Used exclusively to establish secure, low-latency connections to Google's model architecture.
Gemini 2.5 Pro (gemini-2.5-pro): Enforced on reasoning-heavy nodes—the Lead Strategist and the Commander (Arbitrator). It excels at handling multi-turn instructions, complex tool-calling calculations, and delivering structured JSON formats.
Gemini 2.5 Flash (gemini-2.5-flash): Enforced on speed-sensitive and external nodes—the Data Analyst and the Devil's Advocate. It is optimized for rapid token throughput, real-time web crawlers, and critique checks.
🔧 Specialized Agentic Tools
A. Google Search Grounding ({ googleSearch: {} })
Agent Owner: Data Analyst
Purpose: Gathers the absolute latest pitch, wind, scores, required rates, and rosters.
Design Solution: Fully decoupled from structured JSON outputs to bypass the Gemini API limitation where Search Grounding and JSON output schemas cannot be defined in the same generation configuration.
B. Custom Win Expectancy Calculator (Function Calling)
Agent Owner: Lead Strategist
Declaration Schema:
TypeScript
export const calculateWinProbabilityDeclaration = {
name: 'calculateWinProbability',
description: 'Calculate live win probability and projected scorecard analytics based on current status.',
parameters: {
type: 'OBJECT',
properties: {
runsNeeded: { type: 'NUMBER' },
ballsRemaining: { type: 'NUMBER' },
wicketsDown: { type: 'NUMBER' },
targetScore: { type: 'NUMBER' }
},
required: ['runsNeeded', 'ballsRemaining', 'wicketsDown']
}
};
C. Response Schema Validator (responseMimeType: 'application/json')
Agent Owner: Commander (Arbitrator) & Match Scorecard Parser
Purpose: Enforces strict JSON structures for visual field coordinates, setup names, and structured textual decisions, completely avoiding UI parser crashes.
Commanders Response Schema:
TypeScript
const responseSchema: Schema = {
type: Type.OBJECT,
properties: {
nextDecision: { type: Type.STRING },
reasoning: { type: Type.STRING },
dissentingOpinion: { type: Type.STRING },
commanderReasoning: { type: Type.STRING },
fieldingSetupName: { type: Type.STRING },
fieldingPositions: {
type: Type.ARRAY,
items: { type: Type.STRING }
}
},
required: ['nextDecision', 'reasoning', 'dissentingOpinion', 'commanderReasoning', 'fieldingSetupName', 'fieldingPositions']
};
D. Multimodal Vision Processor
Agent Owner: Data Analyst
Purpose: Processes base64 pitch conditions or scorecard images, integrating raw visual clues directly into the captain's war-room context.
💎 Design System & Aesthetic Archetype
Built on the Miro Visual Whiteboard design philosophy:
Background: Clean, stark white canvas (#ffffff) for extreme readability.
Buttons: Rounded black-pill buttons with smooth hover scaling transitions.
Sticky Boards: Balanced pastel colors representing classic brainstorming sticky notes.
Borders: Thin hairline borders (1px solid var(--hairline)) mimicking professional whiteboard frame layouts.
🛠️ Installation & Setup
Prerequisites
Make sure you have Node.js (v18+) and npm installed.Configure Environment Variables
Create a .env file at the root of your project:
Code snippet
GEMINI_API_KEY=your_google_gemini_api_key
- Run the Development Server Bash npm install npm run dev Open http://localhost:3000 in your browser.
📖 Manual Testing Guide (Step-by-Step)
Follow this precise manual walkthrough to experience the full capability of the Captain Cool strategist workspace:
📍 Step 1: Fetch Live Cricket Scores
Open the dashboard and locate the Omni Input panel on the left.
Click the dark pill button: FETCH LIVE MATCHES.
The dropdown selector will immediately load the dynamic IPL match states parsed from Cricbuzz.
If no live matches are playing right now, it will load our highly detailed live finish simulator: Punjab Kings (PBKS) vs Royal Challengers Bengaluru (RCB) [61st Match IPL 2026].
📍 Step 2: Configure Match Variables
Select the live match from the dropdown. The Live Match Board ticker will instantly render at the top of the workspace.
In the Match Variables Setup box, customize your active players:
Strike Batsman: Select Virat Kohli or Cooper Connolly.
Non-Strike Batsman: Select Faf du Plessis or Prabhsimran Singh.
Active Bowler: Select the bowler you want to analyze (e.g., Arshdeep Singh or Bhuvneshwar Kumar).
Notice that the Live Match Board chips dynamically transition colors, adding ★ STRIKE, ☆ NON-STRIKE, and ☉ BOWLING highlight tags to your selections!
📍 Step 3: Enter Tactical Overrides
In the Tactical Overrides / State Context text box, enter custom parameters like:
"Heavy evening dew has settled on the turf. The outfield is slick, and spinners are struggling to grip the leather."
(Alternative): Click the 🎙️ (Microphone) icon inside the text input to activate voice dictation and speak the conditions aloud!
📍 Step 4: Add URL or Vision Overrides (Optional)
Paste a custom Cricbuzz scorecard URL in the Live Match URL (Overrides Grounding) input to override default search grounding.
Upload an image of the current pitch condition or stadium scoreboard in the Vision Context loader to inject multi-modal analysis.
📍 Step 5: Initiate the Brain Orchestration
Click the large dark pill button: INITIATE ENGINE.
Watch the Agent Orchestration Log terminal display real-time progress as the Data Analyst, Lead Strategist, Devil's Advocate, and Commander perform their debate loop.
📍 Step 6: Inspect Visual & Commentary Outputs
Once compilation finishes, the right column Tactical Strategy Readout will automatically animate!
Inspect the Field Placement Visualizer to see exactly where the fielders are placed. Hover your mouse over the orange dots to verify positions like Long On or First Slip.
Read the beautifully formatted Pastel Sticky Notes displaying:
Next Decision: The immediate tactical instruction.
Captain Strategy Reasoning: Pitch and match commentary.
Devil's Advocate Critique: Risks identified.
Arbitration Resolution: The commander's final decision path.
Click the ▶ PLAY AUDIO button to hear the arbitration resolution read aloud!
GoogleGemini #NextJS #GenerativeAI #AI #IPL2026 #CricketTech #MultiAgentSystems #WebDev #TechBlog
