Quickstart

Let's get you started with tambo-ai in 3 steps.

Step 1: Install tambo-ai

npx tambo full-send

This command will:

• Setup a tambo 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>

Once it completes, you can update your src/app/layout.tsx file to enable tambo:

Step 2. Add the TamboProvider

<TamboProvider apiKey={process.env.NEXT_PUBLIC_TAMBO_API_KEY!}>
  {children}
</TamboProvider>

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:

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

Don't forget to run your app

npm run dev

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