### Install Dependencies and Start Development Server

Source: https://github.com/tanstack/cli/blob/main/examples/react/ecommerce/README.md

Run these commands to install project dependencies and start the local development server.

```bash
npm install
npm run dev
```

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

### Setup TanStack CLI Project

Source: https://github.com/tanstack/cli/blob/main/CONTRIBUTING.md

Clone the repository, install dependencies, and build the project to get started.

```bash
gh repo clone TanStack/cli
cd cli
pnpm install
pnpm build
```

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

### Create Solid App with Create Start App

Source: https://github.com/tanstack/cli/blob/main/cli-aliases/create-start-app/README.md

Specify the framework to create a new application, for example, a Solid app.

```bash
pnpm dlx create-start-app@latest my-app --framework solid
```

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

### Run AI Streaming Service

Source: https://github.com/tanstack/cli/blob/main/packages/create/src/frameworks/solid/examples/tanchat/README.md

Navigate to the `ai-streaming-service` directory, install dependencies, and start the development server.

```bash
cd ai-streaming-service
npm install
npm run dev
```

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

### Create Project with Events Example

Source: https://github.com/tanstack/cli/blob/main/packages/create/src/frameworks/react/examples/events/README.md

Use this command to create a new project with the events example pre-configured.

```bash
npx netlify-cta my-conference --example events

cd my-conference

pnpm install

pnpm dev
```

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

### Interactive App Creation

Source: https://github.com/tanstack/cli/blob/main/cli-aliases/create-start-app/README.md

Run the command without a project name to start an interactive setup process for choosing project name, package manager, toolchain, and Git initialization.

```bash
pnpm dlx create-start-app@latest
```

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

### Install Dependencies

Source: https://github.com/tanstack/cli/blob/main/packages/create/src/frameworks/solid/examples/tanchat/assets/ai-streaming-server/README.md

Run this command to install project dependencies.

```bash
npm install
```

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

### Discover and Install Authentication Providers

Source: https://github.com/tanstack/cli/blob/main/packages/cli/skills/choose-ecosystem-integrations/references/authentication-providers.md

Use these commands to discover available authentication providers and then install them into your project. Authentication providers are usually exclusive.

```bash
npx @tanstack/cli ecosystem --category authentication --json
```

```bash
npx @tanstack/cli create --list-add-ons --json
```

```bash
npx @tanstack/cli create my-app --add-ons clerk -y
```

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

### Run the Project

Source: https://github.com/tanstack/cli/blob/main/docs/quick-start.md

Navigate into your project directory and start the development server. The application will be available at http://localhost:3000.

```bash
cd my-app
pnpm dev
# Open http://localhost:3000
```

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

### Full Scaffold Preset Example

Source: https://github.com/tanstack/cli/blob/main/packages/cli/skills/create-app-scaffold/references/create-flag-compatibility-matrix.md

Example of constructing a full app scaffold with specified framework, add-ons, and deployment. Use `-y` to skip interactive prompts after flags are finalized.

```bash
npx @tanstack/cli create app --framework react --add-ons tanstack-query --deployment netlify -y
```

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

### Interactive TanStack Router App Creation

Source: https://github.com/tanstack/cli/blob/main/cli-aliases/create-tsrouter-app/README.md

Run the CLI without a project name to start an interactive setup process.

```bash
pnpm dlx create-tsrouter-app@latest
```

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

### Set Up Environment Variables

Source: https://github.com/tanstack/cli/blob/main/docs/quick-start.md

Copy the example environment file and edit it with your specific API keys and values required by certain add-ons.

```bash
cp .env.example .env
# Edit .env with your values
```

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

### Set Up Environment Variables

Source: https://github.com/tanstack/cli/blob/main/docs/troubleshooting.md

After creating a project, copy the example environment file and edit it with your specific values before restarting the development server.

```bash
cp .env.example .env
# Edit .env with your values
pnpm dev  # Restart
```

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

### Quick Start: Create and Develop an Add-on

Source: https://github.com/tanstack/cli/blob/main/docs/creating-add-ons.md

