Patchwork - WebMCP Challenge

• 

  The image shows the garden created by the agent and the human together.

• 

  The image shows the 6 tools the agente can discover and use.

• 

  The image shows the care calendar filled by the agent.

• 

  The image shows the Diagnose section used by the human.

What inspired me

The web was built for humans — buttons, menus, grids. AI agents browsing today have to reverse-engineer that intent, clicking pixel by pixel and hoping. When WebMCP landed, the promise was obvious: websites could hand agents real, structured tools instead of a guessing game. I wanted to prove it in a domain where rules actually matter. Gardening is full of precise, checkable constraints (companion planting, spacing, sun hours, seasons) where a wrong click is visible as a dying plant. A garden felt like the perfect place to show that an agent doesn't have to guess: it can negotiate against real rules, on a canvas you both see. Also, I love grow hot chili peppers.

What I built

Patchwork is a shared urban garden. Two beds, a crop catalog of 27 plants (soon to expand), a care calendar, and a plant doctor. The human clicks cells to plant; the agent can calls six WebMCP tools (design_bed, suggest_plan, diagnose_issue, list_crops, get_garden_state, log_task) and every action lands on the same live canvas, validated by a deterministic rules engine and logged in an activity panel. The agent drafts the plan; the rules push back; the human watches it happen. Agent + Human: Teamwork!

How I built it

Vite + React 19 + TypeScript (strict) + Zustand + MichiRouter, with the horticultural engine as pure, testable TypeScript — no LLM calls, no backend, $0 runtime cost. The rules engine is the single source of truth for both the UI and the tools: the same function validates your click and the agent's tool call. Several vitest tests cover the engine, the store, accessible UI, and direct execution of every WebMCP tool against a mocked document.modelContext.

Challenges I faced

On one hand, time was one of the biggest challenges; on the other, working with a still-experimental technology; and finally, determining which tool to create that would be useful for many people. Then came a design challenge: how to verify what the agent is doing? The answer was visibility and feedback: every tool returns structured warnings, and every mutation is logged with actor, tool, and result, so the human retains final authority.

Built With

• codex
• commandcode
• michirouter
• react
• typescript
• vite
• zustand