WebMCP Studio

Inspiration

We were inspired by the upcoming availability of WebMCP tools and noticed that many production websites still do not expose agent-native capabilities. WebMCP Studio helps developers detect useful capabilities from existing websites, then compose them into reusable workflows. This can reduce agent tool calls and make agentic workflows easier to understand and maintain.

What it does

WebMCP Studio discovers native WebMCP tools and infers potential tools from a website’s semantic DOM, forms, and visible actions. Developers can review the evidence, drag actions into a workflow, generate a higher-level tool such as buy_best_product, and test it on a controlled page.

The hosted Studio provides a simple judge path. An optional Chrome MV3 extension supports advanced discovery and execution on eligible live pages.

How we built it

We built the project in TypeScript with a dependency-light browser architecture:

• A discovery engine scans semantic HTML, forms, controls, Shadow DOM, and same-origin frames.
• A capability graph stores discovered tools, schemas, locators, evidence, confidence, and effects.
• A structured workflow interpreter composes primitive actions using validated JSON bindings.
• A hosted Studio provides the visual discovery and drag-and-drop workflow builder.
• A versioned postMessage bridge connects Studio to controlled commerce and travel target pages.
• Generated tools are registered through the browser’s document.modelContext API when WebMCP is available.
• External URLs remain potential-only in the hosted flow; the extension handles approved live-page instrumentation.

The demo workflow searches products, filters by price, views details, and adds the selected product to a cart.

Challenges we ran into

The WebMCP ecosystem is still evolving. Browser support, Permissions Policy, secure-context requirements, and agent-provider capabilities vary, so successfully registering a tool on a page does not automatically prove that ChatGPT can discover and invoke it.

We also had to distinguish native tools from inferred suggestions. Inferred tools may be useful, but they need evidence, confidence, schema validation, stable locators, and human review before execution.

Dynamic websites introduced additional challenges, including SPA updates, Shadow DOM, iframes, weak accessibility semantics, stale elements, and potentially unsafe actions. We addressed these with bounded discovery, structured validation, explicit activation, session checks, and clear native-versus-preview states.

Accomplishments that we're proud of

We built an end-to-end workflow from: Discover → Compose → Generate → Inject → Test We are especially proud that the product remains honest about capability status:

• Native WebMCP tools are clearly separated from inferred tools.
• Unsupported browsers receive an explicit preview path instead of a simulated native claim.
• Generated workflows produce structured traces and visible page effects.
• The project includes unit tests, Playwright end-to-end tests, deterministic target fixtures, and an optional browser extension.

What we learned

We learned that making websites useful to agents requires more than finding buttons or API requests. A reliable tool also needs a meaningful name, typed input schema, evidence, permissions, stable locators, and understandable failure behavior.

We also learned that page-level WebMCP registration and agent-level WebMCP consumption are separate compatibility problems. Finally, structured workflows make agent behavior more reusable and auditable than repeatedly asking an agent to perform low-level website actions.

What's next for WebMCP Studio

Next, we want to validate the complete native ChatGPT/browser connection in a supported environment. We also plan to improve inference accuracy, add more site-specific adapters, support more dynamic and authenticated workflows, and make generated projects easier to reuse across websites and sessions.

Built With

• browser-native-webmcp-apis
• chrome-mv3
• cloudflare-worker-compatible-hosting
• esbuild
• jsdom
• node.js
• playwright
• typescript
• vanilla-html/css
• vitest