Steps to create a base project, add your add-on code, initialize, compile, and test it locally.

```bash
# 1. Create base project
tanstack create my-addon-dev -y

# 2. Add your code
#    - src/integrations/my-feature/
#    - src/routes/demo/my-feature.tsx
#    - Update package.json

# 3. Extract add-on
tanstack add-on init

# 4. Edit .add-on/info.json

# 5. Compile
tanstack add-on compile

# Optional: continuously rebuild while authoring
tanstack add-on dev

# 6. Test locally
npx serve .add-on -l 9080
tanstack create test --add-ons http://localhost:9080/info.json
```

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

### Copy Environment File

Source: https://github.com/tanstack/cli/blob/main/packages/create/src/frameworks/solid/examples/tanchat/assets/ai-streaming-server/README.md

Copy the example environment file to create your own configuration.

```bash
cp .env.example .env
```

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

### Start in Production Mode

Source: https://github.com/tanstack/cli/blob/main/packages/create/src/frameworks/solid/examples/tanchat/assets/ai-streaming-server/README.md

Runs the built application in production mode.

```bash
npm start
```

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

### TanStack CLI Development Setup

Source: https://github.com/tanstack/cli/blob/main/CLAUDE.md

Commands for setting up the development environment for the TanStack CLI, including installation, building, and running in watch mode.

```bash
pnpm install && pnpm build
```

```bash
pnpm dev
```

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

### Setup React-Query Client and Provider

Source: https://github.com/tanstack/cli/blob/main/examples/react/resume/README.md

Initialize a QueryClient and wrap your application with QueryClientProvider in your main entry file.

```tsx
import { QueryClient, QueryClientProvider } from "@tanstack/react-query";

// ...

const queryClient = new QueryClient();

// ...

if (!rootElement.innerHTML) {
  const root = ReactDOM.createRoot(rootElement);

  root.render(
    <QueryClientProvider client={queryClient}>
      <RouterProvider router={router} />
    </QueryClientProvider>
  );
}
```

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

### Initialize a new add-on

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

Use this command to start creating a custom add-on. It generates the necessary folder structure and configuration files.

```bash
tanstack add-on init
```

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

### Setup CLI for Ecosystem Integrations

Source: https://github.com/tanstack/cli/blob/main/packages/cli/skills/choose-ecosystem-integrations/SKILL.md

Run these commands to set up the CLI for choosing ecosystem integrations. This involves fetching JSON output from the ecosystem and create commands.

```bash
npx @tanstack/cli ecosystem --json
```

```bash
npx @tanstack/cli create --list-add-ons --json
```

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

### Get Add-on Details

Source: https://github.com/tanstack/cli/blob/main/packages/cli/skills/add-addons-existing-app/SKILL.md

Validate optionized add-ons by fetching their details in JSON format before installation. This helps in understanding and confirming the add-on's configuration options.

```bash
npx @tanstack/cli create --addon-details prisma --json
```

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

### Initialize a new template

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

Use this command to start creating a reusable project template. It generates the required configuration files.

```bash
tanstack template init
```

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

### Start Strapi Server

Source: https://github.com/tanstack/cli/blob/main/packages/create/src/frameworks/react/add-ons/strapi/README.md

Start the Strapi development server. This command is typically run from the 'server' directory.

```bash
npm run develop
```

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

### Start Dev Watch with Valid Framework Directory

Source: https://github.com/tanstack/cli/blob/main/packages/cli/skills/maintain-custom-addons-dev-watch/SKILL.md

Ensure the directory specified with `--dev-watch` exists, is a directory, and contains either `add-ons/`, `assets/`, or `framework.json`. Invalid targets will cause the watch setup to fail before file syncing begins.

```bash
npx @tanstack/cli create my-sandbox --dev-watch ../valid-framework-dir
```

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

### Create and Run Strapi Project

Source: https://github.com/tanstack/cli/blob/main/packages/create/src/frameworks/solid/add-ons/strapi/README.md

Use these commands to create a new Strapi project, navigate into its directory, and start the development server.

