Start From Scratch

Guide users through creating a new Tambo project with recommended technologies.

Quick Start (Recommended Stack)

npx tambo create-app my-app --template=standard cd my-app npm run dev

This creates a Next.js + Tailwind + TypeScript + Zod project ready for generative UI.

Guided Flow

When user wants to start fresh, ask about their preferences:

Question 1: Framework

What framework would you like to use?

1. Next.js (Recommended) - Full-stack React with App Router
2. Vite - Fast, lightweight React setup
3. Other - I'll adapt to your choice

Recommendation reasoning:

• Next.js: Best for production apps, built-in API routes, great DX

• Vite: Great for SPAs, faster dev server, simpler setup

Question 2: Styling

How would you like to style your app?

1. Tailwind CSS (Recommended) - Utility-first, works great with Tambo components
2. Plain CSS/CSS Modules - No framework, full control
3. Other (styled-components, Emotion, etc.)

Recommendation reasoning:

• Tailwind: Tambo CLI components use Tailwind by default

• Plain CSS: Works fine, but need to style Tambo components manually

Question 3: TypeScript

Use TypeScript?

1. Yes (Recommended) - Type safety, better IDE support
2. No - Plain JavaScript

Recommendation reasoning:

• TypeScript: Tambo's Zod schemas provide excellent type inference

Technology Stacks

Recommended Stack (Default)

Next.js 14+ (App Router) ├── TypeScript ├── Tailwind CSS ├── Zod (for schemas) └── @tambo-ai/react

npx tambo create-app my-app --template=standard

Vite Stack

Vite + React ├── TypeScript ├── Tailwind CSS ├── Zod └── @tambo-ai/react

npm create vite@latest my-app -- --template react-ts cd my-app npm install npm install @tambo-ai/react zod npm install -D tailwindcss postcss autoprefixer npx tailwindcss init -p npx tambo init --api-key=sk_...

Minimal Stack

Vite + React ├── TypeScript ├── Plain CSS ├── Zod └── @tambo-ai/react

npm create vite@latest my-app -- --template react-ts cd my-app npm install @tambo-ai/react zod npx tambo init --api-key=sk_...

Setup Steps by Stack

Next.js (Recommended)

1. Create app

npx tambo create-app my-app --template=standard cd my-app

2. Initialize with API key

npx tambo init --api-key=sk_...

3. Start development

npm run dev

Vite + Tailwind

1. Create Vite app

npm create vite@latest my-app -- --template react-ts cd my-app

2. Install dependencies

npm install @tambo-ai/react zod npm install -D tailwindcss postcss autoprefixer npx tailwindcss init -p

3. Configure Tailwind (tailwind.config.js)

content: ["./index.html", "./src/**/*.{js,ts,jsx,tsx}"]

4. Add Tailwind directives to src/index.css

@tailwind base; @tailwind components; @tailwind utilities;

5. Initialize Tambo (sets up .env.local automatically)

npx tambo init --api-key=sk_...

6. Start development

npm run dev

Vite Minimal (No Tailwind)

1. Create Vite app

npm create vite@latest my-app -- --template react-ts cd my-app

2. Install dependencies

npm install @tambo-ai/react zod

3. Initialize Tambo (sets up .env.local automatically)

npx tambo init --api-key=sk_...

4. Start development

npm run dev

Project Structure

After setup, create this structure:

my-app/ ├── src/ │ ├── components/ │ │ └── tambo/ # Tambo UI components (from CLI) │ ├── lib/ │ │ └── tambo.ts # Component registry │ ├── App.tsx # Main app with TamboProvider │ └── main.tsx # Entry point ├── .env.local # API key └── package.json

First Component

After project setup, guide user to create their first component:

// src/components/Greeting.tsx import { z } from "zod";

export const GreetingSchema = z.object({ name: z.string().describe("Person's name"), mood: z.enum(["happy", "excited", "friendly"]).optional(), });

type GreetingProps = z.infer<typeof GreetingSchema>;

export function Greeting({ name, mood = "friendly" }: GreetingProps) { const emojis = { happy: "😊", excited: "🎉", friendly: "👋" }; return ( <div className="p-4 bg-blue-100 rounded-lg"> <p className="text-lg"> Hello, {name}! {emojis[mood]} </p> </div> ); }

// src/lib/tambo.ts import { TamboComponent } from "@tambo-ai/react"; import { Greeting, GreetingSchema } from "@/components/Greeting";

export const components: TamboComponent[] = [ { name: "Greeting", component: Greeting, description: "Greets a person by name. Use when user wants to say hello or greet someone.", propsSchema: GreetingSchema, }, ];

Adding Chat UI

npx tambo add message-thread-full --yes

Then use in your app:

import { MessageThreadFull } from "@/components/tambo/message-thread-full";

function App() { return ( <div className="h-screen"> <MessageThreadFull /> </div> ); }

Supported Technologies

Technology Support Level Notes

Next.js 14+ Full Recommended, App Router preferred

Vite Full Great for SPAs

Create React App Partial Works but CRA is deprecated

Remix Partial Works with client components

TypeScript Full Strongly recommended

JavaScript Full Works but less type safety

Tailwind CSS Full Default for CLI components

Plain CSS Full Need custom component styling

CSS Modules Full Supported

Zod Required Used for all schemas