@ copilotkit/ veue
Vue 3 组件和可编组,用于连接一个应用到 CopilotKit Runtime并渲染代理聊天UI. 软件包包括 CopilotKitProvider, (中文(简体) ), CopilotChat, (中文(简体) ), CopilotSidebar, (中文(简体) ), CopilotPopup,以及用于代理、工具、上下文、建议、线程、中断和自定义渲染的可编译器.
安装
npm install @copilotkit/vue
包裹需要Vue 3.3或更新. 您的应用程序还需要一个副驾驶运行时端点, 例如 /api/copilotkit。如果您自己主持运行时间,请安装 @copilotkit/runtime 在服务器项目中.
快开始
<!-- App.vue -->
<script setup lang="ts">
import { CopilotChat, CopilotKitProvider } from "@copilotkit/vue/v2";
import "@copilotkit/vue/styles.css";
</script>
<template>
<CopilotKitProvider runtime-url="/api/copilotkit">
<main style="height: 100dvh">
<CopilotChat />
</main>
</CopilotKitProvider>
</template>
导入 @copilotkit/vue/styles.css 一次在你的应用程序. CopilotChat 当 agent-id 省略。 聊天会填充其母,所以给这个容器一个高度.
进口和兼容性
使用 /v2 新代码的子路径 :
import {
CopilotChat,
CopilotKitProvider,
useFrontendTool,
} from "@copilotkit/vue/v2";
根导入, @copilotkit/vue,再导出 v2 API ,并保留兼容性包装 CopilotKit, (中文(简体) ), useCopilotAction, (中文(简体) ), useFrontendTool,以及 useCopilotReadable。遗留工具包装器接受 Parameter[] 定义。 使用 /v2 用于当前标准Schema工具API,包括Zod,Valibot,以及ArkType schemas.
在Vue模板中,骆驼Case道具成为kebab-case属性. 譬如说, runtimeUrl 以 runtime-url,并使用布尔或对象道具 : 约束诸如 :enable-inspector="false". Vue 渲染定制用途 命名和范围化插槽 React 用途可提供道具.
遗传性UI
一个文本答案往往是错误的答案. 通过基因UI,代理在聊天时会制作出卡片,表格,表格和图表. 给提供者一个组件目录 :
<!-- App.vue -->
<script setup lang="ts">
import { CopilotChat, CopilotKitProvider } from "@copilotkit/vue/v2";
import { standardUI } from "@copilotkit/vue/v2/generative-ui";
import "@copilotkit/vue/styles.css";
</script>
<template>
<CopilotKitProvider
runtime-url="/api/copilotkit"
:generativeUI="{ ui: standardUI }"
>
<main style="height: 100dvh">
<CopilotChat />
</main>
</CopilotKitProvider>
</template>
在骆驼Case中写入绑定 : :generativeUI。请读 :generative-ui 作为不同的道具,所以提供者不会得到目录.
standardUI 是标准目录。 要让代理制作您自己的组件,请使用 createGenerativeUI。 。 。 .
图表和地图使用可选的库. 没有它们,一张图表会显示一张表格,一张地图会显示一个位置列表. 要绘制图表和地图:
- 安装库 :
npm install chart.js maplibre-gl。 。 。 . - 在您的应用程序条目中添加插件 :
import { createApp } from "vue";
import { GenerativeUIChart } from "@copilotkit/vue/v2/generative-ui/chart";
import { GenerativeUIMap } from "@copilotkit/vue/v2/generative-ui/map";
import App from "./App.vue";
createApp(App).use(GenerativeUIChart).use(GenerativeUIMap).mount("#app");
现在请经纪人比较三个电话计划. 它可以在聊天时用桌子回答.
读取 基因UI 指南 用于您自己的组件、页面表面和主题.
文档
完整的Vue Docs覆盖了运行时间设置,预建的聊天组件,可堆肥,工具,线程,中断,附件,语音,以及定制.