start-from-scratch

ゼロから始める

推奨テクノロジーを使って新しい Tambo プロジェクトを作成できるよう、ユーザーを案内します。

クイックスタート（推奨スタック）

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

これにより、生成 UI に対応した Next.js + Tailwind + TypeScript + Zod プロジェクトが作成されます。

ガイド付きフロー

ユーザーが新しく始めたい場合は、希望を尋ねます。

質問 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	必須	すべてのスキーマで使用