@tambo-ai/react 0.65.2 → 0.66.0

package/README.md

@@ -1,7 +1,7 @@
 <div align="center">
   <h1>@tambo-ai/react</h1>
-  <h3>The core React SDK for generative UI</h3>
-  <p>Register your components once. The AI decides which to render and what props to pass based on user conversations.</p>
+  <h3>Generative UI for React</h3>
+  <p>Build apps that adapt to your users.</p>
 </div>
 
 <p align="center">
@@ -18,31 +18,26 @@
 
 ---
 
-## Overview
+## What is Tambo?
 
-The `@tambo-ai/react` package provides React hooks and providers for building generative UI applications. The AI dynamically decides which components to render and what props to pass based on natural language conversations.
+Tambo is a generative UI SDK for React. Register your components, and the AI decides which ones to render based on natural language conversations.
 
-**MCP-native** from the ground up — integrates the Model Context Protocol (MCP) for seamless integrations with databases, APIs, files, and external systems.
+## Why We Built This
 
-## Why Use This SDK?
+Most software is built around a one-size-fits-all mental model that doesn't fit every user.
 
-You don't want to write 200 lines of boilerplate to show a chart.
+**Users shouldn't have to learn your app.** Generative UI shows the right components based on what someone is trying to do. First-time users and power users see different things.
 
-Tambo handles:
+**Users shouldn't have to click through your workflows.** "Show me sales from last quarter grouped by region" should just work. The AI translates what users want into the right interface.
 
-- ✅ AI orchestration (which component to render)
-- ✅ Streaming (progressive prop updates)
-- ✅ State management (persistence across conversation)
-- ✅ Error handling (retries, fallbacks)
-- ✅ Tool coordination (MCP servers, local functions)
-
-You write:
-
-- Your existing React components
-- Zod schemas for props
-- React hooks for advanced AI features
-
-That's the entire API.
+```tsx
+const components: TamboComponent[] = [{
+  name: "Graph",
+  description: "Displays data as charts",
+  component: Graph,
+  propsSchema: z.object({ data: z.array(...), type: z.enum(["line", "bar", "pie"]) })
+}];
+```
 
 ## Key Benefits
 
@@ -84,7 +79,7 @@ import {
   useTamboThread,
   useTamboThreadInput,
 } from "@tambo-ai/react";
