Blickwinkel

• 

  Start

• 

  Solo mode, human move

• 

  Team mode, coordination phase

Inspiration

The agent isn't powering the game, it's playing it!

When we started thinking about the hackathon it was clear that we wanted to do something different, not the obvious thing. During the team discussion about the potential ideas we were most fascinated by the thought that there is a tool now with WebMCP that brings different channels to humans and agents to interact with the web. So we decided to not put a model behind an interface and let it power that interface but to make it a participant. And how to better showcase such an idea than in the format of a game?

So we wanted to design a short game where humans and agents can face each other as opponents and play together as a team. Of course that game could not be logic based as the agent would win most of the time. Also everything where reaction and speed matter was not possible as the human would always win. But there was something about intuition and perception that caught our attention. Where both sides would have their own strengths and where they could be combined in the team mode.

What it does

That's when Blickwinkel was born. A game where you and your agent are both seeing the same image and can choose from a set of predefined words that are all connected to the image. The game is to predict what the other party will choose this round and block those words while also trying to be unpredictable in one's own choice. The winner is whoever managed to choose more words that have not been predicted.

The game can be played in solo mode where a human plays against their agent, but also in team mode where a human plus their agent play against another human plus agent team.

Beyond Entertainment, Blickwinkel offers people learning to work with agents an easy way to observe how agents perceive, predict and strategize. It creates plenty to explore and talk about - with the agent and with other humans.

How we built it

We are comfortable in the web stack of MongoDB as persistence, Java with Spring Boot and Spring Modulith on the backend side and Vue.js with Quasar on the frontend. So we chose that stack as it fitted the idea.

The building process itself was coding agent driven. That is how we operate these days. Starting from the idea and a grill session, leading to a spec, planning the implementation, letting the agents code and reviewing the outcome. We have our own AI development framework at Scansation which comes in quite handy in such a short-term project.

Now the most interesting part: Why and how WebMCP?

With WebMCP we created a second channel into a shared game interface, not just using it for interface automation. The human interacts with the shown UI while the agent discovers eight typed WebMCP tools for starting matches, making its moves, proposing team plans, retrieving statistics and explaining the game results. Both channels use the same live state, so that humans and agents can follow the game progress.

The solo mode was the tricky part where both parties are sitting in front of the same browser and they shouldn't be able to see each other's picks. So the agent had to move first because it not only has access to the WebMCP layer but also to the DOM and could easily just read the human's picks if they already existed. And to keep the agent's picks a secret it got a special WebMCP tool to lock them in so the human cannot see them in the UI. That is the critical part and the one where WebMCP really shines.

There is also a little easter egg: The agent can get a statistic of historically picked words for the image before any pick in the game. Humans hopefully notice and will communicate next time with their agent before the picks, especially in team mode.

Challenges we ran into

The normal AI dev challenges, I would say :) On a higher level we refactored the complete code base shortly before the deadline as the module structure did not match the game elements as they turned out in the end. This came simply from using different words in the spec for similar concepts, e.g. a 'guess' vs a 'block' in solo vs. team mode, that made their way into the code base.

And sometimes the AI seems to not be able to see the forest for all the trees (German saying, not sure if that makes sense in English). The result screen with who picked which words and which of them got successfully blocked and which blocks missed for two sides was quite a disaster. We had to sit down, take pen and paper and sketch it up to be able to explain it to the building agents that there was a rather simple way to display all this information.

Accomplishments that we're proud of

The whole damn thing ;) Coming up with a completely new idea in a field that has not been explored yet, building, designing, releasing and documenting it in just a week was truly special and we are proud of the process and the result.

What we learned

I guess not so much about agentic development as we are quite familiar by now with all the new approaches and have found our path in this greenfield. But to take some time and really think about the new possibilities and what is around the corner in this crazy new AI world did spark some new connections in our minds.

One Blickwinkel speciality: The description of the WebMCP tools really mattered. This is the one place where we could tell the agent to the best of our abilities that it is expected to play a game and should think about its tactics and communication - without biasing it to choose a special one.

What's next for Blickwinkel

Honestly it will depend on the reactions and if others are excited about this kind of human-agent-interaction on the web as well. The simplicity is beautiful and it might just stay the way it is. But we have been thinking about leveraging the basic concepts on similar games, maybe one where you bring your GPT pet and fight others by planning your moves and blocking the ones from your opponent ;)

Built With

• gradle
• java
• mongodb
• quasar-framework
• spring-boot
• spring-modulith
• typescript
• vue.js
• webmcp