### Getting Started: Install TanStack AI

Source: https://github.com/tanstack/tanstack.com/blob/main/src/blog/tanstack-ai-middleware.md

Command to install the TanStack AI package.

```bash
pnpm add @tanstack/ai
```

--------------------------------

### Development Quick Start

Source: https://github.com/tanstack/tanstack.com/blob/main/README.md

Installs dependencies and starts the development server.

```sh
pnpm install
pnpm dev
```

--------------------------------

### Install TanStack Router, Start, and Query with Solid 2.0 Beta

Source: https://github.com/tanstack/tanstack.com/blob/main/src/blog/tanstack-start-solid-v2.md

Dependencies to install for TanStack Router, Start, and Query with Solid 2.0 beta.

```bash
solid: @tanstack/solid-router@^2.0.0-beta.11 @tanstack/solid-start@^2.0.0-beta.12 @tanstack/solid-router-devtools@^2.0.0-beta.8 solid-js@^2.0.0-beta.5 @solidjs/web@^2.0.0-beta.5
```

--------------------------------

### Development Install for TanStack Router, Start, and Query with Solid 2.0 Beta

Source: https://github.com/tanstack/tanstack.com/blob/main/src/blog/tanstack-start-solid-v2.md

Development dependencies to install for TanStack Router, Start, and Query with Solid 2.0 beta.

```bash
solid: vite-plugin-solid@^3.0.0-next.4
```

--------------------------------

### Local Install Package Manager Mode

Source: https://github.com/tanstack/tanstack.com/blob/main/docs-info.md

Use `mode="local-install"` for local workspace installations.

```bash
npx <package> --workspace=./path/to/workspace

```

--------------------------------

### Install TanStack Query with Solid 2.0 Beta

Source: https://github.com/tanstack/tanstack.com/blob/main/src/blog/tanstack-start-solid-v2.md

Additional dependencies to install if using TanStack Query with Solid 2.0 beta.

```bash
solid: @tanstack/solid-query@^6.0.0-beta.3 @tanstack/solid-query-devtools@^6.0.0-beta.3 @tanstack/solid-router-ssr-query@^2.0.0-beta.12
```

--------------------------------

### Solid Code

Source: https://github.com/tanstack/tanstack.com/blob/main/docs-info.md

Example code for the Solid framework adapter.

```tsx
// Solid Code
```

--------------------------------

### Create TanStack Start App with AI Chatbot Template

Source: https://github.com/tanstack/tanstack.com/blob/main/src/blog/netlify-partnership.md

Use this command to create a new TanStack Start application with the 'tanchat' add-on, which includes a full-stack AI chatbot. Ensure you have npx installed.

```bash
npx create-tsrouter-app@latest <name> --template file-router --add-ons tanchat
```

--------------------------------

### Install (default) Package Manager Mode

Source: https://github.com/tanstack/tanstack.com/blob/main/docs-info.md

The default mode for package manager tabs is `install`.

```bash
npm i <package>

```

--------------------------------

### Dev Install Package Manager Mode

Source: https://github.com/tanstack/tanstack.com/blob/main/docs-info.md

Use `mode="dev-install"` for development dependencies.

```bash
npm i -D <package>

```

--------------------------------

### React Code

Source: https://github.com/tanstack/tanstack.com/blob/main/docs-info.md

Example code for the React framework adapter.

```tsx
// React code
```

--------------------------------

### MCP Tool Usage and Response

Source: https://github.com/tanstack/tanstack.com/blob/main/docs/proposals/source-packages.md

Example of calling the MCP tool and the resulting JSON response containing installation and exploration instructions.

```typescript
get_source_instructions({ library: 'query' })
```

```json
{
  "package": "@tanstack/react-query-source",
  "install": "npm install @tanstack/react-query-source@5.62.0 --save-dev",
  "explorePath": "node_modules/@tanstack/react-query-source/src/",
  "note": "Install this package to explore TanStack Query source code. Use your file tools to grep and read."
}
```

--------------------------------

### Install TanStack Library Source Packages

Source: https://github.com/tanstack/tanstack.com/blob/main/docs/proposals/source-packages.md

Commands to install both the production build and the source code package for AI exploration.

```bash
# Normal install (built output, what runs in production)
npm install @tanstack/react-query@5.62.0

# Source install for AI exploration (dev only)
npm install @tanstack/react-query-source@5.62.0 --save-dev
```

--------------------------------

### Global Magic Example: window.useCache()

