skybridge 1.0.2 → 1.0.4

package/dist/web/bridges/mcp-app/view-tools.test.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"view-tools.test.js","sourceRoot":"","sources":["../../../../src/web/bridges/mcp-app/view-tools.test.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,EAAE,MAAM,wBAAwB,CAAC;AACjD,OAAO,EAAE,GAAG,EAAE,MAAM,OAAO,CAAC;AAC5B,OAAO,EAAE,SAAS,EAAE,UAAU,EAAE,QAAQ,EAAE,MAAM,EAAE,EAAE,EAAE,EAAE,EAAE,MAAM,QAAQ,CAAC;AACzE,OAAO,KAAK,CAAC,MAAM,KAAK,CAAC;AACzB,OAAO,EAAE,kBAAkB,EAAE,MAAM,2BAA2B,CAAC;AAC/D,OAAO,EAAE,aAAa,EAAE,MAAM,cAAc,CAAC;AAC7C,OAAO,EAAE,YAAY,EAAE,MAAM,aAAa,CAAC;AAW3C,MAAM,QAAQ,GAAqB,EAAE,CAAC;AAEtC;;;GAGG;AACH,SAAS,eAAe;IACtB,QAAQ,CAAC,MAAM,GAAG,CAAC,CAAC;IACpB,MAAM,WAAW,GAAG,EAAE,CAAC,EAAE,CAAC,CAAC,OAAuB,EAAE,EAAE;QACpD,QAAQ,CAAC,IAAI,CAAC,OAAO,CAAC,CAAC;QACvB,IAAI,OAAO,CAAC,MAAM,KAAK,eAAe,IAAI,OAAO,CAAC,EAAE,KAAK,SAAS,EAAE,CAAC;YACnE,GAAG,CAAC,GAAG,EAAE;gBACP,MAAM,CAAC,aAAa,CAClB,IAAI,YAAY,CAAC,SAAS,EAAE;oBAC1B,MAAM,EAAE,MAAM,CAAC,MAAM;oBACrB,IAAI,EAAE;wBACJ,OAAO,EAAE,KAAK;wBACd,EAAE,EAAE,OAAO,CAAC,EAAE;wBACd,MAAM,EAAE;4BACN,eAAe,EAAE,YAAY;4BAC7B,QAAQ,EAAE,EAAE,IAAI,EAAE,WAAW,EAAE,OAAO,EAAE,OAAO,EAAE;4BACjD,gBAAgB,EAAE,EAAE;4BACpB,WAAW,EAAE,EAAE;yBAChB;qBACF;iBACF,CAAC,CACH,CAAC;YACJ,CAAC,CAAC,CAAC;QACL,CAAC;IACH,CAAC,CAAC,CAAC;IACH,EAAE,CAAC,UAAU,CAAC,QAAQ,EAAE,EAAE,WAAW,EAAE,CAAC,CAAC;AAC3C,CAAC;AAED,IAAI,MAAM,GAAG,IAAI,CAAC;AAElB,+FAA+F;AAC/F,KAAK,UAAU,QAAQ,CAAC,MAAc,EAAE,SAAkC,EAAE;IAC1E,MAAM,EAAE,GAAG,EAAE,MAAM,CAAC;IACpB,GAAG,CAAC,GAAG,EAAE;QACP,MAAM,CAAC,aAAa,CAClB,IAAI,YAAY,CAAC,SAAS,EAAE;YAC1B,MAAM,EAAE,MAAM,CAAC,MAAM;YACrB,IAAI,EAAE,EAAE,OAAO,EAAE,KAAK,EAAE,EAAE,EAAE,MAAM,EAAE,MAAM,EAAE;SAC7C,CAAC,CACH,CAAC;IACJ,CAAC,CAAC,CAAC;IACH,MAAM,OAAO,CAAC,GAAG,EAAE;QACjB,MAAM,CAAC,QAAQ,CAAC,IAAI,CAAC,CAAC,CAAC,EAAE,EAAE,CAAC,CAAC,CAAC,EAAE,KAAK,EAAE,CAAC,CAAC,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;IACvD,CAAC,CAAC,CAAC;IACH,OAAO,QAAQ,CAAC,IAAI,CAAC,CAAC,CAAC,EAAE,EAAE,CAAC,CAAC,CAAC,EAAE,KAAK,EAAE,CAAC,CAAC;AAC3C,CAAC;AAED,QAAQ,CAAC,mBAAmB,EAAE,GAAG,EAAE;IACjC,UAAU,CAAC,GAAG,EAAE;QACd,EAAE,CAAC,UAAU,CAAC,WAAW,EAAE,EAAE,QAAQ,EAAE,SAAS,EAAE,CAAC,CAAC;QACpD,EAAE,CAAC,UAAU,CAAC,gBAAgB,EAAE,kBAAkB,CAAC,CAAC;QACpD,YAAY,CAAC,aAAa,EAAE,CAAC;QAC7B,aAAa,CAAC,aAAa,EAAE,CAAC;QAC9B,eAAe,EAAE,CAAC;IACpB,CAAC,CAAC,CAAC;IAEH,SAAS,CAAC,GAAG,EAAE;QACb,EAAE,CAAC,gBAAgB,EAAE,CAAC;QACtB,EAAE,CAAC,aAAa,EAAE,CAAC;IACrB,CAAC,CAAC,CAAC;IAEH,EAAE,CAAC,sDAAsD,EAAE,KAAK,IAAI,EAAE;QACpE,MAAM,YAAY,CAAC,WAAW,EAAE,CAAC,MAAM,EAAE,CAAC;QAC1C,MAAM,IAAI,GAAG,QAAQ,CAAC,IAAI,CAAC,CAAC,CAAC,EAAE,EAAE,CAAC,CAAC,CAAC,MAAM,KAAK,eAAe,CAAC,CAAC;QAChE,MAAM,CAAC,IAAI,EAAE,MAAM,EAAE,eAAe,CAAC,CAAC,aAAa,CAAC;YAClD,KAAK,EAAE,EAAE,WAAW,EAAE,IAAI,EAAE;SAC7B,CAAC,CAAC;IACL,CAAC,CAAC,CAAC;IAEH,EAAE,CAAC,oDAAoD,EAAE,KAAK,IAAI,EAAE;QAClE,MAAM,OAAO,GAAG,aAAa,CAAC,WAAW,EAAE,CAAC;QAC5C,MAAM,YAAY,CAAC,WAAW,EAAE,CAAC,MAAM,EAAE,CAAC;QAE1C,OAAO,CAAC,gBAAgB,CACtB;YACE,IAAI,EAAE,iBAAiB;YACvB,WAAW,EAAE,aAAa;YAC1B,WAAW,EAAE,EAAE,GAAG,EAAE,CAAC,CAAC,MAAM,EAAE,EAAE;YAChC,WAAW,EAAE,EAAE,YAAY,EAAE,KAAK,EAAE;SACrC,EACD,GAAG,EAAE,CAAC,CAAC,EAAE,OAAO,EAAE,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,IAAI,EAAE,IAAI,EAAE,CAAC,EAAE,CAAC,CACpD,CAAC;QAEF,MAAM,QAAQ,GAAG,MAAM,QAAQ,CAAC,YAAY,CAAC,CAAC;QAC9C,MAAM,KAAK,GAAG,QAAQ,EAAE,MAAM,EAAE,KAK9B,CAAC;QACH,MAAM,CAAC,KAAK,CAAC,CAAC,YAAY,CAAC,CAAC,CAAC,CAAC;QAC9B,MAAM,CAAC,IAAI,CAAC,GAAG,KAAK,CAAC;QACrB,MAAM,CAAC,IAAI,EAAE,IAAI,CAAC,CAAC,IAAI,CAAC,iBAAiB,CAAC,CAAC;QAC3C,MAAM,CAAC,IAAI,EAAE,WAAW,CAAC,CAAC,IAAI,CAAC,aAAa,CAAC,CAAC;QAC9C,MAAM,CAAC,IAAI,EAAE,WAAW,CAAC,UAAU,CAAC,CAAC,cAAc,CAAC,KAAK,CAAC,CAAC;QAC3D,MAAM,CAAC,IAAI,EAAE,WAAW,EAAE,YAAY,CAAC,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC;IACtD,CAAC,CAAC,CAAC;IAEH,EAAE,CAAC,gEAAgE,EAAE,KAAK,IAAI,EAAE;QAC9E,MAAM,OAAO,GAAG,aAAa,CAAC,WAAW,EAAE,CAAC;QAC5C,MAAM,YAAY,CAAC,WAAW,EAAE,CAAC,MAAM,EAAE,CAAC;QAE1C,MAAM,OAAO,GAAG,EAAE,CAAC,EAAE,CAAC,CAAC,EAAE,GAAG,EAAmB,EAAE,EAAE,CAAC,CAAC;YACnD,OAAO,EAAE,CAAC,EAAE,IAAI,EAAE,MAAe,EAAE,IAAI,EAAE,UAAU,GAAG,EAAE,EAAE,CAAC;YAC3D,iBAAiB,EAAE,EAAE,QAAQ,EAAE,GAAG,EAAE;SACrC,CAAC,CAAC,CAAC;QAEJ,OAAO,CAAC,gBAAgB,CACtB,EAAE,IAAI,EAAE,iBAAiB,EAAE,WAAW,EAAE,EAAE,GAAG,EAAE,CAAC,CAAC,MAAM,EAAE,EAAE,EAAE,EAC7D,OAAgB,CACjB,CAAC;QAEF,MAAM,QAAQ,GAAG,MAAM,QAAQ,CAAC,YAAY,EAAE;YAC5C,IAAI,EAAE,iBAAiB;YACvB,SAAS,EAAE,EAAE,GAAG,EAAE,IAAI,EAAE;SACzB,CAAC,CAAC;QACH,MAAM,MAAM,GAAG,QAAQ,EAAE,MAAM,CAAC;QAEhC,6EAA6E;QAC7E,MAAM,CAAC,OAAO,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,CAAC,CAAC,OAAO,CAAC,EAAE,GAAG,EAAE,IAAI,EAAE,CAAC,CAAC;QAC1D,MAAM,CAAC,MAAM,EAAE,iBAAiB,CAAC,CAAC,OAAO,CAAC,EAAE,QAAQ,EAAE,IAAI,EAAE,CAAC,CAAC;QAC9D,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,CAAC,SAAS,EAAE,CAAC;QACpC,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,CAAC,OAAO,CAAC,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,IAAI,EAAE,WAAW,EAAE,CAAC,CAAC,CAAC;IACzE,CAAC,CAAC,CAAC;IAEH,EAAE,CAAC,qEAAqE,EAAE,KAAK,IAAI,EAAE;QACnF,MAAM,OAAO,GAAG,aAAa,CAAC,WAAW,EAAE,CAAC;QAC5C,MAAM,YAAY,CAAC,WAAW,EAAE,CAAC,MAAM,EAAE,CAAC;QAE1C,MAAM,OAAO,GAAG,EAAE,CAAC,EAAE,CAAC,GAAG,EAAE,CAAC,CAAC,EAAE,OAAO,EAAE,EAAE,EAAE,CAAC,CAAC,CAAC;QAC/C,OAAO,CAAC,gBAAgB,CACtB,EAAE,IAAI,EAAE,iBAAiB,EAAE,WAAW,EAAE,EAAE,GAAG,EAAE,CAAC,CAAC,MAAM,EAAE,EAAE,EAAE,EAC7D,OAAgB,CACjB,CAAC;QAEF,0EAA0E;QAC1E,iCAAiC;QACjC,MAAM,QAAQ,GAAG,MAAM,QAAQ,CAAC,YAAY,EAAE;YAC5C,IAAI,EAAE,iBAAiB;YACvB,SAAS,EAAE,EAAE,GAAG,EAAE,EAAE,EAAE;SACvB,CAAC,CAAC;QAEH,MAAM,CAAC,OAAO,CAAC,CAAC,GAAG,CAAC,gBAAgB,EAAE,CAAC;QACvC,MAAM,CAAC,QAAQ,EAAE,KAAK,CAAC,CAAC,WAAW,EAAE,CAAC;IACxC,CAAC,CAAC,CAAC;IAEH,EAAE,CAAC,mCAAmC,EAAE,KAAK,IAAI,EAAE;QACjD,MAAM,YAAY,CAAC,WAAW,EAAE,CAAC,MAAM,EAAE,CAAC;QAC1C,MAAM,QAAQ,GAAG,MAAM,QAAQ,CAAC,YAAY,EAAE;YAC5C,IAAI,EAAE,MAAM;YACZ,SAAS,EAAE,EAAE;SACd,CAAC,CAAC;QACH,MAAM,CAAC,QAAQ,EAAE,KAAK,CAAC,CAAC,WAAW,EAAE,CAAC;IACxC,CAAC,CAAC,CAAC;IAEH,EAAE,CAAC,0DAA0D,EAAE,KAAK,IAAI,EAAE;QACxE,MAAM,OAAO,GAAG,aAAa,CAAC,WAAW,EAAE,CAAC;QAC5C,MAAM,YAAY,CAAC,WAAW,EAAE,CAAC,MAAM,EAAE,CAAC;QAE1C,MAAM,UAAU,GAAG,OAAO,CAAC,gBAAgB,CACzC,EAAE,IAAI,EAAE,aAAa,EAAE,EACvB,GAAG,EAAE,CAAC,CAAC,EAAE,OAAO,EAAE,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,IAAI,EAAE,OAAO,EAAE,CAAC,EAAE,CAAC,CACvD,CAAC;QAEF,MAAM,OAAO,CAAC,GAAG,EAAE;YACjB,MAAM,CACJ,QAAQ,CAAC,IAAI,CAAC,CAAC,CAAC,EAAE,EAAE,CAAC,CAAC,CAAC,MAAM,KAAK,kCAAkC,CAAC,CACtE,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;QACf,CAAC,CAAC,CAAC;QAEH,IAAI,MAAM,GAAG,MAAM,QAAQ,CAAC,YAAY,CAAC,CAAC;QAC1C,MAAM,CAAC,MAAM,EAAE,MAAM,EAAE,KAAK,CAAC,CAAC,YAAY,CAAC,CAAC,CAAC,CAAC;QAE9C,UAAU,EAAE,CAAC;QACb,MAAM,GAAG,MAAM,QAAQ,CAAC,YAAY,CAAC,CAAC;QACtC,MAAM,CAAC,MAAM,EAAE,MAAM,EAAE,KAAK,CAAC,CAAC,YAAY,CAAC,CAAC,CAAC,CAAC;IAChD,CAAC,CAAC,CAAC;AACL,CAAC,CAAC,CAAC","sourcesContent":["import { waitFor } from \"@testing-library/react\";\nimport { act } from \"react\";\nimport { afterEach, beforeEach, describe, expect, it, vi } from \"vitest\";\nimport * as z from \"zod\";\nimport { MockResizeObserver } from \"../../hooks/test/utils.js\";\nimport { McpAppAdaptor } from \"./adaptor.js\";\nimport { McpAppBridge } from \"./bridge.js\";\n\ntype JsonRpcMessage = {\n  jsonrpc: \"2.0\";\n  id?: number;\n  method?: string;\n  params?: Record<string, unknown>;\n  result?: Record<string, unknown>;\n  error?: { message: string };\n};\n\nconst outgoing: JsonRpcMessage[] = [];\n\n/**\n * Stand-in MCP Apps host: replies to `ui/initialize` and records every message\n * the app posts so tests can assert on responses and notifications.\n */\nfunction installHostMock() {\n  outgoing.length = 0;\n  const postMessage = vi.fn((message: JsonRpcMessage) => {\n    outgoing.push(message);\n    if (message.method === \"ui/initialize\" && message.id !== undefined) {\n      act(() => {\n        window.dispatchEvent(\n          new MessageEvent(\"message\", {\n            source: window.parent,\n            data: {\n              jsonrpc: \"2.0\",\n              id: message.id,\n              result: {\n                protocolVersion: \"2025-06-18\",\n                hostInfo: { name: \"test-host\", version: \"1.0.0\" },\n                hostCapabilities: {},\n                hostContext: {},\n              },\n            },\n          }),\n        );\n      });\n    }\n  });\n  vi.stubGlobal(\"parent\", { postMessage });\n}\n\nlet nextId = 1000;\n\n/** Send a host → app JSON-RPC request and resolve with the full response (result or error). */\nasync function callHost(method: string, params: Record<string, unknown> = {}) {\n  const id = ++nextId;\n  act(() => {\n    window.dispatchEvent(\n      new MessageEvent(\"message\", {\n        source: window.parent,\n        data: { jsonrpc: \"2.0\", id, method, params },\n      }),\n    );\n  });\n  await waitFor(() => {\n    expect(outgoing.some((m) => m.id === id)).toBe(true);\n  });\n  return outgoing.find((m) => m.id === id);\n}\n\ndescribe(\"McpApp view tools\", () => {\n  beforeEach(() => {\n    vi.stubGlobal(\"skybridge\", { hostType: \"mcp-app\" });\n    vi.stubGlobal(\"ResizeObserver\", MockResizeObserver);\n    McpAppBridge.resetInstance();\n    McpAppAdaptor.resetInstance();\n    installHostMock();\n  });\n\n  afterEach(() => {\n    vi.unstubAllGlobals();\n    vi.clearAllMocks();\n  });\n\n  it(\"advertises the tools capability during ui/initialize\", async () => {\n    await McpAppBridge.getInstance().getApp();\n    const init = outgoing.find((m) => m.method === \"ui/initialize\");\n    expect(init?.params?.appCapabilities).toMatchObject({\n      tools: { listChanged: true },\n    });\n  });\n\n  it(\"lists a registered view tool with its input schema\", async () => {\n    const adaptor = McpAppAdaptor.getInstance();\n    await McpAppBridge.getInstance().getApp();\n\n    adaptor.registerViewTool(\n      {\n        name: \"chess_make_move\",\n        description: \"Play a move\",\n        inputSchema: { san: z.string() },\n        annotations: { readOnlyHint: false },\n      },\n      () => ({ content: [{ type: \"text\", text: \"ok\" }] }),\n    );\n\n    const response = await callHost(\"tools/list\");\n    const tools = response?.result?.tools as Array<{\n      name: string;\n      description?: string;\n      inputSchema: { properties?: Record<string, unknown> };\n      annotations?: { readOnlyHint?: boolean };\n    }>;\n    expect(tools).toHaveLength(1);\n    const [tool] = tools;\n    expect(tool?.name).toBe(\"chess_make_move\");\n    expect(tool?.description).toBe(\"Play a move\");\n    expect(tool?.inputSchema.properties).toHaveProperty(\"san\");\n    expect(tool?.annotations?.readOnlyHint).toBe(false);\n  });\n\n  it(\"invokes the handler with validated args and returns its result\", async () => {\n    const adaptor = McpAppAdaptor.getInstance();\n    await McpAppBridge.getInstance().getApp();\n\n    const handler = vi.fn(({ san }: { san: string }) => ({\n      content: [{ type: \"text\" as const, text: `played ${san}` }],\n      structuredContent: { lastMove: san },\n    }));\n\n    adaptor.registerViewTool(\n      { name: \"chess_make_move\", inputSchema: { san: z.string() } },\n      handler as never,\n    );\n\n    const response = await callHost(\"tools/call\", {\n      name: \"chess_make_move\",\n      arguments: { san: \"e4\" },\n    });\n    const result = response?.result;\n\n    // ext-apps invokes the callback as `(args, extra)`; assert on the args only.\n    expect(handler.mock.calls[0]?.[0]).toEqual({ san: \"e4\" });\n    expect(result?.structuredContent).toEqual({ lastMove: \"e4\" });\n    expect(result?.isError).toBeFalsy();\n    expect(result?.content).toEqual([{ type: \"text\", text: \"played e4\" }]);\n  });\n\n  it(\"rejects the call without invoking the handler when args are invalid\", async () => {\n    const adaptor = McpAppAdaptor.getInstance();\n    await McpAppBridge.getInstance().getApp();\n\n    const handler = vi.fn(() => ({ content: [] }));\n    adaptor.registerViewTool(\n      { name: \"chess_make_move\", inputSchema: { san: z.string() } },\n      handler as never,\n    );\n\n    // ext-apps validates input against the schema and rejects with a JSON-RPC\n    // error before the handler runs.\n    const response = await callHost(\"tools/call\", {\n      name: \"chess_make_move\",\n      arguments: { san: 42 },\n    });\n\n    expect(handler).not.toHaveBeenCalled();\n    expect(response?.error).toBeDefined();\n  });\n\n  it(\"rejects a call to an unknown tool\", async () => {\n    await McpAppBridge.getInstance().getApp();\n    const response = await callHost(\"tools/call\", {\n      name: \"nope\",\n      arguments: {},\n    });\n    expect(response?.error).toBeDefined();\n  });\n\n  it(\"removes the tool and notifies the host when unregistered\", async () => {\n    const adaptor = McpAppAdaptor.getInstance();\n    await McpAppBridge.getInstance().getApp();\n\n    const unregister = adaptor.registerViewTool(\n      { name: \"chess_reset\" },\n      () => ({ content: [{ type: \"text\", text: \"reset\" }] }),\n    );\n\n    await waitFor(() => {\n      expect(\n        outgoing.some((m) => m.method === \"notifications/tools/list_changed\"),\n      ).toBe(true);\n    });\n\n    let listed = await callHost(\"tools/list\");\n    expect(listed?.result?.tools).toHaveLength(1);\n\n    unregister();\n    listed = await callHost(\"tools/list\");\n    expect(listed?.result?.tools).toHaveLength(0);\n  });\n});\n"]}

