Vercel AI SDK 工具调用功能详解：在Next.js中实现智能助手交互-优快云博客

本文链接：https://blog.youkuaiyun.com/gitblog_00895/article/details/148378021

Vercel AI SDK 工具调用功能详解：在Next.js中实现智能助手交互

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

引言

在现代AI应用开发中，大型语言模型(LLM)的能力可以通过工具调用(Tool Calling)功能得到显著扩展。Vercel AI SDK提供了一套完整的解决方案，让开发者能够轻松实现这一功能。本文将深入讲解如何在Next.js应用中通过Vercel AI SDK实现工具调用，构建更智能的交互体验。

工具调用基础概念

工具调用是指AI模型在生成响应过程中，能够根据上下文需求主动调用开发者预定义的外部功能。这种机制使得AI模型不再局限于文本生成，而是能够：

执行计算或数据处理
查询外部系统信息
与第三方API交互
完成复杂的业务流程

实现步骤详解

1. 客户端实现

在Next.js应用中，我们首先需要创建一个客户端组件来处理用户交互：

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

export default function ChatInterface() {
  const { messages, input, setInput, append } = useChat({
    api: '/api/chat',
    maxSteps: 2, // 限制最大交互步骤
  });

  return (
    <div className="chat-container">
      <input
        value={input}
        onChange={(e) => setInput(e.target.value)}
        onKeyDown={async (e) => {
          if (e.key === 'Enter') {
            await append({ content: input, role: 'user' });
          }
        }}
        placeholder="输入您的问题..."
      />
      
      <div className="message-list">
        {messages.map((message, index) => (
          <div key={index} className={`message ${message.role}`}>
            {message.content}
          </div>
        ))}
      </div>
    </div>
  );
}

关键点说明：

useChat hook处理了所有聊天状态管理
maxSteps参数防止无限循环调用
组件会自动处理工具调用的显示

2. 服务端API实现

服务端需要处理工具调用的逻辑，以下是完整的API路由实现：

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

interface ChatMessage {
  role: 'user' | 'assistant';
  content: string;
  toolInvocations?: ToolInvocation[];
}

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

  const weatherTool = {
    description: '获取指定城市的天气信息',
    parameters: z.object({
      city: z.string().describe('需要查询天气的城市名称'),
      unit: z.enum(['C', 'F']).describe('温度单位，C表示摄氏度，F表示华氏度'),
    }),
    execute: async ({ city, unit }: { city: string; unit: 'C' | 'F' }) => {
      // 实际应用中这里可以调用天气API
      const mockWeather = {
        temperature: 24 + Math.floor(Math.random() * 5) - 2, // 随机温度波动
        condition: ['晴朗', '多云', '局部有雨'][Math.floor(Math.random() * 3)],
      };
      
      return `${city}当前天气：${mockWeather.temperature}°${unit}，${mockWeather.condition}`;
    },
  };

  const result = await streamText({
    model: openai('gpt-4o'),
    system: '你是一个智能天气助手，能够查询全球城市天气信息',
    messages,
    tools: {
      getWeather: weatherTool,
    },
  });

  return result.toDataStreamResponse();
}

3. 工具定义最佳实践

定义工具时需要注意以下几点：

清晰的描述：工具描述应准确说明功能，帮助模型判断何时调用
参数验证：使用zod严格定义参数格式和类型
错误处理：在execute函数中实现健壮的错误处理
性能考虑：工具执行应尽可能高效，避免长时间阻塞

进阶应用场景

多工具协作

可以定义多个工具让模型根据上下文选择调用：

tools: {
  getWeather: weatherTool,
  convertCurrency: currencyTool,
  searchProducts: productSearchTool,
}

工具链调用

模型可以连续调用多个工具完成复杂任务：

先调用天气查询工具获取温度
再调用服装推荐工具根据温度推荐穿着
最后整合结果返回给用户

上下文感知工具

工具可以根据对话历史调整行为：

execute: async ({ city, unit }, context) => {
  // 根据上下文中的用户偏好调整响应
  if (context.userPrefersDetailed) {
    return generateDetailedWeather(city, unit);
  }
  return generateSimpleWeather(city, unit);
}