tools-and-context

# Tools and Context

Gives Tambo access to data and capabilities through tools, MCP servers, and context.

## Quick Start

```tsx
// Custom tool Tambo can call
const fetchUserTool = defineTool({
  name: "fetchUser",
  description: "Fetch user by ID",
  inputSchema: z.object({ userId: z.string() }),
  tool: async ({ userId }) => fetchUser(userId),
});

<TamboProvider tools={[fetchUserTool]}>
  <App />
</TamboProvider>;
```

## Custom Tools

Register JavaScript functions Tambo can call:

```tsx
import { defineTool, TamboProvider } from "@tambo-ai/react";
import { z } from "zod";

const fetchUserTool = defineTool({
  name: "fetchUser",
  description: "Fetch a user by ID",
  inputSchema: z.object({
    userId: z.string().describe("The user ID to fetch"),
  }),
  outputSchema: z.object({
    name: z.string(),
    email: z.string(),
  }),
  tool: async ({ userId }) => {
    const user = await fetchUser(userId);
    return user;
  },
});

<TamboProvider tools={[fetchUserTool]} components={components}>
  <App />
</TamboProvider>;
```

### Tool Key Points

- **inputSchema**: Zod object for parameters, use `.describe()` on fields
- **outputSchema**: Zod schema for return value (optional)
- **tool**: Function receives single object with input params
- **transformToContent**: Enable rich content responses (images, formatted text)

## MCP Servers

Connect to external MCP servers for tools, resources, prompts:

| Feature       | Server-side      | Client-side              |
| ------------- | ---------------- | ------------------------ |
| Performance   | Fast (direct)    | Slower (browser proxies) |
| Auth          | OAuth + API keys | Browser session only     |
| Local servers | No               | Yes (localhost)          |
| Config        | Tambo dashboard  | React code               |

### Server-Side Setup

1. Go to [project dashboard](https://tambo.co/dashboard)
2. Click "Add MCP Server"
3. Enter URL and server type (StreamableHTTP or SSE)
4. Complete OAuth if required

###