tanstack-start

Scaffold TanStack Start routing, API routes, and AI integrations for React apps.

35|14|Updated Jun 14, 2023
One-click install
npx skills add https://github.com/hashintel/labs --skill tanstack-start
Or copy as Structured Prompt for Agent
Please help me install this Agent Skill.
Skill: tanstack-start
Source: https://github.com/hashintel/labs/tree/main/pocs/sgai-black-triangles/.claude/skills/tanstack-start
Command: npx skills add https://github.com/hashintel/labs --skill tanstack-start

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

This Skill provides a comprehensive guide and patterns for developing full-stack applications using TanStack Start, with a particular focus on integrating AI chat and Model Context Protocol (MCP) features. It helps developers quickly implement common patterns for routing, API handling, and AI interactions, reducing development time and complexity.

Core Features & Use Cases

  • Streamlined Routing: Master file-based routing, including root layouts, index routes, dynamic segments, and layout routes, to build robust navigation structures.
  • Efficient API Routes: Learn to create server handlers for API endpoints, enabling seamless backend logic directly within your routes.
  • AI Chat Integration: Implement both client-side (@ai-sdk/react) and server-side (streamText with OpenRouter) AI chat functionalities, making your applications interactive and intelligent.
  • MCP Server Setup: Register Model Context Protocol (MCP) tools with Zod schemas to enable advanced, structured AI interactions and tool usage.
  • Use Case: Rapidly prototype a new web application that requires dynamic routing, server-side data processing, and integrated AI chat capabilities, such as a customer support bot or an interactive content generator.

Quick Start

Show me how to integrate client-side AI chat using @ai-sdk/react and a server-side API route for streamText with OpenRouter in a TanStack Start project.

Frequently Asked Questions about tanstack-start

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I set up file-based routing in a TanStack Start React application?

File-based routing in TanStack Start automatically generates your route tree from the file structure in your routes directory. Place files like `index.tsx` for root routes, use dynamic segments with brackets (e.g., `[id].tsx`), and layout routes to wrap nested pages. TanStack Start compiles these into typed route definitions without manual configuration.

Can I integrate AI chat into a TanStack Start app using OpenRouter?

Yes. Use `@ai-sdk/react` on the client side for streaming chat UI and create a server API route with `streamText` from the AI SDK configured with OpenRouter as your provider. TanStack Start's file-based API routes handle the server handler pattern, and you set up OpenRouter credentials as environment variables for the provider singleton.

What's the best way to add Model Context Protocol (MCP) tools to my TanStack Start application?

Register MCP tools by defining Zod schemas for tool parameters and creating handler functions in your server routes. TanStack Start integrates these through API routes and server handlers, enabling structured AI interactions where the AI can invoke your tools with validated inputs based on the schema definitions.

Do I need TypeScript to use TanStack Start's routing and API patterns?

TypeScript is strongly recommended for TanStack Start. The framework provides automatic type inference for routes, API handlers, and server functions, catching routing errors at compile time and enabling full IDE autocomplete. While not strictly required, TypeScript support is a core design feature that reduces runtime errors.

How do server handlers work for API routes in TanStack Start?

Server handlers in TanStack Start are functions exported from route files that respond to HTTP requests. Define handlers like `export const POST = (event) => {}` in your API route files. TanStack Start maps these to HTTP methods, routes requests based on file structure, and provides type-safe access to request data and response control.

Can I use TanStack Start for a full-stack app that requires both dynamic routing and server-side data processing?

Yes. TanStack Start is designed for full-stack React development with file-based routing for dynamic navigation and built-in API routes for server-side logic. Combine route tree generation with server handlers to process data server-side, enabling patterns like customer support bots and interactive content generators without separate backend setup.