tanstack-cli

Overview

TanStack CLI は、TanStack Start アプリケーション作成のための対話的なスキャフォルディングツールです。認証、データベース、デプロイ、開発者ツールを網羅した 30 以上の事前構築統合を備えたガイド付きプロジェクト作成を提供します。AI エージェント支援用の MCP (Model Context Protocol) サーバー、およびチーム標準化されたセットアップ用のカスタムテンプレート機能も含まれています。

Package: @tanstack/cli Status: Stable

Installation & Usage

# 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

Project Creation

Interactive Mode

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

With Integrations Flag

# 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

Available Integrations

TanStack Libraries

Integration	Description
tanstack-query	非同期状態管理
tanstack-form	型安全フォーム管理
tanstack-table	ヘッドレステーブル/データグリッド
tanstack-store	リアクティブデータストア
tanstack-virtual	リスト仮想化
tanstack-ai	AI SDK 統合
tanstack-db	クライアント側データベース
tanstack-pacer	デバウンス/スロットリング ユーティリティ

Authentication

Integration	Description
clerk	Clerk 認証
better-auth	Better Auth 統合
workos	WorkOS アイデンティティ管理

Databases & ORMs

Integration	Description
drizzle	Drizzle ORM
prisma	Prisma ORM
neon	Neon サーバーレス Postgres
convex	Convex バックエンドプラットフォーム

Deployment

Integration	Description
vercel	Vercel デプロイメント
netlify	Netlify デプロイメント
cloudflare	Cloudflare Workers/Pages
nitro	Nitro サーバーエンジン

Developer Tools

Integration	Description
eslint	ESLint 設定
biome	Biome リント/フォーマッティング
shadcn-ui	shadcn/ui コンポーネントライブラリ
storybook	Storybook コンポーネント開発

API & Backend

Integration	Description
trpc	tRPC 型安全 API
orpc	oRPC 統合

Services

Integration	Description
sentry	エラー監視
paraglide	国際化 (i18n)
strapi	Strapi CMS

Custom Templates

Creating a Template

# 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

Using a Custom Template

# 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

Template Structure

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

MCP Server

TanStack CLI は、AI エージェント統合用の MCP (Model Context Protocol) サーバーを含みます。

Capabilities

• Documentation Search - AI エージェントは TanStack ドキュメントをクエリできます
• Project Scaffolding - AI アシスタントによるガイド付きプロジェクト作成
• Integration Discovery - 統合の検索と推奨
• Deployment Guidance - プラットフォーム固有のデプロイメントサポート

Usage with Claude

MCP サーバーは Claude やその他の AI アシスタントが以下を行うことを可能にします：

• 正確で最新の TanStack ドキュメントを検索
• 適切な統合を含む新しいプロジェクトのスキャフォルディングを支援
• コンテキスト対応の推奨を提供
• 設定とデプロイメントを支援

Configuration

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

Generated Project Structure

生成されたプロジェクトの典型的な構造は以下のとおりです：

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 Builder Interface

TanStack CLI はインタラクティブな Web ベースビルダーも提供します：

• ビジュアル技術スタック選択
• エクスポート前に生成されたファイルをプレビュー
• 統合互換性チェック
• ワンクリックプロジェクト生成

CLI Commands Reference

Command	Description
create <name>	新しいプロジェクトを作成
create <name> --integrations <list>	特定の統合で作成
create <name> --template <path>	テンプレートから作成
mcp	MCP サーバーを開始

Best Practices

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

Common Pitfalls

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