Source: https://github.com/tanstack/tanstack.com/blob/main/src/blog/directives-and-the-platform-boundary.md

This example uses a global, importless function, hiding the provider and moving framework semantics into what appears to be language syntax. This approach is generally considered risky.

```javascript
// global magic (importless, hidden provider)
window.useCache()
const fn = () => 'value'
```

--------------------------------

### Vercel Deployment Configuration

Source: https://github.com/tanstack/tanstack.com/blob/main/src/blog/why-tanstack-start-is-ditching-adapters.md

Example of how to configure TanStack Start to deploy to Vercel using Nitro's preset.

```jsx
import { defineConfig } from '@tanstack/react-start/config'

export default defineConfig({
  server: {
    preset: 'vercel',
  },
})
```

--------------------------------

### Install Dependencies

Source: https://github.com/tanstack/tanstack.com/blob/main/src/blog/streaming-structured-output.md

Install the necessary TanStack AI packages and Zod for schema definition.

```bash
pnpm add @tanstack/ai @tanstack/ai-react @tanstack/ai-openai zod
```

--------------------------------

### Install TanStack DB

Source: https://github.com/tanstack/tanstack.com/blob/main/src/blog/tanstack-db-0.5-query-driven-sync.md

Command to install the latest version of TanStack DB.

```bash
npm install @tanstack/react-db@latest
```

--------------------------------

### RSC in TanStack Start

Source: https://github.com/tanstack/tanstack.com/blob/main/src/blog/react-server-components.md

An example of creating and rendering a React Server Component (RSC) using TanStack Start, demonstrating server functions and client-side fetching and rendering of RSC streams.

```tsx
import { createServerFn } from '@tanstack/react-start'
import {
  createFromReadableStream,
  renderToReadableStream,
} from '@tanstack/react-start/rsc'

// Create a server function
const getGreeting = createServerFn().handler(async () => {
  // Create an RSC readable stream
  return renderToReadableStream(
    // Return JSX
    <h1>Hello from the server</h1>,
  )
})

function Greeting() {
  const query = useQuery({
    queryKey: ['greeting'],
    queryFn: async () =>
      // Create a renderable element from the stream
      createFromReadableStream(
        // Call our server function to get the stream
        await getGreeting(),
      ),
  })

  // Render!
  return <>{query.data}</>
}
```

--------------------------------

### Bundler Tabs Example

Source: https://github.com/tanstack/tanstack.com/blob/main/docs-info.md

Bundler tabs render a compact tab row but accept rich markdown content per bundler. The user's bundler choice is persisted to `localStorage` and synced across every bundler tab block on the page.

```ts
import { defineConfig } from 'vite'

export default defineConfig({})

```

--------------------------------

### queryOnce example

Source: https://github.com/tanstack/tanstack.com/blob/main/src/blog/tanstack-db-0.6-app-ready-with-persistence-and-includes.md

This example demonstrates the usage of queryOnce to perform a one-shot read operation to fetch active users. It uses the same query language as live queries but executes only once.

```typescript
import { eq, queryOnce } from '@tanstack/db'

const activeUsers = await queryOnce((q) =>
  q
    .from({ user: usersCollection })
    .where(({ user }) => eq(user.active, true))
    .select(({ user }) => ({ id: user.id, name: user.name })),
)
```

--------------------------------

### Test Case Structure Example

Source: https://github.com/tanstack/tanstack.com/blob/main/scripts/mcp-eval/README.md

Defines the expected format for a test case in `test-cases.json`. Each case includes a question, expected documentation, and search query examples.

```json
{
  "id": "unique-id",
  "question": "The question an AI might receive",
  "difficulty": "easy | medium | hard",
  "tags": ["library", "topic"],
  "expectedDocs": [
    {
      "library": "router",
      "path": "framework/react/guide/data-loading",
      "required": true,
      "reason": "Why this doc should be found"
    }
  ],
  "idealSearchQueries": ["queries that SHOULD find the doc"],
  "badSearchQueries": ["queries that surprisingly DON'T work"],
  "correctAnswerMustInclude": ["key terms the answer needs"],
  "notes": "Any additional context"
}
```

--------------------------------

### Install TanStack AI OpenRouter Adapter

Source: https://github.com/tanstack/tanstack.com/blob/main/src/blog/openrouter-partnership.md

Install the OpenRouter adapter for TanStack AI using npm. This is the first step to integrating with various AI models.

```bash
npm install @tanstack/ai-openrouter
```

--------------------------------

### Install TanStack AI and Code Mode

