tanstack-cli

Overview

@tanstack/cli

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

tanstack-query

tanstack-form

tanstack-table

tanstack-store

tanstack-virtual

tanstack-ai

tanstack-db

tanstack-pacer

Authentication

clerk

better-auth

workos

Databases & ORMs

drizzle

prisma

neon

convex

Deployment

vercel

netlify

cloudflare

nitro

Developer Tools

eslint

biome

shadcn-ui

storybook

API & Backend

trpc

orpc

Services

sentry

paraglide

strapi

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

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

• 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

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

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

CLI Commands Reference

create <name>

create <name> --integrations <list>

create <name> --template <path>

mcp

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)