Maze Escape Game

A maze game where an AI agent can inspect, solve, and actually play the game through WebMCP tools

Comment

Inspiration

We wanted to explore how AI Agent can do more than just give instructions it can interact with a real web application and complete a task.

We chose a maze because it provides a simple and visual way to demonstrate this idea. By combining WebMCP with Amazon Bedrock, the AI Agent can understand the maze, find a valid path, make the moves, and verify that the player has reached the exit.

Our goal was to turn a simple maze game into an AI-interactive web application.

What It Does

Maze Escape is a browser-based maze game that can be played manually by a user or automatically by an AI Agent.

The AI Agent can interact with the live game using WebMCP tools. It can:

  • View the current maze and game state
  • Check the player's position
  • Check available moves
  • Find the shortest valid path using BFS
  • Execute the solution through the game
  • Verify whether the maze has been successfully completed

The project uses Amazon Bedrock for AI reasoning and WebMCP for interaction with the game.

In simple terms:

*You can play the maze yourself or ask the AI Agent to find the shortest path and actually solve it. *

How we built it

We built Maze Escape as a browser-based game using HTML, CSS, and JavaScript, with a Node.js backend and Netlify Functions for the AI integration.

1. Maze Game

The frontend manages the maze, player movement, timer, move counter, and game status. Users can navigate the maze manually using the available controls.

2. WebMCP Integration

We exposed the game's important functions as WebMCP tools, allowing a compatible AI Agent to interact directly with the running game.

The main tools include:

  • get_maze_state
  • get_player_state
  • get_available_moves
  • move_player
  • restart_game
  • get_game_status
  • find_solution
  • execute_solution

3. Maze Solving

We implemented Breadth-First Search (BFS) to find a shortest valid path from the player's current position to the exit.

This keeps pathfinding deterministic and reliable instead of asking the AI Agent to calculate every movement itself.

4. AI Agent

We integrated Amazon Bedrock using the Converse API. The AI Agent receives the user's request and can decide which WebMCP tools to use to inspect, solve, and verify the game.

5. Backend and Security

The Bedrock integration runs through a Netlify Serverless Function. AWS credentials are stored as environment variables and are never placed in the browser or frontend code.

Challenges we ran into

Building Maze Escape involved solving a few important technical challenges:

  • *Connecting AI Agents with the live game: * We needed the AI Agent to access the actual maze state and perform actions, so we exposed the game's functionality through WebMCP tools.

  • Reliable maze solving: ** Instead of relying on the AI Agent to calculate every move, we implemented **BFS to consistently find a shortest valid path.

  • *Efficient tool execution: * Calling move_player for every step could require many tool calls. We added execute_solution to execute the complete path more efficiently.

  • *Amazon Bedrock integration: * Connecting the AI Agent to Bedrock required a server-side integration through a Netlify Function while keeping AWS credentials secure.

  • *Deployment and configuration: * We had to correctly configure Netlify environment variables, the Bedrock model identifier, and the serverless API so the AI Agent worked in the deployed application.

These challenges helped us build a more reliable connection between AI reasoning, WebMCP tools, and real-time web application actions.

Accomplishments that we're proud of

We are proud of turning a simple maze game into a working AI-interactive web application.

Our key accomplishments are:

  • 🤖 Built an AI Agents that can understand and interact with the live maze.
  • 🌐 Integrated WebMCP tools for structured interaction with the game.
  • 🧠 Implemented BFS to reliably find a shortest valid path.
  • ⚡ Added execute_solution to complete the maze efficiently with fewer tool calls.
  • ☁️ Integrated Amazon Bedrock for AI reasoning.
  • 🔐 Kept AWS credentials securely on the server-side using Netlify Functions.
  • 🚀 Successfully deployed the application as a live web app.

Most importantly, the AI Agent does not just explain how to solve the maze it can actually perform the actions and verify that the maze has been completed.

What we learned

Building Maze Escape helped us understand how AI Agents can interact with real web applications instead of only generating text.

We learned how to:

  • 🌐 Use WebMCP to expose website functionality as structured tools for AI Agents.
  • 🤖 Build an AI workflow where the Agents can understand, act, and verify.
  • 🧠 Use BFS to find a reliable shortest path through a maze.
  • 🔗 Combine AI reasoning with deterministic algorithms for better reliability.
  • ☁️ Integrate Amazon Bedrock using the Converse API.
  • ⚡ Use Netlify Functions to connect the web application with cloud AI services.
  • 🔐 Keep AWS credentials secure by keeping them on the server side.
  • 🛠️ Design tools that are simple and clear enough for an AI Agents to use effectively.
  • 🚀 Deploy and configure an AI-powered web application for real-world use.

The biggest lesson we learned is that AI becomes more useful when it can interact with applications through well-defined tools and take real actions, rather than only explaining what should be done.

What's next for Maze Escape Game

We plan to extend Maze Escape from a single maze experience into a more capable AI-interactive application.

Our future plans include:

  • 🧩 More maze levels and difficulty modes with larger and more complex mazes.
  • 🎲 Procedurally generated mazes for a new challenge every time.
  • 🤖 Smarter AI interactions with more WebMCP tools and improved agent workflows.
  • 📊 AI performance tracking to compare solving time, moves, and efficiency.
  • 👤 AI vs. Human mode to compare how quickly the AI Agent and players can solve the same maze.
  • 🎨 Better visualizations showing how the AI Agent finds and follows a path.
  • 🔌 Multiple AI model support so different models can be tested with the same WebMCP tools.
  • 🌐 More real-world AI tasks beyond maze solving, using the same idea of giving AI Agents structured access to web applications.

Our long-term goal is to explore how WebMCP can make web applications more useful and interactive for AI Agents, allowing them to understand a task, use application tools, take actions, and verify the result.

Built With

Share this project:

Updates

Submission history