Vercel AI SDK 教程：在 Next.js 中实现并行调用工具

Vercel AI SDK 教程：在 Next.js 中实现并行调用工具

ai Build AI-powered applications with React, Svelte, Vue, and Solid 项目地址: https://gitcode.com/gh_mirrors/ai/ai

前言

在现代AI应用开发中，工具调用(Tool Calling)是一个强大的功能，它允许语言模型与外部系统交互。Vercel AI SDK 提供了简洁的API来实现这一功能，特别是支持并行调用多个工具的能力，这可以显著提升应用的响应速度和用户体验。

什么是并行工具调用？

并行工具调用是指语言模型在一次生成过程中同时调用多个独立工具的能力。例如，当用户询问"巴黎和纽约的天气如何"时，模型可以同时查询两个城市的天气数据，而不是依次查询。

这种能力特别适合以下场景：

• 多个工具调用之间没有依赖关系
• 需要减少整体响应时间
• 处理需要同时获取多个信息的查询

实现步骤

1. 客户端实现

在Next.js应用中，我们可以使用@ai-sdk/react提供的useChat钩子来简化聊天界面的开发：

'use client';

import { useChat } from '@ai-sdk/react';

export default function Page() {
  const { messages, input, setInput, append } = useChat({
    api: '/api/chat',
    maxSteps: 2,  // 允许最多2步交互
  });

  return (
    <div>
      <input
        value={input}
        onChange={(event) => setInput(event.target.value)}
        onKeyDown={async (event) => {
          if (event.key === 'Enter') {
            append({ content: input, role: 'user' });
          }
        }}
      />

      {messages.map((message, index) => (
        <div key={index}>{message.content}</div>
      ))}
    </div>
  );
}

关键点说明：

• maxSteps: 2 设置允许模型和工具之间最多进行两次交互
• append 方法用于发送用户消息
• 消息列表会自动包含工具调用的结果

2. 服务端实现

服务端需要处理工具调用逻辑，以下是核心代码：

import { ToolInvocation, streamText } from 'ai';
import { openai } from '@ai-sdk/openai';
import { z } from 'zod';

// 定义消息类型
interface Message {
  role: 'user' | 'assistant';
  content: string;
  toolInvocations?: ToolInvocation[];
}

// 天气查询工具实现
function getWeather({ city, unit }) {
  // 实际应用中这里应该调用天气API
  return { value: 25, description: 'Sunny' };
}

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

  const result = streamText({
    model: openai('gpt-4o'),
    system: 'You are a helpful assistant.',
    messages,
    tools: {
      getWeather: {
        description: 'Get the weather for a location',
        parameters: z.object({
          city: z.string().describe('The city to get the weather for'),
          unit: z.enum(['C', 'F']).describe('Temperature unit'),
        }),
        execute: async ({ city, unit }) => {
          const { value, description } = getWeather({ city, unit });
          return `It is currently ${value}°${unit} and ${description} in ${city}!`;
        },
      },
    },
  });

  return result.toDataStreamResponse();
}

关键组件解析：

1. 工具定义：使用zod定义工具参数和类型
2. 工具执行：execute方法实现具体工具逻辑
3. 流式响应：streamText支持流式返回结果
4. 模型选择：这里使用gpt-4o模型，它支持并行工具调用

进阶技巧

1. 错误处理

在实际应用中，应该为工具调用添加错误处理：

execute: async ({ city, unit }) => {
  try {
    const { value, description } = await fetchWeatherAPI(city, unit);
    return `Weather: ${value}°${unit}, ${description}`;
  } catch (error) {
    return `Failed to get weather for ${city}`;
  }
}

2. 性能优化

对于并行调用，可以考虑：

• 设置工具调用超时
• 实现缓存机制
• 限制最大并行调用数量

3. 工具组合

可以定义多个工具，模型会根据上下文自动选择：

tools: {
  getWeather: { /* ... */ },
  getStockPrice: { /* ... */ },
  searchWeb: { /* ... */ }
}

常见问题解答

Q: 哪些模型支持并行工具调用？ A: 目前OpenAI的gpt-4系列和部分开源模型支持此功能。

Q: 如何知道工具调用是并行执行的？ A: 可以在工具实现中添加日志，观察它们的执行时间戳。

Q: 工具调用有数量限制吗？ A: 这取决于模型和API的限制，通常有合理的上限。

总结

通过Vercel AI SDK实现并行工具调用可以显著提升AI应用的交互效率和用户体验。本文介绍了从客户端到服务端的完整实现流程，以及一些进阶优化技巧。掌握这一技术后，你可以构建出更加强大、响应更快的AI应用。

在实际项目中，建议从简单工具开始，逐步增加复杂度，并始终关注性能和错误处理。

ai Build AI-powered applications with React, Svelte, Vue, and Solid 项目地址: https://gitcode.com/gh_mirrors/ai/ai