```bash
pnpm dlx create-strapi@latest my-strapi-project
cd my-strapi-project
pnpm dev
```

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

### Router-Only Preset Example

Source: https://github.com/tanstack/cli/blob/main/packages/cli/skills/create-app-scaffold/references/create-flag-compatibility-matrix.md

Example of constructing a router-only scaffold with a specified framework and toolchain. Use `-y` to skip interactive prompts after flags are finalized.

```bash
npx @tanstack/cli create app --router-only --framework react --toolchain biome -y
```

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

### Run Add-on Development Loop

Source: https://github.com/tanstack/cli/blob/main/packages/cli/skills/maintain-custom-addons-dev-watch/SKILL.md

Start the development server to continuously watch for changes in your add-on source code and recompile as needed.

```bash
npx @tanstack/cli add-on dev
```

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

### Development Commands

Source: https://github.com/tanstack/cli/blob/main/packages/create/src/frameworks/react/examples/resume/README.md

Provides essential npm commands for starting the development server and building the project for production.

```bash
# Start development server
npm run dev

# Build for production
npm run build
```

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

### Create TanStack Start App

Source: https://github.com/tanstack/cli/blob/main/AGENTS.md

Use this command to create a new TanStack Start application. You can specify add-ons to include during creation.

```bash
npx @tanstack/cli create my-app
```

```bash
npx @tanstack/cli create my-app --add-ons clerk,drizzle,tanstack-query
```

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

### Create TanStack Start App

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

Use this command to create a new project with TanStack Start, the recommended full-stack SSR framework. This is the default behavior.

```bash
npx @tanstack/cli create my-app
```

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

### Install Strapi Dependencies

Source: https://github.com/tanstack/cli/blob/main/packages/create/src/frameworks/react/add-ons/strapi/README.md

Install Strapi dependencies if you created a local Strapi project in a sibling 'server' directory.

```bash
cd ../server
npm install    # or pnpm install / yarn install
```

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

### Create Project with Add-ons

Source: https://github.com/tanstack/cli/blob/main/docs/add-ons.md

Use the `tanstack create` command with the `--add-ons` flag to include specific add-ons during project initialization. This command installs and configures the specified add-ons.

```bash
tanstack create my-app --add-ons tanstack-query,clerk,drizzle
```

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

### Install Node.js with nvm

Source: https://github.com/tanstack/cli/blob/main/docs/troubleshooting.md

To resolve 'permission denied' errors, use a Node version manager like nvm to install and manage Node.js versions.

```bash
curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.39.0/install.sh | bash
nvm install 20
```

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

### List Add-ons for Specific Framework and Template

Source: https://github.com/tanstack/cli/blob/main/cli-aliases/create-tsrouter-app/README.md

Get a list of available add-ons for a specified framework (e.g., Solid) and template (e.g., file-router).

```bash
pnpm dlx create-tsrouter-app@latest --list-add-ons --framework solid --template file-router
```

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

### Create New App with Create Start App

Source: https://github.com/tanstack/cli/blob/main/cli-aliases/create-start-app/README.md

Use this command to create a new TanStack Router application with default settings.

```bash
pnpm dlx create-start-app@latest my-app
```

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

### List Available Add-ons

Source: https://github.com/tanstack/cli/blob/main/docs/add-ons.md

Run `tanstack create --list-add-ons` to see all add-ons that are available for installation. This command helps you discover the full range of extensions for your project.

```bash
# List all available add-ons
tanstack create --list-add-ons
```

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

### Add-on Options Configuration

Source: https://github.com/tanstack/cli/blob/main/docs/creating-add-ons.md

Example of defining user-configurable options for an add-on, including select types and default values.

```json
{
  "options": {
    "database": {
      "type": "select",
      "label": "Database",
      "options": [
        { "value": "postgres", "label": "PostgreSQL" },
        { "value": "sqlite", "label": "SQLite" }
      ],
      "default": "postgres"
    }
  }
}
```

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

### List Add-ons for Specific Framework and Router