package/dist/web/bridges/types.d.ts

@@ -1,6 +1,11 @@
-import type { CallToolResult, EmbeddedResource, ResourceLink } from "@modelcontextprotocol/sdk/types.js";
+import type { SchemaOutput, ZodRawShapeCompat } from "@modelcontextprotocol/sdk/server/zod-compat.js";
+import type { CallToolResult, EmbeddedResource, ResourceLink, ToolAnnotations } from "@modelcontextprotocol/sdk/types.js";
 import type { useSyncExternalStore } from "react";
 import type { ViewHostType } from "../../server/index.js";
+/**
+ * Globals injected on `window.skybridge` by the host. Tells the view which
+ * runtime it's running under and where to reach the MCP server.
+ */
 export type SkybridgeProperties = {
     hostType: ViewHostType;
     serverUrl: string;
@@ -10,26 +15,43 @@ declare global {
         skybridge: SkybridgeProperties;
     }
 }
+/** Arguments passed to a tool call. `null` for tools that take no input. */
 export type CallToolArgs = Record<string, unknown> | null;
+/**
+ * Result of a tool call as surfaced to the view: MCP `content` blocks plus
+ * the typed `structuredContent` and optional `meta`. `isError` is set when
+ * the server marks the call as failed.
+ */
 export type CallToolResponse = {
     content: CallToolResult["content"];
     structuredContent: NonNullable<CallToolResult["structuredContent"]>;
     isError: NonNullable<CallToolResult["isError"]>;
     meta?: CallToolResult["_meta"];
 };
+/**
+ * How the view is laid out by the host. `"modal"` is host-driven (see
+ * {@link useRequestModal}); `"pip"`, `"inline"`, and `"fullscreen"` are
+ * requestable via {@link useDisplayMode}.
+ */
 export type DisplayMode = "pip" | "inline" | "fullscreen" | "modal";
+/** Subset of {@link DisplayMode} that the view can request from the host. */
 export type RequestDisplayMode = Exclude<DisplayMode, "modal">;
+/** Host theme. Mirror this in your view's styling for a native feel. */
 export type Theme = "light" | "dark";
+/** Coarse device class reported by the host. `"unknown"` when unavailable. */
 export type DeviceType = "mobile" | "tablet" | "desktop" | "unknown";
+/** Pixel insets the view should keep clear of (notches, home indicators, etc.). */
 export type SafeAreaInsets = {
     top: number;
     right: number;
     bottom: number;
     left: number;
 };
+/** Wrapper around {@link SafeAreaInsets} exposed via {@link useLayout}. */
 export type SafeArea = {
     insets: SafeAreaInsets;
 };
