### Install Dependencies and Run Dev Server

Source: https://github.com/tambo-ai/tambo/blob/main/apps/web/README.md

Initial setup steps including copying environment variables, installing dependencies, and starting the development server. The dev server runs on http://localhost:8260.

```bash
cp .env.example .env   # fill required secrets (check turbo.json)
npm install
npm run dev
```

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

### Quick Start: Tambo API Storage Setup

Source: https://github.com/tambo-ai/tambo/blob/main/devdocs/STORAGE_SETUP.md

Initial steps to start MinIO, initialize storage, and run the API for local development.

```bash
# 1. Start MinIO
docker compose --env-file docker.env up minio -d

# 2. Initialize storage bucket
npm run storage:init -w apps/api

# 3. Start the API
npm run dev:api
```

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

### Install the starter app

Source: https://github.com/tambo-ai/tambo/blob/main/docs/content/docs/examples-and-templates/chat-starter-app.mdx

Use this command to create a new instance of the Chat Starter App. This command initiates the project setup process.

```bash
npm create tambo-app@latest my-tambo-app
```

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

### Install Tambo Plugin

Source: https://github.com/tambo-ai/tambo/blob/main/plugins/tambo/README.md

Add the Tambo plugin marketplace and install the plugin. This is a one-time setup process.

```bash
/plugin marketplace add https://github.com/tambo-ai/tambo
/plugin install tambo
```

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

### Quick Start Tambo CLI

Source: https://github.com/tambo-ai/tambo/blob/main/cli/README.md

Run this command to set up your Tambo API key, install required components, and configure your project with necessary dependencies.

```bash
npx tambo full-send
```

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

### Install and Use Tambo Plugin

Source: https://github.com/tambo-ai/tambo/blob/main/plans/agent-friendly-cli.md

Steps to add, install, and manage the Tambo plugin within an environment, along with examples of how to invoke its skills.

```bash
# Step 1: Add the marketplace (one time)
/plugin marketplace add tambo-ai/tambo/claude-plugin

# Step 2: Install the plugin
/plugin install tambo

# Step 3: Use skills
/tambo:generative-components    # Help with component creation
/tambo:mcp-integration          # Help with MCP setup
/tambo:streaming-patterns       # Help with streaming UIs
/tambo:component-state          # Help with state management
/tambo:interactables            # Help with interactable components
/tambo:tools                    # Help with tool registration
/tambo:cli                      # Help with CLI commands

# Managing plugins
/plugin enable tambo            # Enable if disabled
/plugin disable tambo           # Temporarily disable
/plugin uninstall tambo         # Remove completely
```

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

### Self-Hosted Tambo Setup Instructions

Source: https://github.com/tambo-ai/tambo/blob/main/docs/content/docs/reference/cli/commands/init.mdx

After selecting the self-host option, the CLI provides instructions to clone the repository, start the backend service, and configure your environment variables.

```bash
# If self-host selected:
To self-host Tambo:

1. Clone the repository:
   git clone https://github.com/tambo-ai/tambo-core.git
   cd tambo-core/tambo-cloud

2. Run the start script:
   ./scripts/tambo-start.sh

3. Your API will be running at http://localhost:3030

4. Set this in your .env.local:
   NEXT_PUBLIC_TAMBO_API_URL=http://localhost:3030

? Continue with self-host setup? (Y/n)
```

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

### Run Tambo Setup Script

Source: https://github.com/tambo-ai/tambo/blob/main/SELF-HOSTING.md

Execute the setup script to create the docker.env file from its example. This script automates initial environment file creation.

```bash
./scripts/cloud/tambo-setup.sh
```

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

### Install and Run Local MCP Server

Source: https://github.com/tambo-ai/tambo/blob/main/apps/docs-mcp/README.md

Execute these npm commands from the repository root to install dependencies and start the local Next.js development server for the docs-mcp application.

```bash
npm install
npm run dev --filter=docs-mcp
```

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

### Start React SDK Development

Source: https://github.com/tambo-ai/tambo/blob/main/CLAUDE.md

Run this command to start the React SDK, which includes the showcase and documentation.

```bash
npm run dev
```

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

### Install Components with Custom Prefix, Skip Prompts, and Handle Conflicts

Source: https://github.com/tambo-ai/tambo/blob/main/docs/content/docs/reference/cli/global-options.mdx

Use this command to install multiple components while specifying a custom installation prefix, automatically accepting prompts, and managing legacy peer dependencies.