Source: https://github.com/tanstack/cli/blob/main/cli-aliases/create-tanstack-app/README.md

Get a list of add-ons for a specific framework (e.g., Solid) and template (e.g., file-router).

```bash
pnpm dlx create-tanstack-app@latest --list-add-ons --framework solid --template file-router
```

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

### TanStack CLI Development Setup

Source: https://github.com/tanstack/cli/blob/main/AGENTS.md

Commands for setting up the TanStack CLI monorepo and running it in development mode. Includes instructions for testing from a peer directory.

```bash
pnpm install && pnpm build    # Setup
```

```bash
pnpm dev                       # Watch mode
```

```bash
# Test from peer directory (not inside monorepo)
node ../cli/packages/cli/dist/index.js create my-app
```

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

### Dockerizing TanStack Project Creation

Source: https://github.com/tanstack/cli/blob/main/docs/examples.md

A Dockerfile that sets up a Node.js environment, installs the TanStack CLI and pnpm, creates a new TanStack app, installs dependencies, builds the project, and defines the command to start the application.

```dockerfile
FROM node:20-slim
RUN npm install -g @tanstack/cli pnpm
RUN tanstack create app -y
WORKDIR /app
RUN pnpm install && pnpm build
CMD ["pnpm", "start"]
```

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

### Interactive TanStack App Creation

Source: https://github.com/tanstack/cli/blob/main/cli-aliases/create-tanstack-app/README.md

Run the CLI without a project name to initiate an interactive setup process for creating a new TanStack application.

```bash
pnpm dlx create-tanstack-app@latest
```

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

### Correctly Map Partner IDs to Add-on IDs

Source: https://github.com/tanstack/cli/blob/main/packages/cli/skills/choose-ecosystem-integrations/SKILL.md

Avoid using partner IDs directly as add-on IDs. Always map them using `ecosystem --json` and `create --list-add-ons --json` first, as some partner IDs are not directly installable.

```bash
npx @tanstack/cli add <partner-id-from-ecosystem>
```

```bash
npx @tanstack/cli ecosystem --json
```

```bash
npx @tanstack/cli create --list-add-ons --json
```

```bash
npx @tanstack/cli add <mapped-addon-id>
```

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

### Create RedwoodSDK Project

Source: https://github.com/tanstack/cli/blob/main/examples/custom-cli/create-rwsdk/project/base/README.md

Use this command to create a new RedwoodSDK project with the minimal template. Navigate into the project directory and install dependencies.

```shell
npx create-rwsdk my-project-name -t minimal
cd my-project-name
npm install
```

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

### Setup TanStack CLI for App Scaffold

Source: https://github.com/tanstack/cli/blob/main/packages/cli/skills/create-app-scaffold/SKILL.md

Use this command to set up a TanStack app scaffold with specified framework, toolchain, deployment, and add-ons in non-interactive mode.

```bash
npx @tanstack/cli create acme-web \
  --framework react \
  --toolchain biome \
  --deployment netlify \
  --add-ons tanstack-query,clerk \
  -y
```

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

### Running Strapi and TanStack Servers Simultaneously

Source: https://github.com/tanstack/cli/blob/main/packages/create/src/frameworks/react/add-ons/strapi/README.md

Instructions for running both the Strapi backend and the TanStack Start frontend development servers concurrently using two separate terminal windows.

```bash
Terminal 1 - Strapi:
cd server && npm run develop

Terminal 2 - TanStack Start:
cd client && npm run dev   # or your project name
```

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

### Create TanStack App

Source: https://github.com/tanstack/cli/blob/main/docs/examples.md

Use these commands to create a new TanStack project. The `-y` flag accepts defaults, while `--router-only` creates a SPA without SSR. Use `--interactive` for a guided setup.

```bash
# TanStack Start app (default, with SSR)
tanstack create my-app -y

# Router-only SPA (no SSR)
tanstack create my-app --router-only -y

# Interactive mode to pick add-ons
tanstack create my-app --interactive
```

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

### Interactive TanStack App Creation

