vibcoding Team4 分で読めます
统一 AI API 网关搭建：LiteLLM + Next.js 实战
手把手教你搭建统一的 AI API 网关，一个接口调用 OpenAI、Claude、Gemini 等 50+ 模型，附完整代码和部署指南。
#LiteLLM#API网关#OpenAI#Claude#AI开发
统一 AI API 网关搭建：LiteLLM + Next.js 实战
为什么需要统一 API 网关？
如果你的应用需要接入多个 AI 模型，你可能遇到过这些问题：
- 每个模型 API 格式不同 - OpenAI 和 Claude 的请求参数差异很大
- 密钥管理混乱 - 多个 API Key 分散在不同地方
- 故障切换困难 - 某个服务挂了，用户只能等
- 成本难以控制 - 不知道钱花在哪个模型上
解决方案: 使用 LiteLLM 搭建统一网关，一个接口访问所有模型。
架构设计
┌─────────────────┐
│ Frontend │
│ (Next.js) │
└────────┬────────┘
│
▼
┌─────────────────┐
│ LiteLLM │ ← 统一 API 网关
│ Proxy │
└────────┬────────┘
│
┌────┴────┬────────┬────────┐
▼ ▼ ▼ ▼
┌───────┐ ┌───────┐ ┌───────┐ ┌───────┐
│OpenAI │ │Claude │ │Gemini │ │DeepSeek│
└───────┘ └───────┘ └───────┘ └───────┘
第一步：部署 LiteLLM
Docker 部署
yaml
# docker-compose.yml
version: '3.8'
services:
litellm:
image: ghcr.io/berriai/litellm:main-latest
ports:
- "4000:4000"
environment:
- LITELLM_MASTER_KEY=sk-your-master-key
- DATABASE_URL=postgresql://user:pass@db:5432/litellm
volumes:
- ./litellm_config.yaml:/app/config.yaml
command: ["--config", "/app/config.yaml", "--detailed_debug"]
db:
image: postgres:15
environment:
- POSTGRES_USER=user
- POSTGRES_PASSWORD=pass
- POSTGRES_DB=litellm
volumes:
- postgres_data:/var/lib/postgresql/data
volumes:
postgres_data:
配置文件
yaml
# litellm_config.yaml
model_list:
# OpenAI 模型
- model_name: gpt-4o
litellm_params:
model: openai/gpt-4o
api_key: sk-your-openai-key
- model_name: gpt-4o-mini
litellm_params:
model: openai/gpt-4o-mini
api_key: sk-your-openai-key
# Claude 模型
- model_name: claude-3.5-sonnet
litellm_params:
model: anthropic/claude-3-5-sonnet-20241022
api_key: sk-ant-your-anthropic-key
# Google 模型
- model_name: gemini-2.5-pro
litellm_params:
model: gemini/gemini-2.0-flash-exp
api_key: your-google-key
# DeepSeek 模型
- model_name: deepseek-chat
litellm_params:
model: deepseek/deepseek-chat
api_key: your-deepseek-key
api_base: https://api.deepseek.com/v1
litellm_settings:
drop_params: true
set_verbose: false
general_settings:
master_key: sk-your-master-key
第二步：Next.js 集成
创建 API 路由
typescript
// app/api/chat/route.ts
import { streamText } from 'ai';
import { createOpenAI } from '@ai-sdk/openai';
const litellm = createOpenAI({
baseURL: process.env.LITELLM_BASE_URL || 'http://localhost:4000/v1',
apiKey: process.env.LITELLM_API_KEY || 'sk-your-master-key',
});
export async function POST(req: Request) {
const { messages, model = 'gpt-4o' } = await req.json();
const result = streamText({
model: litellm(model), // 模型名称直接传给 LiteLLM
messages,
});
return result.toDataStreamResponse();
}
前端模型选择
tsx
'use client';
import { useChat } from 'ai/react';
import { useState } from 'react';
const MODELS = [
{ id: 'gpt-4o', name: 'GPT-4o', provider: 'OpenAI' },
{ id: 'claude-3.5-sonnet', name: 'Claude 3.5 Sonnet', provider: 'Anthropic' },
{ id: 'gemini-2.5-pro', name: 'Gemini 2.5 Pro', provider: 'Google' },
{ id: 'deepseek-chat', name: 'DeepSeek Chat', provider: 'DeepSeek' },
];
export default function ChatPage() {
const [selectedModel, setSelectedModel] = useState('gpt-4o');
const { messages, input, handleInputChange, handleSubmit } = useChat({
body: { model: selectedModel },
});
return (
<div>
<select
value={selectedModel}
onChange={(e) => setSelectedModel(e.target.value)}
className="mb-4 p-2 border rounded"
>
{MODELS.map((model) => (
<option key={model.id} value={model.id}>
{model.name} ({model.provider})
</option>
))}
</select>
{/* 聊天界面... */}
</div>
);
}
第三步：高级功能
故障转移配置
yaml
# litellm_config.yaml
model_list:
- model_name: gpt-4
litellm_params:
model: openai/gpt-4o
api_key: sk-key-1
- model_name: gpt-4
litellm_params:
model: azure/gpt-4-deployment
api_key: azure-key
api_base: https://your-resource.openai.azure.com
router_settings:
routing_strategy: simple-shuffle
num_retries: 3
timeout: 60
用量统计
typescript
// 获取用量统计
async function getUsageStats() {
const response = await fetch(`${LITELLM_BASE_URL}/spend/logs`, {
headers: {
'Authorization': `Bearer ${LITELLM_API_KEY}`,
},
});
return response.json();
}
速率限制
yaml
litellm_settings:
max_budget: 100 # 每月最大预算 $100
budget_duration: monthly
general_settings:
master_key: sk-master
# 用户级别限制
model_list:
- model_name: gpt-4o
litellm_params:
model: openai/gpt-4o
rpm: 100 # 每分钟最大请求数
tpm: 100000 # 每分钟最大 token 数
部署到生产环境
Vercel + Railway 方案
- LiteLLM 部署到 Railway
bash
railway up
- Next.js 部署到 Vercel
bash
vercel --prod
- 配置环境变量
LITELLM_BASE_URL=https://your-litellm.railway.app/v1
LITELLM_API_KEY=sk-your-master-key