Tool

工具调用卡片组件，拦截 <tool> 标签，显示函数名、参数和调用结果。

演示

<tool name="get_weather" args='{"city":"北京","unit":"celsius"}'>晴天，25°C，湿度 45%</tool>

---

⚙get_weather

{
  "city": "北京",
  "unit": "celsius"
}

result

晴天，25°C，湿度 45%

<template>
  <div>
    <Input v-model="text" :rows="3" :simulate-text="exampleText" />

    <hr>

    <div>
      <StreamContains :model-value="text" mode="accurate">
        <Tool />
      </StreamContains>
    </div>
  </div>
</template>

<script setup>
import { ref } from 'vue'
import { StreamContains, Tool } from 'stream-ui'
import Input from '../../.comm/Input.vue'

const exampleText = '<tool name="get_weather" args=\'{"city":"北京","unit":"celsius"}\'>晴天，25°C，湿度 45%</tool>'
const text = ref(exampleText)
</script>

使用

<StreamContains :model-value="text" mode="accurate">
  <Tool />
</StreamContains>

示例

<tool name="get_weather" args='{"city":"北京"}'>晴天，25°C</tool>

Props

属性	类型	来源	说明
content	string	标签内文本	调用结果
isClosed	boolean	注入	是否已完成
attrs.name	string	标签属性	工具/函数名称
attrs.args	string	标签属性	JSON 参数，自动格式化显示

• 未闭合时显示 running... 状态
• attrs.args 为 JSON 字符串时自动格式化输出

CLI

npx @huiol/stream-ui add tool