基于 CopilotKit 的前端 AI 项目导出的 WebComponents 组件

1、简介

基于 CopilotKit 实现的 AI 智能体项目，为了便于与现有业务系统进行集成，打包为 WebComponents 组件供不同的业务系统直接集成调用。

2、安装

可以使用 npm / yarn / pnpm 安装依赖 @jasolar/copilot-ai-wc@latest 最新版本，如下所示：

npm install @jasolar/copilot-ai-wc@latest

yarn add @jasolar/copilot-ai-wc@latest

pnpm install @jasolar/copilot-ai-wc@latest

3、引入组件

方式一：以 ESModule 的方式引入组件（适用于 Vue3 、React 、Angular 等使用 如 Vite.js / Webpack 5+ 等现代打包器构建的项目）：

// 在入口文件中（如 main.js）引入组件
  import '@jasolar/copilot-ai-wc/dist/copilot-wc.iife.js'; // iife 模式的 js 文件
  import '@jasolar/copilot-ai-wc/dist/copilot-wc.css'; // css 样式

方式二：对于 如 Vue2 等使用 Webpack 4 以下的打包器构建的项目，可以使用 cjs 方式引入组件：

// 在入口文件中（如 main.js）引入组件
import '@jasolar/copilot-ai-wc/dist/copilot-wc.cjs.js'; // cjs 模式的 js 文件
import '@jasolar/copilot-ai-wc/dist/copilot-wc.css'; // css 样式

方式三：或者。可以使用更广泛适用的 使用 CDN 方式引入，只需要将组件的 css 文件和 js 文件放置到页面 index.html 中，如下所示：

<link rel="stylesheet" href="https://unpkg.com/@jasolar/copilot-ai-wc@latest/dist/copilot-wc.css">
<script src="https://unpkg.com/@jasolar/copilot-ai-wc@latest/dist/copilot-wc.iife.js"></script>

4、使用组件

组件使用方式如下：

<copilot-wc></copilot-wc>

组件的属性如下：

1. apiKey: string apiKey 是必填项，用于访问 CopilotKit 的 API，请将您的 API Key 填写到此属性中。
2. apiUrl: string apiUrl 是可选项，用于指定 CopilotKit 的 API 地址，默认为 https://api.copilotkit.com/v1/chat/completions
3. model: string model 是可选项，用于指定 CopilotKit 使用的模型，默认为 gpt-3.5-turbo
4. systemPrompt: string systemPrompt 是可选项，用于指定 CopilotKit 的系统提示，默认为空字符串。
5. userPrompt: string userPrompt 是可选项，用于指定 CopilotKit 的用户提示，默认为空字符串。
6. maxTokens: number maxTokens 是可选项，用于指定 CopilotKit 的最大生成 tokens 数，默认为 1024
7. onResponse: (response: string) => void onResponse 是可选项，用于指定 CopilotKit 的响应回调，默认为空函数。 组件的属性值可以在标签中设置，也可以在标签的属性中设置，例如：

<copilot-wc apiKey="your-api-key"></copilot-wc>