RoutineForge

Inspiration

Web agents are often forced into two extremes: fragile visual automation that guesses where to click, or fixed APIs that only expose workflows developers anticipated in advance. We asked a different question: what if a website could learn a new agent tool from a human demonstration?

People already teach coworkers by showing a task once. RoutineForge brings that interaction to the web: the human demonstrates intent inside the real product, the application records the underlying business actions, and WebMCP turns the reviewed routine into a reliable tool an agent can discover and invoke.

What it does

RoutineForge is a WebMCP-native commerce operations workspace with Home, Orders, Products, Customers, Analytics, and Marketing. Its central feature is Routine Studio:

1. A merchant selects Record workflow.
2. They set a date range and market, select metrics, generate a report, and save it.
3. RoutineForge captures five typed, verified semantic actions—not clicks or selectors.
4. The merchant reviews the trace and chooses which values the agent may supply.
5. They publish the routine as generate_weekly_report.
6. An agent discovers and calls the new WebMCP tool with different inputs.
7. The live page follows the execution and returns a report ID, URL, summary, and five verification receipts.

The app also exposes ten atomic WebMCP tools for dashboard state, orders, inventory, customers, campaigns, analytics filters, and reports. The demonstrated routine becomes the eleventh tool.

Why WebMCP

A reporting API could return numbers, but it would miss the shared, visible teaching surface between a person, an agent, and the application. With WebMCP, the human UI and agent tools use the same business actions, validation rules, state, and feedback. The agent does not reverse-engineer the DOM, and the developer does not maintain a second integration that can drift away from the product.

RoutineForge also uses WebMCP dynamically. The site begins with ten developer-defined tools. After a person demonstrates and approves a routine, the page registers a new composite tool at runtime. This explores a future where a website's agent interface is shaped safely through use, not limited to a static tool catalog.

How we built it

RoutineForge is a client-only React and TypeScript app with no login, backend, API key, or third-party dataset. At its core is an Action Registry of versioned definitions. Each definition includes a JSON Schema, effects, input validation, execution logic, and post-execution verification. A shared Action Bus runs the same definitions for human UI events and WebMCP calls.

The recorder stores action IDs, versions, typed inputs, structured outputs, sources, timestamps, and verification evidence. It never records coordinates, screenshots, CSS selectors, or generated JavaScript.

The Routine Compiler accepts only registered actions. Every binding must be a demonstrated literal, a reviewed routine input, or a prior step output. The Routine Runner resolves bindings, validates each step, stops safely on failure, and returns structured receipts.

The app feature-detects document.modelContext.registerTool() and registers ten atomic site tools. Publishing a taught routine registers generate_weekly_report with its own JSON Schema and verified execution handler. Published routines persist in IndexedDB and re-register after refresh; Reset demo restores deterministic seed data.

Challenges

The hardest problem was choosing the right abstraction boundary. Raw click recording looks general but is fragile and difficult to verify. A semantic action layer requires deliberate product architecture, but it survives UI changes and produces meaningful evidence.

Dynamic publication also had to remain safe: recorded data or agent input can never become executable code. We solved that with a deliberately small binding language and a compiler that references only registered, versioned actions.

Finally, agent activity needed to remain legible to a human. RoutineForge synchronizes the visible workspace with each execution and shows step-level receipts in the same interface.

Accomplishments

• Ten atomic WebMCP tools plus a human-taught composite tool registered at runtime.
• One semantic execution layer shared by human interactions and agent calls.
• Typed validation and verification at every action boundary.
• No selectors, coordinates, screenshots, or generated code in recorded routines.
• Visible synchronization between agent execution and the human dashboard.
• A public, deterministic deployment with automated tests and no credentials required.

What we learned

Agent-native design is not simply adding tools beside an interface. The strongest experience comes from making the human UI and agent interface two views over the same semantic application model. Demonstration alone is not authorization; the human review step transforms a trace into a contract. Verification belongs inside each action definition, so composite routines can remain trustworthy.

What's next

Next we would generalize the compiler across all registered actions, add a visual routine editor, controlled branches and approval checkpoints, versioning and rollback, dry runs, audit logs, and a developer SDK. Our long-term vision is a web where developers provide safe semantic building blocks, people teach the workflows that matter to them, and agents execute those workflows transparently in the applications where work already lives.

Try it

Open the live app, select Reset demo, and follow the Routine Studio flow. Source and technical instructions are available in the public MIT-licensed repository.

Built With

• indexeddb
• react
• typescript
• vercel
• vite
• vitest
• webmcp