From tanstack-cli
Project scaffolding CLI with 30+ integrations, custom templates, and MCP server for AI agents.
npx claudepluginhub tanstack-skills/tanstack-skills --plugin tanstack-cliThis skill uses the workspace's default tool permissions.
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.
Guides Next.js Cache Components and Partial Prerendering (PPR) with cacheComponents enabled. Implements 'use cache', cacheLife(), cacheTag(), revalidateTag(), static/dynamic optimization, and cache debugging.
Guides building MCP servers enabling LLMs to interact with external services via tools. Covers best practices, TypeScript/Node (MCP SDK), Python (FastMCP).
Generates original PNG/PDF visual art via design philosophy manifestos for posters, graphics, and static designs on user request.
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
# 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
npx @tanstack/cli create my-app
# Prompts for:
# - Project name
# - Integration selection
# - Configuration options
# 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
| 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 |
| Integration | Description |
|---|---|
clerk | Clerk authentication |
better-auth | Better Auth integration |
workos | WorkOS identity management |
| Integration | Description |
|---|---|
drizzle | Drizzle ORM |
prisma | Prisma ORM |
neon | Neon serverless Postgres |
convex | Convex backend platform |
| Integration | Description |
|---|---|
vercel | Vercel deployment |
netlify | Netlify deployment |
cloudflare | Cloudflare Workers/Pages |
nitro | Nitro server engine |
| Integration | Description |
|---|---|
eslint | ESLint configuration |
biome | Biome linting/formatting |
shadcn-ui | shadcn/ui component library |
storybook | Storybook component development |
| Integration | Description |
|---|---|
trpc | tRPC type-safe API |
orpc | oRPC integration |
| Integration | Description |
|---|---|
sentry | Error monitoring |
paraglide | Internationalization (i18n) |
strapi | Strapi CMS |
# 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
# 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
my-template/
├── template.config.ts # Template configuration
├── src/
│ ├── app/
│ │ ├── routes/
│ │ └── components/
│ └── lib/
├── package.json
├── tsconfig.json
├── app.config.ts
└── vite.config.ts
The TanStack CLI includes an MCP (Model Context Protocol) server for AI agent integration.
The MCP server enables Claude and other AI assistants to:
// .claude/mcp.json or equivalent
{
"mcpServers": {
"tanstack": {
"command": "npx",
"args": ["@tanstack/cli", "mcp"]
}
}
}
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
TanStack CLI also provides an interactive web-based builder:
| 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 |
--integrations flag for reproducible project creation in CI/docs.env.example after generation for required environment variablesclerk,drizzle,neon).env.example)npm install / pnpm install after generationnpx @tanstack/cli for latest)