Visual block builder and real-time battle arena preview.
LLM Decision Node Configuration — Selecting and tuning foundation models (GPT-4o, Claude 3.5, Gemini 1.5) with custom prompt instructions.
Guided Learning Curriculum — Structured modular lessons with real-time automated objective verification and progress tracking.
Discer.io Platform Overview — Bridging the gap between agentic AI concepts and interactive, gamified simulation.
Declarative Agent Specification — Portable, serializable JSON format detailing perception triggers, reasoning nodes, and tool attachments.

Inspiration

Most tutorials on agentic AI boil down to command-line scripts printing JSON responses or basic chatbot loops. Understanding concepts like perception, tool-calling, state evaluation, and multi-step planning is difficult when you cannot actually see what the agent is thinking in a dynamic environment.

We wanted to make learning agentic AI visceral and hands-on. By dropping LLM-powered agents into a real-time 2D physics battle arena, every prompt adjustment, tool connection, and strategic decision has immediate, observable consequences. If your agent fails to check its ammunition before engaging, it runs out of bullets. If your planning block hallucinates coordinates, your agent walks into a wall. Making AI tangible through competitive play makes these abstract concepts intuitive.

What it does

Discer.io is an interactive platform that teaches agentic AI architectures through a multiplayer battle arena. It features two core environments:

Visual Block Builder (/builder): A node-based programming canvas where users construct autonomous agents without writing boilerplate code. Users connect entry points (On Start, On Attacked) to LLM decision nodes (GPT-4o-mini) and wire them to actionable tools (Move, Attack, Collect, Speak, Plan, Switch Weapon).
Interactive Curriculum (/lessons): A guided learning track that introduces AI concepts step-by-step—from basic sensor-action loops to reflex behaviors and puzzle-solving (such as navigating security gates and managing resources).
Live Arena Simulation: Once deployed, the agent's graph is evaluated on an auto-stepping loop. The agent senses nearby players, obstacles, and loot, reasons through its LLM node, and renders real-time comic thought bubbles (💭) above its sprite as it acts in the arena.

How we built it

We designed Discer.io as a distributed, 4-service architecture:

Frontend (Next.js 14, Tailwind CSS, Lucide): Handles the drag-and-drop node graph canvas, agent JSON serialization, and dynamic challenge verification.
Game Client (Vite, PixiJS, HTML5 Canvas): Renders the 2D top-down battlefield at 60 FPS, interpolating positions, bullet trajectories, and agent thought bubbles.
Game Server (TypeScript on Bun runtime): A high-performance WebSocket server managing the game loop, line-of-sight raycasting, obstacle hitboxes, inventory, and weapon mechanics.
Agent Orchestrator (FastAPI, Python, Pydantic, OpenAI SDK): Validates incoming node graphs via strict Pydantic schemas, converts spatial game state into structured LLM prompts, parses tool execution via structured function calling, and coordinates parallel multi-agent step loops.

Challenges we ran into

Bridging Discrete LLM Cycles with Continuous Physics: LLM calls take several hundred milliseconds to a couple of seconds, whereas the battle arena runs at 30 ticks per second. We built an action-smoothing bridge (agentBridge.ts) that queues intentions, rotates agent sprites toward target vectors, and sustains movement between inference cycles so agents don't freeze awkwardly while the model is thinking.
Graph Validation & Pydantic Discriminated Unions: Translating a freeform visual canvas where blocks can be wired in any direction into a strict execution tree required rigorous schema design. We implemented directional connection enforcement to guarantee every agent block always has valid tool targets before submission.
Multi-Service Orchestration on Windows: Coordinating Bun WebSockets, Next.js dev servers, Vite asset bundlers, and Uvicorn FastAPI processes concurrently required writing clean startup automation and managing port bindings across development environments.

Accomplishments that we're proud of

Real-Time Thought Bubble Visualization: Rendering the agent's internal chain-of-thought directly inside the canvas gives instant clarity on why an agent made a particular decision (e.g., retreating when low on health vs. pursuing loot).
Zero-Code Agent Deployment: Anyone can design, configure system prompts, wire action graphs, and deploy an active bot into an MMO environment in under two minutes.
Automated Challenge Verification: Built reactive milestone tracking that validates whether an agent successfully discovered passphrases, breached security gates, or retrieved objectives to auto-advance through lessons.

What we learned

How to design resilient tool-calling interfaces that handle unexpected model outputs gracefully without crashing physics loops.
The balance between LLM latency and game feel—how directional smoothing and state caching make turn-based AI feel like real-time gameplay.
The power of visual feedback loops in educational tooling: users learn faster by seeing their agent fail in an arena than by reading logs in a terminal.

What's next for Discer.io

Head-to-Head Agent Tournaments: Allowing users to export their agent graphs and compete in scheduled multi-agent battle royales.
Memory & Long-Horizon Planning (MCP): Integrating Model Context Protocol servers and vector memory so agents remember rival positions across long sessions.
Community Model Hub: A public gallery where students and developers can share, fork, and remix custom agent graphs and battle strategies.