TaskFlow

Inspiration

Websites are still built as if only humans will use them: click, search, filter, compare, book. Agents can already drive that UI, but they do it by guessing at buttons. WebMCP flips that. A page can expose the same capabilities as tools — document.modelContext.registerTool, getTools, executeTool — so an agent uses the site the way a developer would use an API, while a person still uses the normal interface.

TaskRabbit is the perfect test of that idea. A move-in is never one listing. It is furniture assembly, cleaning, and TV mounting, coordinated under a budget, with a human still in the loop before anything is booked. We wanted a marketplace that looks like a real service site and behaves like an MCP server in the browser.

What it does

TaskFlow is a dual-use TaskRabbit-style marketplace.

For people: browse services, compare Taskers, and book from a profile — search, listings, hourly rates, availability, confirm.

For agents: the same pages register WebMCP tools (searchServices, findTaskers, getTaskerAvailability, getTaskerPricing, createTaskRequest, scheduleTask, …). An in-page agent dock takes an outcome like “I just moved in. Make my home ready tonight. I have a $250 budget.” It discovers those tools, builds a plan (Marcus $85, Sarah $95, David $60 = $240), and waits for approval before it schedules.

Both paths write to the same booking store. My Tasks shows You booked next to Booked by agent. One website, two clients, one set of capabilities.

How we built it

• Next.js App Router, TypeScript, Tailwind, and shadcn/ui — no backend, no real payments, no live TaskRabbit API.
• A shared marketplace layer (search, findTaskers, pricing, create/schedule). Human buttons call those functions. WebMCP execute callbacks wrap the same functions.
• A spec-faithful document.modelContext polyfill so the demo runs in current browsers, using the official WebMCP shape if the native API exists.
• A deterministic planner (no LLM) so the killer demo is reliable, with staged delays so the tool activity is visible.
• A TaskRabbit-like light marketplace plus a dark agent dock that keeps Show WebMCP on screen for judges.

Challenges we ran into

WebMCP is still a draft. Most browsers do not ship document.modelContext, so we had to match the spec closely without pretending the API is everywhere.

The harder product problem was not building another chatbot. The original instinct was an AI-only command center. That hid the point. WebMCP only lands if the human site is real and the agent uses that site’s tools — not a parallel fake API.

Shared state was picky too: a full navigation wiped in-memory bookings until we persisted them and tagged each row by source (human | agent). Tool registration also had to survive hot reload without double-registering names.

Accomplishments that we're proud of

• A 2–3 minute demo where you book Marcus as a person, then let the agent plan a $240 move-in, and both appear on My Tasks.
• Judges can see WebMCP: live getTools / executeTool calls, not a hidden prompt.
• Human-in-the-loop: the agent never books until Approve & Schedule.
• One implementation for both audiences — not two products glued together.

What we learned

Agent-native websites are not “add a chat sidebar.” They are capability design: the same operations must be safe, named, and schema’d for a model and obvious in a UI for a person.

We also learned why the spec cares about annotations (readOnlyHint, untrustedContentHint) and approval. Tool descriptions are easy to trust too much. Keeping consequential actions behind a human confirm is the product, not a footer.

What's next for TaskFlow

• Native WebMCP in a supporting browser, dropping the polyfill on that path.
• Declarative tools from real forms, as the spec’s declarative section lands.
• A real LLM planner behind the same tools, with the deterministic demo kept as a fixture.
• Richer trust UX: show which origin registered a tool, and treat tool output as untrusted when the hint says so.

TaskFlow’s bet is simple: the next marketplace is designed for both hands and agents.

Built With

• javascript
• mcp
• next.js
• radix
• react
• shadcn/ui
• tailwind
• vite
• webmcp