TanStack CLI

The TanStack Chat Application is an example implementation demonstrating how to build AI-powered interfaces.

Core Features

• AI Capabilities: Uses Claude 3.5 Sonnet with support for rich markdown formatting, syntax highlighting, and customizable system prompts.
• User Experience: Features a modern UI built with Tailwind CSS and Lucide icons, including conversation history management.
• Technical Foundation: Uses centralized state management via TanStack Store and is fully type-safe with TypeScript.

Tech Stack

• Routing: TanStack Router
• State Management: TanStack Store
• Styling: Tailwind CSS
• AI Integration: Anthropic's Claude API

The TanStack Chat Application is an example application demonstrating AI integration within the TanStack ecosystem.

Key Capabilities

• AI Engine: Powered by Claude 3.5 Sonnet.
• Formatting: Supports rich markdown rendering with syntax highlighting.
• Customization: Allows for customizable system prompts to tailor AI behavior.
• State Management: Uses TanStack Store for centralized state.
• UI/UX: Built with Tailwind CSS and Lucide icons, featuring conversation management and history.

Tech Stack

• Frontend Framework: TanStack Start
• Routing: TanStack Router
• State Management: TanStack Store
• Styling: Tailwind CSS
• AI Integration: Anthropic's Claude API

The Ecommerce Template is a product-focused template for TanStack Start (React, file-based routing) that includes:

• Routing: Catalog and product detail routes located in src/routes.
• UI: Reusable ecommerce UI components.
• AI Features: AI assistant wiring and demo tooling.
• Add-on Support: The root shell includes add-on compatibility seams located in integrations/**/{root-provider,provider}. This allows the template to compose with add-ons like query, form, shadcn, store, and strapi.
• Demos: Demo routes are discoverable via the header at /demo/*. You can safely remove demo.* files if you do not require the demo functionality.

The CLI ecosystem is split into two primary packages:

• @tanstack/cli: The main CLI interface providing commands such as create, add, add-on, starter, libraries, doc, search-docs, and ecosystem.
• @tanstack/create: The core engine that manages frameworks and add-ons.

The TanStack Start starter provides a foundation for building full-stack applications with the following core features:

• Full-document SSR: Server-Side Rendering is enabled out of the box using TanStack Start.
• Type-safe file routing: Routes are managed via the file system, with generated types ensuring type safety across your application.
• Design Token System: A reusable system for managing light and dark themes is included.

To maintain a stable development process, it is recommended to follow this order of operations:

1. Customize the home route to match your product requirements.
2. Implement at least one feature route and one API route.
3. Introduce add-ons only after the core user experience (UX) is clearly defined.

The Paraglide i18n add-on integrates ParaglideJS into your TanStack project to handle localized routing and message formatting.

Key behaviors:

• Message Storage: All translation messages are stored in the project.inlang/messages directory.
• Localized URLs: URL localization is handled automatically via the Paraglide Vite plugin and TanStack Router rewrite hooks.
• Code Generation: The src/paraglide output files are automatically regenerated whenever you run the development server or execute a build command.

The shopify-storefront template provides a complete storefront experience with the following routes:

• / — Storefront landing page (replaces the default home).
• /shop — Catalog landing page with a collections sidebar.
• /shop/products/$handle, /shop/collections/$handle, /shop/cart, /shop/search, /shop/pages/$handle, /shop/policies/$handle — Full Hydrogen-demo parity routes.
• /shop/account/* — Customer account routes (available if opted into during scaffolding).

Note on Data: By default, the .env.local file is configured to point to Shopify's public Hydrogen demo store, allowing you to see real products immediately without manual setup. To use your own store, refer to the Shopify add-on documentation.

The TanStack CLI provides several capabilities for managing your project lifecycle:

• Add-ons: Integrate essential services like Auth, databases, deployment, and monitoring into your scaffolded project.
• Templates: Choose from various reusable project templates to jumpstart your development.
• CLI Introspection: Use the CLI to discover available add-ons, documentation, libraries, and other ecosystem data directly from your terminal.

When using a TanStack Start starter template, you receive a pre-configured environment designed for rapid development. The core features included are:

• Full-document SSR: Server-Side Rendering is enabled out of the box using TanStack Start.
• Type-safe file routing: Routes are managed via the file system, with automatically generated types to ensure type safety across your application.
• Design token system: A reusable system for managing visual styles, supporting both light and dark themes.

To begin development, start by editing the route files located in your project's routing directory, then incrementally add functionality using available add-ons.

A standard project generated by the CLI follows this structure:

• src/routes/: Contains the file-based routing configuration. __root.tsx defines the root layout, and index.tsx defines the home page.
• src/integrations/: This directory is created if selected add-ons require integration files.
• .cta.json: The CLI configuration file.
• .env.example: A template for environment variables required by selected add-ons.

my-app/
├── src/
│   ├── routes/          # File-based routing
│   │   ├── __root.tsx   # Root layout
│   │   └── index.tsx    # Home page
│   └── integrations/    # Present when selected add-ons need it
├── .cta.json            # CLI config
└── .env.example         # Present when selected add-ons need env vars

To use the TanStack CLI effectively, it is important to understand the following core concepts:

• Add-on: A plugin that extends applications (e.g., clerk, drizzle). It contains its own code, dependencies, and hooks.
• Starter: A reusable preset of add-ons. Unlike an add-on, a starter contains only configuration and no code.
• Framework: The implementation for specific libraries like React or Solid, located in packages/create/src/frameworks/.
• Mode: Refers to the routing strategy used: file-router (file-based routes) or code-router (routes defined in code).

TanStack Start uses TanStack Router with file-based routing. Routes are managed as files within the src/routes directory.

Adding a Route

To add a new route, create a new file in ./src/routes. TanStack will automatically generate the route content for you.

Using Layouts

In a file-based routing setup, the root layout is defined in src/routes/__root.tsx. Any components or elements added to the root route will be rendered across all routes in the application.