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: