start-from-scratch

从零开始

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

快速开始（推荐技术栈）

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

这将创建一个 Next.js + Tailwind + TypeScript + Zod 项目，可直接用于生成式 UI。

引导流程

如果用户想从头开始，请询问他们的偏好：

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

推荐理由：

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

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

推荐理由：

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

问题 3：TypeScript

Use TypeScript?

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

推荐理由：

• TypeScript：Tambo 的 Zod 模式可提供出色的类型推断

技术栈

推荐技术栈（默认）

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

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

Vite 技术栈

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

最简技术栈

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

各技术栈的设置步骤

Next.js（推荐）

# 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 最简配置（不含 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

项目结构

设置完成后，创建以下结构：

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

第一个组件

项目设置完成后，引导用户创建第一个组件：

// 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,
  },
];

添加聊天 UI

npx tambo add message-thread-full --yes

然后在应用中使用：

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

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

支持的技术

技术	支持级别	备注
Next.js 14+	完全支持	推荐使用，优先选择 App Router
Vite	完全支持	非常适合 SPA
Create React App	部分支持	可以使用，但 CRA 已弃用
Remix	部分支持	可与客户端组件配合使用
TypeScript	完全支持	强烈推荐
JavaScript	完全支持	可以使用，但类型安全性较低
Tailwind CSS	完全支持	CLI 组件的默认选项
普通 CSS	完全支持	需要自定义组件样式
CSS Modules	完全支持	支持
Zod	必需	用于所有模式