```bash
npx tambo add form graph --prefix=src/components/ui --yes --legacy-peer-deps
```

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

### Registering Generative Components (Quick Start)

Source: https://github.com/tambo-ai/tambo/blob/main/plugins/tambo/skills/generative-ui/references/components.md

Example of registering a simple generative component for use with TamboProvider. Suitable for quick setup.

```tsx
// Generative: AI creates when needed
const components: TamboComponent[] = [
  {
    name: "WeatherCard",
    component: WeatherCard,
    description: "Shows weather. Use when user asks about weather.",
    propsSchema: z.object({ city: z.string(), temp: z.number() }),
  },
];

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

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

### CSP Configuration Example

Source: https://github.com/tambo-ai/tambo/blob/main/apps/api/SECURITY_HEADERS.md

Example of setting CSP directives and deployment environment via environment variables. CSP keywords must be single-quoted.

```bash
CSP_CONNECT_SRC="'self', https://app.posthog.com"
DEPLOY_ENV=production
```

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

### Create New Tambo Project

Source: https://github.com/tambo-ai/tambo/blob/main/docs/content/docs/reference/cli/workflows.mdx

Use this command to create a new project from a template. After creation, navigate into the project directory and run `npx tambo init` to complete the setup with your API key, then start development with `npm run dev`.

```bash
# Create new project with template
npm create tambo-app@latest my-tambo-app
cd my-tambo-app

# Complete setup with API key
npx tambo init

# Start development
npm run dev
```

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

### HSTS Configuration Example

Source: https://github.com/tambo-ai/tambo/blob/main/apps/api/SECURITY_HEADERS.md

Example of enabling HSTS in production with optional tunables. ENABLE_HSTS must be set to 'true' (lowercase) to activate the policy.

```bash
ENABLE_HSTS=true
HSTS_INCLUDE_SUBDOMAINS=true
HSTS_PRELOAD=true
```

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

### Install Dependencies

Source: https://github.com/tambo-ai/tambo/blob/main/docs/content/docs/guides/add-authentication/nextauth.mdx

Install the necessary packages for Auth.js and Tambo integration.

```bash
npm install next-auth @auth/core @tambo-ai/react
```

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

### Create Tambo App with Interactive Prompts

Source: https://github.com/tambo-ai/tambo/blob/main/docs/content/docs/reference/cli/commands/create-app.mdx

Run this command to create a new Tambo app. It will guide you through the process with interactive prompts, including Git initialization and Tambo setup.

```bash
npx tambo create-app
```

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

### Install @tambo-ai/client

Source: https://github.com/tambo-ai/tambo/blob/main/packages/client/README.md

Install the Tambo AI client package using npm.

```sh
npm install @tambo-ai/client
```

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

### Install Auth0 and Tambo Packages

Source: https://github.com/tambo-ai/tambo/blob/main/docs/content/docs/guides/add-authentication/auth0.mdx

Install the necessary Auth0 and Tambo packages using npm.

```bash
npm install @auth0/nextjs-auth0 @tambo-ai/react
```

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

### Install STLC and TypeScript SDK

Source: https://github.com/tambo-ai/tambo/blob/main/plans/stainless-migration.md

Installs the stlc CLI and the TypeScript SDK builder globally. Ensure you have HTTPS authentication set up with GitHub.

```bash
npm install -g git+https://github.com/stainless/stlc.git git+https://github.com/stainless/stlc-typescript.git
```

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

### List all installed Tambo components

Source: https://github.com/tambo-ai/tambo/blob/main/docs/content/docs/reference/cli/commands/list.mdx

Run this command to see all Tambo components installed in the default components directory.

```bash
npx tambo list
```

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

### Install Form Sub-Components

Source: https://github.com/tambo-ai/tambo/blob/main/showcase/README.md

Install individual form sub-components. This allows for the integration of specific form elements as needed.

```bash
# Form Components
npx tambo add Form@latest
npx tambo add InputFields@latest
```

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

### Run Server with npm

Source: https://github.com/tambo-ai/tambo/blob/main/apps/test-mcp-server/README.md

Starts the MCP server using the npm start script. The server will run on the default port or a specified one.

```bash
npm start
```

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

### Install Tambo, Auth.js, and Neon packages

Source: https://github.com/tambo-ai/tambo/blob/main/docs/content/docs/guides/add-authentication/neon.mdx

Install the necessary npm packages for Tambo, Auth.js, and the Neon database adapter.

```bash
npm install next-auth @auth/neon-adapter @neondatabase/serverless @tambo-ai/react
```

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

### Start PostgreSQL Docker Container

Source: https://github.com/tambo-ai/tambo/blob/main/CLAUDE.md

Use this command to start the PostgreSQL Docker container for local development. Ensure docker-compose and docker.env are configured.

```bash
docker compose --env-file docker.env up postgres -d
```

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

### Start MinIO via Docker Compose

Source: https://github.com/tambo-ai/tambo/blob/main/devdocs/STORAGE_SETUP.md

Command to start the MinIO service using Docker Compose, essential for local S3-compatible storage.

```bash
docker compose --env-file docker.env up minio -d
```

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

### Set Up Environment Files

Source: https://github.com/tambo-ai/tambo/blob/main/CONTRIBUTING.md

Copy example environment files to their respective active versions for API, web, and database configurations.

```bash
cp apps/api/.env.example apps/api/.env
cp apps/web/.env.example apps/web/.env.local
cp packages/db/.env.example packages/db/.env
```

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

### Add Components to Tambo Project

Source: https://github.com/tambo-ai/tambo/blob/main/cli/AGENTS.md

Installs a component into your project. Use --yes to skip prompts and --prefix to specify the installation directory.

```bash
tambo add <component> --yes --prefix=src/components/tambo
```

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

### Non-Interactive Full Send with All Components

Source: https://github.com/tambo-ai/tambo/blob/main/docs/content/docs/reference/cli/commands/full-send.mdx

Use the `--yes` flag to skip interactive prompts and automatically install all available starter components and their dependencies.

```bash
# Skip prompts and install all starter components
npx tambo full-send --yes
```

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

### Example output with custom directory

Source: https://github.com/tambo-ai/tambo/blob/main/docs/content/docs/reference/cli/commands/list.mdx

This demonstrates the output when listing components using a custom prefix, showing components within the specified directory.

```bash
$ npx tambo list --prefix=src/components/ui

