start-from-scratch

Original：🇺🇸 English
Translated

Guides creation of a new Tambo project from scratch with technology recommendations. Use when user wants to start a NEW project, build a new app with Tambo, create something from nothing, or needs help choosing technologies for a new generative UI application. For adding Tambo to EXISTING projects, use add-to-existing-project skill instead.

2installs
Sourcetambo-ai/tambo
Added on

NPX Install

npx skill4agent add tambo-ai/tambo start-from-scratch

Tags

Translated version includes tags in frontmatter
tambo-project-creationgenerative-uinextjs-setuptailwind-integration

SKILL.md Content

View Translation Comparison →

Start From Scratch

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

Quick Start (Recommended Stack)

bash
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
bash
npx tambo create-app my-app --template=standard

Vite Stack

Vite + React
├── TypeScript
├── Tailwind CSS
├── Zod
└── @tambo-ai/react
bash
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
bash
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)

bash
# 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

bash
# 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)

bash
# 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:
tsx
// 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>
  );
}
tsx
// 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

bash
npx tambo add message-thread-full --yes
Then use in your app:
tsx
import { MessageThreadFull } from "@/components/tambo/message-thread-full";

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

Supported Technologies

TechnologySupport LevelNotes
Next.js 14+FullRecommended, App Router preferred
ViteFullGreat for SPAs
Create React AppPartialWorks but CRA is deprecated
RemixPartialWorks with client components
TypeScriptFullStrongly recommended
JavaScriptFullWorks but less type safety
Tailwind CSSFullDefault for CLI components
Plain CSSFullNeed custom component styling
CSS ModulesFullSupported
ZodRequiredUsed for all schemas