t1k:web:frontend:tanstack

Auto-generated

🔒 Auto-generated from The1Studio/[email protected] — edit the source kit, not this page.

Field	Value
Module	frontend
Version	1.9.0
Effort	medium
Tools	—

Keywords: AI, React, routes, server functions, tanstack, TanStack Form, TanStack Start

How to invoke

/t1k:web:frontend:tanstack
[framework] [feature]

---

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
vite.config.ts              # Vite + tanstackStart plugin config (replaces app.config.ts)

Server Function

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

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

Route with Loader

export const Route = createFileRoute('/posts/$postId')({
  loader: ({ params }) => getPost({ data: { id: params.postId } }),
  component: PostComponent,
})
function PostComponent() {
  const post = Route.useLoaderData()
  return <div>{post.title}</div>
}

Middleware

import { createMiddleware } from '@tanstack/react-start'
export const authMiddleware = createMiddleware()
  .server(async ({ next, context }) => {
    const session = await getSession(context.request)
    return next({ context: { user: session.user } })
  })

TanStack Form

Headless, type-safe form library. Detailed API: references/tanstack-form.md

import { useForm } from '@tanstack/react-form'

const form = useForm({
  defaultValues: { email: '', age: 0 },
  // No validatorAdapter needed — Form supports Standard Schema natively
  onSubmit: async ({ value }) => { await saveUser(value) },
})

// JSX: <form.Field name="email" validators={{ onChange: z.string().email() }}>
//   {(f) => <input value={f.state.value} onChange={e => f.handleChange(e.target.value)} />}
// </form.Field>

Key patterns: sync/async validators, onBlurAsyncDebounceMs, form.Subscribe for submit state, createServerValidate for SSR.

TanStack AI (Alpha)

AI streaming + chat hooks. Detailed API: references/tanstack-ai.md

// Client
import { useChat } from '@tanstack/react-ai'
const { messages, sendMessage } = useChat({
  connection: fetchServerSentEvents('/api/chat'),
})

// Server (TanStack Start)
import { chat, toStreamResponse } from '@tanstack/ai'
import { openaiAdapter } from '@tanstack/ai-openai'
export const chatRoute = createAPIFileRoute('/api/chat')({
  POST: async ({ request }) => {
    const stream = chat({ adapter: openaiAdapter, messages, model: 'gpt-4o' })
    return toStreamResponse(stream)
  },
})

Supports: OpenAI, Anthropic, Google Gemini, Ollama. Features: structured output (Zod), isomorphic tools, multimodal.

TanStack Start vs Others

	TanStack Start	Next.js	Remix
Philosophy	Client-first, opt-in SSR	Server-first	Web-standards
Type Safety	Full end-to-end inference	Partial	Partial
RSC	In progress (partial support)	First-class	No
Deploy	Nitro (anywhere)	Vercel-optimized	Adapter-based

This skill handles TanStack Start/Form/AI development. Does NOT handle: TanStack Query, TanStack Table, TanStack Virtual, or general React patterns unrelated to TanStack.

References

• Detailed reference: references/tanstack-start.md, references/tanstack-form.md, references/tanstack-ai.md
• TanStack Start Docs
• TanStack Form Docs
• TanStack AI Docs

Gotchas

• TanStack Query staleTime vs gcTime — staleTime: when to refetch on focus; gcTime (formerly cacheTime, renamed in v5): when to evict unused data. Defaulting both to 0 = constant refetching.
• TanStack Router file-based routing requires the build step — runtime route additions silently no-op.
• TanStack Form schema validation runs per render — heavy schemas (zod, valibot) need memoization or lift outside component.