add-to-existing-project

既存プロジェクトに Tambo を追加する

技術スタックを検出し、既存のパターンを維持しながら Tambo を統合します。

ワークフロー

1. 技術スタックを検出する - package.json とプロジェクト構成を分析します
2. ユーザーに確認する - 検出結果を提示し、希望を尋ねます
3. 依存関係をインストールする - @tambo-ai/react とピア依存関係を追加します
4. プロバイダーを設定する - 既存のパターンに合わせます
5. 最初のコンポーネントを登録する - 既存のコンポーネントを使って例を示します

ステップ 1：技術スタックを検出する

プロジェクトを把握するため、以下のファイルを確認します。

# Key files to read
package.json           # Dependencies and scripts
tsconfig.json          # TypeScript config
next.config.*          # Next.js
vite.config.*          # Vite
tailwind.config.*      # Tailwind CSS
postcss.config.*       # PostCSS
src/index.* or app/    # Entry points

検出チェックリスト

技術	検出方法
Next.js	依存関係に next があり、next.config.* が存在する
Vite	devDependencies に vite があり、vite.config.* が存在する
Create React App	依存関係に react-scripts がある
TypeScript	deps に typescript があり、tsconfig.json が存在する
Tailwind	deps に tailwindcss があり、設定ファイルが存在する
Plain CSS	Tailwind がなく、src/ に CSS ファイルがある
Zod	依存関係に zod がある
その他のバリデーション	deps に yup、joi、superstruct がある

ステップ 2：ユーザーに確認する

検出結果を提示して、以下を尋ねます。

I detected your project uses:
- Framework: Next.js 14 (App Router)
- Styling: Tailwind CSS
- Validation: No Zod (will need to add)
- TypeScript: Yes

Should I:
1. Install Tambo with these settings?
2. Use plain CSS instead of Tailwind for Tambo components?
3. Something else?

ステップ 3：依存関係をインストールする

# Core (always required)
npm install @tambo-ai/react

# If no Zod installed
npm install zod

ステップ 4：プロバイダーを設定する

Next.js App Router

// app/providers.tsx
"use client";
import { TamboProvider } from "@tambo-ai/react";
import { components } from "@/lib/tambo";

export function Providers({ children }: { children: React.ReactNode }) {
  return (
    <TamboProvider
      apiKey={process.env.NEXT_PUBLIC_TAMBO_API_KEY}
      components={components}
    >
      {children}
    </TamboProvider>
  );
}

// app/layout.tsx
import { Providers } from "./providers";

export default function RootLayout({ children }) {
  return (
    <html>
      <body>
        <Providers>{children}</Providers>
      </body>
    </html>
  );
}

Next.js Pages Router

// pages/_app.tsx
import { TamboProvider } from "@tambo-ai/react";
import { components } from "@/lib/tambo";

export default function App({ Component, pageProps }) {
  return (
    <TamboProvider
      apiKey={process.env.NEXT_PUBLIC_TAMBO_API_KEY}
      components={components}
    >
      <Component {...pageProps} />
    </TamboProvider>
  );
}

Vite / CRA

// src/main.tsx
import { TamboProvider } from "@tambo-ai/react";
import { components } from "./lib/tambo";
import App from "./App";

ReactDOM.createRoot(document.getElementById("root")!).render(
  <TamboProvider
    apiKey={import.meta.env.VITE_TAMBO_API_KEY}
    components={components}
  >
    <App />
  </TamboProvider>,
);

ステップ 5：コンポーネントレジストリを作成する

// lib/tambo.ts (or src/lib/tambo.ts)
import { TamboComponent } from "@tambo-ai/react";

export const components: TamboComponent[] = [
  // Components will be registered here
];

既存のパターンに合わせる

Tailwind がない場合：Plain CSS を使う

プロジェクトで Plain CSS または CSS モジュールを使用している場合、Tambo コンポーネントは別の方法でスタイルを設定できます。

// Skip --yes flag to customize styling during add
npx tambo add message-thread-full
# Select "CSS Modules" or "Plain CSS" when prompted

既存のバリデーションライブラリがある場合

Zod ではなく Yup/Joi を使用している場合、次のいずれかを選べます。

1. Tambo のスキーマ専用に Zod を追加する（推奨。追加は少量です）
2. スキーマを変換する（手間がかかるため、非推奨です）

モノレポの場合

Tambo を使用するパッケージからコマンドを実行します。

cd packages/web
npx tambo init --api-key=sk_...

環境変数

npx tambo init --api-key=sk_... を実行すると、フレームワークに適した環境変数を含む .env.local が自動的に作成されます。

手動での設定が必要な場合（モノレポ、読み取り専用ファイルシステム）は、適切な変数を追加します。

フレームワーク	変数
Next.js	NEXT_PUBLIC_TAMBO_API_KEY
Vite	VITE_TAMBO_API_KEY
CRA	REACT_APP_TAMBO_API_KEY

検証

セットアップ後、簡単なテストを作成して確認します。

import { useTambo } from "@tambo-ai/react";

function TestComponent() {
  const { thread, isIdle } = useTambo();
  console.log("Tambo connected:", isIdle);
  return <div>Tambo is set up!</div>;
}