# @copilotkit/vue 中文文档

规范地址：https://npmcn.com/package/%40copilotkit/vue/

版本：1\.87\.0
npm 元数据更新时间：2026-11-11T23:59:47.192Z
中文译文更新时间：2026-11-12T00:01:18.989Z
软件包许可：MIT

本文由上游 README 翻译，可能存在偏差，请结合原文核对 API、命令与配置。版权与许可归原作者所有。

原始 npm 页面：https://www.npmjs.com/package/%40copilotkit/vue
原文对照：https://npmcn.com/package/%40copilotkit/vue/?lang=original
项目主页：https://github.com/CopilotKit/CopilotKit
源码仓库：https://github.com/CopilotKit/CopilotKit

## 关键信息（来自 npm 元数据）

- 包体积（解压后）：8.7 MB，928 个文件
- 模块格式：ESM + CJS
- TypeScript 类型：包内自带
- Node.js 要求：\>=20
- 运行依赖：14 个
- peer 依赖：vue \>=3\.3\.0，chart\.js ^4\.4\.0，maplibre-gl ^5\.0\.0
- 首次发布：2026-05-13T23:00:43.421Z
- 最新版本发布：2026-11-11T23:59:46.870Z
- 近 30 天下载量：55406（2026-10-11 至 2026-11-09，npm 官方下载统计）
- 已发布版本数：158（近 12 个月 158 个）

## 中文简介

Vue 3 组件和可堆肥设备

## 安装

```sh
npm install @copilotkit/vue
```

也可以使用：`pnpm add @copilotkit/vue`、`yarn add @copilotkit/vue`、`bun add @copilotkit/vue`

## README

# @ copilotkit/ veue

Vue 3 组件和可编组,用于连接一个应用到 CopilotKit Runtime并渲染代理聊天UI. 软件包包括 `CopilotKitProvider`, (中文(简体) ), `CopilotChat`, (中文(简体) ), `CopilotSidebar`, (中文(简体) ), `CopilotPopup`,以及用于代理、工具、上下文、建议、线程、中断和自定义渲染的可编译器.

## 安装

```bash
npm install @copilotkit/vue
```

包裹需要Vue 3.3或更新. 您的应用程序还需要一个副驾驶运行时端点, 例如 `/api/copilotkit`。如果您自己主持运行时间,请安装 `@copilotkit/runtime` 在服务器项目中.

## 快开始

```vue
<!-- 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` 新代码的子路径 :

```ts
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,代理在聊天时会制作出卡片,表格,表格和图表. 给提供者一个组件目录 :

```vue
<!-- 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`。 。 。 .

图表和地图使用可选的库. 没有它们,一张图表会显示一张表格,一张地图会显示一个位置列表. 要绘制图表和地图:

1.  安装库 : `npm install chart.js maplibre-gl`。 。 。 .
2.  在您的应用程序条目中添加插件 :

```ts
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 指南](https://docs.copilotkit.ai/vue/generative-ui/components) 用于您自己的组件、页面表面和主题.

## 文档

-   [Vue 开始引导](https://docs.copilotkit.ai/vue)
-   [Vue API 参考文献](https://docs.copilotkit.ai/reference/vue)

完整的Vue Docs覆盖了运行时间设置,预建的聊天组件,可堆肥,工具,线程,中断,附件,语音,以及定制.

## 常见问题

### @copilotkit/vue 是什么？

Vue 3 组件和可堆肥设备

### 如何安装 @copilotkit/vue？

在项目目录运行 npm install @copilotkit/vue，或使用 pnpm add / yarn add / bun add。它还需要宿主项目提供 peer 依赖：vue（\>=3\.3\.0）。npm 7 及以上与 pnpm 8 及以上默认会自动安装必需的 peer 依赖，Yarn 需要手动安装。

### @copilotkit/vue 支持 TypeScript 吗？

支持。包内自带 TypeScript 类型声明（package\.json 声明了 types 入口），安装后即可获得类型提示，无需再安装 @types 包。

### @copilotkit/vue 支持 ESM 还是 CommonJS？

同时提供 ES Module 与 CommonJS 入口，import 和 require\(\) 都可以使用，打包工具会自动选择合适的版本。

### @copilotkit/vue 需要什么版本的 Node\.js？

package\.json 的 engines 字段要求 Node\.js \>=20。版本不符时 npm 默认只给出警告，开启 engine-strict 后会拒绝安装。

### @copilotkit/vue 可以商用吗？

@copilotkit/vue 使用 MIT 许可。宽松许可：允许商业使用、修改和再分发，通常只需在分发时保留原版权与许可声明。以上为概括，不构成法律意见，请以许可原文为准。

### @copilotkit/vue 的下载量有多少？

根据 npm 官方下载统计，@copilotkit/vue 在 2026/10/11 – 2026/11/09 这 30 天内被下载 55,406 次，日均约 1,847 次。下载量会把 CI 构建、镜像同步和作为其他包依赖的安装一并计入，适合横向比较热度，不能直接等同于使用人数。

### @copilotkit/vue 还在维护吗？

最新版本 1\.87\.0 发布于 2026/11/12（今天）；至今共发布 158 个版本，其中过去 12 个月发布了 158 个；首次发布于 2026/05/14。发布频率只是参考信号：功能稳定的工具可能很少需要更新，建议结合源码仓库的 issue 和提交记录判断。