Vercel AI SDK 在 Expo 中的快速入门指南

Vercel AI SDK 在 Expo 中的快速入门指南

【免费下载链接】ai Build AI-powered applications with React, Svelte, Vue, and Solid 项目地址: https://gitcode.com/GitHub_Trending/ai/ai

前言

本文将带你使用 Vercel AI SDK 在 Expo 项目中快速构建一个具备流式响应功能的 AI 聊天机器人。通过本教程，你将掌握在移动端应用中集成 AI 功能的核心技术要点。

环境准备

在开始之前，请确保你的开发环境满足以下要求：

1. Node.js 18 或更高版本
2. pnpm 包管理器
3. 有效的 OpenAI API 密钥（可在 OpenAI 官网获取）

项目初始化

创建 Expo 项目

首先，我们创建一个全新的 Expo 项目：

pnpm create expo-app@latest my-ai-app
cd my-ai-app

注意：本教程需要 Expo 52 或更高版本

安装依赖

安装必要的依赖包：

pnpm add ai @ai-sdk/openai @ai-sdk/react zod

这里我们安装了：

• ai：Vercel AI SDK 核心包
• @ai-sdk/openai：OpenAI 提供程序
• @ai-sdk/react：React 组件支持
• zod：用于数据验证

配置 OpenAI API 密钥

在项目根目录创建 .env.local 文件并添加你的 OpenAI API 密钥：

OPENAI_API_KEY=你的API密钥

构建后端 API

创建聊天接口

在 app/api/chat+api.ts 文件中创建 API 路由：

import { openai } from '@ai-sdk/openai';
import { streamText } from 'ai';

export async function POST(req: Request) {
  const { messages } = await req.json();

  const result = streamText({
    model: openai('gpt-4o'),
    messages,
  });

  return result.toDataStreamResponse({
    headers: {
      'Content-Type': 'application/octet-stream',
      'Content-Encoding': 'none',
    },
  });
}

这段代码实现了：

1. 接收聊天消息历史
2. 调用 OpenAI 模型进行流式文本生成
3. 返回流式响应

构建前端界面

使用 useChat 钩子

在 app/(tabs)/index.tsx 中使用 useChat 钩子：

import { useChat } from '@ai-sdk/react';
// 其他导入...

export default function App() {
  const { messages, input, handleInputChange, handleSubmit } = useChat({
    fetch: expoFetch as unknown as typeof globalThis.fetch,
    api: generateAPIUrl('/api/chat'),
  });

  // 界面渲染代码...
}

创建 API URL 生成器

在 utils.ts 中添加 URL 生成逻辑：

import Constants from 'expo-constants';

export const generateAPIUrl = (relativePath: string) => {
  // 处理开发和生产环境的 URL
};

运行应用

启动开发服务器：

pnpm expo

访问 http://localhost:8081 即可测试你的 AI 聊天机器人。

进阶功能：工具调用

添加天气工具

扩展 API 路由以支持工具调用：

import { tool } from 'ai';
import { z } from 'zod';

// 在 streamText 配置中添加
tools: {
  weather: tool({
    description: '获取某地天气(华氏度)',
    parameters: z.object({
      location: z.string().describe('地点名称')
    }),
    execute: async ({ location }) => {
      // 模拟天气数据获取
    }
  })
}

多步骤工具调用

在客户端启用多步骤调用：

useChat({
  // 其他配置...
  maxSteps: 5
});

常见问题解决

移动端兼容性问题

如果遇到 structuredClone 错误，需要添加相应的 polyfill。在 Expo 项目中，可以通过以下方式解决：

1. 安装必要的 polyfill 包
2. 在应用入口文件中导入 polyfill

总结

通过本教程，你已经学会了：

1. 如何在 Expo 项目中集成 Vercel AI SDK
2. 实现流式聊天界面
3. 添加工具调用功能
4. 处理移动端特有的兼容性问题

Vercel AI SDK 提供了统一的接口来与各种大语言模型交互，使得在移动应用中添加 AI 功能变得简单高效。你可以基于此基础继续扩展，添加更多工具和功能，打造更强大的 AI 应用体验。

【免费下载链接】ai Build AI-powered applications with React, Svelte, Vue, and Solid 项目地址: https://gitcode.com/GitHub_Trending/ai/ai