start-from-scratch

Compare original and translation side by side

🇺🇸

Original

English

🇨🇳

Translation

Chinese

Start From Scratch

从零开始创建项目

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

指导用户使用推荐技术创建新的Tambo项目。

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.

bash

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

此命令会创建一个基于 Next.js + Tailwind + TypeScript + Zod 的项目，可直接用于生成式UI开发。

Guided Flow

引导式流程

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

当用户想要从零开始创建项目时，询问他们的偏好：

Question 1: Framework

问题1：框架选择

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

你想要使用哪种框架？

1. Next.js（推荐）- 支持App Router的全栈React框架
2. Vite - 轻量快速的React开发环境
3. 其他 - 我会适配你的选择

推荐理由：

Next.js：最适合生产级应用，内置API路由，开发体验极佳
Vite：非常适合单页应用（SPA），开发服务器速度更快，配置更简单

Question 2: Styling

问题2：样式方案

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

你想要如何为应用设置样式？

1. Tailwind CSS（推荐）- 实用优先的样式框架，与Tambo组件完美兼容
2. 纯CSS/CSS Modules - 无框架限制，完全自定义控制
3. 其他方案（styled-components、Emotion等）

推荐理由：

Tailwind：Tambo CLI组件默认使用Tailwind样式
纯CSS：可正常使用，但需要手动为Tambo组件设置样式

Question 3: TypeScript

问题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

是否使用TypeScript？

1. 是（推荐）- 类型安全，更好的IDE支持
2. 否 - 使用纯JavaScript

推荐理由：

TypeScript：Tambo的Zod schema提供出色的类型推断能力

Technology Stacks

技术栈选项

Recommended Stack (Default)

Vite Stack

Vite技术栈

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_...

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_...

Vite + React
├── TypeScript
├── 纯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)

Next.js（推荐）

bash

undefined

bash

undefined

1. Create app

1. 创建应用

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

2. Initialize with API key

2. 使用API密钥初始化

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

3. Start development

3. 启动开发服务器

npm run dev

undefined

npm run dev

undefined

Vite + Tailwind

bash

undefined

bash

undefined

1. Create Vite app

1. 创建Vite应用

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

2. Install dependencies

2. 安装依赖

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

3. Configure Tailwind (tailwind.config.js)

3. 配置Tailwind（tailwind.config.js）

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

4. Add Tailwind directives to src/index.css

4. 在src/index.css中添加Tailwind指令

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

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

5. 初始化Tambo（自动配置.env.local文件）

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

6. Start development

6. 启动开发服务器

npm run dev

undefined

npm run dev

undefined

Vite Minimal (No Tailwind)

Vite轻量版（无Tailwind）

bash

undefined

bash

undefined

1. Create Vite app

1. 创建Vite应用

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

2. Install dependencies

2. 安装依赖

npm install @tambo-ai/react zod

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

3. 初始化Tambo（自动配置.env.local文件）

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

4. Start development

4. 启动开发服务器

npm run dev

undefined

npm run dev

undefined

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

搭建完成后，项目结构如下：

my-app/
├── src/
│   ├── components/
│   │   └── tambo/           # Tambo UI组件（来自CLI）
│   ├── lib/
│   │   └── tambo.ts         # 组件注册文件
│   ├── App.tsx              # 主应用，包含TamboProvider
│   └── main.tsx             # 项目入口文件
├── .env.local               # 存储API密钥
└── 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,
  },
];

项目搭建完成后，指导用户创建第一个组件：

tsx

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

export const GreetingSchema = z.object({
  name: z.string().describe("用户姓名"),
  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:
      "向用户姓名打招呼。适用于需要问候用户的场景。",
    propsSchema: GreetingSchema,
  },
];

Adding Chat UI

添加聊天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>
  );
}

bash

npx tambo add message-thread-full --yes

之后在应用中使用：

tsx

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

技术	支持等级	说明
Next.js 14+	完全支持	推荐使用，优先选择App Router
Vite	完全支持	非常适合单页应用（SPA）
Create React App	部分支持	可正常使用，但CRA已被弃用
Remix	部分支持	需配合客户端组件使用
TypeScript	完全支持	强烈推荐使用
JavaScript	完全支持	可正常使用，但类型安全性较差
Tailwind CSS	完全支持	CLI组件默认使用的样式方案
纯CSS	完全支持	需要自定义组件样式
CSS Modules	完全支持	支持使用
Zod	必须使用	所有 schema 均基于Zod构建

start-from-scratch

Original

Translation

Start From Scratch

从零开始创建项目

Quick Start (Recommended Stack)

快速开始（推荐技术栈）

Guided Flow

引导式流程

Question 1: Framework

问题1：框架选择

Question 2: Styling

问题2：样式方案

Question 3: TypeScript

问题3：是否使用TypeScript

Technology Stacks

技术栈选项

Recommended Stack (Default)

推荐技术栈（默认）

Vite Stack

Vite技术栈

Minimal Stack

轻量技术栈

Setup Steps by Stack

各技术栈的搭建步骤

Next.js (Recommended)

Next.js（推荐）

1. Create app

1. 创建应用

2. Initialize with API key

2. 使用API密钥初始化

3. Start development

3. 启动开发服务器

Vite + Tailwind

Vite + Tailwind

1. Create Vite app

1. 创建Vite应用

2. Install dependencies

2. 安装依赖

3. Configure Tailwind (tailwind.config.js)

3. 配置Tailwind（tailwind.config.js）

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

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

4. Add Tailwind directives to src/index.css

4. 在src/index.css中添加Tailwind指令

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

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

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

5. 初始化Tambo（自动配置.env.local文件）

6. Start development

6. 启动开发服务器

Vite Minimal (No Tailwind)

Vite轻量版（无Tailwind）

1. Create Vite app

1. 创建Vite应用

2. Install dependencies

2. 安装依赖

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

3. 初始化Tambo（自动配置.env.local文件）

4. Start development

4. 启动开发服务器

Project Structure

项目结构

First Component

创建第一个组件

Adding Chat UI

添加聊天UI

Supported Technologies

支持的技术