Source: https://github.com/tanstack/tanstack.com/blob/main/src/blog/tanstack-ai-code-mode.md

Commands to install the necessary packages for TanStack AI and Code Mode.

```bash
pnpm add @tanstack/ai @tanstack/ai-code-mode zod
```

```bash
# Node.js: fastest, V8 isolates via isolated-vm
pnpm add @tanstack/ai-isolate-node

# QuickJS WASM: no native deps, works in browsers and edge runtimes
pnpm add @tanstack/ai-isolate-quickjs

# Cloudflare Workers: run on the edge
pnpm add @tanstack/ai-isolate-cloudflare
```

--------------------------------

### Skill Metadata Example

Source: https://github.com/tanstack/tanstack.com/blob/main/src/blog/from-docs-to-agents.md

An example of the metadata section within an Agent Skill document, specifying the skill's name, description, and its source documentation.

```yaml
---
name: tanstack-router-search-params
description: Type-safe search param patterns for TanStack Router. Use when working with search params, query params, or validateSearch.
metadata:
  sources:
    - docs/framework/react/guide/search-params.md
---

```

--------------------------------

### ChatMiddleware Interface Example

Source: https://github.com/tanstack/tanstack.com/blob/main/src/blog/tanstack-ai-middleware.md

An example of a logger middleware that logs chat start and finish events.

```typescript
import type { ChatMiddleware } from '@tanstack/ai'

const logger: ChatMiddleware = {
  name: 'logger',
  onStart(ctx) {
    console.log(
      `[${ctx.requestId}] Chat started — model: ${ctx.model}, provider: ${ctx.provider}`,
    )
  },
  onFinish(ctx, info) {
    console.log(
      `[${ctx.requestId}] Done in ${info.duration}ms — ${info.usage?.totalTokens} tokens`,
    )
  },
}
```

--------------------------------

### Reproduce Lighthouse Comparison

Source: https://github.com/tanstack/tanstack.com/blob/main/docs/perf/lighthouse-shim-vs-react-2026-04-20.md

Steps to build and run the React baseline and the shim for performance comparison, and then aggregate the results.

```bash
# React baseline
# 1) temporarily remove tanstackDom() plugin + serverVariantAliases in vite.config.ts
pnpm build
PORT=4000 pnpm start:prod &
# run 5 trials × 3 URLs × 2 form factors, save JSON to ./react/

# Shim
# 2) restore tanstackDom() plugin + serverVariantAliases
pnpm build
PORT=4000 pnpm start:prod &
# re-run, save JSON to ./shim/

# Aggregate medians + delta (parse JSON, compute median of numericValues per audit key)
```

--------------------------------

### Create Package Manager Mode

Source: https://github.com/tanstack/tanstack.com/blob/main/docs-info.md

Use `mode="create"` for project scaffolding commands.

```bash
npm create <package>

```

--------------------------------

### Caching RSC GET Responses at the CDN Layer

Source: https://github.com/tanstack/tanstack.com/blob/main/src/blog/react-server-components.md

This example demonstrates how to set cache control headers for a GET request server function, allowing the response to be cached by CDNs.

```tsx
import { createServerFn } from '@tanstack/react-start'
import { renderToReadableStream } from '@tanstack/react-start/rsc'
import { setResponseHeaders } from '@tanstack/react-start/server'

const getGreeting = createServerFn({ method: 'GET' }).handler(async () => {
  setResponseHeaders(
    new Headers({
      'Cache-Control': 'public, max-age=0, must-revalidate',
      'Netlify-CDN-Cache-Control':
        'public, max-age=300, durable, stale-while-revalidate=300',
    }),
  )

  return renderToReadableStream(<h1>Hello from the server</h1>)
})
```

--------------------------------

### Stacking It All Together

Source: https://github.com/tanstack/tanstack.com/blob/main/src/blog/tanstack-ai-middleware.md

An example of a production-ready middleware setup, composing multiple middleware concerns.

```typescript
import { chat } from '@tanstack/ai'
import { openaiText } from '@tanstack/ai-openai'
import {
  toolCacheMiddleware,
  contentGuardMiddleware,
} from '@tanstack/ai/middlewares'

const stream = chat({
  adapter: openaiText('gpt-5.4'),
  messages: req.body.messages,
  tools: [searchTool, weatherTool, calendarTool],
  context: { tenantId: req.auth.tenantId },
  middleware: [
    // 1. Inject tenant system prompt
    tenantMiddleware,
    // 2. Guard dangerous tools before anything else
    dangerousToolGuard,
    // 3. Redact PII from the stream
    contentGuardMiddleware({
      rules: [
        { pattern: /\b\d{3}-\d{2}-\d{4}\b/g, replacement: '[SSN REDACTED]' },
      ],
    }),
    // 4. Cache expensive tool calls
    toolCacheMiddleware({ ttl: 120_000 }),
    // 5. Enforce token budget
    tokenBudget(50_000),
    // 6. Log everything (sees redacted output, not raw)
    analytics,
  ],
})
```

