Skip to main content

​
TanStack AI

You can use TanStack AI to integrate OpenRouter with your React, Solid, or Preact applications. The OpenRouter adapter provides access to 400+ AI models from various providers through a single unified API. To get started, install @tanstack/ai-openrouter: 
npm install @tanstack/ai @tanstack/ai-openrouter

​
Basic Usage

import { chat } from "@tanstack/ai";
import { openRouterText } from "@tanstack/ai-openrouter";

const stream = chat({
  adapter: openRouterText("openai/gpt-5.2"),
  messages: [{ role: "user", content: "Hello!" }],
});

​
Configuration

You can configure the OpenRouter adapter with additional options: 
import { createOpenRouter, type OpenRouterConfig } from "@tanstack/ai-openrouter";

const config: OpenRouterConfig = {
  apiKey: process.env.OPENROUTER_API_KEY!,
  baseURL: "https://openrouter.ai/api/v1", // Optional
  httpReferer: "https://your-app.com", // Optional, for rankings
  xTitle: "Your App Name", // Optional, for rankings
};

const adapter = createOpenRouter(config.apiKey, config);

​
Available Models

OpenRouter provides access to 400+ models from various providers. Models use the format provider/model-name: 
model: "openai/gpt-5.2"
model: "anthropic/claude-sonnet-4.5"
model: "google/gemini-3.1-pro-preview"
model: "z-ai/glm-4.7"
model: "minimax/minimax-m2.1"
See the full list at openrouter.ai/models.

​
Server-Side Example

import { chat, toServerSentEventsResponse } from "@tanstack/ai";
import { openRouterText } from "@tanstack/ai-openrouter";

export async function POST(request: Request) {
  const { messages } = await request.json();

  const stream = chat({
    adapter: openRouterText("openai/gpt-5.2"),
    messages,
  });

  return toServerSentEventsResponse(stream);
}

​
Using Tools

import { chat, toolDefinition } from "@tanstack/ai";
import { openRouterText } from "@tanstack/ai-openrouter";
import { z } from "zod";

const getWeatherDef = toolDefinition({
  name: "get_weather",
  description: "Get the current weather",
  inputSchema: z.object({
    location: z.string(),
  }),
});

const getWeather = getWeatherDef.server(async ({ location }) => {
  return { temperature: 72, conditions: "sunny" };
});

const messages = [{ role: "user", content: "What's the weather in NYC?" }];

const stream = chat({
  adapter: openRouterText("openai/gpt-5.2"),
  messages,
  tools: [getWeather],
});

​
Environment Variables

Set your API key in environment variables: 
OPENROUTER_API_KEY=sk-or-...

​
Model Routing and Provider Preferences

TanStack AI supports OpenRouter’s powerful routing features through the modelOptions parameter. You can configure model fallbacks, provider sorting, and data policies.

​
Model Fallbacks

Specify backup models to try if the primary model is unavailable: 
import { chat } from "@tanstack/ai";
import { openRouterText } from "@tanstack/ai-openrouter";

const stream = chat({
  adapter: openRouterText("openai/gpt-5.2"),
  messages: [{ role: "user", content: "Hello!" }],
  modelOptions: {
    models: ["anthropic/claude-sonnet-4.5", "google/gemini-3.1-pro-preview"],
    route: "fallback",
  },
});

​
Provider Sorting

Sort providers by price, throughput, or latency instead of using the default load balancing: 
import { chat } from "@tanstack/ai";
import { openRouterText } from "@tanstack/ai-openrouter";

// Prioritize fastest providers
const stream = chat({
  adapter: openRouterText("openai/gpt-5.2"),
  messages: [{ role: "user", content: "Hello!" }],
  modelOptions: {
    provider: {
      sort: "throughput",
    },
  },
});

​
Provider Ordering

Specify an explicit order of providers to try: 
import { chat } from "@tanstack/ai";
import { openRouterText } from "@tanstack/ai-openrouter";

const stream = chat({
  adapter: openRouterText("anthropic/claude-sonnet-4.5"),
  messages: [{ role: "user", content: "Hello!" }],
  modelOptions: {
    provider: {
      order: ["anthropic", "amazon-bedrock", "google-vertex"],
      allow_fallbacks: true,
    },
  },
});

​
Data Privacy Controls

Control data collection and use Zero Data Retention (ZDR) providers: 
import { chat } from "@tanstack/ai";
import { openRouterText } from "@tanstack/ai-openrouter";

const stream = chat({
  adapter: openRouterText("openai/gpt-5.2"),
  messages: [{ role: "user", content: "Hello!" }],
  modelOptions: {
    provider: {
      data_collection: "deny",
      zdr: true,
    },
  },
});

​
Filtering Providers

Include or exclude specific providers: 
import { chat } from "@tanstack/ai";
import { openRouterText } from "@tanstack/ai-openrouter";

const stream = chat({
  adapter: openRouterText("meta-llama/llama-3.3-70b-instruct"),
  messages: [{ role: "user", content: "Hello!" }],
  modelOptions: {
    provider: {
      only: ["together", "fireworks"],
      ignore: ["azure"],
      quantizations: ["fp16", "bf16"],
    },
  },
});

​
Cost Controls

Set maximum price limits for requests: 
import { chat } from "@tanstack/ai";
import { openRouterText } from "@tanstack/ai-openrouter";

const stream = chat({
  adapter: openRouterText("z-ai/glm-4.7"),
  messages: [{ role: "user", content: "Hello!" }],
  modelOptions: {
    provider: {
      max_price: {
        prompt: 0.5,
        completion: 2,
      },
    },
  },
});
For more advanced routing options like performance thresholds and partition-based sorting, see the Provider Routing documentation.

​
Resources

For more information and detailed documentation, check out these resources: