# Integrate
URL: /getting-started/integrate
This example assumes an application using NextJs, but NextJs is not required.
If you have an existing React application and want to add Tambo functionality, follow these steps:
### Step 1: Install tambo-ai
```bash
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 ``
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:
```tsx title="src/app/layout.tsx"
"use client";
import { TamboProvider } from "@tambo-ai/react";
export default function RootLayout({
children,
}: {
children: React.ReactNode;
}) {
return (
{children}
);
}
```
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 MessageThreadCollapsible component
The `` 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:
```tsx title="src/app/page.tsx"
"use client";
import { MessageThreadCollapsible } from "../source/components/message-thread-collapsible";
export default function Home() {
return (
);
}
```
### Run your app
```bash
npm run dev
```
When you are done, you should see a chat interface like this: