• 

  Agent Hands - Kanban for Accessibility

Agent Hands — Focus Relay for WebMCP

Inspiration

Many everyday web tasks still depend on dense controls, precise pointer input, and repeatedly locating the same item after switching attention to an agent. That creates friction for everyone and can make conventional task boards especially difficult for people using keyboards, switch control, eye gaze, or other assistive input.

We asked a simple question: what if a person could establish context with the input that works for them, then safely tell an agent to act on this?

What it does

Agent Hands is an accessibility-first task board that demonstrates the Focus Relay pattern. A person reaches a card with ordinary keyboard navigation or another input method. The page preserves that deliberate focus as a visible agent target. The person can then ask an agent to update “this” card without restating its title or manipulating a crowded editing interface.

The core action, update_current_card, can move the card, change the assignee and priority, and set a due date in one validated, atomic WebMCP call. The board immediately shows an accessible before/after receipt. One Undo reverses the whole intent, while conflict-safe checks refuse to overwrite newer human changes.

Why WebMCP is the right fit

A typical backend API can update a card by ID, but it does not know which card a person just reached in the live page. Focus Relay uses WebMCP to connect ephemeral, human-established page context to structured agent actions. That makes collaboration direct without scraping the DOM, copying card names into chat, or asking people to repeat navigation work.

People and agents can now work in the same interface: people set intent through focus; agents handle the multi-field manipulation; the page makes the result, history, and recovery visible to both.

How we built it

The project is a React, TypeScript, and Vite application deployed on Vercel. Board state, focus persistence, atomic intent mutations, bounded history, and conflict-safe Undo live in a Zustand store. The page registers twelve schema-validated WebMCP tools through document.modelContext.registerTool, with a compatibility fallback using @mcp-b/webmcp-polyfill.

The interface is keyboard-operable, has visible focus treatment, and provides a polite ARIA activity log for tool receipts. The verification suite covers the complete Focus Relay journey, atomic updates and Undo, stale targets, human/agent races, keyboard-only flows, accessibility scans, reflow, offline behavior, reloads, and tool-registration stability.

Challenges we ran into

The hard part was preserving human control while still making the agent useful. We needed the target to persist when focus moved from the page to agent chat, while also avoiding stale or ambiguous changes. The result is a narrow, explicit handoff: human focus establishes context, structured tools make changes, and an intent-level receipt plus conflict-safe Undo keeps the person in control.

What we learned

WebMCP is most compelling when it augments a working human interface rather than replacing it. The strongest agent actions are not generic click automation: they are small, validated operations grounded in shared page context and paired with feedback that people can see, understand, and reverse.

Try it

Open the live board in ChatGPT’s in-app browser with Site Tools enabled. Tab to a card, then ask: “Move this to In Progress, assign Sam, make it urgent, and set the due date to September 2.” The board will show the WebMCP receipt and offer one-click Undo.

• Live project: https://webmcp-board.vercel.app/
• Public source: https://github.com/charlie-troy/webmcp-board

Built With

• react
• typescript