feat(inspect): inspect the browser side: client RPC functions and WebMCP tools

Author: antfubot

docs/content/5.add-ons/1.devframes/2.inspect.md

@@ -24,6 +24,7 @@ _History panels_
 ## What it does
 
 - **Functions**: type, flags, JSON Schema, agent exposure; read-only `query` / `static` invokable inline.
+- **Client**: the browser side of the connection: client RPC functions (invoked locally in the page) and the page's WebMCP tools, live from the model context's `getTools()` when the browser supports discovery, otherwise projected from `agent`-flagged client functions.
 - **State**: shared-state keys in a live JSON tree that flashes changes.
 - **Agent**: tools and resources for agents.
 - **History**: a timeline of RPC calls and shared-state updates.

packages/devframe/src/client/webmcp.ts

@@ -29,18 +29,42 @@ export interface WebMcpToolDescriptor {
   execute: (args: Record<string, unknown>) => Promise<WebMcpToolResult>
 }
 
+/**
+ * A tool as reported by {@link WebMcpModelContext.getTools}: the
+ * serializable descriptor fields plus the registering `origin`. The
+ * browser may attach more members (e.g. the owner `window`); pass the
+ * object through unchanged to {@link WebMcpModelContext.executeTool}.
+ */
+export interface WebMcpRegisteredTool {
+  name: string
+  description?: string
+  inputSchema?: unknown
+  origin?: string
+}
+
 /**
  * Structural subset of the experimental WebMCP model context
  * (`document.modelContext` / `navigator.modelContext`). The current draft
  * unregisters a tool by aborting the passed `AbortSignal` and returns a
  * promise; earlier drafts returned a handle with `unregister()`. Typed to
- * accept both generations.
+ * accept both generations. `getTools` / `executeTool` are the draft's
+ * discovery/execution surface for in-page agents; absent on older drafts.
  */
 export interface WebMcpModelContext {
   registerTool: (
     tool: WebMcpToolDescriptor,
     options?: { signal?: AbortSignal },
   ) => void | { unregister?: () => void } | Promise<unknown>
+  getTools?: (options?: { fromOrigins?: string[] }) => Promise<WebMcpRegisteredTool[]>
+  /**
+   * The spec draft takes the args as a dictionary; Chromium's current
+   * build takes (and returns) JSON strings instead, hence the union.
+   */
+  executeTool?: (
+    tool: WebMcpRegisteredTool,
+    args: Record<string, unknown> | string,
+    options?: { signal?: AbortSignal },
+  ) => Promise<unknown>
 }
 
 interface WebMcpModelContextCarrier {

plugins/inspect/app/App.vue

@@ -14,6 +14,7 @@ import {
   connectionTitle,
 } from '../../../design/design'
 import AgentSmart from './components/AgentSmart.vue'
+import ClientSmart from './components/ClientSmart.vue'
 import CommandsSmart from './components/CommandsSmart.vue'
 import FunctionsSmart from './components/FunctionsSmart.vue'
 import HistorySmart from './components/HistorySmart.vue'
@@ -22,7 +23,7 @@ import StateSmart from './components/StateSmart.vue'
 import { useRefresh } from './composables/refresh'
 import { connect, connection, isStatic } from './composables/rpc'
 
-type Tab = 'functions' | 'state' | 'agent' | 'commands' | 'history' | 'instances'
+type Tab = 'functions' | 'client' | 'state' | 'agent' | 'commands' | 'history' | 'instances'
 
 const tab = ref<Tab>('functions')
 const { refresh, loading } = useRefresh()
@@ -37,6 +38,7 @@ const connState = computed(() => connectionState(connection.status))
 
 const allTabs: { value: Tab, label: string, icon: string }[] = [
   { value: 'functions', label: 'Functions', icon: 'i-ph-function-duotone' },
+  { value: 'client', label: 'Client', icon: 'i-ph-browser-duotone' },
   { value: 'state', label: 'State', icon: 'i-ph-database-duotone' },
   { value: 'agent', label: 'Agent', icon: 'i-ph-robot-duotone' },
   { value: 'commands', label: 'Commands', icon: 'i-ph-terminal-window-duotone' },
@@ -109,6 +111,7 @@ function reload(): void {
       </div>
       <template v-else>
         <FunctionsSmart v-if="tab === 'functions'" />
+        <ClientSmart v-else-if="tab === 'client'" />
         <StateSmart v-else-if="tab === 'state'" />
         <AgentSmart v-else-if="tab === 'agent'" />
         <CommandsSmart v-else-if="tab === 'commands'" />

plugins/inspect/app/components/ClientSmart.vue

@@ -0,0 +1,70 @@
+<script setup lang="ts">
+import type { ClientWebMcpState } from '../composables/client'
+import type { InvokeResult, RpcFunctionInfo } from '../connect'
+import { resolveWebMcpModelContext } from 'devframe/client'
+import { onMounted, onUnmounted, reactive, shallowRef } from 'vue'
+import { executeWebMcpTool, invokeClientFunction, listClientFunctions, loadWebMcpState } from '../composables/client'
+import { useRefreshProvider } from '../composables/refresh'
+import { useRpc } from '../composables/rpc'
+import ClientView from './ClientView.vue'
+
+const rpc = useRpc()
+const functions = shallowRef<RpcFunctionInfo[] | null>(null)
+const webmcp = shallowRef<ClientWebMcpState | null>(null)
+const results = reactive<Record<string, InvokeResult | { ok: false, error: { name: string, message: string } }>>({})
+const pending = reactive<Record<string, boolean>>({})
+
+async function fetchData(): Promise<void> {
+  if (!rpc.value)
+    return
+  functions.value = listClientFunctions(rpc.value.client)
+  webmcp.value = await loadWebMcpState(rpc.value.client)
+}
+
+useRefreshProvider(fetchData)
+let unsubscribe: (() => void) | undefined
+onMounted(() => {
+  void fetchData()
+  // Client functions register locally at any time; follow the collector.
+  unsubscribe = rpc.value?.client.onChanged(() => void fetchData())
+})
+onUnmounted(() => unsubscribe?.())
+
+async function onInvoke(fn: RpcFunctionInfo, parsedArgs: unknown[]): Promise<void> {
+  if (!rpc.value)
+    return
+  pending[fn.name] = true
+  try {
+    results[fn.name] = await invokeClientFunction(rpc.value.client, fn.name, parsedArgs)
+  }
+  finally {
+    pending[fn.name] = false
+  }
+}
+
+async function onInvokeTool(name: string, parsedArgs: Record<string, unknown>): Promise<void> {
+  const modelContext = resolveWebMcpModelContext()
+  const tool = webmcp.value?.tools.find(t => t.name === name)
+  if (!modelContext || !tool)
+    return
+  const key = `webmcp:${name}`
+  pending[key] = true
+  try {
+    results[key] = await executeWebMcpTool(modelContext, tool, parsedArgs)
+  }
+  finally {
+    pending[key] = false
+  }
+}
+</script>
+
+<template>
+  <ClientView
+    :functions="functions"
+    :webmcp="webmcp"
+    :results="results"
+    :pending="pending"
+    @invoke="onInvoke"
+    @invoke-tool="onInvokeTool"
+  />
+</template>

plugins/inspect/app/components/ClientView.stories.ts

@@ -0,0 +1,104 @@
+import type { Meta, StoryObj } from '@storybook/vue3-vite'
+import ClientView from './ClientView.vue'
+
+const meta = {
+  title: 'Inspector/ClientView',
+  component: ClientView,
+  tags: ['autodocs'],
+  argTypes: {
+    onInvoke: { action: 'invoked' },
+    onInvokeTool: { action: 'invoked-tool' },
+  },
+} satisfies Meta<typeof ClientView>
+
+export default meta
+type Story = StoryObj<typeof meta>
+
+const functions = [
+  {
+    name: 'devframe:rpc:client-state:updated',
+    type: 'event' as const,
+    jsonSerializable: false,
+    snapshot: false,
+    cacheable: false,
+    hasArgs: false,
+    hasReturns: false,
+    hasDump: false,
+    hasSetup: false,
+    hasHandler: true,
+    invokable: false,
+  },
+  {
+    name: 'my-plugin:get-selection',
+    type: 'query' as const,
+    jsonSerializable: true,
+    snapshot: false,
+    cacheable: false,
+    hasArgs: false,
+    hasReturns: true,
+    hasDump: false,
+    hasSetup: false,
+    hasHandler: true,
+    invokable: true,
+    agent: {
+      description: 'Return the node currently selected in the page.',
+      title: 'Get selection',
+    },
+  },
+]
+
+export const LiveModelContext: Story = {
+  args: {
+    functions,
+    webmcp: {
+      available: true,
+      live: true,
+      executable: true,
+      tools: [
+        {
+          name: 'my-plugin_get-selection',
+          description: 'Return the node currently selected in the page.',
+          inputSchema: { type: 'object', properties: {} },
+          origin: 'http://localhost:5173',
+        },
+        {
+          name: 'add-todo',
+          description: 'Add a new item to the todo list.',
+          inputSchema: { type: 'object', properties: { text: { type: 'string' } }, required: ['text'] },
+          origin: 'http://localhost:5173',
+        },
+      ],
+    },
+    results: {},
+    pending: {},
+  },
+}
+
+export const ProjectedWithoutModelContext: Story = {
+  args: {
+    functions,
+    webmcp: {
+      available: false,
+      live: false,
+      executable: false,
+      tools: [
+        {
+          name: 'my-plugin_get-selection',
+          description: 'Return the node currently selected in the page.',
+          source: 'my-plugin:get-selection',
+        },
+      ],
+    },
+    results: {},
+    pending: {},
+  },
+}
+
+export const Empty: Story = {
+  args: {
+    functions: [],
+    webmcp: { available: false, live: false, executable: false, tools: [] },
+    results: {},
+    pending: {},
+  },
+}