Source: https://github.com/tanstack/cli/blob/main/cli-aliases/create-tanstack/README.md

Run the create-tanstack CLI without a project name to start an interactive setup process. This allows you to choose project name, router type, TypeScript support, Tailwind CSS, package manager, toolchain, and Git initialization.

```bash
pnpm dlx create-tanstack@latest
```

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

### Install TanStack CLI Globally

Source: https://github.com/tanstack/cli/blob/main/docs/installation.md

Install the TanStack CLI globally using npm or pnpm for command-line access. After installation, you can use the 'tanstack create' command.

```bash
npm install -g @tanstack/cli
# or: pnpm add -g @tanstack/cli

tanstack create my-app
```

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

### Initialize and Compile Custom Add-ons

Source: https://github.com/tanstack/cli/blob/main/packages/cli/skills/maintain-custom-addons-dev-watch/SKILL.md

Use these commands to set up a new custom add-on and compile its initial code.

```bash
npx @tanstack/cli add-on init
```

```bash
npx @tanstack/cli add-on compile
```

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

### Example JSON Request Body

Source: https://github.com/tanstack/cli/blob/main/packages/create/src/frameworks/solid/examples/tanchat/assets/ai-streaming-server/README.md

An example of the JSON payload to send to the /api/chat endpoint.

```json
{
  "messages": [{ "role": "user", "content": "Hello, how are you?" }]
}
```

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

### Install Wrangler CLI

Source: https://github.com/tanstack/cli/blob/main/packages/create/src/frameworks/react/hosts/cloudflare/README.md

Install the Wrangler command-line interface globally to manage your Cloudflare Workers.

```bash
npm install -g wrangler
```

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

### Create App with Add-ons

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

Scaffold a new project and include specified add-ons like authentication, database, or state management solutions. Multiple add-ons can be comma-separated.

```bash
npx @tanstack/cli create my-app --add-ons clerk,drizzle,tanstack-query
```

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

### Distributing Add-ons via URL

Source: https://github.com/tanstack/cli/blob/main/docs/creating-add-ons.md

Shows how to create a new project using an add-on hosted at a specific URL.

```bash
tanstack create my-app --add-ons https://example.com/my-addon/info.json
```

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

### Get Add-on Details

Source: https://github.com/tanstack/cli/blob/main/cli-aliases/create-start-app/README.md

Use direct CLI introspection commands to get details about a specific add-on.

```bash
pnpm dlx create-start-app@latest --addon-details tanstack-query
```

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

### Initialize Add-on from Correct Project Type

Source: https://github.com/tanstack/cli/blob/main/packages/cli/skills/maintain-custom-addons-dev-watch/SKILL.md

Custom add-on authoring requires a file-router project mode. The `add-on init` command will exit if run from an incompatible project mode.

```bash
# Run add-on init from a file-router project
npx @tanstack/cli add-on init
```

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

### Start TanStack App

Source: https://github.com/tanstack/cli/blob/main/packages/create/src/frameworks/react/add-ons/strapi/README.md

Start your TanStack application in a separate terminal after setting up Strapi. This command is run from the client directory.

```bash
cd ../client   # or your project name
npm run dev
```

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

### Install TanStack CLI Globally or Use npx

Source: https://github.com/tanstack/cli/blob/main/docs/troubleshooting.md

If the 'tanstack' command is not found, you can use 'npx' to run the CLI or install it globally.

```bash
# Use npx instead
npx @tanstack/cli create my-app
```

```bash
# Or reinstall globally
npm install -g @tanstack/cli
```

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

### List Available Add-ons for Solid Framework

Source: https://github.com/tanstack/cli/blob/main/cli-aliases/create-start-app/README.md

Retrieve a list of all available add-ons specifically for the Solid framework.

```bash
pnpm dlx create-start-app@latest --list-add-ons --framework solid
```

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

### Root Route Layout Example

Source: https://github.com/tanstack/cli/blob/main/examples/react/blog/README.md

Example of a root route layout component that includes meta tags, header, navigation, and script rendering.

