add

npx tambo add <componentname>

Adds a component hooked up to Tambo to your app. This command will install the component file directly into the /components/tambo directory of your app so you can easily customize the behavior and styles. It will also install the components' dependencies and update your styles.

Available Components:

• message-thread-full - Full-screen chat interface with history and typing indicators
• message-thread-panel - Split-view chat with integrated workspace
• message-thread-collapsible - Collapsible chat for sidebars
• control-bar - Spotlight-style command palette
• form - AI-powered form components
• graph - Interactive graph visualization
• canvas-space - Canvas workspace for visual AI interactions
• input-fields - Smart input field components

Examples:

# Add a single component
npx tambo add form

# Add multiple components
npx tambo add form graph canvas-space

# Add to custom directory
npx tambo add form --prefix=src/components/ui

# Skip confirmation prompts
npx tambo add form --yes

# Use legacy peer deps (for dependency conflicts)
npx tambo add form --legacy-peer-deps

Automatic Configuration

The add command automatically configures your CSS and Tailwind setup based on your project's Tailwind CSS version:

• Detects your Tailwind version (v3 or v4) automatically
• Updates your globals.css with required CSS variables
• Updates your tailwind.config.ts (v3 only) with basic configuration
• Preserves your existing styles and configuration

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

Automatic Dependency Resolution

When you add components, the CLI automatically resolves and installs all dependencies:

npx tambo add message-thread-full

# Output:
✓ Analyzing dependencies...
ℹ Will install 5 components:
  • message-thread-full (selected)
  • button (dependency)
  • card (dependency)
  • scroll-area (dependency)
  • textarea (dependency)

? Continue? (Y/n)

What happens:

1. You specify which components to add
2. CLI analyzes component dependencies
3. All required dependencies are automatically included
4. CLI shows you the complete list before installing

You don't need to manually track which components depend on others - the CLI handles this for you.

Legacy Location Detection

If you're working with an existing project that has Tambo components in the legacy components/ui/ location, the CLI will detect this and offer guidance:

npx tambo add form

# Output:
⚠ Warning: Found existing Tambo components in components/ui/
  • message-thread-full
  • control-bar

Recommended: Components should be in components/tambo/

? What would you like to do?
  ❯ Migrate components to components/tambo/ (recommended)
    Continue installing to components/ui/ (legacy)
    Cancel

# If you continue:
⚠ Installing to components/ui/ for consistency with existing components.
⚠ This location is deprecated. Run `npx tambo migrate` to move to components/tambo/

Why this matters:

• Current standard: Components should live in components/tambo/
• Legacy location: Older projects may have components in components/ui/
• Mixed locations cause problems: Import paths become confusing

Recommended action:

Migrate your components before adding new ones:

npx tambo migrate
npx tambo add form

See the migrate command documentation for details on the migration process.

If you skip migration:

The CLI will install new components in components/ui/ to match your existing setup, but you'll continue to see warnings. It's best to migrate when convenient.