Commands
Loading...

full-send

Run the `tambo full-send` command to initialize your project, generate config, and install recommended Tambo components in one step.

npx tambo full-send

For instant project setup, performs the same project setup steps as init, and also installs a few useful components.

What it does:

  1. Sets up authentication and API key
  2. Creates the lib/tambo.ts configuration file
  3. Prompts you to select starter components to install
  4. Installs selected components and their dependencies
  5. Provides setup instructions with code snippets

Examples:

# Interactive setup with component selection
npx tambo full-send

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

# Use legacy peer deps
npx tambo full-send --legacy-peer-deps

Component Selection

The full-send command presents an interactive checkbox list of curated starter components:

? Select starter components to install: (Press <space> to select, <a> to toggle all)
❯ ◯ message-thread-full - Full-featured message thread with controls
  ◯ message-thread-panel - Message thread optimized for side panels
  ◯ message-thread-collapsible - Collapsible message thread
  ◯ control-bar - Control panel for managing thread settings

Available starter components:

  • message-thread-full - Complete message thread with all features, perfect for full-page chat interfaces
  • message-thread-panel - Optimized for sidebars and side panels, great for embedded chat
  • message-thread-collapsible - Can expand/collapse, ideal for compact layouts or mobile
  • control-bar - Settings and controls for managing thread behavior

Selection options:

  • Press <space> to select/deselect individual components
  • Press <a> to toggle all components at once
  • Press <enter> to confirm your selection

Automatic setup:

After you select components, the CLI:

  1. Installs all selected components
  2. Installs all required dependencies automatically
  3. Creates the lib/tambo.ts configuration file
  4. Registers all components in the configuration
  5. Copies TamboProvider setup code to your clipboard

Clipboard Integration

The setup code for TamboProvider is automatically copied to your clipboard. Just paste it into your layout file to complete the setup.

To skip selection and install all starter components:

npx tambo full-send --yes

Manual Provider Setup:

After running full-send, add the TamboProvider to your layout file:

app/layout.tsx
"use client";
import { TamboProvider } from "@tambo-ai/react";
import { components } from "../lib/tambo";
import { MessageThreadFull } from "@/components/tambo/message-thread-full";

export default function Layout({ children }) {
  return (
    <div>
      <TamboProvider
        apiKey={process.env.NEXT_PUBLIC_TAMBO_API_KEY ?? ""}
        components={components}
      >
        <MessageThreadFull />
        {children}
      </TamboProvider>
    </div>
  );
}

Manual Styling Setup

The full-send command automatically configures your CSS and Tailwind based on your version. If you need to manually verify or update the configuration:

Tailwind CSS v3 Configuration

Check your globals.css file includes:

app/globals.css
@tailwind base;
@tailwind components;
@tailwind utilities;

@layer base {
  :root {
    /* Tailwind CSS Variables customized with Tambo colors */
    --background: 0 0% 100%;
    --foreground: 240 10% 3.9%;
    --card: 0 0% 100%;
    --card-foreground: 240 10% 3.9%;
    --popover: 0 0% 100%;
    --popover-foreground: 240 10% 3.9%;
    --primary: 235 12% 21%;
    --primary-foreground: 0 0% 98%;
    --secondary: 218 11% 46%;
    --secondary-foreground: 0 0% 100%;
    --muted: 217 14% 90%;
    --muted-foreground: 217 14% 68%;
    --accent: 240 4.8% 95.9%;
    --accent-foreground: 240 5.9% 10%;
    --destructive: 0 84.2% 60.2%;
    --border: 207 22% 90%;
    --input: 240 5.9% 90%;
    --ring: 240 10% 3.9%;
    --chart-1: 30 80% 54.9%;
    --chart-2: 339.8 74.8% 54.9%;
    --chart-3: 219.9 70.2% 50%;
    --chart-4: 160 60% 45.1%;
    --chart-5: 280 64.7% 60%;

    /* Tambo-specific variables for component layouts */
    --radius: 0.5rem;
    --container: 210 29% 97%;
    --backdrop: 210 88% 14% / 0.25;
    --muted-backdrop: 210 88% 14% / 0.1;
    --panel-left-width: 500px;
    --panel-right-width: 500px;
    --sidebar-width: 3rem;
  }

  .dark {
    /* Dark mode variables */
    --background: 240 10% 3.9%;
    --foreground: 0 0% 98%;
    --card: 240 10% 3.9%;
    --card-foreground: 0 0% 98%;
    --popover: 240 10% 3.9%;
    --popover-foreground: 0 0% 98%;
    --primary: 0 0% 98%;
    --primary-foreground: 240 5.9% 10%;
    --secondary: 240 3.7% 15.9%;
    --secondary-foreground: 0 0% 98%;
    --muted: 240 3.7% 15.9%;
    --muted-foreground: 240 5% 64.9%;
    --accent: 240 3.7% 15.9%;
    --accent-foreground: 0 0% 98%;
    --destructive: 0 62.8% 30.6%;
    --border: 240 3.7% 15.9%;
    --input: 240 3.7% 15.9%;
    --ring: 240 4.9% 83.9%;
    --chart-1: 30 80% 54.9%;
    --chart-2: 339.8 74.8% 54.9%;
    --chart-3: 219.9 70.2% 50%;
    --chart-4: 160 60% 45.1%;
    --chart-5: 280 64.7% 60%;

    /* Tambo-specific variables for component layouts */
    --radius: 0.5rem;
    --container: 210 29% 97%;
    --backdrop: 210 88% 14% / 0.25;
    --muted-backdrop: 210 88% 14% / 0.1;
    --panel-left-width: 500px;
    --panel-right-width: 500px;
    --sidebar-width: 3rem;
  }
}

