react-native-vercel-ai

在 React Native、Expo、Web 和通用应用程序上运行 Vercel AI 包。

目前 React Native 的 fetch API 不支持流式传输，而 Vercel AI 默认使用流式传输。这个包使您能够在 React Native 上使用 AI 库，但最佳用法是在 Expo 通用原生应用中使用。

在移动设备上，您可以使用相同的 useChat 和 useCompletion API 获取非流式响应，而在网页上它会回退到 ai/react。

▶️ 使用示例应用程序进行试验，其中包含一个功能完整的应用，内置了一个带有 /chat 路由端点的 next-app 应用，让您可以立即测试这个包。

安装

npm install react-native-vercel-ai

使用方法

1. Metro 设置包导出支持

在您的 metro.config.js 文件中添加以下行以启用包导出。这样我们就可以使用 ai/react 子文件夹。

config.resolver.unstable_enablePackageExports = true;

2. 在 React Native 应用中

在您的 React Native 应用中从 react-native-vercel-ai 导入 useChat 或 useCompletion。API 与 Vercel AI 库相同。

import { useChat } from 'react-native-vercel-ai';

const { messages, input, handleInputChange, handleSubmit, data, isLoading } =
  useChat({
    api: 'http://localhost:3001/api/chat',
  });

<View>
  {messages.length > 0
    ? messages.map((m) => (
        <Text key={m.id}>
          {m.role === 'user' ? '🧔 用户: ' : '🤖 AI: '}
          {m.content}
        </Text>
      ))
    : null}

  {isLoading && Platform.OS !== 'web' && (
    <View>
      <Text>加载中...</Text>
    </View>
  )}
  <View>
    <TextInput
      value={input}
      placeholder="说点什么..."
      onChangeText={(e) => {
        handleInputChange(Platform.OS === 'web' ? { target: { value: e } } : e);
      }}
    />
    <Button onPress={handleSubmit} title="发送" />
  </View>
</View>;

3. 在您的 API 端点

这个例子使用的是 Next.js API，但您也可以使用其他类型的 API 设置

根据请求是来自原生移动设备还是网页来设置您的响应。

对于网页：

遵循正常的 AI 库网页流程

对于 React Native：

跳过网页流程中的 OpenAIStream 部分。我们不需要流式传输。
将您的提供者流选项设置为 false。
返回包含最新消息的响应。

// /api/chat

// ./app/api/chat/route.ts
import OpenAI from 'openai';
import { OpenAIStream, StreamingTextResponse } from 'ai';
import { NextResponse, userAgent } from 'next/server';

// 创建一个 OpenAI API 客户端（适用于边缘）
const openai = new OpenAI({
  apiKey: process.env.OPENAI_API_KEY || '',
});

// 重要！将运行时设置为边缘
export const runtime = 'edge';

export async function POST(req: Request, res: Response) {
  // 从请求体中提取 `prompt`
  const { messages } = await req.json();
  const userAgentData = userAgent(req);
  const isNativeMobile = userAgentData.ua?.includes('Expo');

  if (!isNativeMobile) {
    // 根据提示向 OpenAI 请求流式聊天完成
    const response = await openai.chat.completions.create({
      model: 'gpt-3.5-turbo',
      stream: true,
      messages,
    });
    // 将响应转换为友好的文本流
    const stream = OpenAIStream(response);
    // 用流响应
    return new StreamingTextResponse(stream);
  } else {
    // 根据提示向 OpenAI 请求流式聊天完成
    const response = await openai.chat.completions.create({
      model: 'gpt-3.5-turbo',
      // 为原生设置将提供者流选项设置为 `false`
      stream: false,
      messages: messages,
    });

    return NextResponse.json({ data: response.choices[0].message });
  }
}