```tsx
import { HeadContent, Scripts, createRootRoute } from '@tanstack/react-router'

export const Route = createRootRoute({
  head: () => ({
    meta: [
      { charSet: 'utf-8' },
      { name: 'viewport', content: 'width=device-width, initial-scale=1' },
      { title: 'My App' },
    ],
  }),
  shellComponent: ({ children }) => (
    <html lang="en">
      <head>
        <HeadContent />
      </head>
      <body>
        <header>
          <nav>
            <Link to="/">Home</Link>
            <Link to="/about">About</Link>
          </nav>
        </header>
        {children}
        <Scripts />
      </body>
    </html>
  ),
})
```

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

### List Available Add-ons

Source: https://github.com/tanstack/cli/blob/main/cli-aliases/create-start-app/README.md

Retrieve a list of all available add-ons for the current framework.

```bash
pnpm dlx create-start-app@latest --list-add-ons
```

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

### Build for Production

Source: https://github.com/tanstack/cli/blob/main/examples/react/ecommerce/README.md

Execute this command to build the project for production deployment.

```bash
npm run build
```

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

### Install React-Query Dependencies

Source: https://github.com/tanstack/cli/blob/main/examples/react/resume/README.md

Add @tanstack/react-query and @tanstack/react-query-devtools to your project dependencies.

```bash
npm install @tanstack/react-query @tanstack/react-query-devtools
```

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

### List All Available Add-ons

Source: https://github.com/tanstack/cli/blob/main/cli-aliases/create-tanstack-app/README.md

Display a list of all available add-ons compatible with the Code Router.

```bash
pnpm dlx create-tanstack-app@latest --list-add-ons
```

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

### Agent Usage: List Add-ons and Add-on Details

Source: https://github.com/tanstack/cli/blob/main/cli-aliases/create-tanstack/README.md

CLI commands for agent usage, including listing all add-ons and retrieving details for a specific add-on.

```bash
pnpm dlx create-tanstack@latest --list-add-ons
```

```bash
pnpm dlx create-tanstack@latest --addon-details tanstack-query
```

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

### Get Node.js Version

Source: https://github.com/tanstack/cli/blob/main/docs/troubleshooting.md

When reporting issues, include your Node.js version.

```bash
node --version
```

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

### Enable Add-ons Interactively

Source: https://github.com/tanstack/cli/blob/main/cli-aliases/create-tanstack-app/README.md

Run this command to be prompted for add-on selection during application creation.

```bash
pnpm dlx create-tanstack-app@latest --add-ons
```

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

### Enable Add-ons Interactively

Source: https://github.com/tanstack/cli/blob/main/cli-aliases/create-tsrouter-app/README.md

Run this command to be prompted for add-on selection during application creation.

```bash
pnpm dlx create-tsrouter-app@latest --add-ons
```

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

### Get TanStack CLI Version

Source: https://github.com/tanstack/cli/blob/main/docs/troubleshooting.md

When reporting issues, include the output of the CLI version command.

```bash
npx @tanstack/cli --version
```

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

### Get Add-on Details

Source: https://github.com/tanstack/cli/blob/main/cli-aliases/ts-create-start/README.md

Fetch detailed information about a specific add-on using the `--addon-details` flag.

```bash
pnpm create @tanstack/start@latest --addon-details tanstack-query
```

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

### Testing Add-ons Locally with TanStack CLI

Source: https://github.com/tanstack/cli/blob/main/AGENTS.md

Instructions for serving a local add-on and using it with the `create` command. This is useful for developing custom add-ons.

```bash
# Serve add-on
npx serve .add-on -l 9080
```

```bash
# Use in create
node packages/cli/dist/index.js create test --add-ons http://localhost:9080/info.json
```

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

### Get Add-on Details

Source: https://github.com/tanstack/cli/blob/main/docs/mcp-migration.md

Retrieve details for a specific add-on. Replace `drizzle` with the desired add-on name.

```bash
tanstack create --addon-details drizzle --framework React --json
```

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

### Create a Solid TanStack Router App

