@copilotkit/vue 1.70.0 → 1.70.2

package/dist/v2/hooks/use-frontend-tool.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"use-frontend-tool.d.ts","sourceRoot":"","sources":["../../../src/v2/hooks/use-frontend-tool.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,KAAK,CAAC;AAEvC,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,UAAU,CAAC;AAKhD;;;;;;;;;;;;;;GAcG;AACH,wBAAgB,eAAe,CAAC,CAAC,SAAS,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,EAC/D,IAAI,EAAE,eAAe,CAAC,CAAC,CAAC,EACxB,IAAI,CAAC,EAAE,WAAW,CAAC,OAAO,CAAC,EAAE,QA0C9B"}
+{"version":3,"file":"use-frontend-tool.d.ts","sourceRoot":"","sources":["../../../src/v2/hooks/use-frontend-tool.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,KAAK,CAAC;AAEvC,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,UAAU,CAAC;AAKhD;;;;;;;;;;;;;;GAcG;AACH,wBAAgB,eAAe,CAAC,CAAC,SAAS,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,EAC/D,IAAI,EAAE,eAAe,CAAC,CAAC,CAAC,EACxB,IAAI,CAAC,EAAE,WAAW,CAAC,OAAO,CAAC,EAAE,QA6C9B"}

package/dist/v2/index.cjs

@@ -1,2 +1,2 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const o=require("@copilotkit/core"),i=require("@ag-ui/client"),e=require("../use-render-activity-message-h2NHCkBt.cjs"),n=require("@copilotkit/shared");exports.A2UIActivityContentSchema=e.A2UIActivityContentSchema;exports.A2UISurfaceActivityRenderer=e._sfc_main;exports.A2UISurfaceActivityType=e.A2UISurfaceActivityType;exports.CopilotChat=e.CopilotChat;exports.CopilotChatAssistantMessage=e._sfc_main$1;exports.CopilotChatAttachmentQueue=e._sfc_main$2;exports.CopilotChatAttachmentRenderer=e._sfc_main$3;exports.CopilotChatAudioRecorder=e._sfc_main$4;exports.CopilotChatConfigurationProvider=e._sfc_main$5;exports.CopilotChatDefaultLabels=e.CopilotChatDefaultLabels;exports.CopilotChatInput=e._sfc_main$6;exports.CopilotChatMessageView=e._sfc_main$7;exports.CopilotChatReasoningMessage=e._sfc_main$8;exports.CopilotChatSuggestionPill=e._sfc_main$9;exports.CopilotChatSuggestionView=e._sfc_main$10;exports.CopilotChatToggleButton=e.CopilotChatToggleButton;exports.CopilotChatToggleButtonCloseIcon=e.CopilotChatToggleButtonCloseIcon;exports.CopilotChatToggleButtonOpenIcon=e.CopilotChatToggleButtonOpenIcon;exports.CopilotChatToolCallsView=e._sfc_main$11;exports.CopilotChatUserMessage=e._sfc_main$12;exports.CopilotChatView=e._sfc_main$13;exports.CopilotKitCoreVue=e.CopilotKitCoreVue;exports.CopilotKitInspector=e._sfc_main$14;exports.CopilotKitProvider=e._sfc_main$15;exports.CopilotModalHeader=e.CopilotModalHeader;exports.CopilotPopup=e._sfc_main$16;exports.CopilotPopupView=e.CopilotPopupView;exports.CopilotSidebar=e._sfc_main$17;exports.CopilotSidebarView=e.CopilotSidebarView;exports.CopilotThreadsDrawer=e._sfc_main$18;exports.GenerateSandboxedUiArgsSchema=e.GenerateSandboxedUiArgsSchema;exports.LicenseContextKey=e.LicenseContextKey;exports.MCPAppsActivityContentSchema=e.MCPAppsActivityContentSchema;exports.MCPAppsActivityRenderer=e.MCPAppsActivityRenderer;exports.MCPAppsActivityType=e.MCPAppsActivityType;exports.OpenGenerativeUIActivityRenderer=e.OpenGenerativeUIActivityRenderer;exports.OpenGenerativeUIActivityType=e.OpenGenerativeUIActivityType;exports.OpenGenerativeUIContentSchema=e.OpenGenerativeUIContentSchema;exports.OpenGenerativeUIRenderer=e.OpenGenerativeUIRenderer;exports.OpenGenerativeUIToolRenderer=e.OpenGenerativeUIToolRenderer;exports.UseAgentUpdate=e.UseAgentUpdate;exports.createA2UIMessageRenderer=e.createA2UIMessageRenderer;exports.createDefaultLicenseRef=e.createDefaultLicenseRef;exports.defineToolCallRenderer=e.defineToolCallRenderer;exports.extractCompleteStyles=e.extractCompleteStyles;exports.getOperationSurfaceId=e.getOperationSurfaceId;exports.processPartialHtml=e.processPartialHtml;exports.useAgent=e.useAgent;exports.useAgentContext=e.useAgentContext;exports.useAttachments=e.useAttachments;exports.useCapabilities=e.useCapabilities;exports.useComponent=e.useComponent;exports.useConfigureSuggestions=e.useConfigureSuggestions;exports.useCopilotChatConfiguration=e.useCopilotChatConfiguration;exports.useCopilotKit=e.useCopilotKit;exports.useDefaultRenderTool=e.useDefaultRenderTool;exports.useFrontendTool=e.useFrontendTool;exports.useHumanInTheLoop=e.useHumanInTheLoop;exports.useInterrupt=e.useInterrupt;exports.useKatexStyles=e.useKatexStyles;exports.useKeyboardHeight=e.useKeyboardHeight;exports.useLicenseContext=e.useLicenseContext;exports.useRenderActivityMessage=e.useRenderActivityMessage;exports.useRenderCustomMessages=e.useRenderCustomMessages;exports.useRenderTool=e.useRenderTool;exports.useSandboxFunctions=e.useSandboxFunctions;exports.useSuggestions=e.useSuggestions;exports.useThreads=e.useThreads;exports.vueBasicCatalog=e.vueBasicCatalog;Object.defineProperty(exports,"createLicenseContextValue",{enumerable:!0,get:()=>n.createLicenseContextValue});Object.keys(o).forEach(t=>{t!=="default"&&!Object.prototype.hasOwnProperty.call(exports,t)&&Object.defineProperty(exports,t,{enumerable:!0,get:()=>o[t]})});Object.keys(i).forEach(t=>{t!=="default"&&!Object.prototype.hasOwnProperty.call(exports,t)&&Object.defineProperty(exports,t,{enumerable:!0,get:()=>i[t]})});
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const o=require("@copilotkit/core"),i=require("@ag-ui/client"),e=require("../use-render-activity-message-CyThomMH.cjs"),n=require("@copilotkit/shared");exports.A2UIActivityContentSchema=e.A2UIActivityContentSchema;exports.A2UISurfaceActivityRenderer=e._sfc_main;exports.A2UISurfaceActivityType=e.A2UISurfaceActivityType;exports.CopilotChat=e.CopilotChat;exports.CopilotChatAssistantMessage=e._sfc_main$1;exports.CopilotChatAttachmentQueue=e._sfc_main$2;exports.CopilotChatAttachmentRenderer=e._sfc_main$3;exports.CopilotChatAudioRecorder=e._sfc_main$4;exports.CopilotChatConfigurationProvider=e._sfc_main$5;exports.CopilotChatDefaultLabels=e.CopilotChatDefaultLabels;exports.CopilotChatInput=e._sfc_main$6;exports.CopilotChatMessageView=e._sfc_main$7;exports.CopilotChatReasoningMessage=e._sfc_main$8;exports.CopilotChatSuggestionPill=e._sfc_main$9;exports.CopilotChatSuggestionView=e._sfc_main$10;exports.CopilotChatToggleButton=e.CopilotChatToggleButton;exports.CopilotChatToggleButtonCloseIcon=e.CopilotChatToggleButtonCloseIcon;exports.CopilotChatToggleButtonOpenIcon=e.CopilotChatToggleButtonOpenIcon;exports.CopilotChatToolCallsView=e._sfc_main$11;exports.CopilotChatUserMessage=e._sfc_main$12;exports.CopilotChatView=e._sfc_main$13;exports.CopilotKitCoreVue=e.CopilotKitCoreVue;exports.CopilotKitInspector=e._sfc_main$14;exports.CopilotKitProvider=e._sfc_main$15;exports.CopilotModalHeader=e.CopilotModalHeader;exports.CopilotPopup=e._sfc_main$16;exports.CopilotPopupView=e.CopilotPopupView;exports.CopilotSidebar=e._sfc_main$17;exports.CopilotSidebarView=e.CopilotSidebarView;exports.CopilotThreadsDrawer=e._sfc_main$18;exports.GenerateSandboxedUiArgsSchema=e.GenerateSandboxedUiArgsSchema;exports.LicenseContextKey=e.LicenseContextKey;exports.MCPAppsActivityContentSchema=e.MCPAppsActivityContentSchema;exports.MCPAppsActivityRenderer=e.MCPAppsActivityRenderer;exports.MCPAppsActivityType=e.MCPAppsActivityType;exports.OpenGenerativeUIActivityRenderer=e.OpenGenerativeUIActivityRenderer;exports.OpenGenerativeUIActivityType=e.OpenGenerativeUIActivityType;exports.OpenGenerativeUIContentSchema=e.OpenGenerativeUIContentSchema;exports.OpenGenerativeUIRenderer=e.OpenGenerativeUIRenderer;exports.OpenGenerativeUIToolRenderer=e.OpenGenerativeUIToolRenderer;exports.UseAgentUpdate=e.UseAgentUpdate;exports.createA2UIMessageRenderer=e.createA2UIMessageRenderer;exports.createDefaultLicenseRef=e.createDefaultLicenseRef;exports.defineToolCallRenderer=e.defineToolCallRenderer;exports.extractCompleteStyles=e.extractCompleteStyles;exports.getOperationSurfaceId=e.getOperationSurfaceId;exports.processPartialHtml=e.processPartialHtml;exports.useAgent=e.useAgent;exports.useAgentContext=e.useAgentContext;exports.useAttachments=e.useAttachments;exports.useCapabilities=e.useCapabilities;exports.useComponent=e.useComponent;exports.useConfigureSuggestions=e.useConfigureSuggestions;exports.useCopilotChatConfiguration=e.useCopilotChatConfiguration;exports.useCopilotKit=e.useCopilotKit;exports.useDefaultRenderTool=e.useDefaultRenderTool;exports.useFrontendTool=e.useFrontendTool;exports.useHumanInTheLoop=e.useHumanInTheLoop;exports.useInterrupt=e.useInterrupt;exports.useKatexStyles=e.useKatexStyles;exports.useKeyboardHeight=e.useKeyboardHeight;exports.useLicenseContext=e.useLicenseContext;exports.useRenderActivityMessage=e.useRenderActivityMessage;exports.useRenderCustomMessages=e.useRenderCustomMessages;exports.useRenderTool=e.useRenderTool;exports.useSandboxFunctions=e.useSandboxFunctions;exports.useSuggestions=e.useSuggestions;exports.useThreads=e.useThreads;exports.vueBasicCatalog=e.vueBasicCatalog;Object.defineProperty(exports,"createLicenseContextValue",{enumerable:!0,get:()=>n.createLicenseContextValue});Object.keys(o).forEach(t=>{t!=="default"&&!Object.prototype.hasOwnProperty.call(exports,t)&&Object.defineProperty(exports,t,{enumerable:!0,get:()=>o[t]})});Object.keys(i).forEach(t=>{t!=="default"&&!Object.prototype.hasOwnProperty.call(exports,t)&&Object.defineProperty(exports,t,{enumerable:!0,get:()=>i[t]})});
 //# sourceMappingURL=index.cjs.map

package/dist/v2/index.mjs

@@ -1,6 +1,6 @@
 export * from "@copilotkit/core";
 export * from "@ag-ui/client";
-import { A as o, _ as i, a as n, C, b as r, c as p, d as l, e as u, f as c, g, h as d, i as h, j as A, k as v, l as S, m, n as y, o as I, p as f, q as R, r as T, s as U, t as x, u as M, v as P, w as b, x as V, y as w, z as K, B as O, G, L, M as B, D, E as H, O as F, F as Q, H as j, I as k, J as q, U as z, K as E, N as J, P as N, Q as W, R as X, S as Y, T as Z, V as _, W as $, X as ee, Y as ae, Z as te, $ as se, a0 as oe, a1 as ie, a2 as ne, a3 as Ce, a4 as re, a5 as pe, a6 as le, a7 as ue, a8 as ce, a9 as ge, aa as de, ab as he, ac as Ae, ad as ve, ae as Se } from "../use-render-activity-message-ytoSQi6V.js";
+import { A as o, _ as i, a as n, C, b as r, c as p, d as l, e as u, f as c, g, h as d, i as h, j as A, k as v, l as S, m, n as y, o as I, p as f, q as R, r as T, s as U, t as x, u as M, v as P, w as b, x as V, y as w, z as K, B as O, G, L, M as B, D, E as H, O as F, F as Q, H as j, I as k, J as q, U as z, K as E, N as J, P as N, Q as W, R as X, S as Y, T as Z, V as _, W as $, X as ee, Y as ae, Z as te, $ as se, a0 as oe, a1 as ie, a2 as ne, a3 as Ce, a4 as re, a5 as pe, a6 as le, a7 as ue, a8 as ce, a9 as ge, aa as de, ab as he, ac as Ae, ad as ve, ae as Se } from "../use-render-activity-message-WeN5iF5H.js";
 import { createLicenseContextValue as ye } from "@copilotkit/shared";
 export {
   o as A2UIActivityContentSchema,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@copilotkit/vue",
-  "version": "1.70.0",
+  "version": "1.70.2",
   "private": false,
   "description": "Vue 3 components and composables for CopilotKit",
   "keywords": [
@@ -70,10 +70,10 @@
     "streamdown-vue": "^1.0.29",
     "zod": "^3.25.75",
     "zod-to-json-schema": "^3.24.5",
-    "@copilotkit/core": "1.70.0",
-    "@copilotkit/web-components": "1.70.0",
-    "@copilotkit/web-inspector": "1.70.0",
-    "@copilotkit/shared": "1.70.0"
+    "@copilotkit/core": "1.70.2",
+    "@copilotkit/shared": "1.70.2",
+    "@copilotkit/web-components": "1.70.2",
+    "@copilotkit/web-inspector": "1.70.2"
   },
   "devDependencies": {
     "@eslint/js": "^9.39.2",

package/src/hooks/__tests__/use-frontend-tool-webmcp.test.ts

@@ -0,0 +1,113 @@
+import { defineComponent, ref, watch } from "vue";
+import { screen, fireEvent, waitFor } from "@testing-library/vue";
+import { describe, it, expect } from "vitest";
+import { useFrontendTool } from "../use-frontend-tool";
+import { useCopilotKit } from "../../v2/providers/useCopilotKit";
+import type { CopilotKitCoreVue } from "../../v2/lib/vue-core";
+import { renderWithCopilotKit } from "../../v2/__tests__/utils/test-helpers";
+
+/**
+ * Component that captures the copilotkit core ref for test assertions.
+ */
+const CoreCapture = defineComponent({
+  props: {
+    onCore: {
+      type: Function as () => (core: CopilotKitCoreVue) => void,
+      required: true,
+    },
+  },
+  setup(props) {
+    const { copilotkit } = useCopilotKit();
+    watch(
+      copilotkit,
+      (core) => {
+        if (core) {
+          props.onCore(core);
+        }
+      },
+      { immediate: true },
+    );
+    return {};
+  },
+  template: `<div />`,
+});
+
+describe("useFrontendTool v1 webmcp pass-through", () => {
+  it("re-registers tool when a reactive webmcp getter changes", async () => {
+    let coreRef: CopilotKitCoreVue | null = null;
+
+    const ToolComponent = defineComponent({
+      setup() {
+        const readOnly = ref(false);
+
+        useFrontendTool(
+          {
+            name: "v1WebmcpTool",
+            description: "A v1 WebMCP-exposed tool",
+            handler: async () => ({ ok: true }),
+            // Expose webmcp as a getter over reactive state: the registration
+            // must re-read it when it changes, not capture the initial value.
+            get webmcp() {
+              return { annotations: { readOnlyHint: readOnly.value } };
+            },
+          },
+          [readOnly],
+        );
+
+        return {
+          readOnly,
+          toggle: () => {
+            readOnly.value = !readOnly.value;
+          },
+        };
+      },
+      template: `
+        <button data-testid="toggle-btn" @click="toggle">
+          {{ readOnly ? "Read-write" : "Read-only" }}
+        </button>
+      `,
+    });
+
+    const Host = defineComponent({
+      components: { ToolComponent, CoreCapture },
+      setup() {
+        return {
+          setCore: (core: CopilotKitCoreVue) => {
+            coreRef = core;
+          },
+        };
+      },
+      template: `
+        <div>
+          <ToolComponent />
+          <CoreCapture :on-core="setCore" />
+        </div>
+      `,
+    });
+
+    const ui = renderWithCopilotKit({
+      children: Host,
+    });
+
+    await waitFor(() => {
+      expect(coreRef).not.toBeNull();
+      const tool = coreRef!.tools.find(
+        (entry) => entry.name === "v1WebmcpTool",
+      );
+      expect(tool).toBeDefined();
+      expect(tool!.webmcp).toEqual({ annotations: { readOnlyHint: false } });
+    });
+
+    await fireEvent.click(screen.getByTestId("toggle-btn"));
+
+    await waitFor(() => {
+      const tool = coreRef!.tools.find(
+        (entry) => entry.name === "v1WebmcpTool",
+      );
+      expect(tool).toBeDefined();
+      expect(tool!.webmcp).toEqual({ annotations: { readOnlyHint: true } });
+    });
+
+    ui.unmount();
+  });
+});

package/src/hooks/use-copilot-action.ts

@@ -5,6 +5,7 @@
  * v2 composable (useFrontendTool, useHumanInTheLoop, or useRenderTool).
  */
 import type { WatchSource } from "vue";
+import type { WebMCPToolConfig } from "@copilotkit/core";
 import type { Parameter, MappedParameterTypes } from "@copilotkit/shared";
 import { getZodParameters, parseJson } from "@copilotkit/shared";
 import { useFrontendTool as useFrontendToolV2 } from "../v2/hooks/use-frontend-tool";
@@ -38,6 +39,12 @@ export interface FrontendAction<T extends Parameter[] | [] = []> {
   renderAndWaitForResponse?: VueFrontendTool<MappedParameterTypes<T>>["render"];
   renderAndWait?: VueFrontendTool<MappedParameterTypes<T>>["render"];
   agentId?: string;
+  /**
+   * Also expose this action to browser agents through the WebMCP API
+   * (`document.modelContext`). `true` uses default annotations;
+   * `{ annotations }` provides WebMCP annotations.
+   */
+  webmcp?: boolean | WebMCPToolConfig;
 }
 
 export interface CatchAllFrontendAction {
@@ -162,6 +169,12 @@ export function useCopilotAction<const T extends Parameter[] | [] = []>(
       render: wrapRenderWithJsonResult(typedAction.render),
       available: normalizedAvailable,
       agentId: typedAction.agentId,
+      // Read webmcp at watch time: the action object may expose it as a getter
+      // over reactive state, and capturing the initial value here would
+      // re-register a stale configuration.
+      get webmcp() {
+        return typedAction.webmcp;
+      },
     },
     deps,
   );

package/src/hooks/use-frontend-tool.ts

@@ -5,6 +5,7 @@
  * then delegates to the v2 composable.
  */
 import type { WatchSource } from "vue";
+import type { WebMCPToolConfig } from "@copilotkit/core";
 import {
   type Parameter,
   type MappedParameterTypes,
@@ -23,6 +24,12 @@ export interface UseFrontendToolArgs<T extends Parameter[] | [] = []> {
   available?: "disabled" | "enabled";
   render?: VueFrontendTool<MappedParameterTypes<T>>["render"];
   agentId?: string;
+  /**
+   * Also expose this tool to browser agents through the WebMCP API
+   * (`document.modelContext`). `true` uses default annotations;
+   * `{ annotations }` provides WebMCP annotations.
+   */
+  webmcp?: boolean | WebMCPToolConfig;
 }
 
 export function useFrontendTool<const T extends Parameter[] = []>(
@@ -70,6 +77,12 @@ export function useFrontendTool<const T extends Parameter[] = []>(
       render: normalizedRender,
       available: available === undefined ? undefined : available !== "disabled",
       agentId,
+      // Read webmcp at watch time: the v1 args may expose it as a getter over
+      // reactive state, and capturing the initial value here would re-register
+      // a stale configuration.
+      get webmcp() {
+        return tool.webmcp;
+      },
     },
     deps,
   );

package/src/v2/hooks/__tests__/use-frontend-tool-webmcp.test.ts

@@ -0,0 +1,282 @@
+import { defineComponent, ref, watch } from "vue";
+import { screen, fireEvent, waitFor } from "@testing-library/vue";
+import { z } from "zod";
+import { describe, it, expect } from "vitest";
+import { useFrontendTool } from "../use-frontend-tool";
+import { useCopilotKit } from "../../providers/useCopilotKit";
+import type { VueFrontendTool } from "../../types";
+import type { CopilotKitCoreVue } from "../../lib/vue-core";
+import { renderWithCopilotKit } from "../../__tests__/utils/test-helpers";
+
+/**
+ * Component that captures the copilotkit core ref for test assertions.
+ */
+const CoreCapture = defineComponent({
+  props: {
+    onCore: {
+      type: Function as () => (core: CopilotKitCoreVue) => void,
+      required: true,
+    },
+  },
+  setup(props) {
+    const { copilotkit } = useCopilotKit();
+    watch(
+      copilotkit,
+      (core) => {
+        if (core) {
+          props.onCore(core);
+        }
+      },
+      { immediate: true },
+    );
+    return {};
+  },
+  template: `<div />`,
+});
+
+describe("useFrontendTool webmcp flag", () => {
+  it("registers tool with webmcp: true on the core", async () => {
+    let coreRef: CopilotKitCoreVue | null = null;
+
+    const ToolComponent = defineComponent({
+      setup() {
+        const tool: VueFrontendTool<{ msg: string }> = {
+          name: "webmcpTool",
+          description: "A WebMCP-exposed tool",
+          webmcp: true,
+          parameters: z.object({ msg: z.string() }),
+          handler: async () => ({ result: "ok" }),
+        };
+        useFrontendTool(tool);
+        return {};
+      },
+      template: `<div />`,
+    });
+
+    const Host = defineComponent({
+      components: { ToolComponent, CoreCapture },
+      setup() {
+        return {
+          setCore: (core: CopilotKitCoreVue) => {
+            coreRef = core;
+          },
+        };
+      },
+      template: `
+        <div>
+          <ToolComponent />
+          <CoreCapture :on-core="setCore" />
+        </div>
+      `,
+    });
+
+    const ui = renderWithCopilotKit({
+      children: Host,
+    });
+
+    await waitFor(() => {
+      expect(coreRef).not.toBeNull();
+      const tool = coreRef!.tools.find((entry) => entry.name === "webmcpTool");
+      expect(tool).toBeDefined();
+      expect(tool!.webmcp).toBe(true);
+    });
+
+    ui.unmount();
+  });
+
+  it("registers tool with webmcp annotations on the core", async () => {
+    let coreRef: CopilotKitCoreVue | null = null;
+
+    const ToolComponent = defineComponent({
+      setup() {
+        const tool: VueFrontendTool<{ msg: string }> = {
+          name: "annotatedTool",
+          description: "A WebMCP-exposed tool with annotations",
+          webmcp: { annotations: { readOnlyHint: true } },
+          parameters: z.object({ msg: z.string() }),
+          handler: async () => ({ result: "ok" }),
+        };
+        useFrontendTool(tool);
+        return {};
+      },
+      template: `<div />`,
+    });
+
+    const Host = defineComponent({
+      components: { ToolComponent, CoreCapture },
+      setup() {
+        return {
+          setCore: (core: CopilotKitCoreVue) => {
+            coreRef = core;
+          },
+        };
+      },
+      template: `
+        <div>
+          <ToolComponent />
+          <CoreCapture :on-core="setCore" />
+        </div>
+      `,
+    });
+
+    const ui = renderWithCopilotKit({
+      children: Host,
+    });
+
+    await waitFor(() => {
+      expect(coreRef).not.toBeNull();
+      const tool = coreRef!.tools.find(
+        (entry) => entry.name === "annotatedTool",
+      );
+      expect(tool).toBeDefined();
+      expect(tool!.webmcp).toEqual({ annotations: { readOnlyHint: true } });
+    });
+
+    ui.unmount();
+  });
+
+  it("re-registers tool when the webmcp config changes", async () => {
+    let coreRef: CopilotKitCoreVue | null = null;
+
+    const ToolWithToggle = defineComponent({
+      setup() {
+        const readOnly = ref(false);
+
+        const tool: VueFrontendTool<{ data: string }> = {
+          name: "toggleWebmcpTool",
+          description: "A tool with a toggleable WebMCP config",
+          get webmcp() {
+            return { annotations: { readOnlyHint: readOnly.value } };
+          },
+          parameters: z.object({ data: z.string() }),
+          handler: async () => ({ ok: true }),
+        };
+        useFrontendTool(tool, [readOnly]);
+
+        return {
+          readOnly,
+          toggle: () => {
+            readOnly.value = !readOnly.value;
+          },
+        };
+      },
+      template: `
+        <button data-testid="toggle-btn" @click="toggle">
+          {{ readOnly ? "Read-write" : "Read-only" }}
+        </button>
+      `,
+    });
+
+    const Host = defineComponent({
+      components: { ToolWithToggle, CoreCapture },
+      setup() {
+        return {
+          setCore: (core: CopilotKitCoreVue) => {
+            coreRef = core;
+          },
+        };
+      },
+      template: `
+        <div>
+          <ToolWithToggle />
+          <CoreCapture :on-core="setCore" />
+        </div>
+      `,
+    });
+
+    const ui = renderWithCopilotKit({
+      children: Host,
+    });
+
+    await waitFor(() => {
+      expect(coreRef).not.toBeNull();
+      const tool = coreRef!.tools.find(
+        (entry) => entry.name === "toggleWebmcpTool",
+      );
+      expect(tool).toBeDefined();
+      expect(tool!.webmcp).toEqual({ annotations: { readOnlyHint: false } });
+    });
+
+    await fireEvent.click(screen.getByTestId("toggle-btn"));
+
+    await waitFor(() => {
+      const tool = coreRef!.tools.find(
+        (entry) => entry.name === "toggleWebmcpTool",
+      );
+      expect(tool).toBeDefined();
+      expect(tool!.webmcp).toEqual({ annotations: { readOnlyHint: true } });
+    });
+
+    ui.unmount();
+  });
+
+  it("registers and cleans up agent-scoped webmcp tools on the core", async () => {
+    let coreRef: CopilotKitCoreVue | null = null;
+
+    const ToolComponent = defineComponent({
+      setup() {
+        useFrontendTool({
+          name: "scopedTool",
+          description: "A WebMCP tool scoped to alpha",
+          agentId: "alpha",
+          webmcp: { annotations: { readOnlyHint: true } },
+          handler: async () => ({ ok: true }),
+        });
+        useFrontendTool({
+          name: "scopedTool",
+          description: "A WebMCP tool scoped to beta",
+          agentId: "beta",
+          webmcp: true,
+          handler: async () => ({ ok: true }),
+        });
+        return {};
+      },
+      template: `<div />`,
+    });
+
+    const Host = defineComponent({
+      components: { ToolComponent, CoreCapture },
+      setup() {
+        return {
+          setCore: (core: CopilotKitCoreVue) => {
+            coreRef = core;
+          },
+        };
+      },
+      template: `
+        <div>
+          <ToolComponent />
+          <CoreCapture :on-core="setCore" />
+        </div>
+      `,
+    });
+
+    const ui = renderWithCopilotKit({
+      children: Host,
+    });
+
+    await waitFor(() => {
+      expect(coreRef).not.toBeNull();
+      const alphaTool = coreRef!.tools.find(
+        (entry) => entry.name === "scopedTool" && entry.agentId === "alpha",
+      );
+      expect(alphaTool).toBeDefined();
+      expect(alphaTool!.webmcp).toEqual({
+        annotations: { readOnlyHint: true },
+      });
+      const betaTool = coreRef!.tools.find(
+        (entry) => entry.name === "scopedTool" && entry.agentId === "beta",
+      );
+      expect(betaTool).toBeDefined();
+      expect(betaTool!.webmcp).toBe(true);
+    });
+
+    ui.unmount();
+
+    await waitFor(() => {
+      expect(
+        coreRef!.tools.filter((entry) => entry.name === "scopedTool").length,
+      ).toBe(0);
+    });
+  });
+});

package/src/v2/hooks/use-frontend-tool.ts

@@ -32,6 +32,9 @@ export function useFrontendTool<T extends Record<string, unknown>>(
     [
       () => tool.name,
       () => tool.available,
+      // webmcp is commonly an object literal, so compare it by value to avoid
+      // re-registering on identity churn while still reacting to real changes.
+      () => JSON.stringify(tool.webmcp ?? null),
       () => extraDeps.length,
       ...extraDeps,
     ],