跳转到主要内容

概览

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 路由。