tanstack-cli— agent skill

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

Authentication

Databases & ORMs

Deployment

Developer Tools

API & Backend

Services

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

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)