TaherMustansir1929/tanstack-cli

Overview

TanStack CLI is an interactive scaffolding tool for creating TanStack Start applications. It provides guided project creation with 30+ pre-built integrations covering authentication, databases, deployment, and developer tools. It also includes an MCP (Model Context Protocol) server for AI agent assistance and supports custom templates for team-standardized setups.

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 | Async state management | | tanstack-form | Type-safe form management | | tanstack-table | Headless table/datagrid | | tanstack-store | Reactive data store | | tanstack-virtual | List virtualization | | tanstack-ai | AI SDK integration | | tanstack-db | Client-side database | | tanstack-pacer | Debouncing/throttling utilities |

Authentication

| Integration | Description | |-------------|-------------| | clerk | Clerk authentication | | better-auth | Better Auth integration | | workos | WorkOS identity management |

Databases & ORMs

| Integration | Description | |-------------|-------------| | drizzle | Drizzle ORM | | prisma | Prisma ORM | | neon | Neon serverless Postgres | | convex | Convex backend platform |

Deployment

| Integration | Description | |-------------|-------------| | vercel | Vercel deployment | | netlify | Netlify deployment | | cloudflare | Cloudflare Workers/Pages | | nitro | Nitro server engine |

Developer Tools

| Integration | Description | |-------------|-------------| | eslint | ESLint configuration | | biome | Biome linting/formatting | | shadcn-ui | shadcn/ui component library | | storybook | Storybook component development |

API & Backend

| Integration | Description | |-------------|-------------| | trpc | tRPC type-safe API | | orpc | oRPC integration |

Services

| Integration | Description | |-------------|-------------| | sentry | Error monitoring | | paraglide | Internationalization (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

The TanStack CLI includes an MCP (Model Context Protocol) server for AI agent integration.

Capabilities

• Documentation Search - AI agents can query TanStack documentation
• Project Scaffolding - Guided project creation through AI assistants
• Integration Discovery - Search and recommend integrations
• Deployment Guidance - Platform-specific deployment help

Usage with Claude

The MCP server enables Claude and other AI assistants to:

• Search TanStack docs for accurate, up-to-date information
• Help scaffold new projects with appropriate integrations
• Provide context-aware recommendations
• Assist with configuration and deployment

Configuration

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

Generated Project Structure

A typical generated project looks like:

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 also provides an interactive web-based builder:

• Visual technology stack selection
• Preview generated files before exporting
• Integration compatibility checking
• One-click project generation

CLI Commands Reference

| Command | Description | |---------|-------------| | create <name> | Create a new project | | create <name> --integrations <list> | Create with specific integrations | | create <name> --template <path> | Create from template | | mcp | Start the MCP server |

Best Practices

1. Start with minimal integrations - add more as needed rather than including everything upfront
2. Use the --integrations flag for reproducible project creation in CI/docs
3. Create team templates for consistent project structure across your organization
4. Use the MCP server with AI assistants for guided setup
5. Check .env.example after generation for required environment variables
6. Review generated code before adding business logic - understand the scaffold
7. Use deployment integrations to pre-configure hosting platform settings
8. Combine auth + db integrations for full-stack auth scaffolding (e.g., clerk,drizzle,neon)

Common Pitfalls

• Not setting up environment variables after project creation (check .env.example)
• Selecting incompatible integration combinations
• Not running npm install / pnpm install after generation
• Forgetting to initialize the database when using Drizzle/Prisma integrations
• Not configuring the deployment platform's environment variables
• Using outdated CLI version (always use npx @tanstack/cli for latest)