tambo-ai

Quickstart

Get started with Tambo - either with our template or by adding to your existing app

Quickstart

There are two ways to get started with Tambo:

  1. Using our template project (recommended for new projects)
  2. Adding Tambo to an existing Next.js/React application

Using the Template

The Tambo template provides a pre-configured project setup to help you get started quickly. You can install it using either a step-by-step approach or a single command.

Step by Step Installation

Follow these commands one at a time:

Clone the template repository
git clone https://github.com/tambo-ai/tambo-template.git
Navigate to the project directory
cd tambo-template
Install dependencies
npm install
Initialize Tambo
npx tambo init

This command will walk you through setting up your project and obtaining your API key. If you don't already have an account, sign up for free to get your API key.

Run the app
npm run dev

or install everything at once, you can run this single command:

Quick installation
npx create-tambo-app@latest .

Adding to Existing App

If you have an existing Next.js application and want to add Tambo functionality, follow these steps:

Step 1: Install tambo-ai

npx tambo full-send

This command will:

  • Setup Tambo in your existing project and get you an API key
  • Install components that are hooked up to tambo-ai
  • Show you how to wrap your app with the <TamboProvider>

If you prefer manual setup, you can run npx tambo init which will just get you set up with an API key. If you don't have an account yet, sign up for free first.

Step 2: Add the TamboProvider

Once the installation completes, update your src/app/layout.tsx file to enable Tambo:

src/app/layout.tsx
"use client";
 
import { TamboProvider } from "@tambo-ai/react";
 
export default function RootLayout({
  children,
}: {
  children: React.ReactNode;
}) {
  return (
    <TamboProvider apiKey={process.env.NEXT_PUBLIC_TAMBO_API_KEY!}>
      {children}
    </TamboProvider>
  );
}

API Key Setup

You need to create a .env.local file in the root of your project to store your Tambo API key: NEXT_PUBLIC_TAMBO_API_KEY=your_api_key_here Replace your_api_key_here with the actual API key you received during setup. This file should not be committed to version control as it contains sensitive information.

Note that the TamboProvider only works in the browser. On Next.js, specify "use client" at the top of your file to ensure that the TamboProvider is rendered in the browser.

Step 3: Add the MessageThreadFull component

The <MessageThreadFull> component that the full-send command installed provides a complete chat interface for your AI assistant. Here's how to add it to your src/app/page.tsx file:

src/app/page.tsx
"use client";
import { MessageThreadCollapsible } from "../source/components/message-thread-collapsible";
 
export default function Home() {
  return (
    <main>
      <MessageThreadCollapsible />
    </main>
  );
}

Run your app

npm run dev

When you are done, you should see a chat interface like this:

On this page