Bridge Studio

• 

  Signal Lab: one approved configure_analysis call moves thirteen coupled controls, the chart, the KPIs and the provenance stamp atomically.

• 

  The cross-origin boundary, shown rather than hidden: compatibility must not mean bypassing browser security.

• 

  Civic Desk: a consequential-write tool whose result explicitly remains unsubmitted, with revocation visible in the trace.

Inspiration

The interesting question is not whether an agent can click a button. It is what happens to state that a person cannot see. We wanted a browser workspace where the capability an agent holds is a contract a person read and approved, and where every use of it is visible in the same interface the person is looking at.

What it does

Bridge Studio discovers meaningful workflows in the visible page and turns them into typed WebMCP tool proposals. Each proposal states its inputs and whether it reads or changes state. A person approves the contract before it is registered. When an agent uses an approved tool, the same interface updates, a live execution flow narrates what the protocol is doing, and the action is recorded in a durable trace.

Signal Lab is the argument. Its configure_analysis tool collapses thirteen brittle UI interactions — coupled sliders, multi-select cohorts, linked date ranges, a chart brush — into one semantic call with a JSON Schema that enforces enums, array uniqueness, numeric bounds, date patterns, and cross-field invariants (endDate > startDate, confidenceMax > confidenceMin). A click-driven automation can get halfway through that sequence and leave the dashboard in a state no human asked for. A typed tool either applies the whole configuration or is rejected with a reason.

Voyager Stays and Civic Desk keep the read-only and consequential-write cases visible, plus a guarded external-origin preview that demonstrates a boundary: compatibility must not mean bypassing browser security.

How we built it

The app uses the WebMCP Imperative API through document.modelContext.registerTool(). Three workspace tools register at startup. Page-specific tools are registered only after explicit human review and are revoked through AbortController signals when the user navigates away — with the reason shown in the trace. Every execute returns the spec-shaped { content: [{ type: "text", text }] } result.

JSON Schema bounds every input, and a validator enforces types, enums, patterns, string and numeric bounds, array cardinality and uniqueness, and rejects unexpected fields. readOnlyHint communicates risk to the agent; untrustedContentHint is true on every tool, including the action trace, because the trace carries agent-supplied text and must never be laundered back as trusted context.

The frontend is standards-based HTML, CSS, and JavaScript with no runtime framework and no build-time dependencies — the chart is hand-written SVG. Node's built-in test runner covers address handling, the full validator surface, the Signal Lab contract, and the annotation invariants. The deployment sends Content-Security-Policy with frame-ancestors 'none', because an approval dialog that can be framed is not an approval.

Challenges

The hardest design problem was respecting the difference between native site tools and browser automation. Arbitrary pages cannot be safely inspected from another origin. Instead of hiding that constraint, Bridge Studio makes it visible and demonstrates a secure same-origin workflow while outlining the isolated-browser architecture an authorized external site would need.

The second was resisting the temptation to overclaim. It would have been easy to show a tool as "registered" in browsers without WebMCP. We label it as an unregistered preview instead, because a project about honest contracts cannot lie in its own status bar.

Accomplishments

• A complete human approval → tool registration → agent execution → visible audit loop
• One typed call that atomically synchronizes thirteen coupled controls, the chart, the KPIs, and a provenance stamp
• A live, reduced-motion-safe execution flow that shows what the protocol is doing as it happens
• Graceful, truthful operation both with and without a WebMCP-enabled browser
• Explicit protections against clickjacking, cross-origin overclaims, and trace-laundered prompt injection

What we learned

The most valuable WebMCP capability is not automation. It is a shared, inspectable contract between a website, a person, and their agent. Trust comes from narrow inputs, honest side-effect metadata, atomic application, visible execution, and revocation the user can see and reverse.

What's next

An isolated remote-browser worker for domains the user is authorized to automate, a tool-contract compiler that derives schemas from existing forms, saved organization policies, WebMCP evals, and cryptographically signed action receipts.

Built With

• chrome
• css
• html
• javascript
• json-schema
• node.js
• sarvam-ai
• vercel
• webmcp