# Add Tambo to an existing app
URL: /getting-started/integrate
import LearnMore from "@/components/learn-more";
Tambo works with Next.js, Vite, Expo, and other React frameworks. The CLI detects your framework automatically.
## 1. Install
```bash
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
import { Tab, Tabs } from "fumadocs-ui/components/tabs";
```tsx title="src/app/layout.tsx"
"use client";
import { TamboProvider } from "@tambo-ai/react";
export default function RootLayout({
children,
}: {
children: React.ReactNode;
}) {
return (
{children}
);
}
```
Create a `.env.local` file in your project root:
```bash
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](/concepts/user-authentication) for details.
```tsx title="src/App.tsx"
import { TamboProvider } from "@tambo-ai/react";
export default function App() {
return (
{/* your app content */}
);
}
```
Create a `.env.local` file in your project root:
```bash
VITE_TAMBO_API_KEY=your_api_key_here
```
Don't commit this file to version control.
```tsx title="App.tsx"
import { TamboProvider } from "@tambo-ai/react";
export default function App() {
return (
{/* your app content */}
);
}
```
Create a `.env` file in your project root:
```bash
EXPO_PUBLIC_TAMBO_API_KEY=your_api_key_here
```
Don't commit this file to version control.
For Expo, the registry components (DOM + Tailwind) won't work in React Native. Use `@tambo-ai/react` hooks directly to build your native UI. See the Expo demos for complete examples: [Activity Logger](https://github.com/tambo-ai/demo-mobile-log), [Music Companion](https://github.com/tambo-ai/music-expo-demo).
## 3. Add the chat component
The `full-send` command installed a `MessageThreadCollapsible` component. Add it to your main page:
```tsx title="src/app/page.tsx"
"use client";
import { MessageThreadCollapsible } from "../source/components/message-thread-collapsible";
export default function Home() {
return (
);
}
```
```tsx title="src/App.tsx"
import { MessageThreadCollapsible } from "./components/tambo/message-thread-collapsible";
export default function App() {
return (
);
}
```
## 4. Run
```bash
npm run dev
```