ℹ Installed components:

  In ui/:
    Tambo components:
      - message-thread-collapsible
      - control-bar
      - form
    Tambo support components:
      - markdown-components

Total: 4 component(s) (4 from Tambo, 0 custom)
```

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

### Install Tambo React SDK with Zod 4

Source: https://github.com/tambo-ai/tambo/blob/main/react-sdk/README.md

Install the Tambo React SDK along with Zod 4 and zod-to-json-schema for schema validation. This is the recommended setup for new projects.

```bash
npm install zod@^4 zod-to-json-schema@^3.25.1
```

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

### Install and Execute Commands with Mise

Source: https://github.com/tambo-ai/tambo/blob/main/AGENTS.md

Use `mise install` to set up tools. `mise exec -- <command>` is preferred for scripts and CI. `eval "$(mise activate)"` is for interactive shells.

```bash
mise install              # Install/update tools to correct versions
mise exec -- <command>    # Preferred for scripts/CI/non-interactive shells
eval "$(mise activate)"   # Interactive shells only
```

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

### Troubleshoot Tambo Component Installation

Source: https://github.com/tambo-ai/tambo/blob/main/docs/content/docs/reference/cli/workflows.mdx

Commands to help diagnose and fix issues with Tambo components. This includes listing installed components, updating a specific component, and verifying provider setup.

```bash
# 1. Check if component is properly installed
npx tambo list

# 2. Update to latest version
npx tambo update <component-name>

# 3. Check your TamboProvider setup
# Make sure API key is set
# Verify component is imported correctly
```

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

### Interactive Project Initialization

Source: https://github.com/tambo-ai/tambo/blob/main/docs/content/docs/reference/cli/commands/init.mdx

Run the interactive setup to create a Tambo project and choose hosting options.

```bash
npx tambo init
```

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

### Configure PostCSS with Tailwind v4

Source: https://github.com/tambo-ai/tambo/blob/main/docs/content/docs/reference/cli/configuration.mdx

For Next.js and other frameworks, the CLI installs `@tailwindcss/postcss` and configures your PostCSS setup.

```javascript
export default {
  plugins: {
    "@tailwindcss/postcss": {},
  },
};
```

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

### Example output with default directory

Source: https://github.com/tambo-ai/tambo/blob/main/docs/content/docs/reference/cli/commands/list.mdx

This shows the typical output when listing components in the default directory, including a prompt for using an existing src/ directory.

```bash
$ npx tambo list
Found existing src/ directory

? Would you like to use the existing src/ directory for components? yes

ℹ Installed components:

  In tambo/:
    Tambo components:
      - control-bar
      - form
      - graph
      - input-fields
      - message-input
      - message-suggestions
      - message-thread-collapsible
      - message-thread-full
      - message-thread-panel
      - message
      - scrollable-message-container
      - thread-content
      - thread-dropdown
      - thread-history
    Tambo support components:
      - markdown-components
      - message-generation-stage
      - suggestions-tooltip
      - thread-container

Total: 18 component(s) (18 from Tambo, 0 custom)
```

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

### GitHub Actions Setup for Tambo

Source: https://github.com/tambo-ai/tambo/blob/main/docs/content/docs/reference/cli/workflows.mdx

Configure a GitHub Actions workflow to check out code, set up Node.js, install dependencies, and initialize Tambo with an API key.

```yaml
name: Setup Tambo

on:
  push:
    branches: [main]

jobs:
  setup:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v4
      - uses: actions/setup-node@v4
        with:
          node-version: "22"

      - name: Install dependencies
        run: npm ci

      - name: Initialize Tambo
        run: npx tambo init --api-key="${{ secrets.TAMBO_API_KEY }}"

      - name: Add components
        run: npx tambo add message-thread-full form --yes
```

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

### Tambo CLI Quick Start Commands

Source: https://github.com/tambo-ai/tambo/blob/main/plugins/tambo/skills/building-with-tambo/references/cli.md

Initialize a new project with an API key, add a component, or create a new application from a template using these common Tambo CLI commands.

```bash
npx tambo init --api-key=sk_...              # Initialize with API key
```

```bash
npx tambo add message-thread-full --yes      # Add a component
```

```bash
npx tambo create-app my-app --template=standard  # New app from template
```

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

### Tailwind CSS Configuration in tailwind.config.ts

Source: https://github.com/tambo-ai/tambo/blob/main/docs/content/docs/reference/cli/commands/full-send.mdx

Verify your tailwind.config.ts file includes the necessary content paths and darkMode configuration for Tailwind CSS. This example shows a basic setup.

```tsx
import type { Config } from "tailwindcss";

const config: Config = {
  darkMode: "class",
  content: [
    "./pages/**/*.{ts,tsx}",
    "./components/**/*.{ts,tsx}",
    "./app/**/*.{ts,tsx}",
    "./src/**/*.{ts,tsx}",
  ],
  // ... your existing theme configuration
};

export default config;
```

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

### Registering Generative Components (Detailed)

Source: https://github.com/tambo-ai/tambo/blob/main/plugins/tambo/skills/generative-ui/references/components.md

Detailed example of registering a generative component with a Zod schema and API key. Ensure props are handled gracefully as they may start undefined.

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

const WeatherCardSchema = z.object({
  city: z.string().describe("City name"),
  temperature: z.number().describe("Temperature in Celsius"),
  condition: z.string().describe("Weather condition"),
});

const components: TamboComponent[] = [
  {
    name: "WeatherCard",
    component: WeatherCard,
    description:
      "Displays weather for a city. Use when user asks about weather.",
    propsSchema: WeatherCardSchema,
  },
];

<TamboProvider apiKey={apiKey} components={components}>
  <App />
</TamboProvider>
```

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

### Skip Prompts and Use Defaults

Source: https://github.com/tambo-ai/tambo/blob/main/docs/content/docs/reference/cli/commands/init.mdx

Initialize the project using default settings without interactive prompts.

```bash
npx tambo init --yes
```

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

### Create Tambo App with Legacy Peer Dependencies

Source: https://github.com/tambo-ai/tambo/blob/main/docs/content/docs/reference/cli/commands/create-app.mdx

Use this option to install dependencies using legacy peer dependency resolution. This can be helpful for compatibility with older package versions or specific project setups.

```bash
npx tambo create-app my-app --legacy-peer-deps
```

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

### Multiple Components in One Response Event Stream

Source: https://github.com/tambo-ai/tambo/blob/main/plans/api-v1-proposal.md

Example event stream demonstrating multiple component instances being rendered in a single response. Each component streams its start, property updates, and end events sequentially, sharing the same 'messageId'.

