tanstack-cli

概要

TanStack CLI は、TanStack Start アプリケーションを作成するための対話型スキャフォールディングツールです。認証、データベース、デプロイ、開発者ツールを網羅する30種類以上の事前構築済みインテグレーションを備え、ガイドに沿ってプロジェクトを作成できます。また、AI エージェントを支援する MCP（Model Context Protocol）サーバーを含み、チーム標準のセットアップに対応したカスタムテンプレートもサポートしています。

パッケージ： @tanstack/cli ステータス： 安定版

インストールと使用方法

# Create a new project (interactive)
npx @tanstack/cli create my-app

# Create with specific integrations
npx @tanstack/cli create my-app --integrations tanstack-query,clerk,drizzle

# Global install
npm install -g @tanstack/cli
tanstack create my-app

プロジェクトの作成

対話モード

npx @tanstack/cli create my-app
# Prompts for:
# - Project name
# - Integration selection
# - Configuration options

インテグレーションフラグを使用する場合

# Multiple integrations
npx @tanstack/cli create my-app --integrations tanstack-query,tanstack-form,drizzle,neon,clerk

# Deployment target
npx @tanstack/cli create my-app --integrations vercel

# Full stack setup
npx @tanstack/cli create my-app --integrations tanstack-query,tanstack-form,tanstack-table,clerk,drizzle,neon,vercel,sentry

利用可能なインテグレーション

TanStack ライブラリ

インテグレーション	説明
tanstack-query	非同期状態管理
tanstack-form	型安全なフォーム管理
tanstack-table	ヘッドレステーブル／データグリッド
tanstack-store	リアクティブなデータストア
tanstack-virtual	リストの仮想化
tanstack-ai	AI SDK インテグレーション
tanstack-db	クライアントサイドデータベース
tanstack-pacer	デバウンス／スロットリングユーティリティ

認証

インテグレーション	説明
clerk	Clerk 認証
better-auth	Better Auth インテグレーション
workos	WorkOS アイデンティティ管理

データベースと ORM

インテグレーション	説明
drizzle	Drizzle ORM
prisma	Prisma ORM
neon	Neon サーバーレス Postgres
convex	Convex バックエンドプラットフォーム

デプロイ

インテグレーション	説明
vercel	Vercel デプロイ
netlify	Netlify デプロイ
cloudflare	Cloudflare Workers/Pages
nitro	Nitro サーバーエンジン

開発者ツール

インテグレーション	説明
eslint	ESLint 設定
biome	Biome によるリンティング／フォーマット
shadcn-ui	shadcn/ui コンポーネントライブラリ
storybook	Storybook によるコンポーネント開発

API とバックエンド

インテグレーション	説明
trpc	tRPC 型安全 API
orpc	oRPC インテグレーション

サービス

インテグレーション	説明
sentry	エラー監視
paraglide	国際化（i18n）
strapi	Strapi CMS

カスタムテンプレート

テンプレートの作成

# Create a project as a template base
npx @tanstack/cli create my-template --integrations tanstack-query,drizzle,clerk

# Share as a git repository or npm package

カスタムテンプレートの使用

# From git repository
npx @tanstack/cli create my-app --template https://github.com/myorg/my-template

# From local path
npx @tanstack/cli create my-app --template ./templates/my-template

テンプレートの構成

my-template/
├── template.config.ts    # Template configuration
├── src/
│   ├── app/
│   │   ├── routes/
│   │   └── components/
│   └── lib/
├── package.json
├── tsconfig.json
├── app.config.ts
└── vite.config.ts

MCP サーバー

TanStack CLI には、AI エージェントとの連携のための MCP（Model Context Protocol）サーバーが含まれています。

機能

• ドキュメント検索 - AI エージェントが TanStack のドキュメントを検索できます
• プロジェクトのスキャフォールディング - AI アシスタントを通じてガイド付きでプロジェクトを作成できます
• インテグレーションの検索 - インテグレーションを検索して推奨します
• デプロイガイダンス - プラットフォーム固有のデプロイを支援します

Claude での使用

MCP サーバーを利用すると、Claude などの AI アシスタントは次のことができます。

• 正確で最新の情報を得るために TanStack のドキュメントを検索する
• 適切なインテグレーションを選んで新しいプロジェクトのスキャフォールディングを支援する
• コンテキストに応じた推奨事項を提示する
• 設定とデプロイを支援する

設定

// .claude/mcp.json or equivalent
{
  "mcpServers": {
    "tanstack": {
      "command": "npx",
      "args": ["@tanstack/cli", "mcp"]
    }
  }
}

生成されるプロジェクトの構成

一般的に、生成されるプロジェクトは次のような構成です。

my-app/
├── src/
│   ├── app/
│   │   ├── routes/
│   │   │   ├── __root.tsx
│   │   │   └── index.tsx
│   │   ├── router.tsx
│   │   ├── routeTree.gen.ts
│   │   └── client.tsx
│   ├── lib/
│   │   ├── db.ts          # (if drizzle/prisma)
│   │   ├── auth.ts        # (if clerk/better-auth)
│   │   └── query.ts       # (if tanstack-query)
│   └── components/
├── app.config.ts
├── vite.config.ts
├── package.json
├── tsconfig.json
└── .env.example

Web ビルダーインターフェース

TanStack CLI では、対話型の Web ベースビルダーも利用できます。

• テクノロジースタックを視覚的に選択
• エクスポート前に生成ファイルをプレビュー
• インテグレーションの互換性を確認
• ワンクリックでプロジェクトを生成

CLI コマンド一覧

コマンド	説明
create <name>	新しいプロジェクトを作成
create <name> --integrations <list>	指定したインテグレーションを含めて作成
create <name> --template <path>	テンプレートから作成
mcp	MCP サーバーを起動

ベストプラクティス

1. 最小限の統合から始めます - 最初からすべて含めるのではなく、必要に応じて追加します
2. --integrations フラグを使用します - CI／ドキュメントで再現可能なプロジェクト作成に役立ちます
3. チームテンプレートを作成します - 組織全体で一貫したプロジェクト構成を実現できます
4. MCP サーバーを AI アシスタントと一緒に使用します - ガイドに沿ってセットアップできます
5. 生成後に .env.example を確認します - 必要な環境変数を確認できます
6. ビジネスロジックを追加する前に、生成されたコードを確認します - スキャフォールドを理解できます
7. デプロイ統合を使用します - ホスティングプラットフォームの設定を事前構成できます
8. 認証とデータベースの統合を組み合わせます - フルスタックの認証用スキャフォールドを作成できます（例：clerk,drizzle,neon）

よくある落とし穴

• プロジェクト作成後に環境変数を設定しない（.env.example を確認してください）
• 互換性のない統合の組み合わせを選択する
• 生成後に npm install／pnpm install を実行しない
• Drizzle／Prisma の統合を使用する際に、データベースの初期化を忘れる
• デプロイプラットフォームの環境変数を設定しない
• 古い CLI バージョンを使用する（常に最新版の npx @tanstack/cli を使用してください）