Verify your tailwind.config.ts includes:

tailwind.config.ts
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;

Tailwind CSS v4 Configuration

For v4, check your globals.css includes:

app/globals.css
@import "tailwindcss";

@custom-variant dark (&:is(.dark *));

@theme inline {
  /* Color mappings for Tailwind v4 */
  --color-background: var(--background);
  --color-foreground: var(--foreground);
  --color-card: var(--card);
  --color-card-foreground: var(--card-foreground);
  --color-popover: var(--popover);
  --color-popover-foreground: var(--popover-foreground);
  --color-primary: var(--primary);
  --color-primary-foreground: var(--primary-foreground);
  --color-secondary: var(--secondary);
  --color-secondary-foreground: var(--secondary-foreground);
  --color-muted: var(--muted);
  --color-muted-foreground: var(--muted-foreground);
  --color-accent: var(--accent);
  --color-accent-foreground: var(--accent-foreground);
  --color-destructive: var(--destructive);
  --color-border: var(--border);
  --color-input: var(--input);
  --color-ring: var(--ring);
  --color-chart-1: var(--chart-1);
  --color-chart-2: var(--chart-2);
  --color-chart-3: var(--chart-3);
  --color-chart-4: var(--chart-4);
  --color-chart-5: var(--chart-5);

  /* Tambo-specific color mappings */
  --color-container: var(--container);
  --color-backdrop: var(--backdrop);
  --color-muted-backdrop: var(--muted-backdrop);
}

:root {
  /* Tailwind v4 uses oklch() color format */
  --background: oklch(1 0 0);
  --foreground: oklch(0.14 0 285);
  --card: oklch(1 0 0);
  --card-foreground: oklch(0.14 0 285);
  --popover: oklch(1 0 0);
  --popover-foreground: oklch(0.14 0 285);
  --primary: oklch(0.31 0.02 281);
  --primary-foreground: oklch(0.98 0 0);
  --secondary: oklch(0.54 0.027 261);
  --secondary-foreground: oklch(1 0 0);
  --muted: oklch(0.92 0 260);
  --muted-foreground: oklch(0.73 0.022 260);
  --accent: oklch(0.97 0 286);
  --accent-foreground: oklch(0.21 0 286);
  --destructive: oklch(0.64 0.2 25);
  --border: oklch(0.93 0 242);
  --input: oklch(0.92 0 286);
  --ring: oklch(0.14 0 285);
  --chart-1: oklch(0.72 0.15 60);
  --chart-2: oklch(0.62 0.2 6);
  --chart-3: oklch(0.53 0.2 262);
  --chart-4: oklch(0.7 0.13 165);
  --chart-5: oklch(0.62 0.2 313);

  /* Tambo-specific layout variables */
  --container: oklch(0.98 0 247);
  --backdrop: oklch(0.25 0.07 252 / 0.25);
  --muted-backdrop: oklch(0.25 0.07 252 / 0.1);
  --radius: 0.5rem;
  --panel-left-width: 500px;
  --panel-right-width: 500px;
  --sidebar-width: 3rem;
}

.dark {
  /* Dark mode with oklch() colors */
  --background: oklch(0.145 0 0);
  --foreground: oklch(0.985 0 0);
  --card: oklch(0.205 0 0);
  --card-foreground: oklch(0.985 0 0);
  --popover: oklch(0.205 0 0);
  --popover-foreground: oklch(0.985 0 0);
  --primary: oklch(0.922 0 0);
  --primary-foreground: oklch(0.205 0 0);
  --secondary: oklch(0.269 0 0);
  --secondary-foreground: oklch(0.985 0 0);
  --muted: oklch(0.269 0 0);
  --muted-foreground: oklch(0.708 0 0);
  --accent: oklch(0.269 0 0);
  --accent-foreground: oklch(0.985 0 0);
  --destructive: oklch(0.704 0.191 22.216);
  --border: oklch(1 0 0 / 10%);
  --input: oklch(1 0 0 / 15%);
  --ring: oklch(0.556 0 0);
  --chart-1: oklch(0.72 0.15 60);
  --chart-2: oklch(0.62 0.2 6);
  --chart-3: oklch(0.53 0.2 262);
  --chart-4: oklch(0.7 0.13 165);
  --chart-5: oklch(0.62 0.2 313);

  /* Tambo-specific layout variables */
  --container: oklch(0.98 0 247);
  --backdrop: oklch(0.25 0.07 252 / 0.25);
  --muted-backdrop: oklch(0.25 0.07 252 / 0.1);
  --radius: 0.5rem;
  --panel-left-width: 500px;
  --panel-right-width: 500px;
  --sidebar-width: 3rem;
}

@layer base {
  * {
    @apply border-border outline-ring/50;
  }
  body {
    @apply bg-background text-foreground;
    font-family: Arial, Helvetica, sans-serif;
  }
}

Automatic Configuration

The full-send command detects your Tailwind version and applies the appropriate CSS format automatically. You typically won't need to manually configure these files unless you're customizing the default Tambo styling.

CSS Variable Requirements

Tambo components require specific CSS variables to function properly. The layout variables (--panel-left-width, --panel-right-width, --sidebar-width) control component dimensions and should not be removed.

For detailed information about what gets configured or for manual setup, see:

CSS & Tailwind Configuration

Complete guide to CSS variables and Tailwind configuration changes

init

Use the `tambo init` command to create a Tambo project, get an API key, and configure authentication for your app.

add

Add Tambo components to your project, install dependencies, and wire up CSS and Tailwind with the `tambo add` command.

On this page

Component SelectionManual Styling SetupTailwind CSS v3 ConfigurationTailwind CSS v4 Configuration