Integrate

If you have an existing React 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 MessageThreadCollapsible component

The <MessageThreadCollapsible> 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: