ak-tanstack

name	ak:tanstack
description	Build with TanStack Start (full-stack React framework), TanStack Form (headless form management), and TanStack AI (AI streaming/chat). Use when creating TanStack projects, routes, server functions, forms, validation, or AI chat features.
user-invocable	true
when_to_use	Invoke for TanStack Start, Form, Router, or AI features.
category	frameworks
keywords	["tanstack","start","form","ai","router"]
argument-hint	[framework] [feature]
metadata	{"author":"agentkit","version":"1.0.0"}

TanStack

Build full-stack React apps with TanStack Start, manage forms with TanStack Form, and add AI features with TanStack AI.

When to Activate

• User mentions TanStack Start, TanStack Form, or TanStack AI
• Building full-stack React app with file-based routing + server functions
• Creating forms with type-safe validation (Zod/Valibot)
• Adding AI chat/streaming to a TanStack app
• Comparing TanStack Start vs Next.js/Remix

Quick Start — TanStack Start

npm create @tanstack/start@latest    # create project
npm run dev                          # dev server :3000
npm run build                        # production build

Project Structure

src/
├── routes/
│   ├── __root.tsx          # root layout (required)
│   ├── index.tsx           # /
│   └── posts.$postId.tsx   # /posts/:postId
├── router.tsx              # createRouter config
├── routeTree.gen.ts        # AUTO-GENERATED — never edit
└── start.ts                # global middleware
app.config.ts               # Nitro/Start config

Server Function

import { createServerFn } from '@tanstack/react-start'
import { z } from 'zod'

const getUser = createServerFn({ method: 'GET' })
  .validator(z.object({ id: z.string() }))
  .handler(async ({ data }) => db.user.findUnique({ where: { id: data.id } }))

Route with Loader

export const Route = createFileRoute()({
  :  ({ : { : params. } }),
  : ,
})
 () {
   post = .()
   
}