```text
data: {"type":"RUN_STARTED",...}
data: {"type":"TEXT_MESSAGE_START",...}
data: {"type":"TEXT_MESSAGE_CONTENT","messageId":"msg_001","delta":"Here's a side-by-side comparison:"}
data: {"type":"TEXT_MESSAGE_END",...}
data: {"type":"CUSTOM","name":"tambo.component.start","value":{"componentId":"comp_001","componentName":"StockChart","messageId":"msg_001"}}
data: {"type":"CUSTOM","name":"tambo.component.props_delta","value":{"componentId":"comp_001","delta":[{"op":"add","path":"/ticker","value":"AAPL"}],...}}
data: {"type":"CUSTOM","name":"tambo.component.end","value":{"componentId":"comp_001","props":{"ticker":"AAPL","timeRange":"1M"}}}
data: {"type":"CUSTOM","name":"tambo.component.start","value":{"componentId":"comp_002","componentName":"StockChart","messageId":"msg_001"}}
data: {"type":"CUSTOM","name":"tambo.component.props_delta","value":{"componentId":"comp_002","delta":[{"op":"add","path":"/ticker","value":"MSFT"}],...}}
data: {"type":"CUSTOM","name":"tambo.component.end","value":{"componentId":"comp_002","props":{"ticker":"MSFT","timeRange":"1M"}}}
data: {"type":"RUN_FINISHED",...}
```

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

### Resource Search and Selection Example

Source: https://github.com/tambo-ai/tambo/blob/main/docs/content/docs/reference/react-ui-base/mcp-resources.mdx

Demonstrates how to implement resource search and selection using McpResources.Root, McpResources.Search, and McpResources.List. The Root component manages search state internally.

```tsx
<McpResources.Root
  onSelectResource={(uri, label) => {
    insertResourceReference(uri, label);
  }}>
  <McpResources.Search placeholder="Filter resources..." />
  <McpResources.List
    render={(props, state) => (
      <div {...props}>
        {state.resources.map((entry) => (
          <McpResources.Item
            key={entry.resource.uri}
            uri={entry.resource.uri}
            name={entry.resource.name}>
            {entry.resource.name ?? entry.resource.uri}
          </McpResources.Item>
        ))}
      </div>
    )} />
</McpResources.Root>
```

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

### Pure Text Interaction Event Stream

Source: https://github.com/tambo-ai/tambo/blob/main/plans/api-v1-proposal.md

Example of an event stream for a pure text interaction, showing the progression from run start to message content and run finish. Clients should accumulate 'delta' fields to reconstruct the full message.

```text
data: {"type":"RUN_STARTED","threadId":"thr_abc123","runId":"run_xyz789"}
data: {"type":"TEXT_MESSAGE_START","messageId":"msg_001","role":"assistant"}
data: {"type":"TEXT_MESSAGE_CONTENT","messageId":"msg_001","delta":"The capital of France is "}
data: {"type":"TEXT_MESSAGE_CONTENT","messageId":"msg_001","delta":"Paris."}
data: {"type":"TEXT_MESSAGE_END","messageId":"msg_001"}
data: {"type":"RUN_FINISHED","threadId":"thr_abc123","runId":"run_xyz789"}
```

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

### Recommended Migration and Upgrade Workflow

Source: https://github.com/tambo-ai/tambo/blob/main/docs/content/docs/reference/cli/commands/upgrade.mdx

To ensure a smooth upgrade process when components are split across locations, it is recommended to first run the `migrate` command and then the `upgrade` command.

```bash
npx tambo migrate
npx tambo upgrade
```

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

### Expo TamboProvider Setup

Source: https://github.com/tambo-ai/tambo/blob/main/docs/content/docs/reference/cli/commands/full-send.mdx

Configure the `TamboProvider` for Expo projects. Note that web components are not installed by default for Expo. Use React Native hooks directly for native UI development. Ensure your API key is correctly set in environment variables.

```tsx
import { TamboProvider } from "@tambo-ai/react";
import { components } from "./lib/tambo";

export default function App() {
  return (
    <TamboProvider
      apiKey={process.env.EXPO_PUBLIC_TAMBO_API_KEY ?? ""}
      components={components}
    >
      {/* Your React Native content */}
    </TamboProvider>
  );
}
```

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

### Configure Custom Instructions for Creative Writing Agent

Source: https://github.com/tambo-ai/tambo/blob/main/docs/content/docs/concepts/agent-configuration.mdx

