# full-send
URL: /reference/cli/commands/full-send

`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:**

```bash
# 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:

```bash
? 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

<Callout type="info" title="Clipboard Integration">
  The setup code for TamboProvider is automatically copied to your clipboard.
  Just paste it into your layout file to complete the setup.
</Callout>

To skip selection and install all starter components:

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

**Manual Provider Setup:**

After running `full-send`, add the TamboProvider to your app. The CLI detects your framework and shows the appropriate setup code.

import { Tab, Tabs } from "fumadocs-ui/components/tabs";

<Tabs items={["Next.js", "Vite", "Expo"]}>
  <Tab value="Next.js">
    ```tsx title="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>
      );
    }
    ```
  </Tab>

  <Tab value="Vite">
    ```tsx title="src/App.tsx"
    import { TamboProvider } from "@tambo-ai/react";
    import { components } from "./lib/tambo";
    import { MessageThreadFull } from "./components/tambo/message-thread-full";

    export default function App() {
      return (
        <div>
          <TamboProvider
            apiKey={import.meta.env.VITE_TAMBO_API_KEY ?? ""}
            components={components}
          >
            <MessageThreadFull />
          </TamboProvider>
        </div>
      );
    }
    ```
  </Tab>

  <Tab value="Expo">
    For Expo projects, `full-send` skips web component installation since the registry components use DOM and Tailwind CSS. Use `@tambo-ai/react` hooks directly to build your native UI.

    ```tsx title="App.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>
      );
    }
    ```

    See the Expo demos for complete examples: [Activity Logger](https://github.com/tambo-ai/demo-mobile-log), [Music Companion](https://github.com/tambo-ai/music-expo-demo).
  </Tab>
</Tabs>

## 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:**

The default file location is `app/globals.css` for Next.js or `src/index.css` for Vite.

```css title="app/globals.css (Next.js) or src/index.css (Vite)"
@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:**

```tsx title="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:**

The default file location is `app/globals.css` for Next.js or `src/index.css` for Vite.

```css title="app/globals.css (Next.js) or src/index.css (Vite)"
@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;
  }
}
```

<Callout type="info" title="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.
</Callout>

<Callout type="warn" title="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.
</Callout>

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

import { Card, Cards } from "fumadocs-ui/components/card";

<Card href="/reference/cli/configuration" title="CSS & Tailwind Configuration">
  Complete guide to CSS variables and Tailwind configuration changes
</Card>