skybridge 0.0.0-dev.fc2b7e8 → 0.0.0-dev.fc2b815

package/dist/{src/web → web}/data-llm.js

@@ -1,6 +1,12 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import { createContext, useContext, useEffect, useId, } from "react";
-export const WIDGET_CONTEXT_KEY = "__widget_context";
+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) {
     nodes.set(node.id, node);
@@ -12,12 +18,36 @@ function removeNode(id) {
 }
 function onChange() {
     const description = getLLMDescriptionString();
-    window.openai.setWidgetState({
-        ...window.openai.widgetState,
-        [WIDGET_CONTEXT_KEY]: description,
-    });
+    const adaptor = getAdaptor();
+    adaptor.setViewState((prevState) => ({
+        ...prevState,
+        [VIEW_CONTEXT_KEY]: description,
+    }));
 }
 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();
@@ -42,8 +72,9 @@ function getLLMDescriptionString() {
     const byParent = new Map();
     for (const node of Array.from(nodes.values())) {
         const key = node.parentId ?? null;
-        if (!byParent.has(key))
+        if (!byParent.has(key)) {
             byParent.set(key, []);
+        }
         byParent.get(key)?.push(node);
     }
     for (const list of byParent.values()) {
@@ -52,8 +83,9 @@ function getLLMDescriptionString() {
     const lines = [];
     function traverseTree(parentId, depth) {
         const children = byParent.get(parentId);
-        if (!children)
+        if (!children) {
             return;
+        }
         for (const child of children) {
             if (child.content?.trim()) {
                 const indent = "  ".repeat(depth);

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

@@ -0,0 +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\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/data-llm.test.js

@@ -0,0 +1,142 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { cleanup, render } from "@testing-library/react";
+import { afterEach, beforeEach, describe, expect, it, vi, } from "vitest";
+import { McpAppAdaptor, McpAppBridge } from "./bridges/mcp-app/index.js";
+import { DataLLM } from "./data-llm.js";
+import { getMcpAppHostPostMessageMock, MockResizeObserver, } from "./hooks/test/utils.js";
+describe("DataLLM", () => {
+    afterEach(() => {
+        // Clean up React components BEFORE unstubbing globals
+        cleanup();
+        vi.unstubAllGlobals();
+        vi.resetAllMocks();
+    });
+    describe("apps-sdk mode", () => {
+        let OpenaiMock;
+        beforeEach(() => {
+            OpenaiMock = {
+                widgetState: { modelContent: {} },
+                setWidgetState: vi.fn(),
+            };
+            // Use Object.defineProperty to ensure it persists
+            Object.defineProperty(globalThis, "openai", {
+                value: OpenaiMock,
+                writable: true,
+                configurable: true,
+            });
+            // Also set on window for browser-like environment
+            if (typeof window !== "undefined") {
+                Object.defineProperty(window, "openai", {
+                    value: OpenaiMock,
+                    writable: true,
+                    configurable: true,
+                });
+            }
+            vi.stubGlobal("openai", OpenaiMock);
+            vi.stubGlobal("skybridge", { hostType: "apps-sdk" });
+        });
+        afterEach(() => {
+            // Keep the mock available for React cleanup, but reset it
+            if (typeof window !== "undefined" && window.openai) {
+                window.openai.setWidgetState = vi.fn();
+                window.openai.widgetState = { modelContent: {}, privateContent: {} };
+            }
+        });
+        it("should register a node with content and call setViewState", () => {
+            render(_jsx(DataLLM, { content: "Test content", children: _jsx("div", { children: "Child" }) }));
+            expect(OpenaiMock.setWidgetState).toHaveBeenCalled();
+            const callArgs = OpenaiMock.setWidgetState.mock.calls[0]?.[0]?.modelContent;
+            expect(callArgs).toHaveProperty("__view_context");
+            expect(callArgs?.__view_context).toContain("- Test content");
+        });
+        it("should preserve existing viewState when updating context", () => {
+            OpenaiMock.widgetState = {
+                modelContent: { existingKey: "existingValue" },
+            };
+            render(_jsx(DataLLM, { content: "Test content", children: _jsx("div", { children: "Child" }) }));
+            const callArgs = OpenaiMock.setWidgetState.mock.calls[0]?.[0]?.modelContent;
+            expect(callArgs).toHaveProperty("existingKey", "existingValue");
+            expect(callArgs).toHaveProperty("__view_context");
+        });
+        it("should handle deeply nested DataLLM components", () => {
+            render(_jsxs(DataLLM, { content: "Level 1", children: [_jsx(DataLLM, { content: "Level 2A" }), _jsx(DataLLM, { content: "Level 2B", children: _jsx(DataLLM, { content: "Level 3", children: _jsx("div", { children: "Content" }) }) })] }));
+            const callArgs = OpenaiMock.setWidgetState.mock.calls[OpenaiMock.setWidgetState.mock.calls.length - 1]?.[0]?.modelContent;
+            const context = callArgs?.__view_context;
+            expect(context).toContain("- Level 1");
+            expect(context).toContain("  - Level 2A");
+            expect(context).toContain("  - Level 2B");
+            expect(context).toContain("    - Level 3");
+        });
+        it("should update context when content changes", () => {
+            const { rerender } = render(_jsx(DataLLM, { content: "Initial content", children: _jsx("div", { children: "Child" }) }));
+            const initialCalls = OpenaiMock.setWidgetState.mock.calls.length;
+            rerender(_jsx(DataLLM, { content: "Updated content", children: _jsx("div", { children: "Child" }) }));
+            expect(OpenaiMock.setWidgetState.mock.calls.length).toBeGreaterThan(initialCalls);
+            const lastCallArgs = OpenaiMock.setWidgetState.mock.calls[OpenaiMock.setWidgetState.mock.calls.length - 1]?.[0]?.modelContent;
+            expect(lastCallArgs?.__view_context).toContain("- Updated content");
+        });
+        it("should remove node and update context when component unmounts", () => {
+            const { unmount } = render(_jsx(DataLLM, { content: "Content to remove", children: _jsx("div", { children: "Child" }) }));
+            const callsBeforeUnmount = OpenaiMock.setWidgetState.mock.calls.length;
+            unmount();
+            expect(OpenaiMock.setWidgetState.mock.calls.length).toBeGreaterThan(callsBeforeUnmount);
+            const lastCallArgs = OpenaiMock.setWidgetState.mock.calls[OpenaiMock.setWidgetState.mock.calls.length - 1]?.[0]?.modelContent;
+            expect(lastCallArgs?.__view_context).not.toContain("Content to remove");
+        });
+    });
+    describe("mcp-app mode", () => {
+        let postMessageMock;
+        beforeEach(() => {
+            vi.stubGlobal("skybridge", { hostType: "mcp-app" });
+            vi.stubGlobal("ResizeObserver", MockResizeObserver);
+            postMessageMock = getMcpAppHostPostMessageMock();
+            vi.stubGlobal("parent", { postMessage: postMessageMock });
+        });
+        afterEach(() => {
+            cleanup();
+            McpAppBridge.resetInstance();
+            McpAppAdaptor.resetInstance();
+        });
+        it("should register a node and update view state via adaptor", async () => {
+            const adaptor = McpAppAdaptor.getInstance();
+            render(_jsx(DataLLM, { content: "Test content", children: _jsx("div", { children: "Child" }) }));
+            await vi.waitFor(() => {
+                const viewState = adaptor
+                    .getHostContextStore("viewState")
+                    .getSnapshot();
+                expect(viewState?.__view_context).toContain("- Test content");
+            });
+        });
+        it("should preserve existing view state when updating context", async () => {
+            const adaptor = McpAppAdaptor.getInstance();
+            await adaptor.setViewState({ existingKey: "existingValue" });
+            render(_jsx(DataLLM, { content: "Test content", children: _jsx("div", { children: "Child" }) }));
+            await vi.waitFor(() => {
+                const viewState = adaptor
+                    .getHostContextStore("viewState")
+                    .getSnapshot();
+                expect(viewState?.existingKey).toBe("existingValue");
+                expect(viewState?.__view_context).toContain("- Test content");
+            });
+        });
+        it("should handle multiple DataLLM components sharing state through adaptor", async () => {
+            const adaptor = McpAppAdaptor.getInstance();
+            render(_jsxs(_Fragment, { children: [_jsx(DataLLM, { content: "First component", children: _jsx("div", { children: "First" }) }), _jsx(DataLLM, { content: "Second component", children: _jsx("div", { children: "Second" }) })] }));
+            await vi.waitFor(() => {
+                const viewState = adaptor
+                    .getHostContextStore("viewState")
+                    .getSnapshot();
+                const context = viewState?.__view_context;
+                expect(context).toContain("- First component");
+                expect(context).toContain("- Second component");
+            });
+        });
+        it("should call ui/update-model-context when view state changes", async () => {
+            render(_jsx(DataLLM, { content: "Test content", children: _jsx("div", { children: "Child" }) }));
+            await vi.waitFor(() => {
+                expect(postMessageMock).toHaveBeenCalledWith(expect.objectContaining({ method: "ui/update-model-context" }), "*");
+            });
+        });
+    });
+});
+//# sourceMappingURL=data-llm.test.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"data-llm.test.js","sourceRoot":"","sources":["../../src/web/data-llm.test.tsx"],"names":[],"mappings":"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","sourcesContent":["import { cleanup, render } from \"@testing-library/react\";\nimport {\n  afterEach,\n  beforeEach,\n  describe,\n  expect,\n  it,\n  type Mock,\n  vi,\n} from \"vitest\";\nimport { McpAppAdaptor, McpAppBridge } from \"./bridges/mcp-app/index.js\";\nimport { DataLLM } from \"./data-llm.js\";\nimport {\n  getMcpAppHostPostMessageMock,\n  MockResizeObserver,\n} from \"./hooks/test/utils.js\";\n\ndescribe(\"DataLLM\", () => {\n  afterEach(() => {\n    // Clean up React components BEFORE unstubbing globals\n    cleanup();\n    vi.unstubAllGlobals();\n    vi.resetAllMocks();\n  });\n\n  describe(\"apps-sdk mode\", () => {\n    let OpenaiMock: { widgetState: unknown; setWidgetState: Mock };\n\n    beforeEach(() => {\n      OpenaiMock = {\n        widgetState: { modelContent: {} },\n        setWidgetState: vi.fn(),\n      };\n      // Use Object.defineProperty to ensure it persists\n      Object.defineProperty(globalThis, \"openai\", {\n        value: OpenaiMock,\n        writable: true,\n        configurable: true,\n      });\n      // Also set on window for browser-like environment\n      if (typeof window !== \"undefined\") {\n        Object.defineProperty(window, \"openai\", {\n          value: OpenaiMock,\n          writable: true,\n          configurable: true,\n        });\n      }\n      vi.stubGlobal(\"openai\", OpenaiMock);\n      vi.stubGlobal(\"skybridge\", { hostType: \"apps-sdk\" });\n    });\n\n    afterEach(() => {\n      // Keep the mock available for React cleanup, but reset it\n      if (typeof window !== \"undefined\" && window.openai) {\n        window.openai.setWidgetState = vi.fn();\n        window.openai.widgetState = { modelContent: {}, privateContent: {} };\n      }\n    });\n\n    it(\"should register a node with content and call setViewState\", () => {\n      render(\n        <DataLLM content=\"Test content\">\n          <div>Child</div>\n        </DataLLM>,\n      );\n\n      expect(OpenaiMock.setWidgetState).toHaveBeenCalled();\n      const callArgs =\n        OpenaiMock.setWidgetState.mock.calls[0]?.[0]?.modelContent;\n      expect(callArgs).toHaveProperty(\"__view_context\");\n      expect(callArgs?.__view_context).toContain(\"- Test content\");\n    });\n    it(\"should preserve existing viewState when updating context\", () => {\n      OpenaiMock.widgetState = {\n        modelContent: { existingKey: \"existingValue\" },\n      };\n\n      render(\n        <DataLLM content=\"Test content\">\n          <div>Child</div>\n        </DataLLM>,\n      );\n\n      const callArgs =\n        OpenaiMock.setWidgetState.mock.calls[0]?.[0]?.modelContent;\n      expect(callArgs).toHaveProperty(\"existingKey\", \"existingValue\");\n      expect(callArgs).toHaveProperty(\"__view_context\");\n    });\n\n    it(\"should handle deeply nested DataLLM components\", () => {\n      render(\n        <DataLLM content=\"Level 1\">\n          <DataLLM content=\"Level 2A\" />\n          <DataLLM content=\"Level 2B\">\n            <DataLLM content=\"Level 3\">\n              <div>Content</div>\n            </DataLLM>\n          </DataLLM>\n        </DataLLM>,\n      );\n\n      const callArgs =\n        OpenaiMock.setWidgetState.mock.calls[\n          OpenaiMock.setWidgetState.mock.calls.length - 1\n        ]?.[0]?.modelContent;\n      const context = callArgs?.__view_context as string;\n      expect(context).toContain(\"- Level 1\");\n      expect(context).toContain(\"  - Level 2A\");\n      expect(context).toContain(\"  - Level 2B\");\n      expect(context).toContain(\"    - Level 3\");\n    });\n\n    it(\"should update context when content changes\", () => {\n      const { rerender } = render(\n        <DataLLM content=\"Initial content\">\n          <div>Child</div>\n        </DataLLM>,\n      );\n\n      const initialCalls = OpenaiMock.setWidgetState.mock.calls.length;\n\n      rerender(\n        <DataLLM content=\"Updated content\">\n          <div>Child</div>\n        </DataLLM>,\n      );\n\n      expect(OpenaiMock.setWidgetState.mock.calls.length).toBeGreaterThan(\n        initialCalls,\n      );\n      const lastCallArgs =\n        OpenaiMock.setWidgetState.mock.calls[\n          OpenaiMock.setWidgetState.mock.calls.length - 1\n        ]?.[0]?.modelContent;\n      expect(lastCallArgs?.__view_context).toContain(\"- Updated content\");\n    });\n\n    it(\"should remove node and update context when component unmounts\", () => {\n      const { unmount } = render(\n        <DataLLM content=\"Content to remove\">\n          <div>Child</div>\n        </DataLLM>,\n      );\n\n      const callsBeforeUnmount = OpenaiMock.setWidgetState.mock.calls.length;\n\n      unmount();\n\n      expect(OpenaiMock.setWidgetState.mock.calls.length).toBeGreaterThan(\n        callsBeforeUnmount,\n      );\n      const lastCallArgs =\n        OpenaiMock.setWidgetState.mock.calls[\n          OpenaiMock.setWidgetState.mock.calls.length - 1\n        ]?.[0]?.modelContent;\n      expect(lastCallArgs?.__view_context).not.toContain(\"Content to remove\");\n    });\n  });\n\n  describe(\"mcp-app mode\", () => {\n    let postMessageMock: ReturnType<typeof getMcpAppHostPostMessageMock>;\n\n    beforeEach(() => {\n      vi.stubGlobal(\"skybridge\", { hostType: \"mcp-app\" });\n      vi.stubGlobal(\"ResizeObserver\", MockResizeObserver);\n      postMessageMock = getMcpAppHostPostMessageMock();\n      vi.stubGlobal(\"parent\", { postMessage: postMessageMock });\n    });\n\n    afterEach(() => {\n      cleanup();\n      McpAppBridge.resetInstance();\n      McpAppAdaptor.resetInstance();\n    });\n\n    it(\"should register a node and update view state via adaptor\", async () => {\n      const adaptor = McpAppAdaptor.getInstance();\n\n      render(\n        <DataLLM content=\"Test content\">\n          <div>Child</div>\n        </DataLLM>,\n      );\n\n      await vi.waitFor(() => {\n        const viewState = adaptor\n          .getHostContextStore(\"viewState\")\n          .getSnapshot();\n        expect(viewState?.__view_context).toContain(\"- Test content\");\n      });\n    });\n\n    it(\"should preserve existing view state when updating context\", async () => {\n      const adaptor = McpAppAdaptor.getInstance();\n      await adaptor.setViewState({ existingKey: \"existingValue\" });\n\n      render(\n        <DataLLM content=\"Test content\">\n          <div>Child</div>\n        </DataLLM>,\n      );\n\n      await vi.waitFor(() => {\n        const viewState = adaptor\n          .getHostContextStore(\"viewState\")\n          .getSnapshot();\n        expect(viewState?.existingKey).toBe(\"existingValue\");\n        expect(viewState?.__view_context).toContain(\"- Test content\");\n      });\n    });\n\n    it(\"should handle multiple DataLLM components sharing state through adaptor\", async () => {\n      const adaptor = McpAppAdaptor.getInstance();\n\n      render(\n        <>\n          <DataLLM content=\"First component\">\n            <div>First</div>\n          </DataLLM>\n          <DataLLM content=\"Second component\">\n            <div>Second</div>\n          </DataLLM>\n        </>,\n      );\n\n      await vi.waitFor(() => {\n        const viewState = adaptor\n          .getHostContextStore(\"viewState\")\n          .getSnapshot();\n        const context = viewState?.__view_context as string;\n        expect(context).toContain(\"- First component\");\n        expect(context).toContain(\"- Second component\");\n      });\n    });\n\n    it(\"should call ui/update-model-context when view state changes\", async () => {\n      render(\n        <DataLLM content=\"Test content\">\n          <div>Child</div>\n        </DataLLM>,\n      );\n\n      await vi.waitFor(() => {\n        expect(postMessageMock).toHaveBeenCalledWith(\n          expect.objectContaining({ method: \"ui/update-model-context\" }),\n          \"*\",\n        );\n      });\n    });\n  });\n});\n"]}

package/dist/{src/web → web}/generate-helpers.d.ts

@@ -1,7 +1,8 @@
 import type { InferTools, ToolInput, ToolOutput, ToolResponseMetadata } from "../server/index.js";
+import type { CallToolResponse } from "./bridges/types.js";
 import { type CallToolAsyncFn, type CallToolFn, type CallToolState } from "./hooks/use-call-tool.js";
 import { type ToolState } from "./hooks/use-tool-info.js";
-import type { CallToolResponse, Objectify, Prettify } from "./types.js";
+import type { Objectify, Prettify } from "./types.js";
 type TypedCallToolResponse<TOutput> = CallToolResponse & {
     structuredContent: TOutput;
 };
@@ -14,7 +15,7 @@ type TypedToolInfoReturn<TInput, TOutput, TResponseMetadata> = ToolState<Objecti
  * Creates typed versions of skybridge hooks with full type inference
  * for tool names, inputs, and outputs.
  *
- * This is the recommended way to use skybridge hooks in your widgets.
+ * This is the recommended way to use skybridge hooks in your views.
  * Set this up once in a dedicated file and export the typed hooks for use across your app.
  *
  * @typeParam ServerType - The type of your McpServer instance (use `typeof server`).
@@ -23,11 +24,13 @@ type TypedToolInfoReturn<TInput, TOutput, TResponseMetadata> = ToolState<Objecti
  *
  * @example
  * ```typescript
- * // server/src/index.ts
+ * // src/server.ts
  * const server = new McpServer({ name: "my-app", version: "1.0" }, {})
- *   .widget("search-voyage", {}, {
+ *   .registerTool({
+ *     name: "search-trip",
  *     inputSchema: { destination: z.string() },
  *     outputSchema: { results: z.array(z.string()) },
+ *     view: { component: "search-trip", description: "Search trips" },
  *   }, async ({ destination }) => {
  *     return { content: [{ type: "text", text: `Found trips to ${destination}` }] };
  *   });
@@ -37,8 +40,8 @@ type TypedToolInfoReturn<TInput, TOutput, TResponseMetadata> = ToolState<Objecti
  *
  * @example
  * ```typescript
- * // web/src/skybridge.ts (one-time setup)
- * import type { AppType } from "../server";
+ * // src/helpers.ts (one-time setup)
+ * import type { AppType } from "./server";
  * import { generateHelpers } from "skybridge/web";
  *
  * export const { useCallTool, useToolInfo } = generateHelpers<AppType>();
@@ -46,33 +49,35 @@ type TypedToolInfoReturn<TInput, TOutput, TResponseMetadata> = ToolState<Objecti
  *
  * @example
  * ```typescript
- * // web/src/widgets/search.tsx (usage)
- * import { useCallTool, useToolInfo } from "../skybridge";
+ * // src/views/search.tsx (usage)
+ * import { useCallTool, useToolInfo } from "../helpers";
  *
- * export function SearchWidget() {
- *   const { callTool, data } = useCallTool("search-voyage");
+ * export function SearchView() {
+ *   const { callTool, data } = useCallTool("search-trip");
  *   //                                      ^ autocomplete for tool names
  *   callTool({ destination: "Spain" });
  *   //         ^ autocomplete for input fields
  *
- *   const toolInfo = useToolInfo<"search-voyage">();
- *   //                              ^ autocomplete for widget names
- *   // toolInfo.input is typed based on widget input schema
- *   // toolInfo.output.structuredContent is typed based on widget output schema
+ *   const toolInfo = useToolInfo<"search-trip">();
+ *   //                              ^ autocomplete for view names
+ *   // toolInfo.input is typed based on view input schema
+ *   // 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>(): {
     /**
      * Typed version of `useCallTool` that provides autocomplete for tool names
      * and type inference for inputs and outputs.
      *
-     * @param name - The name of the widget to call. Autocompletes based on your server's widget registry.
+     * @param name - The name of the tool to call. Autocompletes based on your server's tool registry.
      * @returns A hook with typed `callTool` function and `data` property.
      *
      * @example
      * ```typescript
-     * const { callTool, data, isPending } = useCallTool("search-voyage");
+     * const { callTool, data, isPending } = useCallTool("search-trip");
      * // TypeScript knows callTool expects { destination: string }
      * callTool({ destination: "Spain" });
      *
@@ -84,15 +89,15 @@ export declare function generateHelpers<ServerType = never>(): {
      */
     useCallTool: <ToolName extends keyof InferTools<ServerType> & string>(name: ToolName) => TypedCallToolReturn<ToolInput<ServerType, ToolName>, ToolOutput<ServerType, ToolName>>;
     /**
-     * Typed version of `useToolInfo` that provides autocomplete for widget names
+     * Typed version of `useToolInfo` that provides autocomplete for tool names
      * and type inference for inputs, outputs, and responseMetadata.
      *
-     * @typeParam K - The name of the widget. Autocompletes based on your server's widget registry.
+     * @typeParam K - The name of the tool. Autocompletes based on your server's tool registry.
      * @returns A discriminated union with `status: "pending" | "success"` that narrows correctly.
      *
      * @example
      * ```typescript
-     * const toolInfo = useToolInfo<"search-voyage">();
+     * const toolInfo = useToolInfo<"search-trip">();
      * // toolInfo.input is typed as { destination: string; ... }
      * // toolInfo.output is typed as { results: Array<...>; ... }
      * // toolInfo.responseMetadata is typed based on _meta in callback return

package/dist/{src/web → web}/generate-helpers.js

@@ -4,7 +4,7 @@ import { useToolInfo } from "./hooks/use-tool-info.js";
  * Creates typed versions of skybridge hooks with full type inference
  * for tool names, inputs, and outputs.
  *
- * This is the recommended way to use skybridge hooks in your widgets.
+ * This is the recommended way to use skybridge hooks in your views.
  * Set this up once in a dedicated file and export the typed hooks for use across your app.
  *
  * @typeParam ServerType - The type of your McpServer instance (use `typeof server`).
@@ -13,11 +13,13 @@ import { useToolInfo } from "./hooks/use-tool-info.js";
  *
  * @example
  * ```typescript
- * // server/src/index.ts
+ * // src/server.ts
  * const server = new McpServer({ name: "my-app", version: "1.0" }, {})
- *   .widget("search-voyage", {}, {
+ *   .registerTool({
+ *     name: "search-trip",
  *     inputSchema: { destination: z.string() },
  *     outputSchema: { results: z.array(z.string()) },
+ *     view: { component: "search-trip", description: "Search trips" },
  *   }, async ({ destination }) => {
  *     return { content: [{ type: "text", text: `Found trips to ${destination}` }] };
  *   });
@@ -27,8 +29,8 @@ import { useToolInfo } from "./hooks/use-tool-info.js";
  *
  * @example
  * ```typescript
- * // web/src/skybridge.ts (one-time setup)
- * import type { AppType } from "../server";
+ * // src/helpers.ts (one-time setup)
+ * import type { AppType } from "./server";
  * import { generateHelpers } from "skybridge/web";
  *
  * export const { useCallTool, useToolInfo } = generateHelpers<AppType>();
@@ -36,21 +38,23 @@ import { useToolInfo } from "./hooks/use-tool-info.js";
  *
  * @example
  * ```typescript
- * // web/src/widgets/search.tsx (usage)
- * import { useCallTool, useToolInfo } from "../skybridge";
+ * // src/views/search.tsx (usage)
+ * import { useCallTool, useToolInfo } from "../helpers";
  *
- * export function SearchWidget() {
- *   const { callTool, data } = useCallTool("search-voyage");
+ * export function SearchView() {
+ *   const { callTool, data } = useCallTool("search-trip");
  *   //                                      ^ autocomplete for tool names
  *   callTool({ destination: "Spain" });
  *   //         ^ autocomplete for input fields
  *
- *   const toolInfo = useToolInfo<"search-voyage">();
- *   //                              ^ autocomplete for widget names
- *   // toolInfo.input is typed based on widget input schema
- *   // toolInfo.output.structuredContent is typed based on widget output schema
+ *   const toolInfo = useToolInfo<"search-trip">();
+ *   //                              ^ autocomplete for view names
+ *   // toolInfo.input is typed based on view input schema
+ *   // toolInfo.output.structuredContent is typed based on view output schema
  * }
  * ```
+ *
+ * @see https://docs.skybridge.tech/api-reference/generate-helpers
  */
 export function generateHelpers() {
     return {
@@ -58,12 +62,12 @@ export function generateHelpers() {
          * Typed version of `useCallTool` that provides autocomplete for tool names
          * and type inference for inputs and outputs.
          *
-         * @param name - The name of the widget to call. Autocompletes based on your server's widget registry.
+         * @param name - The name of the tool to call. Autocompletes based on your server's tool registry.
          * @returns A hook with typed `callTool` function and `data` property.
          *
          * @example
          * ```typescript
-         * const { callTool, data, isPending } = useCallTool("search-voyage");
+         * const { callTool, data, isPending } = useCallTool("search-trip");
          * // TypeScript knows callTool expects { destination: string }
          * callTool({ destination: "Spain" });
          *
@@ -77,15 +81,15 @@ export function generateHelpers() {
             return useCallTool(name);
         },
         /**
-         * Typed version of `useToolInfo` that provides autocomplete for widget names
+         * Typed version of `useToolInfo` that provides autocomplete for tool names
          * and type inference for inputs, outputs, and responseMetadata.
          *
-         * @typeParam K - The name of the widget. Autocompletes based on your server's widget registry.
+         * @typeParam K - The name of the tool. Autocompletes based on your server's tool registry.
          * @returns A discriminated union with `status: "pending" | "success"` that narrows correctly.
          *
          * @example
          * ```typescript
-         * const toolInfo = useToolInfo<"search-voyage">();
+         * const toolInfo = useToolInfo<"search-trip">();
          * // toolInfo.input is typed as { destination: string; ... }
          * // toolInfo.output is typed as { results: Array<...>; ... }
          * // toolInfo.responseMetadata is typed based on _meta in callback return

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

@@ -0,0 +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;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;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"]}