Tambo.ai

https://tambo.co/docs
Admin
Tambo is a React library for integrating AI chat and generative UI components into your application,...
Tokens:1,664
Snippets:16
Trust Score:7.9
Update:7 months ago
Show doc for...
Tokens:
Raw
### Configure MCP Servers with TamboProvider

Source: https://tambo.co/docs

Illustrates how to integrate external systems with Tambo using the Model Context Protocol (MCP). This snippet shows the configuration of MCP servers, including their names, URLs, and transport protocols, passed as a prop to the `TamboProvider`. This enables the Tambo agent to interact with databases, APIs, and other services.

```typescript
import { MCPTransport } from "@tambo-ai/react/mcp";

const mcpServers = [
  {
    name: "filesystem",
    url: "http://localhost:8261/mcp",
    transport: MCPTransport.HTTP,
  },
];

<TamboProvider components={components} mcpServers={mcpServers}>
  <App />
</TamboProvider>;
```

--------------------------------

### Initialize TamboProvider in React App

Source: https://tambo.co/docs

Sets up the Tambo context provider for a React application. This component wraps the main application and provides necessary configurations such as registered components, tools, API key, and optionally MCP servers. It's essential for enabling Tambo's features throughout the app.

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

export function Home() {
  return (
    <TamboProvider
      components={myTamboComponents}
      tools={myTamboTools}
      apiKey={tamboApiKey}
    >
      <MyAiApp />
    </TamboProvider>
  );
}
```

--------------------------------

### Use Tambo Hooks for Messaging and Rendering

Source: https://tambo.co/docs

Demonstrates the usage of Tambo hooks within a React component to manage messages and user input. `useTambo()` fetches messages, and `useTamboThreadInput()` handles user input submission and state. It includes logic for rendering different message content types, including text and Tambo-rendered components.

```typescript
const { messages } = useTambo();
const { value, setValue, submit, isPending } = useTamboThreadInput();

// Render messages with components
{
  messages.map((message) => (
    <div key={message.id}>
      {Array.isArray(message.content) ? (
        message.content.map((part, i) =>
          part.type === "text" ? <p key={i}>{part.text}</p> : null,
        )
      ) : (
        <p>{String(message.content)}</p>
      )}
      {message.renderedComponent}
    </div>
  ));
}
```

--------------------------------

### Register Generative Components with Tambo

Source: https://tambo.co/docs

Defines and registers generative components for the Tambo agent. These components are rendered once in response to a user message and are suitable for displaying results like charts or data visualizations. It requires defining a name, description, the React component itself, and a Zod schema for its props.

```typescript
const components: TamboComponent[] = [
  {
    name: "Graph",
    description: "Displays data as charts using Recharts library",
    component: Graph,
    propsSchema: z.object({
      data: z.array(z.object({ name: z.string(), value: z.number() })),
      type: z.enum(["line", "bar", "pie"]),
    }),
  },
];
```

--------------------------------

### Wrap Interactable Components with Tambo

Source: https://tambo.co/docs

Creates interactable components using the `withInteractable` HOC provided by Tambo. These components persist on the page and can be updated across conversations, making them suitable for user interactions like shopping carts or task boards. It requires a component name, description, and a Zod schema for its props.

```typescript
const InteractableNote = withInteractable(Note, {
  componentName: "Note",
  description: "A note supporting title, content, and color modifications",
  propsSchema: z.object({
    title: z.string(),
    content: z.string(),
    color: z.enum(["white", "yellow", "blue", "green"]).optional(),
  }),
});
```
Tokens:
Raw