Build with Tambo
Detect tech stack and integrate Tambo while preserving existing patterns.
Reference Guides
Use these guides when you need deeper implementation details for a specific area:
- Components - Create and register Tambo components (generative and interactable).
- Component Rendering - Handle streaming props, loading states, and persistent component state.
- Threads and Input - Manage conversations, suggestions, voice input, image attachments, and thread switching.
- Tools and Context - Add custom tools, MCP servers, context helpers, and resources.
- CLI Reference - Use
tambo init,tambo add, andcreate-appwith non-interactive flags and exit codes. - Add Components to Registry - Convert existing React components into Tambo-ready registrations with schemas and descriptions.
These references are duplicated across both skills so each skill works independently.
Workflow
- Detect tech stack - Analyze package.json and project structure
- Confirm with user - Present findings, ask about preferences
- Install dependencies - Add @tambo-ai/react and peer deps
- Create provider setup - Adapt to existing patterns
- Register first component - Demonstrate with existing component
Step 1: Detect Tech Stack
Check these files to understand the project:
bash1# Key files to read 2package.json # Dependencies and scripts 3tsconfig.json # TypeScript config 4next.config.* # Next.js 5vite.config.* # Vite 6tailwind.config.* # Tailwind CSS 7postcss.config.* # PostCSS 8src/index.* or app/ # Entry points
Detection Checklist
| Technology | Detection |
|---|---|
| Next.js | next in dependencies, next.config.* exists |
| Vite | vite in devDependencies, vite.config.* exists |
| Create React App | react-scripts in dependencies |
| TypeScript | typescript in deps, tsconfig.json exists |
| Tailwind | tailwindcss in deps, config file exists |
| Plain CSS | No Tailwind, CSS files in src/ |
| Zod | zod in dependencies |
| Other validation | yup, joi, superstruct in deps |
Step 2: Confirm with User
Present findings and ask:
I detected your project uses:
- Framework: Next.js 14 (App Router)
- Styling: Tailwind CSS
- Validation: No Zod (will need to add)
- TypeScript: Yes
Should I:
1. Install Tambo with these settings?
2. Use plain CSS instead of Tailwind for Tambo components?
3. Something else?
Step 3: Install Dependencies
bash1# Core (always required) 2npm install @tambo-ai/react 3 4# If no Zod installed 5npm install zod
Step 4: Create Provider Setup
Next.js App Router
tsx1// app/providers.tsx 2"use client"; 3import { TamboProvider } from "@tambo-ai/react"; 4import { components } from "@/lib/tambo"; 5 6export function Providers({ children }: { children: React.ReactNode }) { 7 return ( 8 <TamboProvider 9 apiKey={process.env.NEXT_PUBLIC_TAMBO_API_KEY} 10 components={components} 11 > 12 {children} 13 </TamboProvider> 14 ); 15}
tsx1// app/layout.tsx 2import { Providers } from "./providers"; 3 4export default function RootLayout({ children }) { 5 return ( 6 <html> 7 <body> 8 <Providers>{children}</Providers> 9 </body> 10 </html> 11 ); 12}
Next.js Pages Router
tsx1// pages/_app.tsx 2import { TamboProvider } from "@tambo-ai/react"; 3import { components } from "@/lib/tambo"; 4 5export default function App({ Component, pageProps }) { 6 return ( 7 <TamboProvider 8 apiKey={process.env.NEXT_PUBLIC_TAMBO_API_KEY} 9 components={components} 10 > 11 <Component {...pageProps} /> 12 </TamboProvider> 13 ); 14}
Vite / CRA
tsx1// src/main.tsx 2import { TamboProvider } from "@tambo-ai/react"; 3import { components } from "./lib/tambo"; 4import App from "./App"; 5 6ReactDOM.createRoot(document.getElementById("root")!).render( 7 <TamboProvider 8 apiKey={import.meta.env.VITE_TAMBO_API_KEY} 9 components={components} 10 > 11 <App /> 12 </TamboProvider>, 13);
Step 5: Create Component Registry
tsx1// lib/tambo.ts (or src/lib/tambo.ts) 2import { TamboComponent } from "@tambo-ai/react"; 3 4export const components: TamboComponent[] = [ 5 // Components will be registered here 6];
Adapting to Existing Patterns
No Tailwind? Use Plain CSS
If project uses plain CSS or CSS modules, Tambo components can be styled differently:
tsx1// Skip --yes flag to customize styling during add 2npx tambo add message-thread-full 3# Select "CSS Modules" or "Plain CSS" when prompted
Existing Validation Library?
If using Yup/Joi instead of Zod, user can either:
- Add Zod just for Tambo schemas (recommended - small addition)
- Convert schemas (more work, not recommended)
Monorepo?
Run commands from the package that will use Tambo:
bash1cd packages/web 2npx tambo init --api-key=sk_...
Environment Variables
npx tambo init --api-key=sk_... automatically creates .env.local with the correct env var for your framework.
If manual setup is needed (monorepo, read-only filesystem), add the appropriate variable:
| Framework | Variable |
|---|---|
| Next.js | NEXT_PUBLIC_TAMBO_API_KEY |
| Vite | VITE_TAMBO_API_KEY |
| CRA | REACT_APP_TAMBO_API_KEY |
Verification
After setup, verify by creating a simple test:
tsx1import { useTambo } from "@tambo-ai/react"; 2 3function TestComponent() { 4 const { thread, isIdle } = useTambo(); 5 console.log("Tambo connected:", isIdle); 6 return <div>Tambo is set up!</div>; 7}