Source: https://github.com/tanstack/cli/blob/main/cli-aliases/create-tsrouter-app/README.md

Build a new application using the Solid framework.

```bash
pnpm dlx create-tsrouter-app@latest my-app --framework solid
```

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

### List Deployment Targets

Source: https://github.com/tanstack/cli/blob/main/packages/cli/skills/choose-ecosystem-integrations/references/deployment-targets.md

Use this command to list all available deployment targets. This is useful for understanding the options before creating a new project.

```bash
npx @tanstack/cli ecosystem --category deployment --json
```

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

### Install TanStack Store Dependency

Source: https://github.com/tanstack/cli/blob/main/examples/react/resume/README.md

Add @tanstack/store to your project dependencies to use TanStack's state management solution.

```bash
npm install @tanstack/store
```

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

### Create TanStack Router App with Custom Options

Source: https://github.com/tanstack/cli/blob/main/cli-aliases/create-tsrouter-app/README.md

Specify template and package manager directly using command-line flags.

```bash
pnpm dlx create-tsrouter-app@latest my-app --template file-router --package-manager pnpm
```

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

### Test CLI from Peer Directory

Source: https://github.com/tanstack/cli/blob/main/CLAUDE.md

Run the TanStack CLI from a peer directory to test changes without installing it globally.

```bash
node ../cli/packages/cli/dist/index.js create my-app
```

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

### List All Available Add-ons

Source: https://github.com/tanstack/cli/blob/main/cli-aliases/create-tsrouter-app/README.md

Display a list of all available add-ons compatible with the Code Router for React.

```bash
pnpm dlx create-tsrouter-app@latest --list-add-ons
```

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

### Route with Data Loader

Source: https://github.com/tanstack/cli/blob/main/examples/react/blog/README.md

Example of a route that uses the 'loader' functionality to fetch data from an external API before rendering the component.

```tsx
import { createFileRoute } from '@tanstack/react-router'

export const Route = createFileRoute('/people')({
  loader: async () => {
    const response = await fetch('https://swapi.dev/api/people')
    return response.json()
  },
  component: PeopleComponent,
})

function PeopleComponent() {
  const data = Route.useLoaderData()
  return (
    <ul>
      {data.results.map((person) => (
        <li key={person.name}>{person.name}</li>
      ))}
    </ul>
  )
}
```

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

### Integrations: Root Provider Hook

Source: https://github.com/tanstack/cli/blob/main/docs/creating-add-ons.md

Example of configuring a 'root-provider' integration hook in info.json to inject custom providers into the application.

```json
{
  "integrations": [
    {
      "type": "root-provider",
      "jsName": "MyProvider",
      "path": "src/integrations/my-feature/provider.tsx"
    }
  ]
}
```

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

### Local Iteration Loop for Add-on Development

Source: https://github.com/tanstack/cli/blob/main/docs/creating-add-ons.md

Provides commands for setting up a local development loop, serving the add-on locally and creating a test app that uses it.

```bash
# in your add-on project
tanstack add-on compile
npx serve .add-on -l 9080

# in another terminal
tanstack create test-app --add-ons http://localhost:9080/info.json
```

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

### List Available Add-ons

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

View a list of all available add-ons that can be included when creating a new project or added to an existing one. This helps in exploring project customization options.

```bash
npx @tanstack/cli create --list-add-ons
```

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

### Use Server Function in Component

Source: https://github.com/tanstack/cli/blob/main/examples/react/blog/README.md

Example of a React component that fetches and displays the server time using the defined server function.

```tsx
// Use in a component
function MyComponent() {
  const [time, setTime] = useState('')
  
  useEffect(() => {
    getServerTime().then(setTime)
  }, [])
  
  return <div>Server time: {time}</div>
}
```

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

### Correct Doc Fetch Syntax

Source: https://github.com/tanstack/cli/blob/main/packages/cli/skills/query-docs-library-metadata/SKILL.md

Demonstrates the correct way to fetch documentation using positional arguments for library ID and path. Avoid using flags like `--library` and `--version` for these parameters, and do not include a `/docs/` prefix in the path.