Use custom instructions to define the agent's role, tone, and personality. This example sets up a creative writing partner that is imaginative, collaborative, and supportive, guiding authors with thoughtful questions and suggestions.

```text
You are a creative writing partner helping authors develop their stories. You're imaginative, collaborative, and supportive. When users share ideas:
- Ask thoughtful questions to deepen their concepts
- Suggest creative alternatives and plot twists
- Help brainstorm character motivations and arcs
- Maintain an encouraging, enthusiastic tone
- Avoid being prescriptive - guide, don't dictate
```

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

### Create and Run a Tambo App

Source: https://github.com/tambo-ai/tambo/blob/main/README.md

Initialize a new Tambo project, navigate into the directory, and start the development server.

```bash
npm create tambo-app my-tambo-app  # auto-initializes git + tambo setup
cd my-tambo-app
npm run dev
```

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

### Update All Installed Tambo Components

Source: https://github.com/tambo-ai/tambo/blob/main/docs/content/docs/reference/cli/commands/update.mdx

To update all components that are currently installed in your project, use the `installed` keyword.

```bash
npx tambo update installed
```

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

### Initialize Tambo Project with API Key

Source: https://github.com/tambo-ai/tambo/blob/main/cli/AGENTS.md

Use this command for the simplest project initialization by directly providing your API key.

```bash
tambo init --api-key=sk_...
```

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

### Install Dependencies with npm

Source: https://github.com/tambo-ai/tambo/blob/main/apps/test-mcp-server/README.md

Installs project dependencies using npm. Ensure Node.js 22+ and npm 10+ are installed.

```bash
npm install
```

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

### Initialize Tambo Project by Name

Source: https://github.com/tambo-ai/tambo/blob/main/cli/AGENTS.md

Create a new project by specifying its name. This flow requires authentication.

```bash
tambo init --project-name=myapp
```

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

### Install Dependencies with npm

Source: https://github.com/tambo-ai/tambo/blob/main/docs/AGENTS.md

Command to install the Tambo React package. This is a basic installation command for adding the necessary dependencies to your project.

```bash
npm install @tambo-ai/react
```

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

### Non-Interactive tambo init Example

Source: https://github.com/tambo-ai/tambo/blob/main/plans/agent-friendly-cli.md

Demonstrates how to run `tambo init` in a non-interactive mode, suitable for CI/CD pipelines. Shows error output when required arguments are missing and the successful execution with necessary flags.

```bash
$ CI=true tambo init
Error: Project name required.

Run one of:
  tambo init --project-name=myapp    # Create new project
  tambo init --project-id=abc123     # Use existing project
  tambo init --yes --project-name=myapp  # Skip all prompts

$ echo $?
```

```bash
$ CI=true tambo init --yes --project-name=myapp
✔ Project created: myapp
✔ SDK installed
✔ Configuration written to .env.local

$ echo $?
```

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

### Preview Tambo Component Installation

Source: https://github.com/tambo-ai/tambo/blob/main/cli/AGENTS.md

Use the --dry-run flag to see which components would be installed without actually performing the installation.

```bash
tambo add <component> --dry-run  # Preview without installing
```

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

### TamboProvider with All Options

Source: https://github.com/tambo-ai/tambo/blob/main/docs/content/docs/reference/react-sdk-legacy/providers.mdx

Example demonstrating how to configure TamboProvider with all available options, including custom components, tools, context helpers, and streaming settings.

```tsx
import {
  TamboProvider,
  currentPageContextHelper,
  type TamboComponent,
  type TamboTool,
} from "@tambo-ai/react";

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

const tools: TamboTool[] = [
  {
    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.TAMBO_API_KEY}
  components={components}
  tools={tools}
  contextHelpers={{
    currentPage: currentPageContextHelper,
  }}
  streaming={true}
  autoGenerateThreadName={true}
  autoGenerateNameThreshold={3}
>
  <App />
</TamboProvider>;
```

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

### Install Tambo Dependencies

Source: https://github.com/tambo-ai/tambo/blob/main/plugins/tambo/skills/building-with-tambo/SKILL.md

Install the Tambo React package and Zod for validation using your project's package manager. If Zod is not already installed, it's required.

