Skip to content

cli

Directory actions

More options

Directory actions

More options

Latest commit

 

History

History
 
 

cli

Folders and files

NameName
Last commit message
Last commit date

parent directory

..
src
src
 
 
CHANGELOG.md
CHANGELOG.md
 
 
README.md
README.md
 
 
eslint.config.mjs
eslint.config.mjs
 
 
package.json
package.json
 
 
tsconfig.json
tsconfig.json
 
 

README.md

tambo-cli

The Official CLI for tambo ui.

⚠️ Note: This project is currently in active development. APIs and features may change.

Quick Start

npx tambo full-send

This command will:

  1. Set up your Tambo API key
  2. Install required components
  3. Configure your project with necessary dependencies

Installation

While you can install globally, we recommend using npx to ensure you're always using the latest version:

# Using npx (recommended)
npx tambo <command>

Commands

init

Initialize Tambo in your Next.js project. Two modes available:

# Full setup - recommended for new projects
npx tambo full-send

# Basic setup - just API key configuration
npx tambo init

add <component-name>

Add a Tambo component to your project:

# Basic usage
npx tambo add message

# With legacy peer dependencies flag
npx tambo add message --legacy-peer-deps

update <component-name>

Update an existing Tambo component in your project:

# Basic usage
npx tambo update message

# With legacy peer dependencies flag
npx tambo update message --legacy-peer-deps

Available components:

Chat 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
  • thread-content - Message thread with grouping and timestamps
  • thread-history - Chat history management
  • message-input - Rich text input
  • message - Individual message display with content formatting
  • message-suggestions - AI-powered message suggestions

Navigation & Control

  • control-bar - Spotlight-style command palette
  • thread-list - Organized chat thread navigation

Form & Input

  • form - Dynamic form with validation
  • input-fields - Text inputs
  • map - Interactive Map

Data Visualization

  • graph - Interactive charts (line, bar, scatter, pie)

Project Structure

When you add components, they'll be installed in your project following this structure:

your-next-app/
├── src/
│   ├── components/
│   │   └── ui/
│   │       ├── message-thread-full.tsx
│   │       └── ...
│   ├── lib/
│   │   └── tambo.ts       # Tool registry
│   └── app/
│       └── layout.tsx     # you could add TamboProvider here (for entire app)
└── .env.local            # Your API key configuration

Environment Setup

The CLI will automatically create/update your .env.local file with:

NEXT_PUBLIC_TAMBO_API_KEY=your-api-key

TamboProvider Setup

After initialization, you can add the TamboProvider in one of two ways:

Option 1: Page-specific (easiest)

If you just want to add Tambo to specific pages or components, this is the quickest approach:

// In a specific page file (e.g., app/ai-chat/page.tsx)
"use client"; // Important! TamboProvider is a client component

import { TamboProvider } from "@tambo-ai/react";
import { components } from "../../lib/tambo"; // Import components
import { MessageThreadFull } from "@/components/ui/message-thread-full";

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

Option 2: App-wide in layout file (best practice)

This approach provides better context sharing between components and is recommended for production apps:

// In your layout file (e.g., app/layout.tsx)
"use client"; // Important! TamboProvider is a client component

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

export default function RootLayout({ children }) {
  return (
    <html lang="en">
      <body>
        <TamboProvider
          apiKey={process.env.NEXT_PUBLIC_TAMBO_API_KEY ?? ""}
          components={components}
        >
          {children}
        </TamboProvider>
      </body>
    </html>
  );
}

Note: The TamboProvider manages client-side state for features like thread management, message history, and component state. The "use client" directive is required.

Documentation

For detailed documentation and examples, visit docs.tambo.co

For more information about all available components and installation options, check out the tambo ui showcase.

Development Status

This CLI is currently in active development. While core features are stable, you might encounter:

  • Regular updates with new features
  • API refinements
  • Additional component options
  • Enhanced configuration options

See demos of the components in action:

--> here <--

License

MIT License - see the LICENSE file for details.

Join the Community

We're building tools for the future of user interfaces. Your contributions matter.

Star this repo to support our work.

Join our Discord to connect with other developers.

Built by developers, for developers.
Because we believe the future is generative.