--------------------------------

### aimock Fixture Example

Source: https://github.com/tanstack/tanstack.com/blob/main/src/blog/how-we-test-tanstack-ai-across-7-providers.md

A basic JSON fixture file for aimock, demonstrating a simple user message match and a deterministic LLM response.

```json
{
  "fixtures": [
    {
      "match": { "userMessage": "[chat] recommend a guitar" },
      "response": {
        "content": "I'd recommend the Fender Stratocaster for its versatile tone..."
      }
    }
  ]
}
```

--------------------------------

### Local Setup - Cloning Repositories

Source: https://github.com/tanstack/tanstack.com/blob/main/README.md

Clones the main repository and sibling project repositories into a 'tanstack' parent directory for local development.

```sh
mkdir tanstack && cd tanstack
git clone git@github.com:TanStack/tanstack.com.git
git clone git@github.com:TanStack/query.git
git clone git@github.com:TanStack/router.git
git clone git@github.com:TanStack/table.git
```

--------------------------------

### NPM Range Endpoint Response Example

Source: https://github.com/tanstack/tanstack.com/blob/main/src/blog/npm-stats-the-right-way.md

This JSON structure provides a day-by-day breakdown of download counts for a package. It requires summation for total counts but offers granular data.

```json
{
  "downloads": [
    { "day": "2024-06-06", "downloads": 1904088 },
    { "day": "2024-06-07", "downloads": 1847293 },
    ...
  ],
  "start": "2024-06-06",
  "end": "2025-12-06",
  "package": "@tanstack/react-query"
}
```

--------------------------------

### Callouts with Custom Title

Source: https://github.com/tanstack/tanstack.com/blob/main/docs-info.md

GitHub-style alerts are supported. For a customized title, for example to replace `Note` with something else, you can use the syntax `> [!TYPE] Title`.

```md
> [!NOTE] Custom title
> Use `redirect_from` on the canonical page when docs are moved.

> [!TIP]
> Prefer absolute paths like `/framework/react/overview`.

```

--------------------------------

### File Tabs Example

Source: https://github.com/tanstack/tanstack.com/blob/main/docs-info.md

Use `variant="files"` when the block should render code examples as file tabs. It scans consecutive code blocks, extracts language, title, and content, and uses that to build `file-tab` data. Titles come from code-block metadata such as `title="..."` or will default to the language name if not provided.

```tsx
export function App() {
  return <div>Hello</div>
}

```

```css
body {
  color: tomato;
}

```

--------------------------------

### Explicit API Example: next/cache

Source: https://github.com/tanstack/tanstack.com/blob/main/src/blog/directives-and-the-platform-boundary.md

This code demonstrates an explicit, ownable API with provenance and versioning using imports. This is the recommended approach for clarity and ecosystem compatibility.

```javascript
// explicit, ownable API with provenance and versioning
import { cache } from 'next/cache'
export const fn = cache(() => 'value')
```

--------------------------------

### React Native SQLite Persistence Setup

Source: https://github.com/tanstack/tanstack.com/blob/main/src/blog/tanstack-db-0.6-app-ready-with-persistence-and-includes.md

Example demonstrating how to set up persistence for a synced collection in a React Native environment using `@tanstack/react-native-db-sqlite-persistence` and SQLite WASM.

```typescript
import { open } from '@op-engineering/op-sqlite'
import { createCollection } from '@tanstack/db'
import { queryCollectionOptions } from '@tanstack/query-db-collection'
import {
  createReactNativeSQLitePersistence,
  persistedCollectionOptions,
} from '@tanstack/react-native-db-sqlite-persistence'

type ShoppingItem = {
  id: string
  title: string
  completed: boolean
}

const database = open({
  name: `tanstack-db.sqlite`,
  location: `default`,
})

const persistence = createReactNativeSQLitePersistence({
  database,
})

export const shoppingItemsCollection = createCollection(
  persistedCollectionOptions<ShoppingItem, string>({
    persistence,
    schemaVersion: 1,
    ...queryCollectionOptions({
      queryKey: ['shopping-items'],
      queryFn: async () => api.shoppingItems.getAll(),
      getKey: (item) => item.id,
      onInsert: async ({ transaction }) => {
        await api.shoppingItems.createBatch(transaction.mutations)
      },
    }),
  }),
)

```

--------------------------------

### Package Manager Tabs Example

Source: https://github.com/tanstack/tanstack.com/blob/main/docs-info.md

Package-manager tabs are a special `tabs` variant. The parser reads framework lines like `react: ...` or `solid: ...`, groups packages, and later generates package-manager-specific commands.

```bash
npm i <package-1>
npm i <package-2>

```

--------------------------------

### N+1 Example with Code Mode

Source: https://github.com/tanstack/tanstack.com/blob/main/src/blog/tanstack-ai-code-mode.md

Demonstrates how Code Mode optimizes tool calls and computation for fetching product data and calculating average ratings.

```typescript
const top = await external_getTopProducts({ limit: 5 })

const ratings = await Promise.all(
  top.products.map((p) => external_getProductRatings({ productId: p.id })),
)

return top.products.map((product, i) => {
  const scores = ratings[i].ratings.map((r) => r.score)
  const avg = scores.reduce((sum, s) => sum + s, 0) / scores.length
  return {
    name: product.name,
    sales: product.totalSales,
    averageRating: Math.round(avg * 100) / 100,
  }
})
```

--------------------------------

### Example of dropping server-rendered output into a client-owned tree

Source: https://github.com/tanstack/tanstack.com/blob/main/src/blog/who-owns-the-tree.md

This code snippet demonstrates how to use `createFromReadableStream` to fetch and render server-side generated UI within a client-side controlled component tree in TanStack Start.

```tsx
import { createFromReadableStream } from '@tanstack/react-start/rsc'

function Dashboard() {
  const { data: chart } = useSuspenseQuery({
    queryKey: ['analytics-chart', range],
    queryFn: async () =>
      createFromReadableStream(await getAnalyticsChart({ data: { range } })),
  })

  return (
    <DashboardShell>
      <Filters />
      <Tabs>
        <Tab label="Overview">
          {/* Server-rendered output, dropped into a client-owned tree */}
          {chart}
        </Tab>
        <Tab label="Raw">
          <ClientOnlyTable />
        </Tab>
      </Tabs>
    </DashboardShell>
  )
}
```

--------------------------------

### Explicit API Example: createServerFn

Source: https://github.com/tanstack/tanstack.com/blob/main/src/blog/directives-and-the-platform-boundary.md

This code shows an explicit API with imports, providing provenance, versioning, and discoverability. Use this pattern for clarity and maintainability.

```javascript
// explicit API (imported, ownable, discoverable)
import { createServerFn } from '@acme/runtime'
export const fn = createServerFn(() => 'value')
```

--------------------------------

### Middleware Composition Example

Source: https://github.com/tanstack/tanstack.com/blob/main/src/blog/tanstack-ai-middleware.md

An example demonstrating the order of middleware in an array.

```typescript
middleware: [
  authMiddleware,
  guardMiddleware,
  cacheMiddleware,
  loggerMiddleware
]
```

--------------------------------

### Install TanStack Query

Source: https://github.com/tanstack/tanstack.com/blob/main/src/blog/announcing-tanstack-query-v4.md

Install TanStack Query using npm or yarn.

```bash
npm i @tanstack/react-query
# or
yarn add @tanstack/react-query
```

--------------------------------

### Installing intents

Source: https://github.com/tanstack/tanstack.com/blob/main/src/blog/from-docs-to-agents.md

Discovers and wires intent-enabled packages into the agent configuration.

```bash
npx @tanstack/intent install
```

--------------------------------

### Running the Code Mode Demo

Source: https://github.com/tanstack/tanstack.com/blob/main/src/blog/tanstack-ai-code-mode.md

Instructions to clone the repository, install dependencies, and run the TanStack AI code mode demo application.

```bash
git clone https://github.com/TanStack/ai.git
cd ai
pnpm install
pnpm --filter ts-code-mode-web dev
```

--------------------------------

### Install Packages

Source: https://github.com/tanstack/tanstack.com/blob/main/src/blog/generation-hooks.md

Install the necessary TanStack AI packages using pnpm.

```bash
pnpm add @tanstack/ai @tanstack/ai-react @tanstack/ai-client @tanstack/ai-openai
```