From 7cb9f07bfa11b621f5f18ddd538494fe6df958b7 Mon Sep 17 00:00:00 2001
From: peoray <peoray@yahoo.com>
Date: Thu, 13 Nov 2025 04:24:47 +0100
Subject: [PATCH 1/3] feat: add tool component

---
 apps/www/components/ComponentLoader.vue       |   2 +-
 .../content/3.components/1.chatbot/tool.md    | 580 ++++++++++++++++++
 apps/www/plugins/ai-elements.ts               |  10 +
 packages/elements/src/index.ts                |   1 +
 packages/elements/src/tool/Tool.vue           |  18 +
 packages/elements/src/tool/ToolContent.vue    |  23 +
 packages/elements/src/tool/ToolHeader.vue     |  38 ++
 packages/elements/src/tool/ToolInput.vue      |  32 +
 packages/elements/src/tool/ToolOutput.vue     |  69 +++
 .../elements/src/tool/ToolStatusBadge.vue     |  63 ++
 packages/elements/src/tool/index.ts           |   5 +
 packages/examples/src/index.ts                |   5 +
 .../examples/src/tool-input-available.vue     |  29 +
 .../examples/src/tool-input-streaming.vue     |  28 +
 .../examples/src/tool-output-available.vue    |  35 ++
 packages/examples/src/tool-output-error.vue   |  37 ++
 packages/examples/src/tool.vue                | 210 +++++++
 17 files changed, 1184 insertions(+), 1 deletion(-)
 create mode 100644 apps/www/content/3.components/1.chatbot/tool.md
 create mode 100644 packages/elements/src/tool/Tool.vue
 create mode 100644 packages/elements/src/tool/ToolContent.vue
 create mode 100644 packages/elements/src/tool/ToolHeader.vue
 create mode 100644 packages/elements/src/tool/ToolInput.vue
 create mode 100644 packages/elements/src/tool/ToolOutput.vue
 create mode 100644 packages/elements/src/tool/ToolStatusBadge.vue
 create mode 100644 packages/elements/src/tool/index.ts
 create mode 100644 packages/examples/src/tool-input-available.vue
 create mode 100644 packages/examples/src/tool-input-streaming.vue
 create mode 100644 packages/examples/src/tool-output-available.vue
 create mode 100644 packages/examples/src/tool-output-error.vue
 create mode 100644 packages/examples/src/tool.vue

