工具

一个可折叠组件，用于在 AI 聊天机器人界面中显示工具调用详细信息。

Tool 组件显示一个可折叠界面，用于显示/隐藏工具详细信息。它设计用于接受来自 AI SDK 的 ToolUIPart 类型，并在可折叠界面中显示它。

使用 CLI 安装

AI Elements Vue

shadcn-vue CLI

npx ai-elements-vue@latest add tool

手动安装

将以下代码复制并粘贴到同一文件夹中。

Tool.vue

ToolStatusBadge.vue

ToolHeader.vue

ToolContent.vue

ToolInput.vue

ToolOutput.vue

index.ts

<script setup lang="ts">
import type { HTMLAttributes } from 'vue'
import { Collapsible } from '@repo/shadcn-vue/components/ui/collapsible'
import { cn } from '@repo/shadcn-vue/lib/utils'

const props = defineProps<{
  class?: HTMLAttributes['class']
}>()
</script>

<template>
  <Collapsible
    :class="cn('not-prose mb-4 w-full rounded-md border', props.class)"
    v-bind="$attrs"
  >
    <slot />
  </Collapsible>
</template>

与 AI SDK 一起使用

构建一个简单的有状态天气应用，使用 useChat 在工具中渲染最后一条消息。

将以下组件添加到你的前端：

pages/index.vue

<script setup lang="ts">
import type { ToolUIPart } from 'ai'
import { useChat } from '@ai-sdk/vue'
import { DefaultChatTransport } from 'ai'
import { computed, h } from 'vue'
import { MessageResponse } from '@/components/ai-elements/message'
import {
  Tool,
  ToolContent,
  ToolHeader,
  ToolInput,
  ToolOutput,
} from '@/components/ai-elements/tool'
import { Button } from '@/components/ui/button'

interface WeatherToolInput {
  location: string
  units: 'celsius' | 'fahrenheit'
}

interface WeatherToolOutput {
  location: string
  temperature: string
  conditions: string
  humidity: string
  windSpeed: string
  lastUpdated: string
}

type WeatherToolUIPart = ToolUIPart<{
  fetch_weather_data: {
    input: WeatherToolInput
    output: WeatherToolOutput
  }
}>

const { messages, sendMessage, status } = useChat({
  transport: new DefaultChatTransport({
    api: '/api/weather',
  }),
})

function formatWeatherResult(result: WeatherToolOutput): string {
  if (!result)
    return ''
  return `**Weather for ${result.location}**

**Temperature:** ${result.temperature}
**Conditions:** ${result.conditions}
**Humidity:** ${result.humidity}
**Wind Speed:** ${result.windSpeed}

*Last updated: ${result.lastUpdated}*`
}

function handleWeatherClick() {
  sendMessage({ text: 'Get weather data for San Francisco in fahrenheit' })
}

const latestMessage = computed(() => {
  if (!messages.value || messages.value.length === 0) {
    return undefined
  }
  return messages.value[messages.value.length - 1]
})

const weatherTool = computed(() => {
  return latestMessage.value?.parts?.find(
    part => part.type === 'tool-fetch_weather_data'
  ) as WeatherToolUIPart | undefined
})

const weatherOutputVNode = computed(() => {
  if (!weatherTool.value?.output) {
    return null
  }
  const markdown = formatWeatherResult(weatherTool.value.output)
  return h(MessageResponse, { content: markdown })
})
</script>

<template>
  <div
    class="max-w-4xl mx-auto p-6 relative size-full rounded-lg border h-[600px]"
  >
    <div class="flex flex-col h-full">
      <div class="space-y-4">
        <Button
          :disabled="status !== 'ready'"
          @click="handleWeatherClick"
        >
          Get Weather for San Francisco
        </Button>

        <Tool v-if="weatherTool" :default-open="true">
          <ToolHeader
            type="tool-fetch_weather_data"
            :state="weatherTool.state"
          />
          <ToolContent>
            <ToolInput :input="weatherTool.input" />
            <ToolOutput
              :output="weatherOutputVNode"
              :error-text="weatherTool.errorText"
            />
          </ToolContent>
        </Tool>
      </div>
    </div>
  </div>
</template>

将以下路由添加到你的后端：

server/api/agent.ts

import { convertToModelMessages, streamText, UIMessage } from 'ai'
import { defineEventHandler, readBody } from 'h3'
import { z } from 'zod'

// Allow streaming responses up to 30 seconds
export const maxDuration = 30

export default defineEventHandler(async (event) => {
  const body = await readBody(event) as { messages: UIMessage[] }
  const { messages } = body

  const result = streamText({
    model: 'openai/gpt-4o',
    messages: convertToModelMessages(messages),
    tools: {
      fetch_weather_data: {
        description: 'Fetch weather information for a specific location',
        parameters: z.object({
          location: z.string().describe('The city or location to get weather for'),
          units: z.enum(['celsius', 'fahrenheit']).default('celsius').describe('Temperature units'),
        }),
        inputSchema: z.object({
          location: z.string(),
          units: z.enum(['celsius', 'fahrenheit']).default('celsius'),
        }),
        execute: async ({ location, units }) => {
          await new Promise(resolve => setTimeout(resolve, 1500))
          const temp = units === 'celsius'
            ? Math.floor(Math.random() * 35) + 5
            : Math.floor(Math.random() * 63) + 41

          return {
            location,
            temperature: `${temp}°${units === 'celsius' ? 'C' : 'F'}`,
            conditions: 'Sunny',
            humidity: '12%',
            windSpeed: `35 ${units === 'celsius' ? 'km/h' : 'mph'}`,
            lastUpdated: new Date().toLocaleString(),
          }
        },
      },
    },
  })

  return result.toUIMessageStreamResponse()
})