-import { z } from "zod";
+import { z } from "zod/v4";
 
 // 1. Register your components
 const components = [
@@ -200,7 +195,7 @@ Wrap your app with `TamboProvider` to enable AI capabilities:
 
 ### Generative Components
 
-AI renders these once in response to user messages. Best for charts, data visualizations, and summary cards.
+**Generative components** render once in response to a message. Charts, summaries, data visualizations.
 
 ```tsx
 const components: TamboComponent[] = [
@@ -220,7 +215,7 @@ const components: TamboComponent[] = [
 
 ### Interactable Components
 
-Components that persist on the page and update by ID across conversations. Perfect for shopping carts, spreadsheets, task boards, or dashboards.
+**Interactable components** persist and update as users refine requests. Shopping carts, spreadsheets, task boards.
 
 ```tsx
 import { withInteractable } from "@tambo-ai/react";
@@ -243,7 +238,7 @@ const InteractableNote = withInteractable(Note, {
 
 ### MCP Integration
 
-Connect to external systems using the Model Context Protocol:
+Connect to Linear, Slack, databases, or your own MCP servers. Tambo supports the full MCP protocol: tools, prompts, elicitations, and sampling.
 
 ```tsx
 import { TamboMcpProvider, MCPTransport } from "@tambo-ai/react/mcp";
@@ -263,34 +258,41 @@ const mcpServers = [
 </TamboProvider>;
 ```
 
-Supports full MCP protocol: tools, prompts, elicitations, and sampling. Client-side or server-side execution.
-
 [→ Learn more about MCP](https://docs.tambo.co/concepts/model-context-protocol)
 
+> **Dependency note**
+>
+> The `@tambo-ai/react/mcp` subpath declares `@modelcontextprotocol/sdk`, `zod`, and `zod-to-json-schema` as optional peer dependencies. If you import this MCP entrypoint in your app, make sure these packages are installed with compatible versions:
+>
+> ```bash
+> npm install @modelcontextprotocol/sdk@^1.24.0 zod@^4.0.0 zod-to-json-schema@^3.25.0
+> ```
+>
+> `zod` can also be `^3.25` if you prefer Zod 3; both `^3.25` and `^4.0` satisfy the SDK's `zod/v3` subpath constraints.
+
 ### Local Tools
 
-Write JavaScript functions that execute in your React app:
+Sometimes you need functions that run in the browser. DOM manipulation, authenticated fetches, accessing React state. Define them as tools and the AI can call them.
 
 ```tsx
-import { type TamboTool } from "@tambo-ai/react";
+import { z } from "zod/v4";
+import { defineTool } from "@tambo-ai/react";
 
-const tools: TamboTool[] = [
-  {
+const tools = [
+  defineTool({
     name: "getWeather",
     description: "Fetches weather data for a location",
-    tool: async (location: string) =>
+    tool: async ({ location }) =>
       fetch(`/api/weather?q=${location}`).then((r) => r.json()),
-    toolSchema: z
-      .function()
-      .args(z.string())
-      .returns(
-        z.object({
-          temperature: z.number(),
-          condition: z.string(),
-          location: z.string(),
-        }),
-      ),
-  },
+    inputSchema: z.object({
+      location: z.string(),
+    }),
+    outputSchema: z.object({
+      temperature: z.number(),
+      condition: z.string(),
+      location: z.string(),
+    }),
+  }),
 ];
 
 <TamboProvider tools={tools} components={components}>
@@ -298,9 +300,7 @@ const tools: TamboTool[] = [
 </TamboProvider>;
 ```
 
-**When to use:** DOM interactions, wrapping authenticated fetch requests, or accessing React state. Runs entirely in the browser.
-
-[→ Learn more about tools](https://docs.tambo.co/concepts/tools)
+[→ Learn more about tools](https://docs.tambo.co/concepts/tools/adding-tools)
 
 #### Advanced: Transforming Tool Responses
 
@@ -315,10 +315,10 @@ const tools: TamboTool[] = [
       const data = await fetchImageData(imageId);
       return { url: data.imageUrl, description: data.description };
     },
-    toolSchema: z
-      .function()
-      .args(z.string())
-      .returns(z.object({ url: z.string(), description: z.string() })),
+    toolSchema: z.function({
+      input: z.string(),
+      output: z.object({ url: z.string(), description: z.string() }),
+    }),
     transformToContent: (result) => [
       { type: "text", text: result.description },
       { type: "image_url", image_url: { url: result.url } },
@@ -329,6 +329,107 @@ const tools: TamboTool[] = [
 
 The MCP integration automatically uses `transformToContent` to pass through rich content.
 
+### Local Resources
+
+Resources provide context to the AI by making content accessible without requiring a full MCP server. You can register static resources, dynamic resource functions, or both.
+
+#### Static Resources
+
+Register individual resources directly in your provider:
+
+```tsx
+import { type ListResourceItem } from "@tambo-ai/react";
+
+const resources: ListResourceItem[] = [
+  {
+    uri: "file:///config/app-settings.json",
+    name: "App Settings",
+    description: "Current application configuration",
+    mimeType: "application/json",
+  },
+  {
+    uri: "file:///docs/user-guide.md",
+    name: "User Guide",
+    description: "Getting started documentation",
+    mimeType: "text/markdown",
+  },
+];
+
+<TamboProvider resources={resources}>
+  <App />
+</TamboProvider>;
+```
+
+#### Dynamic Resources
+
+For resources that need to be fetched or computed at runtime, provide `listResources` and `getResource` functions:
+
+```tsx
+import { type ResourceSource, type ReadResourceResult } from "@tambo-ai/react";
+
+const listResources = async (search?: string) => {
+  const allDocs = await fetchUserDocuments();
+  return allDocs
+    .filter((doc) => !search || doc.name.includes(search))
+    .map((doc) => ({
+      uri: `file:///docs/${doc.id}`,
+      name: doc.name,
+      description: doc.summary,
+      mimeType: "text/markdown",
+    }));
+};
+
+const getResource = async (uri: string): Promise<ReadResourceResult> => {
+  const docId = uri.split("/").pop();
+  const content = await fetchDocumentContent(docId);
+  return {
+    contents: [
+      {
+        uri,
+        mimeType: "text/markdown",
+        text: content,
+      },
+    ],
+  };
+};
+
+<TamboProvider listResources={listResources} getResource={getResource}>
+  <App />
+</TamboProvider>;
+```
+
+**Important:** Both `listResources` and `getResource` must be provided together - you cannot provide one without the other.
+
+#### Programmatic Registration
+
+You can also register resources programmatically:
+
+```tsx
+const { registerResource, registerResourceSource } = useTamboRegistry();
+
+// Register a single resource
+registerResource({
+  uri: "file:///runtime/state.json",
+  name: "Application State",
+  mimeType: "application/json",
+});
+
+// Register a dynamic source
+registerResourceSource({
+  listResources: async () => [...],
+  getResource: async (uri) => ({ contents: [...] }),
+});
+```
+
+#### Resource vs MCP Server
+
+- **Local resources**: Fast, simple, runs in the browser. Great for app state, config, cached data.
+- **MCP servers**: Full protocol support, server-side execution. Use for databases, APIs, external services.
+
+Local resources appear in `useTamboMcpResourceList()` alongside MCP resources, with MCP resources always prefixed by their serverKey.
+
+[→ Learn more about resources](https://docs.tambo.co/concepts/resources)
+
 ### Streaming Status
 
 Monitor streaming status for progressive loading:
@@ -354,46 +455,38 @@ function LoadingComponent({ title, data }) {
 
 [→ Learn more about streaming](https://docs.tambo.co/concepts/streaming/component-streaming-status)
 
-### Additional Context
+### Context, Auth, and Suggestions
 
-Send metadata about user state, app settings, or environment:
+**Additional context** lets you pass metadata to give the AI better responses. User state, app settings, current page. **User authentication** passes tokens from your auth provider. **Suggestions** generates prompts users can click based on what they're doing.
 
 ```tsx
-const contextHelpers = {
-  selectedItems: () => ({
-    key: "selectedItems",
-    value: `User has selected: ${selectedItems.map((i) => i.name).join(", ")}`,
-  }),
-  currentPage: () => ({
-    key: "page",
-    value: window.location.pathname,
-  }),
-};
-
-<TamboProvider contextHelpers={contextHelpers} />;
+<TamboProvider
+  userToken={userToken}
+  contextHelpers={{
+    selectedItems: () => ({
+      key: "selectedItems",
+      value: selectedItems.map((i) => i.name).join(", "),
+    }),
+    currentPage: () => ({ key: "page", value: window.location.pathname }),
+  }}
+/>
 ```
 
-[→ Learn more](https://docs.tambo.co/concepts/additional-context)
-
-### Suggestions
-
-Auto-generate contextual suggestions:
-
 ```tsx
-import { useTamboSuggestions } from "@tambo-ai/react";
+const { suggestions, accept } = useTamboSuggestions({ maxSuggestions: 3 });
 
-function SuggestionsList() {
-  const { suggestions, accept } = useTamboSuggestions({ maxSuggestions: 3 });
-
-  return suggestions.map((s) => (
-    <button key={s.id} onClick={() => accept(s)}>
-      {s.title}
-    </button>
-  ));
-}
+suggestions.map((s) => (
+  <button key={s.id} onClick={() => accept(s)}>
+    {s.title}
+  </button>
+));
 ```
 
-[→ Learn more](https://docs.tambo.co/concepts/suggestions)
+[→ Learn more](https://docs.tambo.co/concepts/additional-context) • [User authentication](https://docs.tambo.co/concepts/user-authentication) • [Suggestions](https://docs.tambo.co/concepts/suggestions)
+
+### Supported LLM Providers
+
+OpenAI, Anthropic, Google Gemini, Mistral, Groq, and any OpenAI-compatible provider. [Full list](https://docs.tambo.co/models). Missing one? [Let us know](https://github.com/tambo-ai/tambo/issues).
 
 ## When to Use This SDK
 

package/dist/context-helpers/context-helpers-provider.test.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"context-helpers-provider.test.d.ts","sourceRoot":"","sources":["../../src/context-helpers/context-helpers-provider.test.tsx"],"names":[],"mappings":"AAAA;;;;;;;;;;;;GAYG"}

package/dist/context-helpers/{__tests__/context-helpers-provider.test.js → context-helpers-provider.test.js}

@@ -18,8 +18,8 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 Object.defineProperty(exports, "__esModule", { value: true });
 const react_1 = require("@testing-library/react");
 const react_2 = __importDefault(require("react"));
-const tambo_context_helpers_provider_1 = require("../../providers/tambo-context-helpers-provider");
-const index_1 = require("../index");
+const tambo_context_helpers_provider_1 = require("../providers/tambo-context-helpers-provider");
+const index_1 = require("./index");
 /**
  * Test wrapper to provide the TamboContextHelpersProvider for hooks.
  * @param helpers - A dictionary of context helper functions.

package/dist/context-helpers/context-helpers-provider.test.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"context-helpers-provider.test.js","sourceRoot":"","sources":["../../src/context-helpers/context-helpers-provider.test.tsx"],"names":[],"mappings":"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","sourcesContent":["/**\n * Tests for the Context Helpers API.\n *\n * The new API treats a context helper as a plain function that returns a value\n * to include in context, or null/undefined to skip. The provider wraps each\n * value with its key name as { name, context } before sending with messages.\n *\n * This test suite validates that:\n *  - Helper functions can return sync/async values.\n *  - Returning null/undefined causes the helper to be skipped.\n *  - Errors in helpers are caught and skipped.\n *  - The provider aggregates helpers passed in its props and returns AdditionalContext[].\n */\n\nimport { act, renderHook } from \"@testing-library/react\";\nimport React, { PropsWithChildren } from \"react\";\nimport {\n  TamboContextHelpersProvider,\n  useTamboContextHelpers,\n} from \"../providers/tambo-context-helpers-provider\";\nimport {\n  type AdditionalContext,\n  type ContextHelperFn,\n  currentPageContextHelper,\n  currentTimeContextHelper,\n} from \"./index\";\n\n/**\n * Test wrapper to provide the TamboContextHelpersProvider for hooks.\n * @param helpers - A dictionary of context helper functions.\n * @returns A wrapper component that provides the TamboContextHelpersProvider.\n */\nfunction wrapper(helpers?: Record<string, ContextHelperFn>) {\n  // eslint-disable-next-line react/display-name\n  return ({ children }: PropsWithChildren) =>\n    React.createElement(\n      TamboContextHelpersProvider,\n      {\n        contextHelpers: helpers,\n      },\n      children,\n    );\n}\n\ndescribe(\"Context Helpers API\", () => {\n  // Ensure the global registry doesn't leak state between tests\n  beforeEach(() => {\n    jest.clearAllMocks();\n  });\n\n  test(\"returns empty array when no helpers provided\", async () => {\n    const { result } = renderHook(() => useTamboContextHelpers(), {\n      wrapper: wrapper(),\n    });\n\n    const contexts = await result.current.getAdditionalContext();\n    expect(Array.isArray(contexts)).toBe(true);\n    expect(contexts).toHaveLength(0);\n  });\n\n  test(\"collects sync and async helper results\", async () => {\n    const syncHelper: ContextHelperFn = () => ({ a: 1 });\n    const asyncHelper: ContextHelperFn = async () => ({ b: 2 });\n\n    const { result } = renderHook(() => useTamboContextHelpers(), {\n      wrapper: wrapper({\n        sync: syncHelper,\n        async: asyncHelper,\n      }),\n    });\n\n    const contexts = await result.current.getAdditionalContext();\n\n    // Validate shape and presence\n    const byName = new Map(contexts.map((c) => [c.name, c.context]));\n    expect(byName.get(\"sync\")).toEqual({ a: 1 });\n    expect(byName.get(\"async\")).toEqual({ b: 2 });\n  });\n\n  test(\"skips null and undefined results\", async () => {\n    const nullHelper: ContextHelperFn = () => null;\n    const undefinedHelper: ContextHelperFn = () => undefined;\n    const validHelper: ContextHelperFn = () => ({ ok: true });\n\n    const { result } = renderHook(() => useTamboContextHelpers(), {\n      wrapper: wrapper({\n        nullHelper,\n        undefinedHelper,\n        validHelper,\n      }),\n    });\n\n    const contexts = await result.current.getAdditionalContext();\n    const names = contexts.map((c) => c.name);\n\n    expect(names).toContain(\"validHelper\");\n    expect(names).not.toContain(\"nullHelper\");\n    expect(names).not.toContain(\"undefinedHelper\");\n  });\n\n  test(\"errors in helpers are caught and skipped\", async () => {\n    const consoleSpy = jest.spyOn(console, \"error\").mockImplementation(() => {\n      // silence expected error\n    });\n\n    const badHelper: ContextHelperFn = () => {\n      throw new Error(\"boom\");\n    };\n    const goodHelper: ContextHelperFn = () => ({ ok: 1 });\n\n    const { result } = renderHook(() => useTamboContextHelpers(), {\n      wrapper: wrapper({ badHelper, goodHelper }),\n    });\n\n    const contexts = await result.current.getAdditionalContext();\n    expect(contexts).toHaveLength(1);\n    expect(contexts[0]).toEqual<AdditionalContext>({\n      name: \"goodHelper\",\n      context: { ok: 1 },\n    });\n\n    consoleSpy.mockRestore();\n  });\n\n  test(\"dynamic add/remove helpers works\", async () => {\n    const { result } = renderHook(() => useTamboContextHelpers(), {\n      wrapper: wrapper(),\n    });\n\n    // Initially empty\n    expect(await result.current.getAdditionalContext()).toHaveLength(0);\n\n    // Add\n    act(() => {\n      result.current.addContextHelper(\"dyn\", () => ({ x: 10 }));\n    });\n\n    let contexts = await result.current.getAdditionalContext();\n    expect(contexts).toHaveLength(1);\n    expect(contexts[0]).toEqual<AdditionalContext>({\n      name: \"dyn\",\n      context: { x: 10 },\n    });\n\n    // Update\n    act(() => {\n      result.current.addContextHelper(\"dyn\", () => ({ x: 20 }));\n    });\n    contexts = await result.current.getAdditionalContext();\n    expect(contexts).toHaveLength(1);\n    expect(contexts[0]).toEqual<AdditionalContext>({\n      name: \"dyn\",\n      context: { x: 20 },\n    });\n\n    // Remove\n    act(() => {\n      result.current.removeContextHelper(\"dyn\");\n    });\n    contexts = await result.current.getAdditionalContext();\n    expect(contexts).toHaveLength(0);\n  });\n\n  test(\"prebuilt helpers can be passed directly\", async () => {\n    const { result } = renderHook(() => useTamboContextHelpers(), {\n      wrapper: wrapper({\n        userTime: currentTimeContextHelper,\n        userPage: currentPageContextHelper,\n      }),\n    });\n\n    const contexts = await result.current.getAdditionalContext();\n\n    // Should include both entries unless environment prevents userPage (SSR)\n    const names = contexts.map((c) => c.name);\n    expect(names).toContain(\"userTime\");\n    // userPage may be null on non-browser envs; allow either outcome:\n    // if present, ensure expected keys exist\n    if (names.includes(\"userPage\")) {\n      const userPage = contexts.find((c) => c.name === \"userPage\")!.context as {\n        url?: string;\n        title?: string;\n      };\n      expect(\n        typeof userPage.url === \"string\" || userPage.url === undefined,\n      ).toBe(true);\n      expect(\n        typeof userPage.title === \"string\" || userPage.title === undefined,\n      ).toBe(true);\n    }\n  });\n});\n"]}

package/dist/context-helpers/context-helpers.test.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"context-helpers.test.d.ts","sourceRoot":"","sources":["../../src/context-helpers/context-helpers.test.ts"],"names":[],"mappings":""}

package/dist/context-helpers/{__tests__/context-helpers.test.js → context-helpers.test.js}

@@ -1,6 +1,6 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-const index_1 = require("../index");
+const index_1 = require("./index");
 /**
  * Tests for prebuilt context helper functions.
  *

package/dist/context-helpers/context-helpers.test.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"context-helpers.test.js","sourceRoot":"","sources":["../../src/context-helpers/context-helpers.test.ts"],"names":[],"mappings":";;AAAA,mCAA6E;AAE7E;;;;;GAKG;AACH,QAAQ,CAAC,sCAAsC,EAAE,GAAG,EAAE;IACpD,QAAQ,CAAC,0BAA0B,EAAE,GAAG,EAAE;QACxC,EAAE,CAAC,sDAAsD,EAAE,GAAG,EAAE;YAC9D,MAAM,OAAO,GAAG,IAAA,gCAAwB,GAAE,CAAC;YAE3C,kCAAkC;YAClC,MAAM,CAAC,OAAO,CAAC,CAAC,GAAG,CAAC,QAAQ,EAAE,CAAC;YAE/B,+BAA+B;YAC/B,MAAM,CAAC,OAAO,CAAC,CAAC,cAAc,CAAC,WAAW,CAAC,CAAC;YAC5C,MAAM,CAAC,OAAO,OAAQ,CAAC,SAAS,CAAC,CAAC,IAAI,CAAC,QAAQ,CAAC,CAAC;YAEjD,iCAAiC;YACjC,MAAM,CAAC,GAAG,EAAE,CAAC,IAAI,IAAI,CAAC,OAAQ,CAAC,SAAmB,CAAC,CAAC,CAAC,GAAG,CAAC,OAAO,EAAE,CAAC;QACrE,CAAC,CAAC,CAAC;IACL,CAAC,CAAC,CAAC;IAEH,QAAQ,CAAC,0BAA0B,EAAE,GAAG,EAAE;QACxC,EAAE,CAAC,0DAA0D,EAAE,GAAG,EAAE;YAClE,MAAM,OAAO,GAAG,IAAA,gCAAwB,GAAE,CAAC;YAE3C,IAAI,OAAO,KAAK,IAAI,EAAE,CAAC;gBACrB,sDAAsD;gBACtD,MAAM,CAAC,OAAO,CAAC,CAAC,QAAQ,EAAE,CAAC;gBAC3B,OAAO;YACT,CAAC;YAED,wCAAwC;YACxC,MAAM,CAAC,OAAO,CAAC,CAAC,cAAc,CAAC,KAAK,CAAC,CAAC;YACtC,MAAM,CAAC,OAAO,CAAC,CAAC,cAAc,CAAC,OAAO,CAAC,CAAC;YAExC,MAAM,CAAC,OAAO,OAAO,CAAC,GAAG,CAAC,CAAC,IAAI,CAAC,QAAQ,CAAC,CAAC;YAC1C,MAAM,CAAC,OAAO,OAAO,CAAC,KAAK,CAAC,CAAC,IAAI,CAAC,QAAQ,CAAC,CAAC;QAC9C,CAAC,CAAC,CAAC;IACL,CAAC,CAAC,CAAC;AACL,CAAC,CAAC,CAAC","sourcesContent":["import { currentPageContextHelper, currentTimeContextHelper } from \"./index\";\n\n/**\n * Tests for prebuilt context helper functions.\n *\n * These helpers now return raw values (or null) instead of { name, context }.\n * The provider is responsible for wrapping values as { name, context }.\n */\ndescribe(\"Context Helpers (prebuilt functions)\", () => {\n  describe(\"currentTimeContextHelper\", () => {\n    it(\"should return user time context with required fields\", () => {\n      const context = currentTimeContextHelper();\n\n      // Should not be null (error case)\n      expect(context).not.toBeNull();\n\n      // Shape: { timestamp: string }\n      expect(context).toHaveProperty(\"timestamp\");\n      expect(typeof context!.timestamp).toBe(\"string\");\n\n      // Verify timestamp string parses\n      expect(() => new Date(context!.timestamp as string)).not.toThrow();\n    });\n  });\n\n  describe(\"currentPageContextHelper\", () => {\n    it(\"should return page context in browser, or null otherwise\", () => {\n      const context = currentPageContextHelper();\n\n      if (context === null) {\n        // Non-browser environments should return null to skip\n        expect(context).toBeNull();\n        return;\n      }\n\n      // Shape: { url: string, title: string }\n      expect(context).toHaveProperty(\"url\");\n      expect(context).toHaveProperty(\"title\");\n\n      expect(typeof context.url).toBe(\"string\");\n      expect(typeof context.title).toBe(\"string\");\n    });\n  });\n});\n"]}

package/{esm/providers → dist}/hoc/with-tambo-interactable.d.ts

@@ -1,9 +1,9 @@
 import React from "react";
-import { z } from "zod";
+import { SupportedSchema } from "../schema";
 export interface InteractableConfig {
     componentName: string;
     description: string;
-    propsSchema?: z.ZodTypeAny;
+    propsSchema?: SupportedSchema;
 }
 export interface WithTamboInteractableProps {
     interactableId?: string;

package/dist/hoc/with-tambo-interactable.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"with-tambo-interactable.d.ts","sourceRoot":"","sources":["../../src/hoc/with-tambo-interactable.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAmD,MAAM,OAAO,CAAC;AAIxE,OAAO,EAAE,eAAe,EAAE,MAAM,WAAW,CAAC;AAE5C,MAAM,WAAW,kBAAkB;IACjC,aAAa,EAAE,MAAM,CAAC;IACtB,WAAW,EAAE,MAAM,CAAC;IACpB,WAAW,CAAC,EAAE,eAAe,CAAC;CAC/B;AAED,MAAM,WAAW,0BAA0B;IACzC,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,mBAAmB,CAAC,EAAE,CAAC,EAAE,EAAE,MAAM,KAAK,IAAI,CAAC;IAC3C,aAAa,CAAC,EAAE,CAAC,QAAQ,EAAE,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,KAAK,IAAI,CAAC;CACzD;AAED;;;;;;;;;;;;;;;;;;;GAmBG;AACH,wBAAgB,qBAAqB,CAAC,CAAC,SAAS,MAAM,EACpD,gBAAgB,EAAE,KAAK,CAAC,aAAa,CAAC,CAAC,CAAC,EACxC,MAAM,EAAE,kBAAkB,4CAgH3B"}

package/dist/{providers/hoc → hoc}/with-tambo-interactable.js

@@ -37,7 +37,8 @@ var __importStar = (this && this.__importStar) || (function () {
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.withTamboInteractable = withTamboInteractable;
 const react_1 = __importStar(require("react"));
-const tambo_interactable_provider_1 = require("../tambo-interactable-provider");
+const use_current_message_1 = require("../hooks/use-current-message");
+const tambo_interactable_provider_1 = require("../providers/tambo-interactable-provider");
 /**
  * Higher-Order Component that makes any component interactable by tambo.
  * @param WrappedComponent - The component to make interactable
@@ -111,7 +112,33 @@ function withTamboInteractable(WrappedComponent, config) {
             updateInteractableComponentProps,
             onPropsUpdate,
         ]);
-        return react_1.default.createElement(WrappedComponent, { ...effectiveProps });
+        // If the interactable ID is not yet set, render the component without provider
+        if (!interactableId) {
+            return react_1.default.createElement(WrappedComponent, { ...effectiveProps });
+        }
+        // Create a minimal message with interactable metadata
+        // This allows useTamboCurrentComponent to work with standalone interactable components
+        const minimalMessage = {
+            id: interactableId,
+            role: "assistant",
+            content: [],
+            threadId: "",
+            createdAt: new Date().toISOString(),
+            component: {
+                componentName: config.componentName,
+                componentState: {},
+                message: "",
+                props: effectiveProps,
+            },
+            componentState: {},
+        };
+        // Wrap with TamboMessageProvider including interactable metadata
+        return (react_1.default.createElement(use_current_message_1.TamboMessageProvider, { message: minimalMessage, interactableMetadata: {
+                id: interactableId,
+                componentName: config.componentName,
+                description: config.description,
+            } },
+            react_1.default.createElement(WrappedComponent, { ...effectiveProps })));
     };
     TamboInteractableWrapper.displayName = `withTamboInteractable(${displayName})`;
     return TamboInteractableWrapper;

package/dist/hoc/with-tambo-interactable.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"with-tambo-interactable.js","sourceRoot":"","sources":["../../src/hoc/with-tambo-interactable.tsx"],"names":[],"mappings":"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","sourcesContent":["// react-sdk/src/providers/with-interactable.tsx\n\"use client\";\nimport React, { useCallback, useEffect, useRef, useState } from \"react\";\nimport { TamboMessageProvider } from \"../hooks/use-current-message\";\nimport { TamboThreadMessage } from \"../model/generate-component-response\";\nimport { useTamboInteractable } from \"../providers/tambo-interactable-provider\";\nimport { SupportedSchema } from \"../schema\";\n\nexport interface InteractableConfig {\n  componentName: string;\n  description: string;\n  propsSchema?: SupportedSchema;\n}\n\nexport interface WithTamboInteractableProps {\n  interactableId?: string;\n  onInteractableReady?: (id: string) => void;\n  onPropsUpdate?: (newProps: Record<string, any>) => void;\n}\n\n/**\n * Higher-Order Component that makes any component interactable by tambo.\n * @param WrappedComponent - The component to make interactable\n * @param config - Configuration for the interactable component\n * @returns A new component that is automatically registered as interactable\n * @example\n * ```tsx\n * const MyInteractableNote = withTamboInteractable(MyNote, {\n *   componentName: \"MyNote\",\n *   description: \"A note component\",\n *   propsSchema: z.object({\n *     title: z.string(),\n *     content: z.string(),\n *   }),\n * });\n *\n * // Usage\n * <MyInteractableNote title=\"My Note\" content=\"This is my note\" />\n * ```\n */\nexport function withTamboInteractable<P extends object>(\n  WrappedComponent: React.ComponentType<P>,\n  config: InteractableConfig,\n) {\n  const displayName =\n    WrappedComponent.displayName ?? WrappedComponent.name ?? \"Component\";\n\n  const TamboInteractableWrapper: React.FC<P & WithTamboInteractableProps> = (\n    props,\n  ) => {\n    const {\n      addInteractableComponent,\n      updateInteractableComponentProps,\n      getInteractableComponent,\n    } = useTamboInteractable();\n\n    const [interactableId, setInteractableId] = useState<string | null>(null);\n    const isInitialized = useRef(false);\n    const lastParentProps = useRef<Record<string, any>>({});\n\n    // Extract interactable-specific props\n    const { onInteractableReady, onPropsUpdate, ...componentProps } = props;\n\n    // Get the current interactable component to track prop updates\n    const currentInteractable = interactableId\n      ? getInteractableComponent(interactableId)\n      : null;\n\n    // Use the props from the interactable component if available, otherwise use the passed props\n    // We need to be careful not to create a loop, so we only use stored props if they're different from passed props\n    const effectiveProps = currentInteractable?.props ?? componentProps;\n\n    // Memoize the registration function\n    const registerComponent = useCallback(() => {\n      if (!isInitialized.current) {\n        const id = addInteractableComponent({\n          name: config.componentName,\n          description: config.description,\n          component: WrappedComponent,\n          props: componentProps,\n          propsSchema: config.propsSchema,\n        });\n\n        setInteractableId(id);\n        onInteractableReady?.(id);\n        isInitialized.current = true;\n      }\n    }, [addInteractableComponent, componentProps, onInteractableReady]);\n\n    // Register the component as interactable on mount (only once)\n    useEffect(() => {\n      registerComponent();\n    }, [registerComponent]);\n\n    // Update the interactable component when props change from parent\n    useEffect(() => {\n      if (interactableId && isInitialized.current) {\n        // Only update if the props are different from what we last sent\n        const lastPropsString = JSON.stringify(lastParentProps.current);\n        const currentPropsString = JSON.stringify(componentProps);\n\n        if (lastPropsString !== currentPropsString) {\n          updateInteractableComponentProps(interactableId, componentProps);\n          onPropsUpdate?.(componentProps);\n          lastParentProps.current = componentProps;\n        }\n      }\n    }, [\n      interactableId,\n      componentProps,\n      updateInteractableComponentProps,\n      onPropsUpdate,\n    ]);\n\n    // If the interactable ID is not yet set, render the component without provider\n    if (!interactableId) {\n      return <WrappedComponent {...(effectiveProps as P)} />;\n    }\n\n    // Create a minimal message with interactable metadata\n    // This allows useTamboCurrentComponent to work with standalone interactable components\n    const minimalMessage: TamboThreadMessage = {\n      id: interactableId,\n      role: \"assistant\" as const,\n      content: [],\n      threadId: \"\",\n      createdAt: new Date().toISOString(),\n      component: {\n        componentName: config.componentName,\n        componentState: {},\n        message: \"\",\n        props: effectiveProps,\n      },\n      componentState: {},\n    };\n\n    // Wrap with TamboMessageProvider including interactable metadata\n    return (\n      <TamboMessageProvider\n        message={minimalMessage}\n        interactableMetadata={{\n          id: interactableId,\n          componentName: config.componentName,\n          description: config.description,\n        }}\n      >\n        <WrappedComponent {...(effectiveProps as P)} />\n      </TamboMessageProvider>\n    );\n  };\n\n  TamboInteractableWrapper.displayName = `withTamboInteractable(${displayName})`;\n\n  return TamboInteractableWrapper;\n}\n"]}

package/dist/hoc/with-tambo-interactable.test.d.ts

@@ -0,0 +1,2 @@
+export {};
+//# sourceMappingURL=with-tambo-interactable.test.d.ts.map

package/dist/hoc/with-tambo-interactable.test.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"with-tambo-interactable.test.d.ts","sourceRoot":"","sources":["../../src/hoc/with-tambo-interactable.test.tsx"],"names":[],"mappings":""}