minesweeper

• 

  Initial Page

• 

  Game Over

Inspiration

Most websites are designed only for humans. People read instructions, click buttons, and learn how an interface works, while an AI usually has to rely on screenshots or simulated mouse movements.

I wanted to explore a different idea: what if a website could explain its capabilities directly to an AI and give it structured tools for interacting with the experience?

Minesweeper was a natural choice. The rules are approachable, but playing well requires observation, deduction, risk assessment, and patience. These qualities also make it a useful educational game for children who are developing logical and mathematical thinking.

The project began as a demonstration of WebMCP, but it also became an experiment in creating websites where AI can act as a guide, collaborator, and tutor.

What it does

Minesweeper — WebMCP Edition is a browser-based Minesweeper game that can be played by both humans and AI agents.

Human players can interact with the board using a mouse or keyboard. They can select beginner, intermediate, expert, or custom difficulty levels, reveal cells, place flags, chord numbered cells, and track their progress and best completion times.

The page also exposes nine client-side WebMCP tools:

• get_game_rules teaches the agent the rules and coordinate system.
• get_play_strategy explains deductions, safe chording, and risk management.
• analyze_board recommends a deduction-backed move or a clearly identified low-risk guess.
• start_new_game creates a preset or custom game.
• reveal_cell reveals a hidden cell.
• toggle_flag adds or removes a flag.
• chord_cell reveals eligible cells around a number.
• get_board_state returns the complete public board state.
• get_game_status returns a compact game summary.

The AI does not receive the locations of hidden mines. It must reason from the same public information available to a human player.

A built-in AI assistant can analyze the board, suggest moves, perform actions, and explain its reasoning step by step using Chrome’s Prompt API. An action log records whether each move came from a human or an agent, making the interaction transparent and easy to follow.

How we built it

The project was built with React 19, TypeScript 6, and Vite 8. It is deployed as a static application through GitHub Pages.

The game logic and interface share the same application state. This means that actions performed through WebMCP immediately update the visible board, counters, progress indicators, timer, and action log.

Each WebMCP tool has:

• A clear and specific name
• A description explaining when it should be used
• A structured JSON input schema
• Runtime validation for coordinates and game rules
• A result containing the updated public game state

Read-only tools allow agents to learn the rules, inspect the board, and request an analysis without modifying the game. Action tools call the same underlying logic used by the visual interface.

The analyze_board tool first looks for moves supported by Minesweeper deductions. When no guaranteed move is available, it returns a low-risk probabilistic option and clearly labels it as a guess. It never reads hidden mine locations or changes the board itself.

The built-in assistant uses Chrome’s Prompt API to provide natural-language help directly inside the game. Personal-best times are stored locally in the browser, while every action is recorded with human or agent attribution.

The project also uses Vitest to test important game behavior and is publicly available in the GitHub repository.

Challenges we ran into

One of the biggest challenges was translating a visual game board into structured information that an LLM could understand reliably.

The coordinate system, board dimensions, game status, and every possible cell state had to be represented clearly. The agent needs to distinguish between hidden, flagged, empty, numbered, and revealed-mine cells without having access to secret information.

Tool descriptions were another important challenge. It was not enough to explain what a tool does—the descriptions also needed to help the model understand when to use it and what risks were involved. This was especially important for chording, which can reveal several cells at once but can also cause a loss when flags are incorrect.

Keeping the human interface and agent tools synchronized also required careful design. A move can affect the board, remaining-mine counter, progress percentage, timer, game status, personal-best time, and action log.

Finally, WebMCP and browser-native AI APIs are still emerging technologies. The project needed feature detection and graceful behavior when WebMCP or the Prompt API was unavailable.

Accomplishments that we're proud of

I am proud that the project supports three ways of interacting with the same game:

• Mouse controls
• Keyboard controls
• AI interaction through WebMCP

The AI does not depend on screenshots, image recognition, or fragile coordinate-based clicking. It discovers structured tools exposed by the page and uses them to understand and control the game.

I am also proud that the agent plays fairly. It can access the public state of the board, but it cannot inspect hidden mine positions. Its recommendations must come from logical deductions or explicitly identified probabilistic guesses.

The action log makes AI activity visible by recording whether each move was made by a person or an agent. This turns the AI’s behavior into something users can observe, understand, and learn from.

Most importantly, the project demonstrates an educational use for WebMCP. The AI is not only automating a game—it can explain strategies, demonstrate logical reasoning, and collaborate with a learner inside the application.

What we learned

I learned that building a website for AI requires thinking about user experience in a new way.

For human users, an interface communicates through layout, color, labels, and visual feedback. For an AI agent, the website also needs structured tools with precise descriptions, schemas, validation, and useful results.

I also learned that tool design directly affects agent behavior. Small, focused tools make actions easier to understand and reduce ambiguity. Separating rules, strategy, analysis, state inspection, and game actions helps the model create a clearer plan.

Another important lesson was that read-only and state-changing operations should be clearly separated. An AI should be able to inspect and reason about an application without accidentally modifying it.

Finally, the project showed that WebMCP can make a webpage more than a visual destination. A website can describe what it knows and what it can do, allowing AI to participate meaningfully in the experience.

What's next for Minesweeper — WebMCP Edition

For now i don't have an idea of what can come next if this project

Built With

• codex
• react
• vite
• webmcp