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-start2. Install Anvia
pnpm add @anvia/core @anvia/openai zodInstall other provider packages only when you need them:
pnpm add @anvia/anthropic @anvia/gemini @anvia/mistral3. 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:
| File | Purpose |
|---|---|
src/ai/support-agent.ts | Provider client, model, tools, and reusable agent |
src/routes/api/support.ts | Raw HTTP server route for JSON and streaming |
src/ai/support.functions.ts | Optional 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.
