AI Tool

#Basic usage

Input

{"query": "paper stock"}

Output

{"hits": 12}

ai-tool/basic.vue

<script setup lang="ts">
import { AiTool } from "@bysages/vue";
</script>

<template>
  <!-- The tool call in its states: running and completed. The dot
       pairs color with the word — never color alone. -->
  <div class="grid gap-3 w-full">
    <AiTool name="search_web" status="running">
      <template #input>{{ '{"query": "paper stock"}' }}</template>
    </AiTool>
    <AiTool name="search_web" status="completed" default-open>
      <template #input>{{ '{"query": "paper stock"}' }}</template>
      <template #output>{{ '{"hits": 12}' }}</template>
    </AiTool>
  </div>
</template>

#Props

#AiTool

A tool call: the shared collapsible as the vessel — the name it was reached by and the state it reached in on the trigger, its input and output folded inside.

Prop	Type	Default	Description
`name`	`String`		The name the tool was reached by — shown raw on the trigger unless the `label` slot speaks friendlier words.
`status`	`String as PropType<"pending" \| "running" \| "completed" \| "error">`		The state the call reached — pending, running, completed, or error; stamped on the fold and whispered in the status chip.
`defaultOpen`	`Boolean`	`false`	The fold arrives open when set — rides the shared collapsible.