TanStack AI
将 OpenRouter 与 TanStack AI 配合使用
TanStack AI
你可以使用 TanStack AI 将 OpenRouter 集成到 React、Solid 或 Preact 应用中。OpenRouter 适配器通过单一统一 API 提供对来自各家提供商的 400 多个 AI 模型的访问。首先安装 @tanstack/ai-openrouter：
npm install @tanstack/ai @tanstack/ai-openrouter
基本用法
import { chat } from "@tanstack/ai";
import { openRouterText } from "@tanstack/ai-openrouter";
const stream = chat({
adapter: openRouterText("openai/gpt-5.2"),
messages: [{ role: "user", content: "你好！" }],
});
配置
你可以为 OpenRouter 适配器配置额外选项：
import { createOpenRouter, type OpenRouterConfig } from "@tanstack/ai-openrouter";
const config: OpenRouterConfig = {
apiKey: process.env.OPENROUTER_API_KEY!,
baseURL: "https://openrouter.ai/api/v1", // 可选
httpReferer: "https://your-app.com", // 可选，用于排名
xTitle: "你的应用名称", // 可选，用于排名
};
const adapter = createOpenRouter(config.apiKey, config);
可用模型
OpenRouter 提供对来自各家提供商的 400 多个模型的访问。模型使用 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"
完整列表见 openrouter.ai/models。
服务端示例
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);
}
import { chat, toolDefinition } from "@tanstack/ai";
import { openRouterText } from "@tanstack/ai-openrouter";
import { z } from "zod";
const getWeatherDef = toolDefinition({
name: "get_weather",
description: "获取当前天气",
inputSchema: z.object({
location: z.string(),
}),
});
const getWeather = getWeatherDef.server(async ({ location }) => {
return { temperature: 72, conditions: "晴朗" };
});
const messages = [{ role: "user", content: "纽约现在天气怎么样？" }];
const stream = chat({
adapter: openRouterText("openai/gpt-5.2"),
messages,
tools: [getWeather],
});
环境变量
在环境变量中设置你的 API 密钥：
OPENROUTER_API_KEY=sk-or-...
模型路由与提供商偏好
TanStack AI 通过 modelOptions 参数支持 OpenRouter 强大的路由功能。你可以配置模型回退、提供商排序和数据策略。
模型回退
指定备用模型，以便在首选模型不可用时尝试：
import { chat } from "@tanstack/ai";
import { openRouterText } from "@tanstack/ai-openrouter";
const stream = chat({
adapter: openRouterText("openai/gpt-5.2"),
messages: [{ role: "user", content: "你好！" }],
modelOptions: {
models: ["anthropic/claude-sonnet-4.5", "google/gemini-3.1-pro-preview"],
route: "fallback",
},
});
提供商排序
按价格、吞吐量或延迟对提供商排序，而不是使用默认负载均衡：
import { chat } from "@tanstack/ai";
import { openRouterText } from "@tanstack/ai-openrouter";
// 优先选择最快的提供商
const stream = chat({
adapter: openRouterText("openai/gpt-5.2"),
messages: [{ role: "user", content: "你好！" }],
modelOptions: {
provider: {
sort: "throughput",
},
},
});
提供商顺序
指定要尝试的提供商的显式顺序：
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: "你好！" }],
modelOptions: {
provider: {
order: ["anthropic", "amazon-bedrock", "google-vertex"],
allow_fallbacks: true,
},
},
});
数据隐私控制
控制数据收集，并使用零数据保留（Zero Data Retention，ZDR）提供商：
import { chat } from "@tanstack/ai";
import { openRouterText } from "@tanstack/ai-openrouter";
const stream = chat({
adapter: openRouterText("openai/gpt-5.2"),
messages: [{ role: "user", content: "你好！" }],
modelOptions: {
provider: {
data_collection: "deny",
zdr: true,
},
},
});
筛选提供商
包含或排除特定提供商：
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: "你好！" }],
modelOptions: {
provider: {
only: ["together", "fireworks"],
ignore: ["azure"],
quantizations: ["fp16", "bf16"],
},
},
});
成本控制
为请求设置最高价格限制：
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: "你好！" }],
modelOptions: {
provider: {
max_price: {
prompt: 0.5,
completion: 2,
},
},
},
});
关于性能阈值和基于分区的排序等更高级的路由选项，见提供商路由文档。
资源
更多信息和详细文档，请查看这些资源：
