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