start-from-scratch

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