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:

git clone https://github.com/tambo-ai/tambo-template.git

cd tambo-template

npm install

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.

npm run dev

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

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:

"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>
  );
}

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:

"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: