Toban is a WebMCP app that turns a single natural-language request into an editable duty roster, reducing the effort and errors in schedule creation.
Inspiration
Duty rosters look simple, but the request behind one is usually scattered across names, duties, dates, rotation intervals, exceptions, presentation choices, and sharing rules. Toban already gave people a visual way to create and manage these rosters. The WebMCP Challenge made it possible to add a faster path: describe the whole intent once, let an agent translate it into typed product actions, and keep Toban responsible for validation and rotation math.
What it does
With a WebMCP-capable client connected to Toban, a person can ask for a complete roster in ordinary language. The request can include members, separate duties, a start date, an automatic or manual rotation, weekends and Japanese holidays to skip, a Table, Calendar, or Wheel view, and a visual style suited to the setting.
The agent calls Toban's page-defined tools. Toban validates the structured input, calculates the roster, saves it, and displays the result as a normal editable schedule. Follow-up requests can change one duty, adjust appearance, restrict task eligibility, query a future assignment without changing state, advance a manual rotation, or rename a member while preserving unrelated settings.
Public sharing stays under human control. The agent can prepare the share step, but Toban opens its own confirmation dialog and waits for a person to decide whether to publish.
How it was built
Toban is a React and TypeScript application served through Cloudflare Workers. For the challenge, I extended its WebMCP interface to 18 typed page tools around the existing roster domain: create, read, target, refine, present, calculate, print, and prepare sharing. Tool schemas use stable roster identifiers and structured results so an agent can operate on product concepts instead of guessing through DOM clicks.
The roster engine remains the source of truth for validation, eligible-date calculation, Japanese public-holiday handling, rotation state, and persistence. The agent interprets intent; Toban performs deterministic application logic. The demo was captured in the ChatGPT desktop app's in-app browser, which the official Challenge rules list as a WebMCP testing method. During the capture, the agent calls those real tools on the live page.
Challenges
The hardest part was making follow-up language safe. A request such as “replace Plant Care with Supply Check” should update one duty without silently changing members, dates, rotation rules, view, or appearance. The implementation adds stable target resolution, typed partial updates, explicit errors, idempotent mutation behavior, structured read-back, and verification after meaningful writes.
Another challenge was drawing the right publication boundary. Sharing has an external effect, so the WebMCP tool prepares a reviewable confirmation but does not publish. That keeps the final decision visible and human-controlled.
Accomplishments
One natural-language request creates a complete, styled roster. The same typed roster model supports Table, Calendar, and Wheel views. Calendar assignments account for weekends and Japanese public holidays. Narrow follow-ups preserve fields the person did not ask to change. Read-only tools answer assignment questions without mutating the roster. The agent stops at Toban's sharing confirmation; publication requires an explicit click in Toban. The public repository includes the full challenge-period commit history and an MIT license.
What I learned
WebMCP works best when the page exposes domain actions rather than a catalog of UI gestures. The agent is useful at interpreting a flexible request, while the application is better at enforcing invariants, calculating dates, storing state, and presenting the result for human review.
What's next
Next steps include more locale-aware holiday calendars, richer rule explanations, and additional verification views for complex eligibility constraints, while preserving the same typed-tool and human-confirmation boundaries.
Built With
- cloudflare-d1
- cloudflare-workers
- drizzle-orm
- hono
- playwright
- react
- typescript
- vite
- vitest
- webmcp
Log in or sign up for Devpost to join the conversation.