```bash
# npm
npm install @tambo-ai/react
npm install zod  # if no Zod installed

# yarn
yarn add @tambo-ai/react
yarn add zod

# pnpm
pnpm add @tambo-ai/react
pnpm add zod

# Monorepo (install in the correct workspace)
yarn workspace <app-name> add @tambo-ai/react zod
pnpm --filter <app-name> add @tambo-ai/react zod
npm install @tambo-ai/react zod -w <app-name>
```

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

### Initialize Tambo Project

Source: https://github.com/tambo-ai/tambo/blob/main/docs/content/docs/reference/cli/workflows.mdx

Use this command to set up a new Tambo project. It initializes the project structure and necessary configuration files.

```bash
# 1. Setup project
npx tambo init

# 2. Add chat component
npx tambo add message-thread-full

# 3. Configure in your app
# Add TamboProvider to layout.tsx
# Import and use MessageThreadFull component
```

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

### List Components with Tambo CLI

Source: https://github.com/tambo-ai/tambo/blob/main/plans/agent-friendly-cli.md

List installed and available components in a human-readable table format.

```bash
tambo list # Human-readable table
```

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

### Install Tambo and Clerk Packages

Source: https://github.com/tambo-ai/tambo/blob/main/docs/content/docs/guides/add-authentication/clerk.mdx

Install the necessary packages for Tambo and Clerk integration.

```bash
npm install @clerk/nextjs @tambo-ai/react
```

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

### Testing the built create-tambo-app package locally

Source: https://github.com/tambo-ai/tambo/blob/main/create-tambo-app/AGENTS.md

Instructions for building the package and then running the created app locally for testing purposes.

```bash
npm run build
node dist/index.js my-test-app
```

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

### Dependency Resolution Example

Source: https://github.com/tambo-ai/tambo/blob/main/docs/content/docs/reference/cli/commands/upgrade.mdx

After selecting components for upgrade, the CLI displays the dependencies that will be included automatically. This ensures all required components are upgraded together.

```bash
# After selecting components:
# ✓ Selected 2 components
# ℹ Including dependencies:
#   • button (required by form)
#   • card (required by message-thread-panel)
# 
# ✓ Will upgrade 4 components total
```

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

### List Installed Tambo Components

Source: https://github.com/tambo-ai/tambo/blob/main/docs/content/docs/reference/cli/workflows.mdx

Check the components currently installed in your project using `npx tambo list`. To check for available updates without installing them, use `npx tambo update --dry-run`.

```bash
# See what components you have
npx tambo list

# Check if updates are available
npx tambo update --dry-run
```

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

### Complete React Component Example with TamboProvider

Source: https://github.com/tambo-ai/tambo/blob/main/docs/AGENTS.md

Demonstrates how to set up a React component with TamboProvider, including necessary imports and schema definitions. This example shows a complete context for a 'WeatherCard' component.

```tsx
// ✅ Complete context
import { TamboProvider } from "@tambo-ai/react";
import { z } from "zod";

const components = [
  {
    name: "WeatherCard",
    description: "Shows current weather for a city",
    component: WeatherCard,
    propsSchema: z.object({
      city: z.string(),
      temperature: z.number(),
    }),
  },
];

export function App() {
  return (
    <TamboProvider components={components}>
      <Chat />
    </TamboProvider>
  );
}
```

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

### Install MCP Dependencies

Source: https://github.com/tambo-ai/tambo/blob/main/docs/content/docs/reference/react-sdk-legacy/mcp.mdx

Install the necessary peer dependencies for MCP functionality using npm.

```bash
npm install @modelcontextprotocol/sdk zod zod-to-json-schema
```

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

### Initialize STLC Configuration

Source: https://github.com/tambo-ai/tambo/blob/main/plans/stainless-migration.md

Initializes the STLC configuration by downloading a fresh bundle from the cloud. This command requires a fresh bundle download at execution time.

```bash
stlc init --from-cloud ./stainless-hydra-ai.zip
```

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

### Get Interactable Snapshot

Source: https://github.com/tambo-ai/tambo/blob/main/docs/content/docs/reference/react-sdk-legacy/hooks.mdx

Use `useCurrentInteractablesSnapshot` to get a cloned snapshot of the current interactable components.

```typescript
const snapshot = useCurrentInteractablesSnapshot()
```

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

### Use Legacy Peer Dependencies

Source: https://github.com/tambo-ai/tambo/blob/main/docs/content/docs/reference/cli/commands/init.mdx

Initialize the project while using legacy peer dependency resolution.

```bash
npx tambo init --legacy-peer-deps
```