DEV Community

Arjun Debnath
Arjun Debnath

Posted on

We Turned a Multi-Agent AI System Into a Pixel-Art Kitchen So Students Can Learn How It Works

Agentic AI is everywhere right now, and for a student just getting started it can look impossible. You type a request and an answer comes out, but the steps in between stay hidden. You never see how the job was split up or why one prompt worked better than another.

For DubHacks 2026 we built cookinUp to fix that. It’s a game-style kitchen where every AI agent is a chef, and you can watch a real multi-agent system work and step in whenever you want.

What it does

cookinUp turns a request to an AI model into a kitchen you can watch and control. You type in an order, and a Head Chef breaks it into smaller tasks and writes up a menu. Each task gets its own station with a goal, a model, a token budget, and a set of tools, and you can look over the menu and change it before any chef starts cooking. Then a team of chef agents handles those tasks at the same time, and an Expediter puts everything together into one final answer. Each agent is a chef at its own station, each job is a ticket that moves through the kitchen, and tokens are the ingredients.

The chefs work together. They can ask each other questions and pass notes directly, so not everything has to go back through the Head Chef, and every conversation shows up as a speech bubble with a line connecting the two chefs. You can step in at any point to leave a chef a note, switch it to a different model, move tokens between stations, or stop it mid-run. If you rerun a station, it and everything that depends on it gets cooked again, so the final answer always matches your changes. Every chef has a live token and cost counter, and you get a receipt when the order is done. cookinUp runs on several model providers, and the Head Chef picks a model for each station based on how hard the job is, though you can change any of those picks.

It’s built for learning, so it explains every step in plain words as it happens. A Prompt Power meter grades your order while you type on four things: what you asked for, how much detail you gave, what shape you want the answer in, and who it’s for. Then it suggests one thing to add next. A note helper teaches you to give specific feedback like “make it shorter and add a joke” instead of just “redo it.” As your prompts get better, you unlock lessons and move up the ranks from Dishwasher to Head Chef, and five challenges in the Recipe Book earn you badges along the way.

How we built it

cookinUp is a Next.js app written in TypeScript, and the Vercel AI SDK handles structured outputs and tool loops. Each order runs in its own kitchen service on the server. A planner returns the menu, and a scheduler starts every station whose dependencies are done. The Expediter then merges the results into one answer and flags conflicts between stations. Every state change streams to the browser over Server-Sent Events, and the canvas kitchen re-renders from that state.

The kitchen itself is a custom pixel-art canvas engine. It handles sprite rendering and pathfinding, and each chef has its own task queue. Draggable in-game windows sit on top of it. Stations can run a short research step first, using the provider’s web search or by asking a colleague.

Two sponsor tools plug in. With Backboard, we save a short note after each order about that student’s prompting, like “usually forgets to say who it’s for,” and pull those notes back before their next order for a personalized tip. Progress follows students across devices instead of living in one browser. With the Gemini API, Gemini models can be hired for any station, and the Head Chef’s hiring guide prices them next to the other providers’ models, so Flash-Lite often wins the cheap jobs.

Challenges we ran into

The hardest part was seeing inside the system without overwhelming beginners, since showing every message and every tool call in a way they could follow took a lot of iteration. Keeping reruns correct was another challenge, because when one chef’s work changes, everything built on it has to be invalidated and re-cooked. Structured output sometimes came back cut off or invalid, so we added retries that recover without breaking a running order. Chefs can also overrun their token budgets, which makes costs harder to predict and control. Finally, we wanted learning to feel like play instead of a tutorial, which is where the Prompt Power meter and the ranks came from.

Accomplishments that we’re proud of

In one weekend we shipped a working multi-agent pipeline that runs across several model providers. It has parallel stations and direct chef-to-chef messaging, and reruns correctly invalidate everything downstream. Every explanation a student sees is built from run data, so the teaching layer costs zero extra model calls. We built the pixel-art kitchen engine ourselves, sprites and pathfinding included, and we integrated Backboard for cross-device memory. Most of all, we took a messy agent pipeline and made it something you can read in a few seconds.

What we learned

Once you can see what each agent costs, deciding where to spend gets a lot easier. Before we had live counters, a long run felt expensive without telling us why. Seeing the cost next to each chef showed us which stations were working harder than their results justified, and that made it simple to move tokens around or switch a station to a cheaper model.

We also learned that plain words explain more than a diagram does. Beginners could follow what was happening once every step was described simply as it happened. Building those explanations from run data, instead of asking a model to write them, meant helping people understand never added to their bill.

Letting chefs talk to each other directly changed how we thought about structure. Sending everything through the Head Chef was easy to follow but slow, while direct conversations moved faster and were harder to keep under control. Showing every exchange on screen mattered more than the speed, because people only trust what they can see.

Reruns taught us to think about dependencies. If one station’s work changes, everything built on top of it is out of date, so a rerun has to cook that station again along with everything after it.

Finally, feedback has to be specific to teach anything. “Make it shorter and add a joke” shows a student what a good instruction looks like, and “redo it” doesn’t, so we built the note helper and the Prompt Power meter around that idea.

What’s next for cookinUp

Next we want to save orders on the server so they survive a restart, since today only browser snapshots persist, and add hard budget limits so chefs can’t overrun their allowance. We also want to measure direct chef-to-chef messaging against routing everything through the Head Chef, on cost and quality. Replaying past orders step by step is on the list too, with the ability to zoom in on one chef and see exactly what it’s working on. We’d like teams to be able to import an existing agent setup so they can map the systems they already run, and we’d like an advanced learning mode that goes deeper into how LLMs and agent systems are actually built.

Code: https://github.com/shreyshah0211/cookinUp
Diagram: https://drive.google.com/file/d/1dA6NVB6_wxfIWj-XnkaYVFHyEX6YGOc1/view?usp=sharing

Top comments (0)