tambo-cli-test

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:

• Set up your Tambo API key
• Install required components
• 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

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
│   │       └── ...
│   └── app/
│       └── layout.tsx  # Add TamboProvider here
└── .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

Provider Setup

After initialization, add the TamboProvider to your app/layout.tsx:

"use client";

import { TamboProvider } from "@tambo-ai/react";

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

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

Documentation

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

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 of UI is generative and hyper-personalized.