OpenSpiderWeb

Inspiration

Larry the WebMCP Spider was inspired by the idea that websites should be designed for both people and AI agents. Instead of forcing an agent to guess which buttons to click, Larry exposes clear, structured tools that let an agent understand and control the game directly.

What I built

Larry is an interactive pixel-art spider terrarium built with Phaser. Players can control Larry manually, type natural-language commands, or use voice input. AI commands are interpreted through Ollama and executed through WebMCP tools exposed with document.modelContext.

The available tools include inspect_game_world, move_spider, jump_spider, climb_tree, hunt_prey, get_to_ground, and stop_spider.

The demo shows a user entering goals while Ollama plans and executes actions for Larry. This creates a shared-control experience where the human chooses the goal and the agent handles the detailed navigation.

## What I learned

I learned how to expose state-aware browser tools with WebMCP, including input schemas, validation, cancellation, and meaningful tool results. I also learned that agents work much more reliably when tools describe the current state and their safety restrictions explicitly.

Building the demo also taught me about synchronizing browser video, game sound effects, voice narration, and AI tool execution into a single recording.

## Challenges

The biggest challenge was coordinating asynchronous movement, climbing, jumping, and hunting actions. Larry needs to understand whether he is on the ground, on a branch, airborne, or already pursuing prey before accepting the next action.

Another challenge was making the AI interaction reliable when prey moves or an action fails. I added state validation, recovery behavior, persistent hunt attempts, and a stop tool so the agent can respond to changing conditions.

WebMCP is still experimental, so testing required a compatible Chrome configuration and careful debugging through Chrome DevTools. The result is a game that remains fun for a human player while also exposing a clear interface for AI agents.

Built With

• ai
• css3
• express.js
• groq
• html5
• inverse-kinematics
• javascript
• node.js
• phaser.js
• pixel-art
• vite
• webmcp