概览
Vercel AI SDK 是一个用于使用 React、Next.js、Vue、Svelte 等构建 AI 驱动的流式应用程序的 TypeScript 工具包。LemonData 通过兼容 OpenAI 的提供程序实现无缝协作。安装
复制
npm install ai @ai-sdk/openai
基础配置
复制
import { createOpenAI } from '@ai-sdk/openai';
const lemondata = createOpenAI({
apiKey: 'sk-your-lemondata-key',
baseURL: 'https://api.lemondata.cc/v1',
});
生成文本
复制
import { generateText } from 'ai';
const { text } = await generateText({
model: lemondata('gpt-4o'),
prompt: 'What is LemonData?',
});
console.log(text);
流式传输文本
复制
import { streamText } from 'ai';
const result = await streamText({
model: lemondata('gpt-4o'),
prompt: 'Write a poem about AI.',
});
for await (const textPart of result.textStream) {
process.stdout.write(textPart);
}
聊天消息
复制
import { generateText } from 'ai';
const { text } = await generateText({
model: lemondata('gpt-4o'),
messages: [
{ role: 'system', content: 'You are a helpful assistant.' },
{ role: 'user', content: 'What is the capital of France?' },
],
});
使用不同的模型
复制
// OpenAI GPT-4o
const gpt4Response = await generateText({
model: lemondata('gpt-4o'),
prompt: 'Hello!',
});
// Anthropic Claude
const claudeResponse = await generateText({
model: lemondata('claude-sonnet-4-5'),
prompt: 'Hello!',
});
// Google Gemini
const geminiResponse = await generateText({
model: lemondata('gemini-2.5-flash'),
prompt: 'Hello!',
});
// DeepSeek
const deepseekResponse = await generateText({
model: lemondata('deepseek-r1'),
prompt: 'Hello!',
});
Next.js API 路由
复制
// app/api/chat/route.ts
import { createOpenAI } from '@ai-sdk/openai';
import { streamText } from 'ai';
const lemondata = createOpenAI({
apiKey: process.env.LEMONDATA_API_KEY,
baseURL: 'https://api.lemondata.cc/v1',
});
export async function POST(req: Request) {
const { messages } = await req.json();
const result = streamText({
model: lemondata('gpt-4o'),
messages,
});
return result.toDataStreamResponse();
}
React 聊天组件
复制
'use client';
import { useChat } from 'ai/react';
export default function Chat() {
const { messages, input, handleInputChange, handleSubmit } = useChat({
api: '/api/chat',
});
return (
<div>
{messages.map((m) => (
<div key={m.id}>
{m.role}: {m.content}
</div>
))}
<form onSubmit={handleSubmit}>
<input value={input} onChange={handleInputChange} />
<button type="submit">Send</button>
</form>
</div>
);
}
工具调用
复制
import { generateText, tool } from 'ai';
import { z } from 'zod';
const { text, toolCalls } = await generateText({
model: lemondata('gpt-4o'),
tools: {
weather: tool({
description: 'Get the weather in a location',
parameters: z.object({
location: z.string().describe('The location to get weather for'),
}),
execute: async ({ location }) => {
return { temperature: 72, condition: 'sunny' };
},
}),
},
prompt: 'What is the weather in San Francisco?',
});
结构化输出
复制
import { generateObject } from 'ai';
import { z } from 'zod';
const { object } = await generateObject({
model: lemondata('gpt-4o'),
schema: z.object({
name: z.string(),
age: z.number(),
email: z.string().email(),
}),
prompt: 'Generate a fake user profile.',
});
console.log(object);
环境变量
复制
# .env.local
LEMONDATA_API_KEY=sk-your-lemondata-key
复制
const lemondata = createOpenAI({
apiKey: process.env.LEMONDATA_API_KEY,
baseURL: 'https://api.lemondata.cc/v1',
});
最佳实践
使用流式传输以获得更好的用户体验
使用流式传输以获得更好的用户体验
始终在聊天应用程序中使用流式传输,以提供实时反馈。
优雅地处理错误
优雅地处理错误
在 React 组件中实现适当的错误边界。
保护您的 API 密钥安全
保护您的 API 密钥安全
切勿在客户端代码中暴露您的 API 密钥。请始终使用服务器端 API 路由。