Add Tambo to an existing app

Tambo works with Next.js, Vite, and other React frameworks. The CLI detects your framework automatically.

1. Install

npx tambo full-send

This command:

Sets up Tambo and gets you an API key
Detects your framework and configures the build toolchain
Installs pre-built chat components
Shows how to wrap your app with TamboProvider

For manual setup, run npx tambo init instead (just the API key). If you don't have an account, sign up free.

2. Add the provider

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!}
      userKey="user-1"
    >
      {children}
    </TamboProvider>
  );
}

API key setup

Create a .env.local file in your project root:

NEXT_PUBLIC_TAMBO_API_KEY=your_api_key_here

Don't commit this file to version control.

The TamboProvider only works in the browser. On Next.js, add "use client" at the top of the file.

The userKey identifies the current user — threads are scoped per user. Replace "user-1" with a real user ID from your auth system. See User Authentication for details.

src/App.tsx

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

export default function App() {
  return (
    <TamboProvider
      apiKey={import.meta.env.VITE_TAMBO_API_KEY!}
      userKey="user-1"
    >
      {/* your app content */}
    </TamboProvider>
  );
}

API key setup

Create a .env.local file in your project root:

VITE_TAMBO_API_KEY=your_api_key_here

Don't commit this file to version control.

3. Add the chat component

The full-send command installed a MessageThreadCollapsible component. Add it to your main page:

src/app/page.tsx

"use client";
import { MessageThreadCollapsible } from "../source/components/message-thread-collapsible";

export default function Home() {
  return (
    <main>
      <MessageThreadCollapsible />
    </main>
  );
}

src/App.tsx

import { MessageThreadCollapsible } from "./components/tambo/message-thread-collapsible";

export default function App() {
  return (
    <main>
      <MessageThreadCollapsible />
    </main>
  );
}

4. Run

npm run dev

Next steps

Give the agent access to your own React components

Add tools

Let the agent call functions and fetch data

Connect MCP servers

Integrate external systems with Model Context Protocol