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 init --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 init --full-send

# Basic setup - just API key configuration
npx tambo init

add <component-name>

Add a Tambo component to your project:

npx tambo add message-thread

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
• chat-thread - Message thread with grouping and timestamps
• chat-input - Rich text input
• message - Individual message display with content formatting

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:

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

export default function RootLayout({ children }) {
	return (
		<TamboProvider
			tamboUrl="https://api.tambo.co"
			apiKey={process.env.NEXT_PUBLIC_TAMBO_API_KEY ?? ""}
		>
			{children}
		</TamboProvider>
	);
}

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.