```bash
# Step 1: resolve a valid library id
npx @tanstack/cli libraries --json
# Step 2: fetch using positional args — library id then doc path (no /docs/ prefix)
npx @tanstack/cli doc router framework/react/guide/routing
```

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

### List Available Add-ons

Source: https://github.com/tanstack/cli/blob/main/cli-aliases/ts-create-start/README.md

Retrieve a list of all available add-ons for your project. You can filter by framework using the `--framework` flag.

```bash
pnpm create @tanstack/start@latest --list-add-ons
```

```bash
pnpm create @tanstack/start@latest --list-add-ons --framework solid
```

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

### List Add-ons for Specific Framework and Template

Source: https://github.com/tanstack/cli/blob/main/cli-aliases/create-tanstack/README.md

Retrieve a list of add-ons for a particular framework (e.g., Solid) and template (e.g., file-router).

```bash
pnpm dlx create-tanstack@latest --list-add-ons --framework solid --template file-router
```

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

### Enable Add-ons Interactively with create-tanstack

Source: https://github.com/tanstack/cli/blob/main/cli-aliases/create-tanstack/README.md

Run this command to be prompted for add-on selection during project creation.

```bash
pnpm dlx create-tanstack@latest --add-ons
```

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

### Create API Route with Server Handler

Source: https://github.com/tanstack/cli/blob/main/examples/react/blog/README.md

Define an API route '/api/hello' with a server-side GET handler that returns a JSON response.

```tsx
import { createFileRoute } from '@tanstack/react-router'
import { json } from '@tanstack/react-start'

export const Route = createFileRoute('/api/hello')({
  server: {
    handlers: {
      GET: () => json({ message: 'Hello, World!' }),
    },
  },
})
```

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

### Create Server Function

Source: https://github.com/tanstack/cli/blob/main/examples/react/blog/README.md

Define a server function using createServerFn to handle GET requests and return the current server time.

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

const getServerTime = createServerFn({
  method: 'GET',
}).handler(async () => {
  return new Date().toISOString()
})
```

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

### Correctly Use --dev-watch with --no-install

Source: https://github.com/tanstack/cli/blob/main/packages/cli/skills/maintain-custom-addons-dev-watch/SKILL.md

The `--dev-watch` flag is incompatible with `--no-install`. Ensure you do not use `--no-install` when running `create` with `--dev-watch`, as it will cause the automated loop to fail before any syncing occurs.

```bash
npx @tanstack/cli create my-sandbox --dev-watch ../my-addon-package
```

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

### Add-on Structure Overview

Source: https://github.com/tanstack/cli/blob/main/docs/creating-add-ons.md

Illustrates the typical directory structure for an add-on project, including metadata, package files, and assets.

```bash
.add-on/
├── info.json        # Metadata (required)
├── package.json     # Dependencies (optional)
└── assets/          # Files to copy
    └── src/
        ├── integrations/my-feature/
        └── routes/demo/my-feature.tsx
```

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

### Consume Streaming API Response

Source: https://github.com/tanstack/cli/blob/main/packages/create/src/frameworks/solid/examples/tanchat/assets/ai-streaming-server/README.md

Example code for making a POST request to the chat API and processing the Server-Sent Events (SSE) stream.

```typescript
const response = await fetch("http://localhost:3000/api/chat", {
  method: "POST",
  headers: {
    "Content-Type": "application/json",
  },
  body: JSON.stringify({
    messages: [{ role: "user", content: "Hello, how are you?" }],
  }),
});

const reader = response.body!.getReader();
const decoder = new TextDecoder();

while (true) {
  const { value, done } = await reader.read();
  if (done) break;

  const chunk = decoder.decode(value);
  const lines = chunk.split("\n");

  for (const line of lines) {
    if (line.startsWith("data: ")) {
      const data = JSON.parse(line.slice(6));
      if (data === "[DONE]") break;

      // Handle the streaming response chunk
      console.log(data);
    }
  }
}
```