diff --git a/apps/www/components/ComponentLoader.vue b/apps/www/components/ComponentLoader.vue
index 918220f..53b5315 100644
--- a/apps/www/components/ComponentLoader.vue
+++ b/apps/www/components/ComponentLoader.vue
@@ -15,7 +15,7 @@ withDefaults(defineProps<Props>(), {
 
 <template>
   <div class="my-4 w-full space-y-8">
-    <ClientOnly>
+    <ClientOnly class="overflow-scroll">
       <CodeGroup>
         <div
           :label="label || componentName"
diff --git a/apps/www/content/3.components/1.chatbot/tool.md b/apps/www/content/3.components/1.chatbot/tool.md
new file mode 100644
index 0000000..0ccfd2a
--- /dev/null
+++ b/apps/www/content/3.components/1.chatbot/tool.md
@@ -0,0 +1,580 @@
+---
+title: Tool
+description: A collapsible component for displaying tool invocation details in AI chatbot interfaces.
+icon: lucide:tool-case
+---
+
+The `Tool` component isplays a collapsible interface for showing/hiding tool details. It is designed to take the `ToolUIPart` type from the AI SDK and display it in a collapsible interface.
+
+:::ComponentLoader{label="Preview" componentName="Tool"}
+:::
+
+## Install using CLI
+
+::tabs{variant="card"}
+  ::div{label="ai-elements-vue"}
+  ```sh
+  npx ai-elements-vue@latest add tool
+  ```
+  ::
+  ::div{label="shadcn-vue"}
+
+  ```sh
+  npx shadcn-vue@latest add https://registry.ai-elements-vue.com/tool.json
+  ```
+  ::
+::
+
+## Install Manually
+
+Copy and paste the following code in the same folder.
+
+:::code-group
+```vue [Tool.vue] height=260 collapse
+<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>
+```
+
+```vue [ToolStatusBadge.vue] height=260 collapse
+<!-- StatusBadge.vue -->
+<script setup lang="ts">
+import type { ToolUIPart } from 'ai'
+import type { Component } from 'vue'
+import { Badge } from '@repo/shadcn-vue/components/ui/badge'
+import {
+  CheckCircleIcon,
+  CircleIcon,
+  ClockIcon,
+  XCircleIcon,
+} from 'lucide-vue-next'
+import { computed } from 'vue'
+
+const props = defineProps<{
+  state: ToolUIPart['state']
+}>()
+
+const label = computed(() => {
+  const labels: Record<ToolUIPart['state'], string> = {
+    'input-streaming': 'Pending',
+    'input-available': 'Running',
+    'approval-requested': 'Awaiting Approval',
+    'approval-responded': 'Responded',
+    'output-available': 'Completed',
+    'output-error': 'Error',
+    'output-denied': 'Denied',
+  }
+  return labels[props.state]
+})
+
+const icon = computed<Component>(() => {
+  const icons: Record<ToolUIPart['state'], Component> = {
+    'input-streaming': CircleIcon,
+    'input-available': ClockIcon,
+    'approval-requested': ClockIcon,
+    'approval-responded': CheckCircleIcon,
+    'output-available': CheckCircleIcon,
+    'output-error': XCircleIcon,
+    'output-denied': XCircleIcon,
+  }
+  return icons[props.state]
+})
+
+const iconClass = computed(() => {
+  const classes: Record<string, boolean> = {
+    'size-4': true,
+    'animate-pulse': props.state === 'input-available',
+    'text-yellow-600': props.state === 'approval-requested',
+    'text-blue-600': props.state === 'approval-responded',
+    'text-green-600': props.state === 'output-available',
+    'text-red-600': props.state === 'output-error',
+    'text-orange-600': props.state === 'output-denied',
+  }
+  return classes
+})
+</script>
+
+<template>
+  <Badge class="gap-1.5 rounded-full text-xs" variant="secondary">
+    <component :is="icon" :class="iconClass" />
+    <span>{{ label }}</span>
+  </Badge>
+</template>
+```
+
+```vue [ToolHeader.vue] height=260 collapse
+<script setup lang="ts">
+import type { ToolUIPart } from 'ai'
+import type { HTMLAttributes } from 'vue'
+import { CollapsibleTrigger } from '@repo/shadcn-vue/components/ui/collapsible'
+import { cn } from '@repo/shadcn-vue/lib/utils'
+import { ChevronDownIcon, WrenchIcon } from 'lucide-vue-next'
+import StatusBadge from './ToolStatusBadge.vue'
+
+const props = defineProps<{
+  title?: string
+  type: ToolUIPart['type']
+  state: ToolUIPart['state']
+  class?: HTMLAttributes['class']
+}>()
+</script>
+
+<template>
+  <CollapsibleTrigger
+    :class="
+      cn(
+        'flex w-full items-center justify-between gap-4 p-3',
+        props.class,
+      )
+    "
+    v-bind="$attrs"
+  >
+    <div class="flex items-center gap-2">
+      <WrenchIcon class="size-4 text-muted-foreground" />
+      <span class="font-medium text-sm">
+        {{ props.title ?? props.type.split('-').slice(1).join(' ') }}
+      </span>
+      <StatusBadge :state="props.state" />
+    </div>
+    <ChevronDownIcon
+      class="size-4 text-muted-foreground transition-transform group-data-[state=open]:rotate-180"
+    />
+  </CollapsibleTrigger>
+</template>
+```
+
+```vue [ToolContent.vue] height=260 collapse
+<script setup lang="ts">
+import type { HTMLAttributes } from 'vue'
+import { CollapsibleContent } from '@repo/shadcn-vue/components/ui/collapsible'
+import { cn } from '@repo/shadcn-vue/lib/utils'
+
+const props = defineProps<{
+  class?: HTMLAttributes['class']
+}>()
+</script>
+
+<template>
+  <CollapsibleContent
+    :class="
+      cn(
+        'data-[state=closed]:fade-out-0 data-[state=closed]:slide-out-to-top-2 data-[state=open]:slide-in-from-top-2 text-popover-foreground outline-none data-[state=closed]:animate-out data-[state=open]:animate-in',
+        props.class,
+      )
+    "
+    v-bind="$attrs"
+  >
+    <slot />
+  </CollapsibleContent>
+</template>
+```
+
+```vue [ToolInput.vue] height=260 collapse
+<script setup lang="ts">
+import type { ToolUIPart } from 'ai'
+import type { HTMLAttributes } from 'vue'
+import { cn } from '@repo/shadcn-vue/lib/utils'
+import { computed } from 'vue'
+import { CodeBlock } from '../code-block'
+
+const props = defineProps<{
+  input: ToolUIPart['input']
+  class?: HTMLAttributes['class']
+}>()
+
+const formattedInput = computed(() => {
+  return JSON.stringify(props.input, null, 2)
+})
+</script>
+
+<template>
+  <div
+    :class="cn('space-y-2 overflow-hidden p-4', props.class)"
+    v-bind="$attrs"
+  >
+    <h4
+      class="font-medium text-muted-foreground text-xs uppercase tracking-wide"
+    >
+      Parameters
+    </h4>
+    <div class="rounded-md bg-muted/50">
+      <CodeBlock :code="formattedInput" language="json" />
+    </div>
+  </div>
+</template>
+```
+
+```vue [ToolOutput.vue] height=260 collapse
+<script setup lang="ts">
+import type { ToolUIPart } from 'ai'
+import type { HTMLAttributes } from 'vue'
+import { cn } from '@repo/shadcn-vue/lib/utils'
+import { computed } from 'vue'
+import CodeBlock from './CodeBlock.vue'
+
+const props = defineProps<{
+  output: ToolUIPart['output']
+  errorText: ToolUIPart['errorText']
+  class?: HTMLAttributes['class']
+}>()
+
+const showOutput = computed(() => props.output || props.errorText)
+
+const isObjectOutput = computed(
+  () => typeof props.output === 'object' && props.output !== null,
+)
+const isStringOutput = computed(() => typeof props.output === 'string')
+
+const formattedOutput = computed(() => {
+  if (isObjectOutput.value) {
+    return JSON.stringify(props.output, null, 2)
+  }
+  return props.output as string
+})
+</script>
+
+<template>
+  <div
+    v-if="showOutput"
+    :class="cn('space-y-2 p-4', props.class)"
+    v-bind="$attrs"
+  >
+    <h4
+      class="font-medium text-muted-foreground text-xs uppercase tracking-wide"
+    >
+      {{ props.errorText ? "Error" : "Result" }}
+    </h4>
+    <div
+      :class="
+        cn(
+          'overflow-x-auto rounded-md text-xs [&_table]:w-full',
+          props.errorText
+            ? 'bg-destructive/10 text-destructive'
+            : 'bg-muted/50 text-foreground',
+        )
+      "
+    >
+      <div v-if="errorText" class="p-3">
+        {{ props.errorText }}
+      </div>
+
+      <CodeBlock
+        v-else-if="isObjectOutput"
+        :code="formattedOutput"
+        language="json"
+      />
+      <CodeBlock
+        v-else-if="isStringOutput"
+        :code="formattedOutput"
+        language="json"
+      />
+      <div v-else class="p-3">
+        {{ props.output }}
+      </div>
+    </div>
+  </div>
+</template>
+```
+
+```ts [index.ts] height=260 collapse
+export { default as Tool } from './Tool.vue'
+export { default as ToolContent } from './ToolContent.vue'
+export { default as ToolHeader } from './ToolHeader.vue'
+export { default as ToolInput } from './ToolInput.vue'
+export { default as ToolOutput } from './ToolOutput.vue'
+```
+:::
+
+## Usage with AI SDK
+
+Build a simple stateful weather app that renders the last message in a tool using [useChat](https://ai-sdk.dev/docs/reference/ai-sdk-ui/use-chat).
+
+Add the following component to your frontend:
+
+```vue [pages/index.vue] height=260 collapse
+<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>
+```
+
+Add the following route to your backend:
+
+```ts [server/api/agent.ts] height=260 collapse
+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()
+})
+```
+
+## Features
+
+- Collapsible interface for showing/hiding tool details
+- Visual status indicators with icons and badges
+- Support for multiple tool execution states (pending, running, completed, error)
+- Formatted parameter display with JSON syntax highlighting
+- Result and error handling with appropriate styling
+- Composable structure for flexible layouts
+- Accessible keyboard navigation and screen reader support
+- Consistent styling that matches your design system
+- Auto-opens completed tools by default for better UX
+
+## Examples
+
+### Input Streaming (Pending)
+
+Shows a tool in its initial state while parameters are being processed.
+
+:::ComponentLoader{label="Preview" componentName="ToolInputStreaming"}
+:::
+
+### Input Available (Running)
+
+Shows a tool that's actively executing with its parameters.
+
+:::ComponentLoader{label="Preview" componentName="ToolInputAvailable"}
+:::
+
+### Input Streaming (Completed)
+
+Shows a completed tool with successful results. Opens by default to show the results. In this instance, the output is a JSON object, so we can use the `CodeBlock` component to display it.
+
+:::ComponentLoader{label="Preview" componentName="ToolOutputAvailable"}
+:::
+
+### Output Error
+
+Shows a tool that encountered an error during execution. Opens by default to display the error.
+
+:::ComponentLoader{label="Preview" componentName="ToolOutputError"}
+:::
+
+## Props
+
+### `<Tool/>`
+
+:::field-group
+  ::field{name="class" type="string"}
+  Additional CSS classes to apply to the component.
+  ::
+:::
+
+### `<ToolHeader/>`
+
+:::field-group
+  ::field{name="type" type="ToolUIPart['type']"}
+  The type/name of the tool.
+  ::
+
+  ::field{name="state" type="ToolUIPart['state']"}
+  The current state of the tool (input-streaming, input-available, output-available, or output-error).
+  ::
+
+  ::field{name="title" type="string"}
+  The title of the task.
+  ::
+
+  ::field{name="class" type="string"}
+  Additional CSS classes to apply to the component.
+  ::
+:::
+
+### `<ToolContent/>`
+
+:::field-group
+  ::field{name="class" type="string"}
+  Additional CSS classes to apply to the component.
+  ::
+:::
+
+### `<ToolInput/>`
+
+:::field-group
+  ::field{name="input" type="ToolUIPart['input']"}
+  The input parameters passed to the tool, displayed as formatted JSON.
+  ::
+
+  ::field{name="class" type="string"}
+  Additional CSS classes to apply to the component.
+  ::
+:::
+
+### `<ToolOutput/>`
+
+:::field-group
+  ::field{name="output" type="ToolUIPart['output']"}
+  The output/result of the tool execution.
+  ::
+
+  ::field{name="errorText" type="ToolUIPart['errorText']"}
+  An error message if the tool execution failed.
+  ::
+
+  ::field{name="class" type="string"}
+  Additional CSS classes to apply to the component.
+  ::
+:::
diff --git a/apps/www/plugins/ai-elements.ts b/apps/www/plugins/ai-elements.ts
index acfca06..0fd64c3 100644
--- a/apps/www/plugins/ai-elements.ts
+++ b/apps/www/plugins/ai-elements.ts
@@ -30,6 +30,11 @@ import {
   Suggestion,
   SuggestionAiInput,
   Task,
+  Tool,
+  ToolInputAvailable,
+  ToolInputStreaming,
+  ToolOutputAvailable,
+  ToolOutputError,
   Workflow,
 } from '@repo/examples'
 
@@ -74,4 +79,9 @@ export default defineNuxtPlugin((nuxtApp) => {
   vueApp.component('CodeBlockDark', CodeBlockDark)
   vueApp.component('Checkpoint', Checkpoint)
   vueApp.component('Workflow', Workflow)
+  vueApp.component('Tool', Tool)
+  vueApp.component('ToolInputStreaming', ToolInputStreaming)
+  vueApp.component('ToolInputAvailable', ToolInputAvailable)
+  vueApp.component('ToolOutputAvailable', ToolOutputAvailable)
+  vueApp.component('ToolOutputError', ToolOutputError)
 })
diff --git a/packages/elements/src/index.ts b/packages/elements/src/index.ts
index a3c3471..c41e5d2 100644
--- a/packages/elements/src/index.ts
+++ b/packages/elements/src/index.ts
@@ -18,3 +18,4 @@ export * from './shimmer'
 export * from './sources'
 export * from './suggestion'
 export * from './task'
+export * from './tool'
diff --git a/packages/elements/src/tool/Tool.vue b/packages/elements/src/tool/Tool.vue
new file mode 100644
index 0000000..5dd4800
--- /dev/null
+++ b/packages/elements/src/tool/Tool.vue
@@ -0,0 +1,18 @@
+<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>
diff --git a/packages/elements/src/tool/ToolContent.vue b/packages/elements/src/tool/ToolContent.vue
new file mode 100644
index 0000000..ae2d817
--- /dev/null
+++ b/packages/elements/src/tool/ToolContent.vue
@@ -0,0 +1,23 @@
+<script setup lang="ts">
+import type { HTMLAttributes } from 'vue'
+import { CollapsibleContent } from '@repo/shadcn-vue/components/ui/collapsible'
+import { cn } from '@repo/shadcn-vue/lib/utils'
+
+const props = defineProps<{
+  class?: HTMLAttributes['class']
+}>()
+</script>
+
+<template>
+  <CollapsibleContent
+    :class="
+      cn(
+        'data-[state=closed]:fade-out-0 data-[state=closed]:slide-out-to-top-2 data-[state=open]:slide-in-from-top-2 text-popover-foreground outline-none data-[state=closed]:animate-out data-[state=open]:animate-in',
+        props.class,
+      )
+    "
+    v-bind="$attrs"
+  >
+    <slot />
+  </CollapsibleContent>
+</template>
diff --git a/packages/elements/src/tool/ToolHeader.vue b/packages/elements/src/tool/ToolHeader.vue
new file mode 100644
index 0000000..1dc65b6
--- /dev/null
+++ b/packages/elements/src/tool/ToolHeader.vue
@@ -0,0 +1,38 @@
+<script setup lang="ts">
+import type { ToolUIPart } from 'ai'
+import type { HTMLAttributes } from 'vue'
+import { CollapsibleTrigger } from '@repo/shadcn-vue/components/ui/collapsible'
+import { cn } from '@repo/shadcn-vue/lib/utils'
+import { ChevronDownIcon, WrenchIcon } from 'lucide-vue-next'
+import StatusBadge from './ToolStatusBadge.vue'
+
+const props = defineProps<{
+  title?: string
+  type: ToolUIPart['type']
+  state: ToolUIPart['state']
+  class?: HTMLAttributes['class']
+}>()
+</script>
+
+<template>
+  <CollapsibleTrigger
+    :class="
+      cn(
+        'flex w-full items-center justify-between gap-4 p-3',
+        props.class,
+      )
+    "
+    v-bind="$attrs"
+  >
+    <div class="flex items-center gap-2">
+      <WrenchIcon class="size-4 text-muted-foreground" />
+      <span class="font-medium text-sm">
+        {{ props.title ?? props.type.split('-').slice(1).join(' ') }}
+      </span>
+      <StatusBadge :state="props.state" />
+    </div>
+    <ChevronDownIcon
+      class="size-4 text-muted-foreground transition-transform group-data-[state=open]:rotate-180"
+    />
+  </CollapsibleTrigger>
+</template>
diff --git a/packages/elements/src/tool/ToolInput.vue b/packages/elements/src/tool/ToolInput.vue
new file mode 100644
index 0000000..1d9eade
--- /dev/null
+++ b/packages/elements/src/tool/ToolInput.vue
@@ -0,0 +1,32 @@
+<script setup lang="ts">
+import type { ToolUIPart } from 'ai'
+import type { HTMLAttributes } from 'vue'
+import { cn } from '@repo/shadcn-vue/lib/utils'
+import { computed } from 'vue'
+import { CodeBlock } from '../code-block'
+
+const props = defineProps<{
+  input: ToolUIPart['input']
+  class?: HTMLAttributes['class']
+}>()
+
+const formattedInput = computed(() => {
+  return JSON.stringify(props.input, null, 2)
+})
+</script>
+
+<template>
+  <div
+    :class="cn('space-y-2 overflow-hidden p-4', props.class)"
+    v-bind="$attrs"
+  >
+    <h4
+      class="font-medium text-muted-foreground text-xs uppercase tracking-wide"
+    >
+      Parameters
+    </h4>
+    <div class="rounded-md bg-muted/50">
+      <CodeBlock :code="formattedInput" language="json" />
+    </div>
+  </div>
+</template>
diff --git a/packages/elements/src/tool/ToolOutput.vue b/packages/elements/src/tool/ToolOutput.vue
new file mode 100644
index 0000000..19fbbd6
--- /dev/null
+++ b/packages/elements/src/tool/ToolOutput.vue
@@ -0,0 +1,69 @@
+<script setup lang="ts">
+import type { ToolUIPart } from 'ai'
+import type { HTMLAttributes } from 'vue'
+import { cn } from '@repo/shadcn-vue/lib/utils'
+import { computed } from 'vue'
+import { CodeBlock } from '../code-block'
+
+const props = defineProps<{
+  output: ToolUIPart['output']
+  errorText: ToolUIPart['errorText']
+  class?: HTMLAttributes['class']
+}>()
+
+const showOutput = computed(() => props.output || props.errorText)
+
+const isObjectOutput = computed(
+  () => typeof props.output === 'object' && props.output !== null,
+)
+const isStringOutput = computed(() => typeof props.output === 'string')
+
+const formattedOutput = computed(() => {
+  if (isObjectOutput.value) {
+    return JSON.stringify(props.output, null, 2)
+  }
+  return props.output as string
+})
+</script>
+
+<template>
+  <div
+    v-if="showOutput"
+    :class="cn('space-y-2 p-4', props.class)"
+    v-bind="$attrs"
+  >
+    <h4
+      class="font-medium text-muted-foreground text-xs uppercase tracking-wide"
+    >
+      {{ props.errorText ? "Error" : "Result" }}
+    </h4>
+    <div
+      :class="
+        cn(
+          'overflow-x-auto rounded-md text-xs [&_table]:w-full',
+          props.errorText
+            ? 'bg-destructive/10 text-destructive'
+            : 'bg-muted/50 text-foreground',
+        )
+      "
+    >
+      <div v-if="errorText" class="p-3">
+        {{ props.errorText }}
+      </div>
+
+      <CodeBlock
+        v-else-if="isObjectOutput"
+        :code="formattedOutput"
+        language="json"
+      />
+      <CodeBlock
+        v-else-if="isStringOutput"
+        :code="formattedOutput"
+        language="json"
+      />
+      <div v-else class="p-3">
+        {{ props.output }}
+      </div>
+    </div>
+  </div>
+</template>
diff --git a/packages/elements/src/tool/ToolStatusBadge.vue b/packages/elements/src/tool/ToolStatusBadge.vue
new file mode 100644
index 0000000..023dc29
--- /dev/null
+++ b/packages/elements/src/tool/ToolStatusBadge.vue
@@ -0,0 +1,63 @@
+<!-- StatusBadge.vue -->
+<script setup lang="ts">
+import type { ToolUIPart } from 'ai'
+import type { Component } from 'vue'
+import { Badge } from '@repo/shadcn-vue/components/ui/badge'
+import {
+  CheckCircleIcon,
+  CircleIcon,
+  ClockIcon,
+  XCircleIcon,
+} from 'lucide-vue-next'
+import { computed } from 'vue'
+
+const props = defineProps<{
+  state: ToolUIPart['state']
+}>()
+
+const label = computed(() => {
+  const labels: Record<ToolUIPart['state'], string> = {
+    'input-streaming': 'Pending',
+    'input-available': 'Running',
+    'approval-requested': 'Awaiting Approval',
+    'approval-responded': 'Responded',
+    'output-available': 'Completed',
+    'output-error': 'Error',
+    'output-denied': 'Denied',
+  }
+  return labels[props.state]
+})
+
+const icon = computed<Component>(() => {
+  const icons: Record<ToolUIPart['state'], Component> = {
+    'input-streaming': CircleIcon,
+    'input-available': ClockIcon,
+    'approval-requested': ClockIcon,
+    'approval-responded': CheckCircleIcon,
+    'output-available': CheckCircleIcon,
+    'output-error': XCircleIcon,
+    'output-denied': XCircleIcon,
+  }
+  return icons[props.state]
+})
+
+const iconClass = computed(() => {
+  const classes: Record<string, boolean> = {
+    'size-4': true,
+    'animate-pulse': props.state === 'input-available',
+    'text-yellow-600': props.state === 'approval-requested',
+    'text-blue-600': props.state === 'approval-responded',
+    'text-green-600': props.state === 'output-available',
+    'text-red-600': props.state === 'output-error',
+    'text-orange-600': props.state === 'output-denied',
+  }
+  return classes
+})
+</script>
+
+<template>
+  <Badge class="gap-1.5 rounded-full text-xs" variant="secondary">
+    <component :is="icon" :class="iconClass" />
+    <span>{{ label }}</span>
+  </Badge>
+</template>
diff --git a/packages/elements/src/tool/index.ts b/packages/elements/src/tool/index.ts
new file mode 100644
index 0000000..a3894f2
--- /dev/null
+++ b/packages/elements/src/tool/index.ts
@@ -0,0 +1,5 @@
+export { default as Tool } from './Tool.vue'
+export { default as ToolContent } from './ToolContent.vue'
+export { default as ToolHeader } from './ToolHeader.vue'
+export { default as ToolInput } from './ToolInput.vue'
+export { default as ToolOutput } from './ToolOutput.vue'
diff --git a/packages/examples/src/index.ts b/packages/examples/src/index.ts
index 11cf3f7..d7e334a 100644
--- a/packages/examples/src/index.ts
+++ b/packages/examples/src/index.ts
@@ -29,4 +29,9 @@ export { default as Sources } from './sources.vue'
 export { default as SuggestionAiInput } from './suggestion-ai-input.vue'
 export { default as Suggestion } from './suggestion.vue'
 export { default as Task } from './task.vue'
+export { default as ToolInputAvailable } from './tool-input-available.vue'
+export { default as ToolInputStreaming } from './tool-input-streaming.vue'
+export { default as ToolOutputAvailable } from './tool-output-available.vue'
+export { default as ToolOutputError } from './tool-output-error.vue'
+export { default as Tool } from './tool.vue'
 export { default as Workflow } from './workflow.vue'
diff --git a/packages/examples/src/tool-input-available.vue b/packages/examples/src/tool-input-available.vue
new file mode 100644
index 0000000..30e0c28
--- /dev/null
+++ b/packages/examples/src/tool-input-available.vue
@@ -0,0 +1,29 @@
+<script setup lang="ts">
+import { Tool, ToolContent, ToolHeader, ToolInput } from '@repo/elements/tool'
+import { nanoid } from 'nanoid'
+
+const toolCall = {
+  type: 'tool-image_generation' as const,
+  toolCallId: nanoid(),
+  state: 'input-available' as const,
+  input: {
+    prompt: 'A futuristic cityscape at sunset with flying cars',
+    style: 'digital_art',
+    resolution: '1024x1024',
+    quality: 'high',
+  },
+  output: undefined,
+  errorText: undefined,
+}
+</script>
+
+<template>
+  <div style="height: 500px">
+    <Tool>
+      <ToolHeader :state="toolCall.state" :type="toolCall.type" />
+      <ToolContent>
+        <ToolInput :input="toolCall.input" />
+      </ToolContent>
+    </Tool>
+  </div>
+</template>
diff --git a/packages/examples/src/tool-input-streaming.vue b/packages/examples/src/tool-input-streaming.vue
new file mode 100644
index 0000000..018eae0
--- /dev/null
+++ b/packages/examples/src/tool-input-streaming.vue
@@ -0,0 +1,28 @@
+<script setup lang="ts">
+import { Tool, ToolContent, ToolHeader, ToolInput } from '@repo/elements/tool'
+import { nanoid } from 'nanoid'
+
+const toolCall = {
+  type: 'tool-web_search' as const,
+  toolCallId: nanoid(),
+  state: 'input-streaming' as const,
+  input: {
+    query: 'latest AI market trends 2024',
+    max_results: 10,
+    include_snippets: true,
+  },
+  output: undefined,
+  errorText: undefined,
+}
+</script>
+
+<template>
+  <div style="height: 500px">
+    <Tool>
+      <ToolHeader :state="toolCall.state" :type="toolCall.type" />
+      <ToolContent>
+        <ToolInput :input="toolCall.input" />
+      </ToolContent>
+    </Tool>
+  </div>
+</template>
diff --git a/packages/examples/src/tool-output-available.vue b/packages/examples/src/tool-output-available.vue
new file mode 100644
index 0000000..7c31606
--- /dev/null
+++ b/packages/examples/src/tool-output-available.vue
@@ -0,0 +1,35 @@
+<script setup lang="ts">
+import { Tool, ToolContent, ToolHeader, ToolInput, ToolOutput } from '@repo/elements/tool'
+import { nanoid } from 'nanoid'
+
+const toolCall = {
+  type: 'tool-database_query' as const,
+  toolCallId: nanoid(),
+  state: 'output-available' as const,
+  input: {
+    query: 'SELECT COUNT(*) FROM users WHERE created_at >= ?',
+    params: ['2024-01-01'],
+    database: 'analytics',
+  },
+  output: [
+    { 'User ID': 1, 'Name': 'John Doe', 'Email': 'john@example.com', 'Created At': '2024-01-15' },
+    { 'User ID': 2, 'Name': 'Jane Smith', 'Email': 'jane@example.com', 'Created At': '2024-01-20' },
+    { 'User ID': 3, 'Name': 'Bob Wilson', 'Email': 'bob@example.com', 'Created At': '2024-02-01' },
+    { 'User ID': 4, 'Name': 'Alice Brown', 'Email': 'alice@example.com', 'Created At': '2024-02-10' },
+    { 'User ID': 5, 'Name': 'Charlie Davis', 'Email': 'charlie@example.com', 'Created At': '2024-02-15' },
+  ],
+  errorText: undefined,
+}
+</script>
+
+<template>
+  <div style="height: 500px">
+    <Tool>
+      <ToolHeader :state="toolCall.state" :type="toolCall.type" />
+      <ToolContent>
+        <ToolInput :input="toolCall.input" />
+        <ToolOutput v-if="toolCall.state === 'output-available'" :error-text="toolCall.errorText" :output="toolCall.output" />
+      </ToolContent>
+    </Tool>
+  </div>
+</template>
diff --git a/packages/examples/src/tool-output-error.vue b/packages/examples/src/tool-output-error.vue
new file mode 100644
index 0000000..23ca231
--- /dev/null
+++ b/packages/examples/src/tool-output-error.vue
@@ -0,0 +1,37 @@
+<script setup lang="ts">
+import { Tool, ToolContent, ToolHeader, ToolInput, ToolOutput } from '@repo/elements/tool'
+
+const toolCall = {
+  type: 'tool-api_request' as const,
+  toolCallId: 'api_request_1',
+  state: 'output-error' as const,
+  input: {
+    url: 'https://api.example.com/data',
+    method: 'GET',
+    headers: {
+      'Authorization': 'Bearer token123',
+      'Content-Type': 'application/json',
+    },
+    timeout: 5000,
+  },
+  output: undefined,
+  errorText:
+    'Connection timeout: The request took longer than 5000ms to complete. Please check your network connection and try again.',
+}
+</script>
+
+<template>
+  <div style="height: 500px">
+    <Tool>
+      <ToolHeader :state="toolCall.state" :type="toolCall.type" />
+      <ToolContent>
+        <ToolInput :input="toolCall.input" />
+        <ToolOutput
+          v-if="toolCall.state === 'output-error'"
+          :error-text="toolCall.errorText"
+          :output="toolCall.output"
+        />
+      </ToolContent>
+    </Tool>
+  </div>
+</template>
diff --git a/packages/examples/src/tool.vue b/packages/examples/src/tool.vue
new file mode 100644
index 0000000..de3d496
--- /dev/null
+++ b/packages/examples/src/tool.vue
@@ -0,0 +1,210 @@
+<script setup lang="ts">
+import type { ToolUIPart } from 'ai'
+import {
+  Confirmation,
+  ConfirmationAccepted,
+  ConfirmationAction,
+  ConfirmationActions,
+  ConfirmationRejected,
+  ConfirmationRequest,
+  ConfirmationTitle,
+} from '@repo/elements/confirmation'
+import {
+  Tool,
+  ToolContent,
+  ToolHeader,
+  ToolInput,
+  ToolOutput,
+} from '@repo/elements/tool'
+import { nanoid } from 'nanoid'
+import { ref } from 'vue'
+
+const toolCall = ref<ToolUIPart>({
+  type: 'tool-database_query',
+  toolCallId: nanoid(),
+  state: 'output-available',
+  input: {
+    query: 'SELECT COUNT(*) FROM users WHERE created_at >= ?',
+    params: ['2024-01-01'],
+    database: 'analytics',
+  },
+  output: `| User ID | Name | Email | Created At |
+|---------|------|-------|------------|
+| 1 | John Doe | john@example.com | 2024-01-15 |
+| 2 | Jane Smith | jane@example.com | 2024-01-20 |
+| 3 | Bob Wilson | bob@example.com | 2024-02-01 |
+| 4 | Alice Brown | alice@example.com | 2024-02-10 |
+| 5 | Charlie Davis | charlie@example.com | 2024-02-15 |`,
+  errorText: undefined,
+})
+</script>
+
+<template>
+  <div class="space-y-4 min-h-[1400px]">
+    <Tool default-open>
+      <ToolHeader
+        state="input-streaming"
+        title="database_query"
+        type="tool-database_query"
+      />
+      <ToolContent>
+        <ToolInput :input="{}" />
+      </ToolContent>
+    </Tool>
+
+    <Tool>
+      <ToolHeader
+        state="approval-requested"
+        title="database_query"
+        type="tool-database_query"
+      />
+      <ToolContent>
+        <ToolInput :input="toolCall.input" />
+        <Confirmation :approval="{ id: nanoid() }" state="approval-requested">
+          <ConfirmationTitle>
+            <ConfirmationRequest>
+              This tool will execute a query on the production database.
+            </ConfirmationRequest>
+            <ConfirmationAccepted>
+              <CheckIcon class="size-4 text-green-600 dark:text-green-400" />
+              <span>Accepted</span>
+            </ConfirmationAccepted>
+            <ConfirmationRejected>
+              <XIcon class="size-4 text-destructive" />
+              <span>Rejected</span>
+            </ConfirmationRejected>
+          </ConfirmationTitle>
+
+          <ConfirmationActions>
+            <ConfirmationAction variant="outline" @click="() => {}">
+              Reject
+            </ConfirmationAction>
+            <ConfirmationAction variant="default" @click="() => {}">
+              Accept
+            </ConfirmationAction>
+          </ConfirmationActions>
+        </Confirmation>
+      </ToolContent>
+    </Tool>
+
+    <Tool>
+      <ToolHeader
+        state="approval-responded"
+        title="database_query"
+        type="tool-database_query"
+      />
+      <ToolContent>
+        <ToolInput :input="toolCall.input" />
+        <Confirmation
+          :approval="{ id: nanoid(), approved: true }"
+          state="approval-responded"
+        >
+          <ConfirmationTitle>
+            <ConfirmationRequest>
+              This tool will execute a query on the production database.
+            </ConfirmationRequest>
+            <ConfirmationAccepted>
+              <CheckIcon class="size-4 text-green-600 dark:text-green-400" />
+              <span>Accepted</span>
+            </ConfirmationAccepted>
+            <ConfirmationRejected>
+              <XIcon class="size-4 text-destructive" />
+              <span>Rejected</span>
+            </ConfirmationRejected>
+          </ConfirmationTitle>
+        </Confirmation>
+      </ToolContent>
+    </Tool>
+
+    <Tool>
+      <ToolHeader
+        state="input-available"
+        title="database_query"
+        type="tool-database_query"
+      />
+      <ToolContent>
+        <ToolInput :input="toolCall.input" />
+      </ToolContent>
+    </Tool>
+
+    <Tool>
+      <ToolHeader :state="toolCall.state" :type="toolCall.type" />
+      <ToolContent>
+        <ToolInput :input="toolCall.input" />
+        <Confirmation
+          :approval="{ id: nanoid(), approved: true }"
+          state="output-available"
+        >
+          <ConfirmationTitle>
+            <ConfirmationRequest>
+              This tool will execute a query on the production database.
+            </ConfirmationRequest>
+            <ConfirmationAccepted>
+              <CheckIcon class="size-4 text-green-600 dark:text-green-400" />
+              <span>Accepted</span>
+            </ConfirmationAccepted>
+            <ConfirmationRejected>
+              <XIcon class="size-4 text-destructive" />
+              <span>Rejected</span>
+            </ConfirmationRejected>
+          </ConfirmationTitle>
+        </Confirmation>
+
+        <ToolOutput
+          v-if="toolCall.state === 'output-available'"
+          :error-text="toolCall.errorText"
+          :output="toolCall.output"
+        />
+      </ToolContent>
+    </Tool>
+
+    <Tool>
+      <ToolHeader
+        state="output-error"
+        title="database_query"
+        type="tool-database_query"
+      />
+      <ToolContent>
+        <ToolInput :input="toolCall.input" />
+        <ToolOutput
+          error-text="Connection timeout: Unable to reach database server"
+        />
+      </ToolContent>
+    </Tool>
+
+    <Tool>
+      <ToolHeader
+        state="output-denied"
+        title="database_query"
+        type="tool-database_query"
+      />
+      <ToolContent>
+        <ToolInput :input="toolCall.input" />
+        <Confirmation
+          :approval="{
+            id: nanoid(),
+            approved: false,
+            reason: 'Query could impact production performance',
+          }"
+          state="output-denied"
+        >
+          <ConfirmationTitle>
+            <ConfirmationRequest>
+              This tool will execute a query on the production database.
+            </ConfirmationRequest>
+            <ConfirmationAccepted>
+              <CheckIcon class="size-4 text-green-600 dark:text-green-400" />
+              <span>Accepted</span>
+            </ConfirmationAccepted>
+            <ConfirmationRejected>
+              <XIcon class="size-4 text-destructive" />
+              <span>
+                Rejected: Query could impact production performance
+              </span>
+            </ConfirmationRejected>
+          </ConfirmationTitle>
+        </Confirmation>
+      </ToolContent>
+    </Tool>
+  </div>
+</template>

From 2b92dd6b58e92b39dd22265a740ea6ad0fb93933 Mon Sep 17 00:00:00 2001
From: cwandev <18888351756@163.com>
Date: Fri, 14 Nov 2025 15:55:40 +0800
Subject: [PATCH 2/3] fix: update tool example component

---
 packages/examples/src/tool.vue | 2 ++
 1 file changed, 2 insertions(+)

diff --git a/packages/examples/src/tool.vue b/packages/examples/src/tool.vue
index de3d496..2229de0 100644
--- a/packages/examples/src/tool.vue
+++ b/packages/examples/src/tool.vue
@@ -16,6 +16,7 @@ import {
   ToolInput,
   ToolOutput,
 } from '@repo/elements/tool'
+import { CheckIcon, XIcon } from 'lucide-vue-next'
 import { nanoid } from 'nanoid'
 import { ref } from 'vue'
 
@@ -167,6 +168,7 @@ const toolCall = ref<ToolUIPart>({
       <ToolContent>
         <ToolInput :input="toolCall.input" />
         <ToolOutput
+          :output="undefined"
           error-text="Connection timeout: Unable to reach database server"
         />
       </ToolContent>

From f822b6a4a10d951c6e1f814e780f2a2837cfad69 Mon Sep 17 00:00:00 2001
From: cwandev <18888351756@163.com>
Date: Fri, 14 Nov 2025 16:14:19 +0800
Subject: [PATCH 3/3] fix: remove unnecessary styles from component loader and
 tool example

---
 apps/www/components/ComponentLoader.vue | 2 +-
 packages/examples/src/tool.vue          | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/apps/www/components/ComponentLoader.vue b/apps/www/components/ComponentLoader.vue
index 53b5315..918220f 100644
--- a/apps/www/components/ComponentLoader.vue
+++ b/apps/www/components/ComponentLoader.vue
@@ -15,7 +15,7 @@ withDefaults(defineProps<Props>(), {
 
 <template>
   <div class="my-4 w-full space-y-8">
-    <ClientOnly class="overflow-scroll">
+    <ClientOnly>
       <CodeGroup>
         <div
           :label="label || componentName"
diff --git a/packages/examples/src/tool.vue b/packages/examples/src/tool.vue
index 2229de0..60d72d8 100644
--- a/packages/examples/src/tool.vue
+++ b/packages/examples/src/tool.vue
@@ -41,7 +41,7 @@ const toolCall = ref<ToolUIPart>({
 </script>
 
 <template>
-  <div class="space-y-4 min-h-[1400px]">
+  <div class="space-y-4">
     <Tool default-open>
       <ToolHeader
         state="input-streaming"