tanstack-cli

Project scaffolding CLI with 30+ integrations, custom templates, and MCP server for AI agents.

INSTALLATION
npx skills add https://github.com/tanstack-skills/tanstack-skills --skill tanstack-cli
Run in your project or agent environment. Adjust flags if your CLI version differs.

SKILL.md

$27

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

BrowserAct

Let your agent run on any real-world website

Bypass CAPTCHA & anti-bot for free. Start local, scale to cloud.

Explore BrowserAct Skills →

Stop writing automation&scrapers

Install the CLI. Run your first Skill in 30 seconds. Scale when you're ready.

Start free
free · no credit card