TanStack Start

01 Prep

Prepare a TanStack Start app for Anvia server functions and server routes.

Use this path when Anvia will run inside a TanStack Start application.

1. Create or Open a Start Project

Create a TanStack Start React project from the current TanStack starter, or use an existing app with @tanstack/react-start installed.

pnpm create @tanstack/start@latest anvia-start
cd anvia-start

2. Install Anvia

pnpm add @anvia/core @anvia/openai zod

Install other provider packages only when you need them:

pnpm add @anvia/anthropic @anvia/gemini @anvia/mistral

3. Add Environment Variables

Anvia clients require explicit configuration.

OPENAI_API_KEY=sk_...

Read this value in server-side modules or server route handlers:

const apiKey = process.env.OPENAI_API_KEY;

if (!apiKey) {
  throw new Error("OPENAI_API_KEY is required");
}

4. Choose File Boundaries

TanStack Start gives you two useful server shapes:

FilePurpose
src/ai/support-agent.tsProvider client, model, tools, and reusable agent
src/routes/api/support.tsRaw HTTP server route for JSON and streaming
src/ai/support.functions.tsOptional createServerFn(...) wrapper callable from routes or components

Use server routes when you need raw Request and Response control. Use server functions when you want typed RPC-style calls inside the app.

Next

Build the reusable agent in Setup Anvia. Read How Anvia Works for the SDK boundaries.