+/** Device and input-capability hints exposed via {@link useUser}. */
 export type UserAgent = {
     device: {
         type: DeviceType;
@@ -39,6 +61,11 @@ export type UserAgent = {
         touch: boolean;
     };
 };
+/**
+ * Full snapshot of state the host exposes to the view. Most fields are
+ * better accessed through their dedicated hooks (`useLayout`, `useUser`,
+ * `useToolInfo`, etc.) — read this directly only for advanced cases.
+ */
 export interface HostContext {
     theme: Theme;
     locale: string;
@@ -55,26 +82,34 @@ export interface HostContext {
     };
     viewState: Record<string, unknown> | null;
 }
+/** @internal `useSyncExternalStore` subscribe signature, re-exported for bridge implementations. */
 export type Subscribe = Parameters<typeof useSyncExternalStore>[0];
+/** @internal Bridge contract implemented by per-host bridge classes. */
 export interface Bridge<Context> {
     subscribe(key: keyof Context): Subscribe;
     subscribe(keys: readonly (keyof Context)[]): Subscribe;
     getSnapshot<K extends keyof Context>(key: K): Context[K] | undefined;
 }
+/** @internal Per-key snapshot store backing {@link useHostContext}. */
 export type HostContextStore<K extends keyof HostContext> = {
     subscribe: Subscribe;
     getSnapshot: () => HostContext[K];
 };
+/** Persisted view state shape (a plain object). See {@link useViewState}. */
 export type ViewState = Record<string, unknown>;
+/** Updater form accepted when writing to view state. */
 export type SetViewStateAction = ViewState | ((prevState: ViewState | null) => ViewState);
+/** Reference to a host-managed file (returned by {@link useFiles}). */
 export type FileMetadata = {
     fileId: string;
     fileName?: string;
     mimeType?: string;
 };
+/** Options for {@link useFiles}'s `upload`. `library: true` saves into the user's library when supported. */
 export type UploadFileOptions = {
     library?: boolean;
 };
+/** Options for {@link useRequestModal}'s `open` call. */
 export type RequestModalOptions = {
     title?: string;
     params?: Record<string, unknown>;
@@ -86,12 +121,19 @@ export type RequestModalOptions = {
         height?: number;
     };
 };
+/**
+ * Options for {@link useOpenExternal}. Set `redirectUrl: false` to tell the
+ * host not to append its `?redirectUrl=…` tracking query parameter when
+ * opening allowlisted targets.
+ */
 export type OpenExternalOptions = {
     redirectUrl?: false;
 };
+/** Options for {@link useSendFollowUpMessage}. */
 export type SendFollowUpMessageOptions = {
     scrollToBottom?: boolean;
 };
+/** Options for {@link useRequestSize}. Omit a dimension to leave it unchanged. */
 export type RequestSizeOptions = {
     width?: number;
     height?: number;
@@ -102,6 +144,43 @@ export type DownloadParams = {
 export type DownloadResult = {
     isError?: boolean;
 };
+/**
+ * Args passed to a {@link ViewToolHandler}, inferred from the tool's
+ * `inputSchema` (optionality preserved). Mirrors the server's `registerTool`.
+ */
+export type InferViewToolArgs<Shape extends ZodRawShapeCompat> = {
+    [K in keyof Shape as undefined extends SchemaOutput<Shape[K]> ? never : K]: SchemaOutput<Shape[K]>;
+} & {
+    [K in keyof Shape as undefined extends SchemaOutput<Shape[K]> ? K : never]?: SchemaOutput<Shape[K]>;
+};
+/**
+ * Declares a tool the view exposes to the host/model (the MCP Apps
+ * "app-provided tools" feature). Mirrors the server-side `registerTool` config.
+ * Namespace `name` (e.g. `chess_make_move`) to avoid clashing with server tools.
+ */
+export type ViewToolConfig<TInput extends ZodRawShapeCompat = ZodRawShapeCompat> = {
+    name: string;
+    title?: string;
+    description?: string;
+    inputSchema?: TInput;
+    annotations?: ToolAnnotations;
+};
+/**
+ * Value a {@link ViewToolHandler} returns — a standard MCP `CallToolResult`
+ * (`content` blocks plus optional `structuredContent` / `isError` / `_meta`),
+ * exactly as `ext-apps`' app tool callbacks return it.
+ */
+export type ViewToolResult = CallToolResult;
+/** Handler run when the host calls a view tool. Receives validated, typed args. */
+export type ViewToolHandler<TInput extends ZodRawShapeCompat = ZodRawShapeCompat> = (args: InferViewToolArgs<TInput>) => ViewToolResult | Promise<ViewToolResult>;
+/** @internal Untyped handler signature stored by the adaptor/bridge after type erasure. */
+export type AnyViewToolHandler = (args: Record<string, unknown>) => ViewToolResult | Promise<ViewToolResult>;
+/**
+ * @internal
+ * Low-level interface every host bridge implements. End-user code should use
+ * the React hooks (`useCallTool`, `useViewState`, `useFiles`, …) rather than
+ * calling this directly.
+ */
 export interface Adaptor {
     getHostContextStore<K extends keyof HostContext>(key: K): HostContextStore<K>;
     callTool<ToolArgs extends CallToolArgs = null, ToolResponse extends CallToolResponse = CallToolResponse>(name: string, args: ToolArgs): Promise<ToolResponse>;
@@ -121,4 +200,5 @@ export interface Adaptor {
     selectFiles(): Promise<FileMetadata[]>;
     openModal(options: RequestModalOptions): void;
     setOpenInAppUrl(href: string): Promise<void>;
+    registerViewTool(config: ViewToolConfig, handler: AnyViewToolHandler): () => void;
 }

package/dist/web/bridges/types.js.map

@@ -1 +1 @@
-{"version":3,"file":"types.js","sourceRoot":"","sources":["../../../src/web/bridges/types.ts"],"names":[],"mappings":"","sourcesContent":["import type {\n  CallToolResult,\n  EmbeddedResource,\n  ResourceLink,\n} from \"@modelcontextprotocol/sdk/types.js\";\nimport type { useSyncExternalStore } from \"react\";\nimport type { ViewHostType } from \"../../server/index.js\";\n\nexport type SkybridgeProperties = {\n  hostType: ViewHostType;\n  serverUrl: string;\n};\n\ndeclare global {\n  interface Window {\n    skybridge: SkybridgeProperties;\n  }\n}\n\nexport type CallToolArgs = Record<string, unknown> | null;\n\nexport type CallToolResponse = {\n  content: CallToolResult[\"content\"];\n  structuredContent: NonNullable<CallToolResult[\"structuredContent\"]>;\n  isError: NonNullable<CallToolResult[\"isError\"]>;\n  meta?: CallToolResult[\"_meta\"];\n};\n\nexport type DisplayMode = \"pip\" | \"inline\" | \"fullscreen\" | \"modal\";\nexport type RequestDisplayMode = Exclude<DisplayMode, \"modal\">;\n\nexport type Theme = \"light\" | \"dark\";\n\nexport type DeviceType = \"mobile\" | \"tablet\" | \"desktop\" | \"unknown\";\n\nexport type SafeAreaInsets = {\n  top: number;\n  right: number;\n  bottom: number;\n  left: number;\n};\n\nexport type SafeArea = {\n  insets: SafeAreaInsets;\n};\n\nexport type UserAgent = {\n  device: {\n    type: DeviceType;\n  };\n  capabilities: {\n    hover: boolean;\n    touch: boolean;\n  };\n};\n\nexport interface HostContext {\n  theme: Theme;\n  locale: string;\n  displayMode: DisplayMode;\n  safeArea: SafeArea;\n  maxHeight: number | undefined;\n  userAgent: UserAgent;\n  toolInput: Record<string, unknown> | null;\n  toolOutput: Record<string, unknown> | null;\n  toolResponseMetadata: Record<string, unknown> | null;\n  display: {\n    mode: DisplayMode;\n    params?: Record<string, unknown>;\n  };\n  viewState: Record<string, unknown> | null;\n}\n\nexport type Subscribe = Parameters<typeof useSyncExternalStore>[0];\n\nexport interface Bridge<Context> {\n  subscribe(key: keyof Context): Subscribe;\n  subscribe(keys: readonly (keyof Context)[]): Subscribe;\n  getSnapshot<K extends keyof Context>(key: K): Context[K] | undefined;\n}\n\nexport type HostContextStore<K extends keyof HostContext> = {\n  subscribe: Subscribe;\n  getSnapshot: () => HostContext[K];\n};\n\nexport type ViewState = Record<string, unknown>;\n\nexport type SetViewStateAction =\n  | ViewState\n  | ((prevState: ViewState | null) => ViewState);\n\nexport type FileMetadata = {\n  fileId: string;\n  fileName?: string;\n  mimeType?: string;\n};\n\nexport type UploadFileOptions = { library?: boolean };\n\nexport type RequestModalOptions = {\n  title?: string;\n  params?: Record<string, unknown>;\n  template?: string;\n  anchor?: { top?: number; left?: number; width?: number; height?: number };\n};\n\nexport type OpenExternalOptions = {\n  redirectUrl?: false;\n};\n\nexport type SendFollowUpMessageOptions = { scrollToBottom?: boolean };\n\nexport type RequestSizeOptions = {\n  width?: number;\n  height?: number;\n};\n\nexport type DownloadParams = {\n  contents: (EmbeddedResource | ResourceLink)[];\n};\n\nexport type DownloadResult = {\n  isError?: boolean;\n};\n\nexport interface Adaptor {\n  getHostContextStore<K extends keyof HostContext>(key: K): HostContextStore<K>;\n  callTool<\n    ToolArgs extends CallToolArgs = null,\n    ToolResponse extends CallToolResponse = CallToolResponse,\n  >(name: string, args: ToolArgs): Promise<ToolResponse>;\n  requestDisplayMode(mode: RequestDisplayMode): Promise<{\n    mode: RequestDisplayMode;\n  }>;\n  requestClose(): Promise<void>;\n  requestSize(size: RequestSizeOptions): Promise<void>;\n  sendFollowUpMessage(\n    prompt: string,\n    options?: SendFollowUpMessageOptions,\n  ): Promise<void>;\n  openExternal(href: string, options?: OpenExternalOptions): void;\n  download(params: DownloadParams): Promise<DownloadResult>;\n  setViewState(stateOrUpdater: SetViewStateAction): Promise<void>;\n  uploadFile(file: File, options?: UploadFileOptions): Promise<FileMetadata>;\n  getFileDownloadUrl(file: FileMetadata): Promise<{ downloadUrl: string }>;\n  selectFiles(): Promise<FileMetadata[]>;\n  openModal(options: RequestModalOptions): void;\n  setOpenInAppUrl(href: string): Promise<void>;\n}\n"]}
+{"version":3,"file":"types.js","sourceRoot":"","sources":["../../../src/web/bridges/types.ts"],"names":[],"mappings":"","sourcesContent":["import type {\n  SchemaOutput,\n  ZodRawShapeCompat,\n} from \"@modelcontextprotocol/sdk/server/zod-compat.js\";\nimport type {\n  CallToolResult,\n  EmbeddedResource,\n  ResourceLink,\n  ToolAnnotations,\n} from \"@modelcontextprotocol/sdk/types.js\";\nimport type { useSyncExternalStore } from \"react\";\nimport type { ViewHostType } from \"../../server/index.js\";\n\n/**\n * Globals injected on `window.skybridge` by the host. Tells the view which\n * runtime it's running under and where to reach the MCP server.\n */\nexport type SkybridgeProperties = {\n  hostType: ViewHostType;\n  serverUrl: string;\n};\n\ndeclare global {\n  interface Window {\n    skybridge: SkybridgeProperties;\n  }\n}\n\n/** Arguments passed to a tool call. `null` for tools that take no input. */\nexport type CallToolArgs = Record<string, unknown> | null;\n\n/**\n * Result of a tool call as surfaced to the view: MCP `content` blocks plus\n * the typed `structuredContent` and optional `meta`. `isError` is set when\n * the server marks the call as failed.\n */\nexport type CallToolResponse = {\n  content: CallToolResult[\"content\"];\n  structuredContent: NonNullable<CallToolResult[\"structuredContent\"]>;\n  isError: NonNullable<CallToolResult[\"isError\"]>;\n  meta?: CallToolResult[\"_meta\"];\n};\n\n/**\n * How the view is laid out by the host. `\"modal\"` is host-driven (see\n * {@link useRequestModal}); `\"pip\"`, `\"inline\"`, and `\"fullscreen\"` are\n * requestable via {@link useDisplayMode}.\n */\nexport type DisplayMode = \"pip\" | \"inline\" | \"fullscreen\" | \"modal\";\n/** Subset of {@link DisplayMode} that the view can request from the host. */\nexport type RequestDisplayMode = Exclude<DisplayMode, \"modal\">;\n\n/** Host theme. Mirror this in your view's styling for a native feel. */\nexport type Theme = \"light\" | \"dark\";\n\n/** Coarse device class reported by the host. `\"unknown\"` when unavailable. */\nexport type DeviceType = \"mobile\" | \"tablet\" | \"desktop\" | \"unknown\";\n\n/** Pixel insets the view should keep clear of (notches, home indicators, etc.). */\nexport type SafeAreaInsets = {\n  top: number;\n  right: number;\n  bottom: number;\n  left: number;\n};\n\n/** Wrapper around {@link SafeAreaInsets} exposed via {@link useLayout}. */\nexport type SafeArea = {\n  insets: SafeAreaInsets;\n};\n\n/** Device and input-capability hints exposed via {@link useUser}. */\nexport type UserAgent = {\n  device: {\n    type: DeviceType;\n  };\n  capabilities: {\n    hover: boolean;\n    touch: boolean;\n  };\n};\n\n/**\n * Full snapshot of state the host exposes to the view. Most fields are\n * better accessed through their dedicated hooks (`useLayout`, `useUser`,\n * `useToolInfo`, etc.) — read this directly only for advanced cases.\n */\nexport interface HostContext {\n  theme: Theme;\n  locale: string;\n  displayMode: DisplayMode;\n  safeArea: SafeArea;\n  maxHeight: number | undefined;\n  userAgent: UserAgent;\n  toolInput: Record<string, unknown> | null;\n  toolOutput: Record<string, unknown> | null;\n  toolResponseMetadata: Record<string, unknown> | null;\n  display: {\n    mode: DisplayMode;\n    params?: Record<string, unknown>;\n  };\n  viewState: Record<string, unknown> | null;\n}\n\n/** @internal `useSyncExternalStore` subscribe signature, re-exported for bridge implementations. */\nexport type Subscribe = Parameters<typeof useSyncExternalStore>[0];\n\n/** @internal Bridge contract implemented by per-host bridge classes. */\nexport interface Bridge<Context> {\n  subscribe(key: keyof Context): Subscribe;\n  subscribe(keys: readonly (keyof Context)[]): Subscribe;\n  getSnapshot<K extends keyof Context>(key: K): Context[K] | undefined;\n}\n\n/** @internal Per-key snapshot store backing {@link useHostContext}. */\nexport type HostContextStore<K extends keyof HostContext> = {\n  subscribe: Subscribe;\n  getSnapshot: () => HostContext[K];\n};\n\n/** Persisted view state shape (a plain object). See {@link useViewState}. */\nexport type ViewState = Record<string, unknown>;\n\n/** Updater form accepted when writing to view state. */\nexport type SetViewStateAction =\n  | ViewState\n  | ((prevState: ViewState | null) => ViewState);\n\n/** Reference to a host-managed file (returned by {@link useFiles}). */\nexport type FileMetadata = {\n  fileId: string;\n  fileName?: string;\n  mimeType?: string;\n};\n\n/** Options for {@link useFiles}'s `upload`. `library: true` saves into the user's library when supported. */\nexport type UploadFileOptions = { library?: boolean };\n\n/** Options for {@link useRequestModal}'s `open` call. */\nexport type RequestModalOptions = {\n  title?: string;\n  params?: Record<string, unknown>;\n  template?: string;\n  anchor?: { top?: number; left?: number; width?: number; height?: number };\n};\n\n/**\n * Options for {@link useOpenExternal}. Set `redirectUrl: false` to tell the\n * host not to append its `?redirectUrl=…` tracking query parameter when\n * opening allowlisted targets.\n */\nexport type OpenExternalOptions = {\n  redirectUrl?: false;\n};\n\n/** Options for {@link useSendFollowUpMessage}. */\nexport type SendFollowUpMessageOptions = { scrollToBottom?: boolean };\n\n/** Options for {@link useRequestSize}. Omit a dimension to leave it unchanged. */\nexport type RequestSizeOptions = {\n  width?: number;\n  height?: number;\n};\n\nexport type DownloadParams = {\n  contents: (EmbeddedResource | ResourceLink)[];\n};\n\nexport type DownloadResult = {\n  isError?: boolean;\n};\n\n/**\n * Args passed to a {@link ViewToolHandler}, inferred from the tool's\n * `inputSchema` (optionality preserved). Mirrors the server's `registerTool`.\n */\nexport type InferViewToolArgs<Shape extends ZodRawShapeCompat> = {\n  [K in keyof Shape as undefined extends SchemaOutput<Shape[K]>\n    ? never\n    : K]: SchemaOutput<Shape[K]>;\n} & {\n  [K in keyof Shape as undefined extends SchemaOutput<Shape[K]>\n    ? K\n    : never]?: SchemaOutput<Shape[K]>;\n};\n\n/**\n * Declares a tool the view exposes to the host/model (the MCP Apps\n * \"app-provided tools\" feature). Mirrors the server-side `registerTool` config.\n * Namespace `name` (e.g. `chess_make_move`) to avoid clashing with server tools.\n */\nexport type ViewToolConfig<\n  TInput extends ZodRawShapeCompat = ZodRawShapeCompat,\n> = {\n  name: string;\n  title?: string;\n  description?: string;\n  inputSchema?: TInput;\n  annotations?: ToolAnnotations;\n};\n\n/**\n * Value a {@link ViewToolHandler} returns — a standard MCP `CallToolResult`\n * (`content` blocks plus optional `structuredContent` / `isError` / `_meta`),\n * exactly as `ext-apps`' app tool callbacks return it.\n */\nexport type ViewToolResult = CallToolResult;\n\n/** Handler run when the host calls a view tool. Receives validated, typed args. */\nexport type ViewToolHandler<\n  TInput extends ZodRawShapeCompat = ZodRawShapeCompat,\n> = (\n  args: InferViewToolArgs<TInput>,\n) => ViewToolResult | Promise<ViewToolResult>;\n\n/** @internal Untyped handler signature stored by the adaptor/bridge after type erasure. */\nexport type AnyViewToolHandler = (\n  args: Record<string, unknown>,\n) => ViewToolResult | Promise<ViewToolResult>;\n\n/**\n * @internal\n * Low-level interface every host bridge implements. End-user code should use\n * the React hooks (`useCallTool`, `useViewState`, `useFiles`, …) rather than\n * calling this directly.\n */\nexport interface Adaptor {\n  getHostContextStore<K extends keyof HostContext>(key: K): HostContextStore<K>;\n  callTool<\n    ToolArgs extends CallToolArgs = null,\n    ToolResponse extends CallToolResponse = CallToolResponse,\n  >(name: string, args: ToolArgs): Promise<ToolResponse>;\n  requestDisplayMode(mode: RequestDisplayMode): Promise<{\n    mode: RequestDisplayMode;\n  }>;\n  requestClose(): Promise<void>;\n  requestSize(size: RequestSizeOptions): Promise<void>;\n  sendFollowUpMessage(\n    prompt: string,\n    options?: SendFollowUpMessageOptions,\n  ): Promise<void>;\n  openExternal(href: string, options?: OpenExternalOptions): void;\n  download(params: DownloadParams): Promise<DownloadResult>;\n  setViewState(stateOrUpdater: SetViewStateAction): Promise<void>;\n  uploadFile(file: File, options?: UploadFileOptions): Promise<FileMetadata>;\n  getFileDownloadUrl(file: FileMetadata): Promise<{ downloadUrl: string }>;\n  selectFiles(): Promise<FileMetadata[]>;\n  openModal(options: RequestModalOptions): void;\n  setOpenInAppUrl(href: string): Promise<void>;\n  registerViewTool(\n    config: ViewToolConfig,\n    handler: AnyViewToolHandler,\n  ): () => void;\n}\n"]}

package/dist/web/bridges/use-host-context.d.ts

@@ -1,2 +1,7 @@
 import type { HostContext } from "./types.js";
+/**
+ * @internal
+ * Subscribe to a single {@link HostContext} key via `useSyncExternalStore`.
+ * Used to build the higher-level hooks; prefer those for app code.
+ */
 export declare const useHostContext: <K extends keyof HostContext>(key: K) => HostContext[K];

package/dist/web/bridges/use-host-context.js

@@ -1,5 +1,10 @@
 import { useSyncExternalStore } from "react";
 import { getAdaptor } from "./get-adaptor.js";
+/**
+ * @internal
+ * Subscribe to a single {@link HostContext} key via `useSyncExternalStore`.
+ * Used to build the higher-level hooks; prefer those for app code.
+ */
 export const useHostContext = (key) => {
     const adaptor = getAdaptor();
     const store = adaptor.getHostContextStore(key);

package/dist/web/bridges/use-host-context.js.map

@@ -1 +1 @@
-{"version":3,"file":"use-host-context.js","sourceRoot":"","sources":["../../../src/web/bridges/use-host-context.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,oBAAoB,EAAE,MAAM,OAAO,CAAC;AAC7C,OAAO,EAAE,UAAU,EAAE,MAAM,kBAAkB,CAAC;AAG9C,MAAM,CAAC,MAAM,cAAc,GAAG,CAC5B,GAAM,EACU,EAAE;IAClB,MAAM,OAAO,GAAG,UAAU,EAAE,CAAC;IAC7B,MAAM,KAAK,GAAG,OAAO,CAAC,mBAAmB,CAAC,GAAG,CAAC,CAAC;IAE/C,OAAO,oBAAoB,CAAC,KAAK,CAAC,SAAS,EAAE,KAAK,CAAC,WAAW,CAAC,CAAC;AAClE,CAAC,CAAC","sourcesContent":["import { useSyncExternalStore } from \"react\";\nimport { getAdaptor } from \"./get-adaptor.js\";\nimport type { HostContext } from \"./types.js\";\n\nexport const useHostContext = <K extends keyof HostContext>(\n  key: K,\n): HostContext[K] => {\n  const adaptor = getAdaptor();\n  const store = adaptor.getHostContextStore(key);\n\n  return useSyncExternalStore(store.subscribe, store.getSnapshot);\n};\n"]}
+{"version":3,"file":"use-host-context.js","sourceRoot":"","sources":["../../../src/web/bridges/use-host-context.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,oBAAoB,EAAE,MAAM,OAAO,CAAC;AAC7C,OAAO,EAAE,UAAU,EAAE,MAAM,kBAAkB,CAAC;AAG9C;;;;GAIG;AACH,MAAM,CAAC,MAAM,cAAc,GAAG,CAC5B,GAAM,EACU,EAAE;IAClB,MAAM,OAAO,GAAG,UAAU,EAAE,CAAC;IAC7B,MAAM,KAAK,GAAG,OAAO,CAAC,mBAAmB,CAAC,GAAG,CAAC,CAAC;IAE/C,OAAO,oBAAoB,CAAC,KAAK,CAAC,SAAS,EAAE,KAAK,CAAC,WAAW,CAAC,CAAC;AAClE,CAAC,CAAC","sourcesContent":["import { useSyncExternalStore } from \"react\";\nimport { getAdaptor } from \"./get-adaptor.js\";\nimport type { HostContext } from \"./types.js\";\n\n/**\n * @internal\n * Subscribe to a single {@link HostContext} key via `useSyncExternalStore`.\n * Used to build the higher-level hooks; prefer those for app code.\n */\nexport const useHostContext = <K extends keyof HostContext>(\n  key: K,\n): HostContext[K] => {\n  const adaptor = getAdaptor();\n  const store = adaptor.getHostContextStore(key);\n\n  return useSyncExternalStore(store.subscribe, store.getSnapshot);\n};\n"]}

package/dist/web/create-store.d.ts

@@ -1,3 +1,29 @@
 import { type StateCreator } from "zustand";
 import type { UnknownObject } from "./types.js";
+/**
+ * Create a Zustand store that is bidirectionally synced with the host's
+ * `viewState`. Local store updates persist to the host, and external host
+ * updates rehydrate the store — making the store the single source of truth
+ * for state that should survive view remounts.
+ *
+ * Use this when you outgrow {@link useViewState} and want first-class Zustand
+ * ergonomics (selectors, actions, middleware). Otherwise prefer `useViewState`.
+ *
+ * Skybridge-internal context fields (see {@link DataLLM}) are filtered out
+ * automatically before reaching your store.
+ *
+ * @typeParam State - Shape of the store's state. Must be a plain object.
+ *
+ * @example
+ * ```ts
+ * export const useStore = createStore<{ count: number; inc: () => void }>(
+ *   (set) => ({
+ *     count: 0,
+ *     inc: () => set((s) => ({ count: s.count + 1 })),
+ *   }),
+ * );
+ * ```
+ *
+ * @see https://docs.skybridge.tech/api-reference/create-store
+ */
 export declare function createStore<State extends UnknownObject>(storeCreator: StateCreator<State, [], [], State>, defaultState?: State | (() => State)): import("zustand").UseBoundStore<import("zustand").StoreApi<State>>;

package/dist/web/create-store.js

@@ -2,6 +2,32 @@ import { dequal } from "dequal/lite";
 import { create } from "zustand";
 import { getAdaptor } from "./bridges/index.js";
 import { filterViewContext, getInitialState, injectViewContext, serializeState, } from "./helpers/state.js";
+/**
+ * Create a Zustand store that is bidirectionally synced with the host's
+ * `viewState`. Local store updates persist to the host, and external host
+ * updates rehydrate the store — making the store the single source of truth
+ * for state that should survive view remounts.
+ *
+ * Use this when you outgrow {@link useViewState} and want first-class Zustand
+ * ergonomics (selectors, actions, middleware). Otherwise prefer `useViewState`.
+ *
+ * Skybridge-internal context fields (see {@link DataLLM}) are filtered out
+ * automatically before reaching your store.
+ *
+ * @typeParam State - Shape of the store's state. Must be a plain object.
+ *
+ * @example
+ * ```ts
+ * export const useStore = createStore<{ count: number; inc: () => void }>(
+ *   (set) => ({
+ *     count: 0,
+ *     inc: () => set((s) => ({ count: s.count + 1 })),
+ *   }),
+ * );
+ * ```
+ *
+ * @see https://docs.skybridge.tech/api-reference/create-store
+ */
 export function createStore(storeCreator, defaultState) {
     const initialState = getInitialState(defaultState);
     const store = create()((...args) => {

package/dist/web/create-store.js.map

@@ -1 +1 @@
-{"version":3,"file":"create-store.js","sourceRoot":"","sources":["../../src/web/create-store.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,MAAM,EAAE,MAAM,aAAa,CAAC;AACrC,OAAO,EAAE,MAAM,EAAqB,MAAM,SAAS,CAAC;AACpD,OAAO,EAAE,UAAU,EAAE,MAAM,oBAAoB,CAAC;AAChD,OAAO,EACL,iBAAiB,EACjB,eAAe,EACf,iBAAiB,EACjB,cAAc,GACf,MAAM,oBAAoB,CAAC;AAG5B,MAAM,UAAU,WAAW,CACzB,YAAgD,EAChD,YAAoC;IAEpC,MAAM,YAAY,GAAG,eAAe,CAAC,YAAY,CAAC,CAAC;IAEnD,MAAM,KAAK,GAAG,MAAM,EAAS,CAC3B,CAAC,GAAG,IAAoD,EAAE,EAAE;QAC1D,MAAM,SAAS,GAAG,YAAY,CAAC,GAAG,IAAI,CAAC,CAAC;QAExC,IAAI,YAAY,KAAK,IAAI,EAAE,CAAC;YAC1B,OAAO,EAAE,GAAG,SAAS,EAAE,GAAG,YAAY,EAAE,CAAC;QAC3C,CAAC;QAED,OAAO,SAAS,CAAC;IACnB,CAAC,CACF,CAAC;IAEF,4EAA4E;IAC5E,qFAAqF;IACrF,KAAK,CAAC,SAAS,CAAC,CAAC,KAAY,EAAE,EAAE;QAC/B,MAAM,eAAe,GAAG,cAAc,CAAC,KAAK,CAAC,CAAC;QAC9C,IAAI,eAAe,KAAK,IAAI,IAAI,eAAe,KAAK,SAAS,EAAE,CAAC;YAC9D,MAAM,cAAc,GAAG,iBAAiB,CAAC,eAAwB,CAAC,CAAC;YACnE,IAAI,cAAc,KAAK,IAAI,EAAE,CAAC;gBAC5B,UAAU,EAAE,CAAC,YAAY,CAAC,cAAc,CAAC,CAAC;YAC5C,CAAC;QACH,CAAC;IACH,CAAC,CAAC,CAAC;IAEH,MAAM,cAAc,GAAG,UAAU,EAAE,CAAC,mBAAmB,CAAC,WAAW,CAAC,CAAC;IACrE,cAAc,CAAC,SAAS,CAAC,GAAG,EAAE;QAC5B,MAAM,aAAa,GAAG,cAAc,CAAC,WAAW,EAAE,CAAC;QACnD,IAAI,aAAa,KAAK,IAAI,EAAE,CAAC;YAC3B,MAAM,QAAQ,GAAG,iBAAiB,CAAC,aAAa,CAAU,CAAC;YAC3D,MAAM,OAAO,GAAG,cAAc,CAAC,KAAK,CAAC,QAAQ,EAAE,CAAU,CAAC;YAC1D,IAAI,CAAC,MAAM,CAAC,QAAQ,EAAE,OAAO,CAAC,EAAE,CAAC;gBAC/B,KAAK,CAAC,QAAQ,CAAC,QAAQ,CAAC,CAAC;YAC3B,CAAC;QACH,CAAC;IACH,CAAC,CAAC,CAAC;IAEH,OAAO,KAAK,CAAC;AACf,CAAC","sourcesContent":["import { dequal } from \"dequal/lite\";\nimport { create, type StateCreator } from \"zustand\";\nimport { getAdaptor } from \"./bridges/index.js\";\nimport {\n  filterViewContext,\n  getInitialState,\n  injectViewContext,\n  serializeState,\n} from \"./helpers/state.js\";\nimport type { UnknownObject } from \"./types.js\";\n\nexport function createStore<State extends UnknownObject>(\n  storeCreator: StateCreator<State, [], [], State>,\n  defaultState?: State | (() => State),\n) {\n  const initialState = getInitialState(defaultState);\n\n  const store = create<State>()(\n    (...args: Parameters<StateCreator<State, [], [], State>>) => {\n      const baseStore = storeCreator(...args);\n\n      if (initialState !== null) {\n        return { ...baseStore, ...initialState };\n      }\n\n      return baseStore;\n    },\n  );\n\n  // Bidirectional sync between the Zustand store and the adaptor's viewState.\n  // Store changes persist to the host; external viewState changes rehydrate the store.\n  store.subscribe((state: State) => {\n    const serializedState = serializeState(state);\n    if (serializedState !== null && serializedState !== undefined) {\n      const stateToPersist = injectViewContext(serializedState as State);\n      if (stateToPersist !== null) {\n        getAdaptor().setViewState(stateToPersist);\n      }\n    }\n  });\n\n  const viewStateStore = getAdaptor().getHostContextStore(\"viewState\");\n  viewStateStore.subscribe(() => {\n    const externalState = viewStateStore.getSnapshot();\n    if (externalState !== null) {\n      const filtered = filterViewContext(externalState) as State;\n      const current = serializeState(store.getState()) as State;\n      if (!dequal(filtered, current)) {\n        store.setState(filtered);\n      }\n    }\n  });\n\n  return store;\n}\n"]}
+{"version":3,"file":"create-store.js","sourceRoot":"","sources":["../../src/web/create-store.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,MAAM,EAAE,MAAM,aAAa,CAAC;AACrC,OAAO,EAAE,MAAM,EAAqB,MAAM,SAAS,CAAC;AACpD,OAAO,EAAE,UAAU,EAAE,MAAM,oBAAoB,CAAC;AAChD,OAAO,EACL,iBAAiB,EACjB,eAAe,EACf,iBAAiB,EACjB,cAAc,GACf,MAAM,oBAAoB,CAAC;AAG5B;;;;;;;;;;;;;;;;;;;;;;;;;GAyBG;AACH,MAAM,UAAU,WAAW,CACzB,YAAgD,EAChD,YAAoC;IAEpC,MAAM,YAAY,GAAG,eAAe,CAAC,YAAY,CAAC,CAAC;IAEnD,MAAM,KAAK,GAAG,MAAM,EAAS,CAC3B,CAAC,GAAG,IAAoD,EAAE,EAAE;QAC1D,MAAM,SAAS,GAAG,YAAY,CAAC,GAAG,IAAI,CAAC,CAAC;QAExC,IAAI,YAAY,KAAK,IAAI,EAAE,CAAC;YAC1B,OAAO,EAAE,GAAG,SAAS,EAAE,GAAG,YAAY,EAAE,CAAC;QAC3C,CAAC;QAED,OAAO,SAAS,CAAC;IACnB,CAAC,CACF,CAAC;IAEF,4EAA4E;IAC5E,qFAAqF;IACrF,KAAK,CAAC,SAAS,CAAC,CAAC,KAAY,EAAE,EAAE;QAC/B,MAAM,eAAe,GAAG,cAAc,CAAC,KAAK,CAAC,CAAC;QAC9C,IAAI,eAAe,KAAK,IAAI,IAAI,eAAe,KAAK,SAAS,EAAE,CAAC;YAC9D,MAAM,cAAc,GAAG,iBAAiB,CAAC,eAAwB,CAAC,CAAC;YACnE,IAAI,cAAc,KAAK,IAAI,EAAE,CAAC;gBAC5B,UAAU,EAAE,CAAC,YAAY,CAAC,cAAc,CAAC,CAAC;YAC5C,CAAC;QACH,CAAC;IACH,CAAC,CAAC,CAAC;IAEH,MAAM,cAAc,GAAG,UAAU,EAAE,CAAC,mBAAmB,CAAC,WAAW,CAAC,CAAC;IACrE,cAAc,CAAC,SAAS,CAAC,GAAG,EAAE;QAC5B,MAAM,aAAa,GAAG,cAAc,CAAC,WAAW,EAAE,CAAC;QACnD,IAAI,aAAa,KAAK,IAAI,EAAE,CAAC;YAC3B,MAAM,QAAQ,GAAG,iBAAiB,CAAC,aAAa,CAAU,CAAC;YAC3D,MAAM,OAAO,GAAG,cAAc,CAAC,KAAK,CAAC,QAAQ,EAAE,CAAU,CAAC;YAC1D,IAAI,CAAC,MAAM,CAAC,QAAQ,EAAE,OAAO,CAAC,EAAE,CAAC;gBAC/B,KAAK,CAAC,QAAQ,CAAC,QAAQ,CAAC,CAAC;YAC3B,CAAC;QACH,CAAC;IACH,CAAC,CAAC,CAAC;IAEH,OAAO,KAAK,CAAC;AACf,CAAC","sourcesContent":["import { dequal } from \"dequal/lite\";\nimport { create, type StateCreator } from \"zustand\";\nimport { getAdaptor } from \"./bridges/index.js\";\nimport {\n  filterViewContext,\n  getInitialState,\n  injectViewContext,\n  serializeState,\n} from \"./helpers/state.js\";\nimport type { UnknownObject } from \"./types.js\";\n\n/**\n * Create a Zustand store that is bidirectionally synced with the host's\n * `viewState`. Local store updates persist to the host, and external host\n * updates rehydrate the store — making the store the single source of truth\n * for state that should survive view remounts.\n *\n * Use this when you outgrow {@link useViewState} and want first-class Zustand\n * ergonomics (selectors, actions, middleware). Otherwise prefer `useViewState`.\n *\n * Skybridge-internal context fields (see {@link DataLLM}) are filtered out\n * automatically before reaching your store.\n *\n * @typeParam State - Shape of the store's state. Must be a plain object.\n *\n * @example\n * ```ts\n * export const useStore = createStore<{ count: number; inc: () => void }>(\n *   (set) => ({\n *     count: 0,\n *     inc: () => set((s) => ({ count: s.count + 1 })),\n *   }),\n * );\n * ```\n *\n * @see https://docs.skybridge.tech/api-reference/create-store\n */\nexport function createStore<State extends UnknownObject>(\n  storeCreator: StateCreator<State, [], [], State>,\n  defaultState?: State | (() => State),\n) {\n  const initialState = getInitialState(defaultState);\n\n  const store = create<State>()(\n    (...args: Parameters<StateCreator<State, [], [], State>>) => {\n      const baseStore = storeCreator(...args);\n\n      if (initialState !== null) {\n        return { ...baseStore, ...initialState };\n      }\n\n      return baseStore;\n    },\n  );\n\n  // Bidirectional sync between the Zustand store and the adaptor's viewState.\n  // Store changes persist to the host; external viewState changes rehydrate the store.\n  store.subscribe((state: State) => {\n    const serializedState = serializeState(state);\n    if (serializedState !== null && serializedState !== undefined) {\n      const stateToPersist = injectViewContext(serializedState as State);\n      if (stateToPersist !== null) {\n        getAdaptor().setViewState(stateToPersist);\n      }\n    }\n  });\n\n  const viewStateStore = getAdaptor().getHostContextStore(\"viewState\");\n  viewStateStore.subscribe(() => {\n    const externalState = viewStateStore.getSnapshot();\n    if (externalState !== null) {\n      const filtered = filterViewContext(externalState) as State;\n      const current = serializeState(store.getState()) as State;\n      if (!dequal(filtered, current)) {\n        store.setState(filtered);\n      }\n    }\n  });\n\n  return store;\n}\n"]}

package/dist/web/data-llm.d.ts

@@ -1,14 +1,47 @@
 import { type ReactNode } from "react";
+/** Text content surfaced to the model by a {@link DataLLM} component. */
 export type DataLLMContent = string;
+/**
+ * A node in the {@link DataLLM} tree. Nested `<DataLLM>` elements form a
+ * hierarchy that is serialized as an indented bullet list for the model.
+ */
 export interface DataLLMNode {
     id: string;
     parentId: string | null;
     content: string | null;
 }
+/**
+ * Key under which the serialized {@link DataLLM} tree is persisted on the
+ * host's `viewState`. The host exposes the value to the model on subsequent
+ * turns.
+ */
 export declare const VIEW_CONTEXT_KEY: "__view_context";
 interface DataLLMProps {
     content: DataLLMContent | null | undefined;
     children?: ReactNode;
 }
+/**
+ * Surface in-view content to the LLM so it can reason about what the user is
+ * seeing without an extra tool call.
+ *
+ * Each `<DataLLM>` registers `content` as a node in a tree (parented by any
+ * enclosing `<DataLLM>`). The flattened tree is serialized as an indented
+ * bullet list and persisted on the host's `viewState` under
+ * {@link VIEW_CONTEXT_KEY}; the host then surfaces it to the model as part of
+ * the next turn's context.
+ *
+ * Pass `null`/`undefined` for `content` to register only as a structural
+ * parent (useful for grouping).
+ *
+ * @example
+ * ```tsx
+ * <DataLLM content="Active filters">
+ *   <DataLLM content={`Sort: ${sort}`} />
+ *   <DataLLM content={`Page: ${page}`} />
+ * </DataLLM>
+ * ```
+ *
+ * @see https://docs.skybridge.tech/api-reference/data-llm
+ */
 export declare function DataLLM({ content, children }: DataLLMProps): import("react/jsx-runtime").JSX.Element;
 export {};

package/dist/web/data-llm.js

@@ -1,6 +1,11 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import { createContext, useContext, useEffect, useId, } from "react";
 import { getAdaptor } from "./bridges/index.js";
+/**
+ * Key under which the serialized {@link DataLLM} tree is persisted on the
+ * host's `viewState`. The host exposes the value to the model on subsequent
+ * turns.
+ */
 export const VIEW_CONTEXT_KEY = "__view_context";
 const nodes = new Map();
 function setNode(node) {
@@ -20,6 +25,29 @@ function onChange() {
     }));
 }
 const ParentIdContext = createContext(null);
+/**
+ * Surface in-view content to the LLM so it can reason about what the user is
+ * seeing without an extra tool call.
+ *
+ * Each `<DataLLM>` registers `content` as a node in a tree (parented by any
+ * enclosing `<DataLLM>`). The flattened tree is serialized as an indented
+ * bullet list and persisted on the host's `viewState` under
+ * {@link VIEW_CONTEXT_KEY}; the host then surfaces it to the model as part of
+ * the next turn's context.
+ *
+ * Pass `null`/`undefined` for `content` to register only as a structural
+ * parent (useful for grouping).
+ *
+ * @example
+ * ```tsx
+ * <DataLLM content="Active filters">
+ *   <DataLLM content={`Sort: ${sort}`} />
+ *   <DataLLM content={`Page: ${page}`} />
+ * </DataLLM>
+ * ```
+ *
+ * @see https://docs.skybridge.tech/api-reference/data-llm
+ */
 export function DataLLM({ content, children }) {
     const parentId = useContext(ParentIdContext);
     const id = useId();

package/dist/web/data-llm.js.map

@@ -1 +1 @@
-{"version":3,"file":"data-llm.js","sourceRoot":"","sources":["../../src/web/data-llm.tsx"],"names":[],"mappings":"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","sourcesContent":["import {\n  createContext,\n  type ReactNode,\n  useContext,\n  useEffect,\n  useId,\n} from \"react\";\nimport { getAdaptor } from \"./bridges/index.js\";\n\nexport type DataLLMContent = string;\n\nexport interface DataLLMNode {\n  id: string;\n  parentId: string | null;\n  content: string | null;\n}\n\nexport const VIEW_CONTEXT_KEY = \"__view_context\" as const;\n\nconst nodes = new Map<string, DataLLMNode>();\n\nfunction setNode(node: DataLLMNode) {\n  nodes.set(node.id, node);\n  onChange();\n}\n\nfunction removeNode(id: string) {\n  nodes.delete(id);\n  onChange();\n}\n\nfunction onChange() {\n  const description = getLLMDescriptionString();\n  const adaptor = getAdaptor();\n  adaptor.setViewState((prevState) => ({\n    ...prevState,\n    [VIEW_CONTEXT_KEY]: description,\n  }));\n}\n\nconst ParentIdContext = createContext<string | null>(null);\n\ninterface DataLLMProps {\n  content: DataLLMContent | null | undefined;\n  children?: ReactNode;\n}\n\nexport function DataLLM({ content, children }: DataLLMProps) {\n  const parentId = useContext(ParentIdContext);\n  const id = useId();\n\n  useEffect(() => {\n    if (content) {\n      setNode({\n        id,\n        parentId,\n        content,\n      });\n    } else {\n      removeNode(id);\n    }\n\n    return () => {\n      removeNode(id);\n    };\n  }, [id, parentId, content]);\n\n  return (\n    <ParentIdContext.Provider value={id}>{children}</ParentIdContext.Provider>\n  );\n}\n\nfunction getLLMDescriptionString(): string {\n  const byParent = new Map<string | null, DataLLMNode[]>();\n  for (const node of Array.from(nodes.values())) {\n    const key = node.parentId ?? null;\n    if (!byParent.has(key)) {\n      byParent.set(key, []);\n    }\n    byParent.get(key)?.push(node);\n  }\n\n  for (const list of byParent.values()) {\n    list.sort((a, b) => a.id.localeCompare(b.id));\n  }\n\n  const lines: string[] = [];\n\n  function traverseTree(parentId: string | null, depth: number) {\n    const children = byParent.get(parentId);\n    if (!children) {\n      return;\n    }\n\n    for (const child of children) {\n      if (child.content?.trim()) {\n        const indent = \"  \".repeat(depth);\n        lines.push(`${indent}- ${child.content.trim()}`);\n      }\n      traverseTree(child.id, depth + 1);\n    }\n  }\n\n  traverseTree(null, 0);\n\n  return lines.join(\"\\n\");\n}\n"]}
+{"version":3,"file":"data-llm.js","sourceRoot":"","sources":["../../src/web/data-llm.tsx"],"names":[],"mappings":"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","sourcesContent":["import {\n  createContext,\n  type ReactNode,\n  useContext,\n  useEffect,\n  useId,\n} from \"react\";\nimport { getAdaptor } from \"./bridges/index.js\";\n\n/** Text content surfaced to the model by a {@link DataLLM} component. */\nexport type DataLLMContent = string;\n\n/**\n * A node in the {@link DataLLM} tree. Nested `<DataLLM>` elements form a\n * hierarchy that is serialized as an indented bullet list for the model.\n */\nexport interface DataLLMNode {\n  id: string;\n  parentId: string | null;\n  content: string | null;\n}\n\n/**\n * Key under which the serialized {@link DataLLM} tree is persisted on the\n * host's `viewState`. The host exposes the value to the model on subsequent\n * turns.\n */\nexport const VIEW_CONTEXT_KEY = \"__view_context\" as const;\n\nconst nodes = new Map<string, DataLLMNode>();\n\nfunction setNode(node: DataLLMNode) {\n  nodes.set(node.id, node);\n  onChange();\n}\n\nfunction removeNode(id: string) {\n  nodes.delete(id);\n  onChange();\n}\n\nfunction onChange() {\n  const description = getLLMDescriptionString();\n  const adaptor = getAdaptor();\n  adaptor.setViewState((prevState) => ({\n    ...prevState,\n    [VIEW_CONTEXT_KEY]: description,\n  }));\n}\n\nconst ParentIdContext = createContext<string | null>(null);\n\ninterface DataLLMProps {\n  content: DataLLMContent | null | undefined;\n  children?: ReactNode;\n}\n\n/**\n * Surface in-view content to the LLM so it can reason about what the user is\n * seeing without an extra tool call.\n *\n * Each `<DataLLM>` registers `content` as a node in a tree (parented by any\n * enclosing `<DataLLM>`). The flattened tree is serialized as an indented\n * bullet list and persisted on the host's `viewState` under\n * {@link VIEW_CONTEXT_KEY}; the host then surfaces it to the model as part of\n * the next turn's context.\n *\n * Pass `null`/`undefined` for `content` to register only as a structural\n * parent (useful for grouping).\n *\n * @example\n * ```tsx\n * <DataLLM content=\"Active filters\">\n *   <DataLLM content={`Sort: ${sort}`} />\n *   <DataLLM content={`Page: ${page}`} />\n * </DataLLM>\n * ```\n *\n * @see https://docs.skybridge.tech/api-reference/data-llm\n */\nexport function DataLLM({ content, children }: DataLLMProps) {\n  const parentId = useContext(ParentIdContext);\n  const id = useId();\n\n  useEffect(() => {\n    if (content) {\n      setNode({\n        id,\n        parentId,\n        content,\n      });\n    } else {\n      removeNode(id);\n    }\n\n    return () => {\n      removeNode(id);\n    };\n  }, [id, parentId, content]);\n\n  return (\n    <ParentIdContext.Provider value={id}>{children}</ParentIdContext.Provider>\n  );\n}\n\nfunction getLLMDescriptionString(): string {\n  const byParent = new Map<string | null, DataLLMNode[]>();\n  for (const node of Array.from(nodes.values())) {\n    const key = node.parentId ?? null;\n    if (!byParent.has(key)) {\n      byParent.set(key, []);\n    }\n    byParent.get(key)?.push(node);\n  }\n\n  for (const list of byParent.values()) {\n    list.sort((a, b) => a.id.localeCompare(b.id));\n  }\n\n  const lines: string[] = [];\n\n  function traverseTree(parentId: string | null, depth: number) {\n    const children = byParent.get(parentId);\n    if (!children) {\n      return;\n    }\n\n    for (const child of children) {\n      if (child.content?.trim()) {\n        const indent = \"  \".repeat(depth);\n        lines.push(`${indent}- ${child.content.trim()}`);\n      }\n      traverseTree(child.id, depth + 1);\n    }\n  }\n\n  traverseTree(null, 0);\n\n  return lines.join(\"\\n\");\n}\n"]}

package/dist/web/generate-helpers.d.ts

@@ -64,6 +64,8 @@ type TypedToolInfoReturn<TInput, TOutput, TResponseMetadata> = ToolState<Objecti
  *   // toolInfo.output.structuredContent is typed based on view output schema
  * }
  * ```
+ *
+ * @see https://docs.skybridge.tech/api-reference/generate-helpers
  */
 export declare function generateHelpers<ServerType = never>(): {
     /**

package/dist/web/generate-helpers.js

@@ -53,6 +53,8 @@ import { useToolInfo } from "./hooks/use-tool-info.js";
  *   // toolInfo.output.structuredContent is typed based on view output schema
  * }
  * ```
+ *
+ * @see https://docs.skybridge.tech/api-reference/generate-helpers
  */
 export function generateHelpers() {
     return {

package/dist/web/generate-helpers.js.map

@@ -1 +1 @@
-{"version":3,"file":"generate-helpers.js","sourceRoot":"","sources":["../../src/web/generate-helpers.ts"],"names":[],"mappings":"AAOA,OAAO,EAIL,WAAW,GACZ,MAAM,0BAA0B,CAAC;AAClC,OAAO,EAAkB,WAAW,EAAE,MAAM,0BAA0B,CAAC;AAoBvE;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAqDG;AACH,MAAM,UAAU,eAAe;IAI7B,OAAO;QACL;;;;;;;;;;;;;;;;;;WAkBG;QACH,WAAW,EAAE,CACX,IAAc,EAId,EAAE;YACF,OAAO,WAAW,CAAC,IAAI,CAGtB,CAAC;QACJ,CAAC;QAED;;;;;;;;;;;;;;;;;;;;;;;;;;WA0BG;QACH,WAAW,EAAE,GAIX,EAAE;YACF,OAAO,WAAW,EAIjB,CAAC;QACJ,CAAC;KACF,CAAC;AACJ,CAAC","sourcesContent":["import type {\n  InferTools,\n  ToolInput,\n  ToolOutput,\n  ToolResponseMetadata,\n} from \"../server/index.js\";\nimport type { CallToolResponse } from \"./bridges/types.js\";\nimport {\n  type CallToolAsyncFn,\n  type CallToolFn,\n  type CallToolState,\n  useCallTool,\n} from \"./hooks/use-call-tool.js\";\nimport { type ToolState, useToolInfo } from \"./hooks/use-tool-info.js\";\nimport type { Objectify, Prettify } from \"./types.js\";\n\ntype TypedCallToolResponse<TOutput> = CallToolResponse & {\n  structuredContent: TOutput;\n};\n\ntype TypedCallToolReturn<TInput, TOutput> = Prettify<\n  CallToolState<TypedCallToolResponse<TOutput>> & {\n    callTool: CallToolFn<TInput, TypedCallToolResponse<TOutput>>;\n    callToolAsync: CallToolAsyncFn<TInput, TypedCallToolResponse<TOutput>>;\n  }\n>;\n\ntype TypedToolInfoReturn<TInput, TOutput, TResponseMetadata> = ToolState<\n  Objectify<TInput>,\n  Objectify<TOutput>,\n  Objectify<TResponseMetadata>\n>;\n\n/**\n * Creates typed versions of skybridge hooks with full type inference\n * for tool names, inputs, and outputs.\n *\n * This is the recommended way to use skybridge hooks in your views.\n * Set this up once in a dedicated file and export the typed hooks for use across your app.\n *\n * @typeParam ServerType - The type of your McpServer instance (use `typeof server`).\n *                         Must be a server instance created with method chaining.\n *                         TypeScript will validate that tools can be inferred from this type.\n *\n * @example\n * ```typescript\n * // src/server.ts\n * const server = new McpServer({ name: \"my-app\", version: \"1.0\" }, {})\n *   .registerTool({\n *     name: \"search-trip\",\n *     inputSchema: { destination: z.string() },\n *     outputSchema: { results: z.array(z.string()) },\n *     view: { component: \"search-trip\", description: \"Search trips\" },\n *   }, async ({ destination }) => {\n *     return { content: [{ type: \"text\", text: `Found trips to ${destination}` }] };\n *   });\n *\n * export type AppType = typeof server;\n * ```\n *\n * @example\n * ```typescript\n * // src/helpers.ts (one-time setup)\n * import type { AppType } from \"./server\";\n * import { generateHelpers } from \"skybridge/web\";\n *\n * export const { useCallTool, useToolInfo } = generateHelpers<AppType>();\n * ```\n *\n * @example\n * ```typescript\n * // src/views/search.tsx (usage)\n * import { useCallTool, useToolInfo } from \"../helpers\";\n *\n * export function SearchView() {\n *   const { callTool, data } = useCallTool(\"search-trip\");\n *   //                                      ^ autocomplete for tool names\n *   callTool({ destination: \"Spain\" });\n *   //         ^ autocomplete for input fields\n *\n *   const toolInfo = useToolInfo<\"search-trip\">();\n *   //                              ^ autocomplete for view names\n *   // toolInfo.input is typed based on view input schema\n *   // toolInfo.output.structuredContent is typed based on view output schema\n * }\n * ```\n */\nexport function generateHelpers<ServerType = never>() {\n  type Tools = InferTools<ServerType>;\n  type ToolNames = keyof Tools & string;\n\n  return {\n    /**\n     * Typed version of `useCallTool` that provides autocomplete for tool names\n     * and type inference for inputs and outputs.\n     *\n     * @param name - The name of the tool to call. Autocompletes based on your server's tool registry.\n     * @returns A hook with typed `callTool` function and `data` property.\n     *\n     * @example\n     * ```typescript\n     * const { callTool, data, isPending } = useCallTool(\"search-trip\");\n     * // TypeScript knows callTool expects { destination: string }\n     * callTool({ destination: \"Spain\" });\n     *\n     * // data.structuredContent is typed based on your outputSchema\n     * if (data) {\n     *   console.log(data.structuredContent.results);\n     * }\n     * ```\n     */\n    useCallTool: <ToolName extends ToolNames>(\n      name: ToolName,\n    ): TypedCallToolReturn<\n      ToolInput<ServerType, ToolName>,\n      ToolOutput<ServerType, ToolName>\n    > => {\n      return useCallTool(name) as TypedCallToolReturn<\n        ToolInput<ServerType, ToolName>,\n        ToolOutput<ServerType, ToolName>\n      >;\n    },\n\n    /**\n     * Typed version of `useToolInfo` that provides autocomplete for tool names\n     * and type inference for inputs, outputs, and responseMetadata.\n     *\n     * @typeParam K - The name of the tool. Autocompletes based on your server's tool registry.\n     * @returns A discriminated union with `status: \"pending\" | \"success\"` that narrows correctly.\n     *\n     * @example\n     * ```typescript\n     * const toolInfo = useToolInfo<\"search-trip\">();\n     * // toolInfo.input is typed as { destination: string; ... }\n     * // toolInfo.output is typed as { results: Array<...>; ... }\n     * // toolInfo.responseMetadata is typed based on _meta in callback return\n     * // toolInfo.status narrows correctly: \"pending\" | \"success\"\n     *\n     * if (toolInfo.isPending) {\n     *   // TypeScript knows output and responseMetadata are undefined here\n     *   console.log(toolInfo.input.destination);\n     * }\n     *\n     * if (toolInfo.isSuccess) {\n     *   // TypeScript knows output and responseMetadata are defined here\n     *   console.log(toolInfo.output.results);\n     *   console.log(toolInfo.responseMetadata);\n     * }\n     * ```\n     */\n    useToolInfo: <ToolName extends ToolNames>(): TypedToolInfoReturn<\n      ToolInput<ServerType, ToolName>,\n      ToolOutput<ServerType, ToolName>,\n      ToolResponseMetadata<ServerType, ToolName>\n    > => {\n      return useToolInfo() as TypedToolInfoReturn<\n        ToolInput<ServerType, ToolName>,\n        ToolOutput<ServerType, ToolName>,\n        ToolResponseMetadata<ServerType, ToolName>\n      >;\n    },\n  };\n}\n"]}
+{"version":3,"file":"generate-helpers.js","sourceRoot":"","sources":["../../src/web/generate-helpers.ts"],"names":[],"mappings":"AAOA,OAAO,EAIL,WAAW,GACZ,MAAM,0BAA0B,CAAC;AAClC,OAAO,EAAkB,WAAW,EAAE,MAAM,0BAA0B,CAAC;AAoBvE;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAuDG;AACH,MAAM,UAAU,eAAe;IAI7B,OAAO;QACL;;;;;;;;;;;;;;;;;;WAkBG;QACH,WAAW,EAAE,CACX,IAAc,EAId,EAAE;YACF,OAAO,WAAW,CAAC,IAAI,CAGtB,CAAC;QACJ,CAAC;QAED;;;;;;;;;;;;;;;;;;;;;;;;;;WA0BG;QACH,WAAW,EAAE,GAIX,EAAE;YACF,OAAO,WAAW,EAIjB,CAAC;QACJ,CAAC;KACF,CAAC;AACJ,CAAC","sourcesContent":["import type {\n  InferTools,\n  ToolInput,\n  ToolOutput,\n  ToolResponseMetadata,\n} from \"../server/index.js\";\nimport type { CallToolResponse } from \"./bridges/types.js\";\nimport {\n  type CallToolAsyncFn,\n  type CallToolFn,\n  type CallToolState,\n  useCallTool,\n} from \"./hooks/use-call-tool.js\";\nimport { type ToolState, useToolInfo } from \"./hooks/use-tool-info.js\";\nimport type { Objectify, Prettify } from \"./types.js\";\n\ntype TypedCallToolResponse<TOutput> = CallToolResponse & {\n  structuredContent: TOutput;\n};\n\ntype TypedCallToolReturn<TInput, TOutput> = Prettify<\n  CallToolState<TypedCallToolResponse<TOutput>> & {\n    callTool: CallToolFn<TInput, TypedCallToolResponse<TOutput>>;\n    callToolAsync: CallToolAsyncFn<TInput, TypedCallToolResponse<TOutput>>;\n  }\n>;\n\ntype TypedToolInfoReturn<TInput, TOutput, TResponseMetadata> = ToolState<\n  Objectify<TInput>,\n  Objectify<TOutput>,\n  Objectify<TResponseMetadata>\n>;\n\n/**\n * Creates typed versions of skybridge hooks with full type inference\n * for tool names, inputs, and outputs.\n *\n * This is the recommended way to use skybridge hooks in your views.\n * Set this up once in a dedicated file and export the typed hooks for use across your app.\n *\n * @typeParam ServerType - The type of your McpServer instance (use `typeof server`).\n *                         Must be a server instance created with method chaining.\n *                         TypeScript will validate that tools can be inferred from this type.\n *\n * @example\n * ```typescript\n * // src/server.ts\n * const server = new McpServer({ name: \"my-app\", version: \"1.0\" }, {})\n *   .registerTool({\n *     name: \"search-trip\",\n *     inputSchema: { destination: z.string() },\n *     outputSchema: { results: z.array(z.string()) },\n *     view: { component: \"search-trip\", description: \"Search trips\" },\n *   }, async ({ destination }) => {\n *     return { content: [{ type: \"text\", text: `Found trips to ${destination}` }] };\n *   });\n *\n * export type AppType = typeof server;\n * ```\n *\n * @example\n * ```typescript\n * // src/helpers.ts (one-time setup)\n * import type { AppType } from \"./server\";\n * import { generateHelpers } from \"skybridge/web\";\n *\n * export const { useCallTool, useToolInfo } = generateHelpers<AppType>();\n * ```\n *\n * @example\n * ```typescript\n * // src/views/search.tsx (usage)\n * import { useCallTool, useToolInfo } from \"../helpers\";\n *\n * export function SearchView() {\n *   const { callTool, data } = useCallTool(\"search-trip\");\n *   //                                      ^ autocomplete for tool names\n *   callTool({ destination: \"Spain\" });\n *   //         ^ autocomplete for input fields\n *\n *   const toolInfo = useToolInfo<\"search-trip\">();\n *   //                              ^ autocomplete for view names\n *   // toolInfo.input is typed based on view input schema\n *   // toolInfo.output.structuredContent is typed based on view output schema\n * }\n * ```\n *\n * @see https://docs.skybridge.tech/api-reference/generate-helpers\n */\nexport function generateHelpers<ServerType = never>() {\n  type Tools = InferTools<ServerType>;\n  type ToolNames = keyof Tools & string;\n\n  return {\n    /**\n     * Typed version of `useCallTool` that provides autocomplete for tool names\n     * and type inference for inputs and outputs.\n     *\n     * @param name - The name of the tool to call. Autocompletes based on your server's tool registry.\n     * @returns A hook with typed `callTool` function and `data` property.\n     *\n     * @example\n     * ```typescript\n     * const { callTool, data, isPending } = useCallTool(\"search-trip\");\n     * // TypeScript knows callTool expects { destination: string }\n     * callTool({ destination: \"Spain\" });\n     *\n     * // data.structuredContent is typed based on your outputSchema\n     * if (data) {\n     *   console.log(data.structuredContent.results);\n     * }\n     * ```\n     */\n    useCallTool: <ToolName extends ToolNames>(\n      name: ToolName,\n    ): TypedCallToolReturn<\n      ToolInput<ServerType, ToolName>,\n      ToolOutput<ServerType, ToolName>\n    > => {\n      return useCallTool(name) as TypedCallToolReturn<\n        ToolInput<ServerType, ToolName>,\n        ToolOutput<ServerType, ToolName>\n      >;\n    },\n\n    /**\n     * Typed version of `useToolInfo` that provides autocomplete for tool names\n     * and type inference for inputs, outputs, and responseMetadata.\n     *\n     * @typeParam K - The name of the tool. Autocompletes based on your server's tool registry.\n     * @returns A discriminated union with `status: \"pending\" | \"success\"` that narrows correctly.\n     *\n     * @example\n     * ```typescript\n     * const toolInfo = useToolInfo<\"search-trip\">();\n     * // toolInfo.input is typed as { destination: string; ... }\n     * // toolInfo.output is typed as { results: Array<...>; ... }\n     * // toolInfo.responseMetadata is typed based on _meta in callback return\n     * // toolInfo.status narrows correctly: \"pending\" | \"success\"\n     *\n     * if (toolInfo.isPending) {\n     *   // TypeScript knows output and responseMetadata are undefined here\n     *   console.log(toolInfo.input.destination);\n     * }\n     *\n     * if (toolInfo.isSuccess) {\n     *   // TypeScript knows output and responseMetadata are defined here\n     *   console.log(toolInfo.output.results);\n     *   console.log(toolInfo.responseMetadata);\n     * }\n     * ```\n     */\n    useToolInfo: <ToolName extends ToolNames>(): TypedToolInfoReturn<\n      ToolInput<ServerType, ToolName>,\n      ToolOutput<ServerType, ToolName>,\n      ToolResponseMetadata<ServerType, ToolName>\n    > => {\n      return useToolInfo() as TypedToolInfoReturn<\n        ToolInput<ServerType, ToolName>,\n        ToolOutput<ServerType, ToolName>,\n        ToolResponseMetadata<ServerType, ToolName>\n      >;\n    },\n  };\n}\n"]}

package/dist/web/hooks/index.d.ts

@@ -4,6 +4,7 @@ export { type DownloadFn, useDownload } from "./use-download.js";
 export { useFiles } from "./use-files.js";
 export { type LayoutState, useLayout } from "./use-layout.js";
 export { type OpenExternalFn, useOpenExternal } from "./use-open-external.js";
+export { useRegisterViewTool } from "./use-register-view-tool.js";
 export { type RequestCloseFn, useRequestClose } from "./use-request-close.js";
 export { useRequestModal } from "./use-request-modal.js";
 export { type RequestSizeFn, useRequestSize } from "./use-request-size.js";

package/dist/web/hooks/index.js

@@ -4,6 +4,7 @@ export { useDownload } from "./use-download.js";
 export { useFiles } from "./use-files.js";
 export { useLayout } from "./use-layout.js";
 export { useOpenExternal } from "./use-open-external.js";
+export { useRegisterViewTool } from "./use-register-view-tool.js";
 export { useRequestClose } from "./use-request-close.js";
 export { useRequestModal } from "./use-request-modal.js";
 export { useRequestSize } from "./use-request-size.js";

package/dist/web/hooks/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/web/hooks/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAKL,WAAW,GACZ,MAAM,oBAAoB,CAAC;AAC5B,OAAO,EAAE,cAAc,EAAE,MAAM,uBAAuB,CAAC;AACvD,OAAO,EAAmB,WAAW,EAAE,MAAM,mBAAmB,CAAC;AACjE,OAAO,EAAE,QAAQ,EAAE,MAAM,gBAAgB,CAAC;AAC1C,OAAO,EAAoB,SAAS,EAAE,MAAM,iBAAiB,CAAC;AAC9D,OAAO,EAAuB,eAAe,EAAE,MAAM,wBAAwB,CAAC;AAC9E,OAAO,EAAuB,eAAe,EAAE,MAAM,wBAAwB,CAAC;AAC9E,OAAO,EAAE,eAAe,EAAE,MAAM,wBAAwB,CAAC;AACzD,OAAO,EAAsB,cAAc,EAAE,MAAM,uBAAuB,CAAC;AAC3E,OAAO,EAAE,sBAAsB,EAAE,MAAM,iCAAiC,CAAC;AACzE,OAAO,EAAE,kBAAkB,EAAE,MAAM,8BAA8B,CAAC;AAClE,OAAO,EAAE,WAAW,EAAE,MAAM,oBAAoB,CAAC;AACjD,OAAO,EAAkB,OAAO,EAAE,MAAM,eAAe,CAAC;AACxD,OAAO,EAAE,YAAY,EAAE,MAAM,qBAAqB,CAAC","sourcesContent":["export {\n  type CallToolAsyncFn,\n  type CallToolFn,\n  type CallToolState,\n  type SideEffects,\n  useCallTool,\n} from \"./use-call-tool.js\";\nexport { useDisplayMode } from \"./use-display-mode.js\";\nexport { type DownloadFn, useDownload } from \"./use-download.js\";\nexport { useFiles } from \"./use-files.js\";\nexport { type LayoutState, useLayout } from \"./use-layout.js\";\nexport { type OpenExternalFn, useOpenExternal } from \"./use-open-external.js\";\nexport { type RequestCloseFn, useRequestClose } from \"./use-request-close.js\";\nexport { useRequestModal } from \"./use-request-modal.js\";\nexport { type RequestSizeFn, useRequestSize } from \"./use-request-size.js\";\nexport { useSendFollowUpMessage } from \"./use-send-follow-up-message.js\";\nexport { useSetOpenInAppUrl } from \"./use-set-open-in-app-url.js\";\nexport { useToolInfo } from \"./use-tool-info.js\";\nexport { type UserState, useUser } from \"./use-user.js\";\nexport { useViewState } from \"./use-view-state.js\";\n"]}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/web/hooks/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAKL,WAAW,GACZ,MAAM,oBAAoB,CAAC;AAC5B,OAAO,EAAE,cAAc,EAAE,MAAM,uBAAuB,CAAC;AACvD,OAAO,EAAmB,WAAW,EAAE,MAAM,mBAAmB,CAAC;AACjE,OAAO,EAAE,QAAQ,EAAE,MAAM,gBAAgB,CAAC;AAC1C,OAAO,EAAoB,SAAS,EAAE,MAAM,iBAAiB,CAAC;AAC9D,OAAO,EAAuB,eAAe,EAAE,MAAM,wBAAwB,CAAC;AAC9E,OAAO,EAAE,mBAAmB,EAAE,MAAM,6BAA6B,CAAC;AAClE,OAAO,EAAuB,eAAe,EAAE,MAAM,wBAAwB,CAAC;AAC9E,OAAO,EAAE,eAAe,EAAE,MAAM,wBAAwB,CAAC;AACzD,OAAO,EAAsB,cAAc,EAAE,MAAM,uBAAuB,CAAC;AAC3E,OAAO,EAAE,sBAAsB,EAAE,MAAM,iCAAiC,CAAC;AACzE,OAAO,EAAE,kBAAkB,EAAE,MAAM,8BAA8B,CAAC;AAClE,OAAO,EAAE,WAAW,EAAE,MAAM,oBAAoB,CAAC;AACjD,OAAO,EAAkB,OAAO,EAAE,MAAM,eAAe,CAAC;AACxD,OAAO,EAAE,YAAY,EAAE,MAAM,qBAAqB,CAAC","sourcesContent":["export {\n  type CallToolAsyncFn,\n  type CallToolFn,\n  type CallToolState,\n  type SideEffects,\n  useCallTool,\n} from \"./use-call-tool.js\";\nexport { useDisplayMode } from \"./use-display-mode.js\";\nexport { type DownloadFn, useDownload } from \"./use-download.js\";\nexport { useFiles } from \"./use-files.js\";\nexport { type LayoutState, useLayout } from \"./use-layout.js\";\nexport { type OpenExternalFn, useOpenExternal } from \"./use-open-external.js\";\nexport { useRegisterViewTool } from \"./use-register-view-tool.js\";\nexport { type RequestCloseFn, useRequestClose } from \"./use-request-close.js\";\nexport { useRequestModal } from \"./use-request-modal.js\";\nexport { type RequestSizeFn, useRequestSize } from \"./use-request-size.js\";\nexport { useSendFollowUpMessage } from \"./use-send-follow-up-message.js\";\nexport { useSetOpenInAppUrl } from \"./use-set-open-in-app-url.js\";\nexport { useToolInfo } from \"./use-tool-info.js\";\nexport { type UserState, useUser } from \"./use-user.js\";\nexport { useViewState } from \"./use-view-state.js\";\n"]}

package/dist/web/hooks/use-call-tool.d.ts

@@ -36,13 +36,26 @@ type CallToolErrorState = {
     data: undefined;
     error: unknown;
 };
+/**
+ * State of a {@link useCallTool} invocation, discriminated by `status`.
+ * Use `isIdle` / `isPending` / `isSuccess` / `isError` for ergonomic conditional rendering.
+ */
 export type CallToolState<TData extends CallToolResponse = CallToolResponse> = CallToolIdleState | CallToolPendingState | CallToolSuccessState<TData> | CallToolErrorState;
+/**
+ * Optional callbacks fired around a {@link useCallTool} call.
+ * `onSettled` runs after success or error.
+ */
 export type SideEffects<ToolArgs, ToolResponse> = {
     onSuccess?: (data: ToolResponse, toolArgs: ToolArgs) => void;
     onError?: (error: unknown, toolArgs: ToolArgs) => void;
     onSettled?: (data: ToolResponse | undefined, error: unknown | undefined, toolArgs: ToolArgs) => void;
 };
 type IsArgsOptional<T> = [T] extends [null] ? true : HasRequiredKeys<T> extends false ? true : false;
+/**
+ * Fire-and-forget call function returned by {@link useCallTool}. Tracks state
+ * on the hook and supports optional {@link SideEffects} callbacks. Args are
+ * optional when the tool accepts none.
+ */
 export type CallToolFn<TArgs, TResponse> = IsArgsOptional<TArgs> extends true ? {
     (): void;
     (sideEffects: SideEffects<TArgs, TResponse>): void;
@@ -52,11 +65,43 @@ export type CallToolFn<TArgs, TResponse> = IsArgsOptional<TArgs> extends true ?
     (args: TArgs): void;
     (args: TArgs, sideEffects: SideEffects<TArgs, TResponse>): void;
 };
+/**
+ * Promise-returning call function returned by {@link useCallTool}. Rejects
+ * if the tool errors; use `try/catch` for error handling.
+ */
 export type CallToolAsyncFn<TArgs, TResponse> = IsArgsOptional<TArgs> extends true ? {
     (): Promise<TResponse>;
     (args: TArgs): Promise<TResponse>;
 } : (args: TArgs) => Promise<TResponse>;
 type ToolResponseSignature = Pick<CallToolResponse, "structuredContent" | "meta">;
+/**
+ * Call a server tool from a view and track its execution state.
+ *
+ * Returns the current {@link CallToolState} plus two callers: `callTool`
+ * (fire-and-forget, with optional {@link SideEffects}) and `callToolAsync`
+ * (promise-returning). If the same instance is invoked again while a call is
+ * in flight, the older response is dropped from the rendered state (but any
+ * `onSuccess` / `onError` / `onSettled` callbacks attached to it still fire).
+ *
+ * Pair with {@link useToolInfo} to read the result of the tool invocation
+ * that produced the current view. For end-to-end type safety across tool
+ * inputs and outputs, prefer the typed helpers produced by {@link generateHelpers}
+ * over calling this hook directly.
+ *
+ * @typeParam ToolArgs - Shape of the tool's input args (`null` for no-arg tools).
+ * @typeParam ToolResponse - Shape of the tool's `structuredContent` / `meta`.
+ *
+ * @example
+ * ```tsx
+ * const { callTool, isPending, data } = useCallTool<{ query: string }>("search");
+ *
+ * <button onClick={() => callTool({ query: "skybridge" }, {
+ *   onSuccess: (res) => console.log(res.structuredContent),
+ * })} />
+ * ```
+ *
+ * @see https://docs.skybridge.tech/api-reference/use-call-tool
+ */
 export declare const useCallTool: <ToolArgs extends CallToolArgs = null, ToolResponse extends Partial<ToolResponseSignature> = Record<string, never>>(name: string) => {
     callTool: CallToolFn<ToolArgs, CallToolResponse & ToolResponse>;
     callToolAsync: CallToolAsyncFn<ToolArgs, CallToolResponse & ToolResponse>;