React SDK Providers

import { TamboProvider } from "@tambo-ai/react";

function App() {
  return (
    <TamboProvider
      apiKey={process.env.NEXT_PUBLIC_TAMBO_API_KEY}
      userKey={userId}
      components={myComponents}
      tools={myTools}
    >
      <YourApp />
    </TamboProvider>
  );
}

import { TamboProvider, defineTool } from "@tambo-ai/react";
import { z } from "zod";
import { zodToJsonSchema } from "zod-to-json-schema";

const components = [
  {
    name: "WeatherCard",
    description: "Displays weather information",
    component: WeatherCard,
    propsSchema: zodToJsonSchema(
      z.object({
        city: z.string(),
        temperature: z.number(),
      }),
    ),
  },
];

const tools = [
  defineTool({
    name: "get_weather",
    description: "Fetch weather for a city",
    tool: async ({ city }) => fetchWeather(city),
    inputSchema: z.object({ city: z.string() }),
    outputSchema: z.object({ temperature: z.number() }),
  }),
];

<TamboProvider
  apiKey={process.env.NEXT_PUBLIC_TAMBO_API_KEY}
  userKey={session.user.id}
  components={components}
  tools={tools}
  contextHelpers={{
    currentPage: () => ({ url: window.location.href }),
  }}
>
  <App />
</TamboProvider>;

import { TamboStubProvider } from "@tambo-ai/react";

function TestApp() {
  return (
    <TamboStubProvider
      thread={{
        messages: [
          {
            id: "1",
            role: "assistant",
            content: [
              {
                type: "component",
                id: "comp-1",
                name: "WeatherCard",
                props: { city: "Seattle", temperature: 65 },
              },
            ],
          },
        ],
      }}
      components={myComponents}
    >
      <YourComponent />
    </TamboStubProvider>
  );
}

import { TamboThreadInputProvider } from "@tambo-ai/react";

// Usually not needed directly - included in TamboProvider
<TamboThreadInputProvider>
  <InputComponents />
</TamboThreadInputProvider>;

import { ComponentRenderer } from "@tambo-ai/react";
import type { TamboThreadMessage } from "@tambo-ai/react";

function MessageRenderer({
  message,
  threadId,
}: {
  message: TamboThreadMessage;
  threadId: string;
}) {
  return (
    <>
      {message.content.map((block, i) => {
        if (block.type === "text") {
          return <p key={`${message.id}:${i}`}>{block.text}</p>;
        }
        if (block.type === "component") {
          return (
            <ComponentRenderer
              key={block.id}
              content={block}
              threadId={threadId}
              messageId={message.id}
              fallback={<div>Unknown component: {block.name}</div>}
            />
          );
        }
        return null;
      })}
    </>
  );
}

import { TamboMessageProvider, ComponentRenderer } from "@tambo-ai/react";
import type { TamboThreadMessage } from "@tambo-ai/react";

function CustomMessageList({
  messages,
  threadId,
}: {
  messages: TamboThreadMessage[];
  threadId: string;
}) {
  return (
    <>
      {messages.map((message) => (
        <TamboMessageProvider key={message.id} message={message}>
          {message.content.map((block) => {
            if (block.type === "component") {
              return (
                <ComponentRenderer
                  key={block.id}
                  content={block}
                  threadId={threadId}
                  messageId={message.id}
                />
              );
            }
            return null;
          })}
        </TamboMessageProvider>
      ))}
    </>
  );
}

import { ComponentContentProvider } from "@tambo-ai/react";

// Only needed for custom rendering pipelines
<ComponentContentProvider
  componentId="comp-abc123"
  threadId="thread-xyz"
  messageId="msg-456"
  componentName="WeatherCard"
>
  <WeatherCard city="Seattle" temperature={65} />
</ComponentContentProvider>;

import { TamboClientProvider } from "@tambo-ai/react";

<TamboClientProvider
  apiKey={process.env.NEXT_PUBLIC_TAMBO_API_KEY}
  tamboUrl="https://api.tambo.co"
>
  <App />
</TamboClientProvider>;

import { TamboRegistryProvider } from "@tambo-ai/react";

<TamboRegistryProvider
  components={components}
  tools={tools}
  mcpServers={mcpServers}
>
  <App />
</TamboRegistryProvider>;

import { TamboContextHelpersProvider } from "@tambo-ai/react";

<TamboContextHelpersProvider
  contextHelpers={{
    currentPage: () => ({ url: window.location.href }),
  }}
>
  <App />
</TamboContextHelpersProvider>;

import { useTamboConfig } from "@tambo-ai/react";

function MyComponent() {
  const { userKey } = useTamboConfig();

  return <div>User: {userKey}</div>;
}