feat(client): expose agent-flagged client RPC functions over WebMCP

[antfubot]

What

The agent field on an RPC function definition now also works on the browser side, and the inspector can inspect that surface.

Client RPC over WebMCP (devframe/client): a client RPC function registered on rpc.client (or via a scoped client.scope(ns).rpc.register(...)) that carries an agent field is mirrored onto the page's WebMCP model context (document.modelContext / navigator.modelContext) as a callable tool, so in-page and browser-integrated agents can drive browser-side functionality directly.

Inspector Client tab (@devframes/plugin-inspect): a new tab inspecting the browser side of the connection — every client RPC function (same metadata, schemas, and inline invoke as the Functions tab, executed locally in the page) and the page's WebMCP tools (read live via the model context's getTools() when the browser supports discovery, executable via executeTool(); projected from agent-flagged client functions otherwise).

How

• New registerWebMcpTools(collector) in devframe/client: projects agent-flagged definitions onto the model context using the exact pieces the node-side MCP adapter uses (toAgentToolName wire names, argsToJsonSchema arg0/argN input schemas, coerceAgentPositionalArgs, safety → readOnlyHint/destructiveHint), keeps the tool set in sync with later register/update calls, and returns a dispose. Handles both WebMCP unregistration generations (AbortSignal per the current draft, legacy unregister() handles).
• connectDevframe() wires it automatically (no-op when the browser provides no model context); the new webmcp: false option opts out, and close() unregisters the tools.
• Default-deny is unchanged: functions without an agent field are never exposed, and agent still requires jsonSerializable: true.
• The structural WebMcpModelContext type carries the draft's getTools() / executeTool() discovery surface; the inspector handles both wire generations (Chromium's current build carries args/results/schemas as JSON strings; the spec draft uses dictionaries — the string form is tried first, and a dictionary implementation rejects it during argument conversion before the tool runs, so the fallback is side-effect free).
• The inspector's function→info projection is extracted to plugins/inspect/src/function-info.ts, shared by the node-side list-functions RPC and the browser-side Client tab so the two listings cannot drift.
• Docs: WebMCP section in the Agent-Native guide, webmcp row in the Browser-Side API reference, Client tab in the inspect plugin page; API snapshots updated; ClientView storybook stories added.

Verified end to end in Chromium's live WebMCP implementation (tool registered by the page appears on the Client tab with origin + schema, and invoking it through executeTool() renders the MCP result). No new dependencies.

---

Created with the help of an agent.

[coldtea-pr-lens]

◈ PR Lens

🟢 +3 new · 🟠 ~2 changed · 🔴 -1 removed · 2 flows · 13 files · commit 55f8f62

Architecture

6 components touched across 4 lanes.

Open the interactive canvas

Inside the changed components — 2 views

Component view — WebMCP Client Integration

Internal modules bridging browser-side RPC functions to the WebMCP model context.

Component view — Inspector Client Surface

Components and modules powering the inspector's Client tab and function metadata projection.

Data flow

WebMCP tool registration and execution · Client tab discovery and tool invocation

Open the interactive canvas

The other flows — 1 sequence

Client tab discovery and tool invocation

Drill down

Client Runtimes ＆ UI — 2 components

🟡 CHANGED Browser RPC Client

Client connection runtime updated to automatically initialize WebMCP tool mirroring and clean up on disconnect.

• packages/devframe/src/client/rpc.ts:21-491
• packages/devframe/src/client/index.ts:9-13

🟢 NEW WebMCP Tool Bridge

Mirrors agent-flagged client RPC functions onto the browser WebMCP model context with schema validation and error wrapping.

• packages/devframe/src/client/webmcp.ts:1-228
• packages/devframe/src/client/webmcp.test.ts:1-298

Built-in Devframes — 4 components

🟡 CHANGED Inspect Devframe

Devtools inspector plugin hosting RPC, state, agent, commands, and client inspection views.

• plugins/inspect/app/App.vue:14-114
• plugins/inspect/src/node/rpc/functions/list-functions.ts:1-25

🟢 NEW Inspector Client Surface

Inspects client-registered RPC functions and WebMCP tools, supporting local query execution and live tool runs.

• plugins/inspect/app/components/ClientSmart.vue:1-70
• plugins/inspect/app/components/ClientView.vue:1-167
• plugins/inspect/app/components/ClientView.stories.ts:1-104
• plugins/inspect/app/composables/client.ts:1-155
• plugins/inspect/test/client-inspection.test.ts:1-148

🟢 NEW Function Introspection

Shared metadata projection and Standard JSON Schema conversion for both node-side and client-side RPC definitions.

• plugins/inspect/src/function-info.ts:1-95

🔴 REMOVED Legacy Schema Helper

Former node-only JSON Schema converter replaced by the shared function introspection module.

• plugins/inspect/src/node/rpc/functions/_schema.ts:1-52

View

• Architecture lens
• Data flow lens
• Expand every detail
• Show unchanged neighbours

Tip

GitHub will not let you zoom an image in a comment. The link under each diagram opens it on an interactive canvas, where you can zoom, pan and step through the flow.

🪧 More tips

• Run PR Lens on your own machine: npx skills add coldteadotai/pr-lens installs the agent skill. Then tell your coding agent: "Diagram the change you just made with PR Lens and attach it to the pull request."
• Draw a diff before it is even a pull request: npx @coldtea/pr-lens-cli analyze --base origin/main reads the diff with your own model key, and npx @coldtea/pr-lens-cli render .pr-lens/graph.json draws the same lenses on your machine.
• The boxes under View are live. Tick Architecture lens or Data flow lens to choose which diagrams appear, or Expand every detail to open every drill-down at once. The comment redraws in place a few seconds later.
• Show unchanged neighbours lists the components this change did not touch alongside the ones it did, so the drill-down shows what the changed code sits next to.
• The CLI's render picks up .github/pr-lens.yml automatically and applies your corrections (renames, exclusions, lane pins) at draw time.
• Would you rather run it from CI on a key of your own? Add .github/workflows/pr-lens.yml with coldteadotai/pr-lens/packages/action@v0 and a model key in your repository secrets, say GEMINI_API_KEY. The Action asks Gemini by default, or OpenAI and any endpoint speaking /chat/completions through its provider input.
• PR Lens is free for open source. A star on the repository is what keeps it going.
• Push a new commit and the whole comment re-renders for the new head. An older run never overwrites a newer one, so a slow render cannot put a stale diagram back.
• The diagrams follow your GitHub theme, so dark mode gets the dark render and light mode the light one, and the moving dots show this pull request's data in motion.

---

◈ Rendered by PR Lens · crafted with ❤️ by the Coldtea team · Come say hi on Discord

[vercel]

The latest updates on your projects. Learn more about Vercel for GitHub.

1 Skipped Deployment

Project	Deployment	Actions	Updated
devframe	Skipped		Sep 8, 2026 2:28am UTC