Aitrainee | 公众号：AI进修生
🌟如何仅用一行代码将强大的 AI 代理无缝集成到您的应用程序中。
Hello，大家好啊，今天想分享一个 Copilot 新项目：用于构建自定义 AI Copilots 的框架🤖，应用内AI聊天机器人、应用内AI代理和AI驱动的文本区域。
Demo： 这里展示了利用Copilot构建各种小型应用程序的演示，每一个演示都单独分配的一个仓库。
您可以在我们的GitHub示例中找到各种用例的示例。以下是其中一些示例：
- Hello World: 一个简单的待办事项应用，展示了如何在React中使用CopilotKit。
- Presentation Voice: 展示了如何将CopilotKit与PowerPoint和语音识别结合使用。
- Presentation Demo: 一个更复杂的示例，展示了如何在PowerPoint演示中使用CopilotKit。
- Spreadsheet Demo: 展示了如何在电子表格应用中使用CopilotKit。
比如， PowerPoint + Copilot + 语音 ：
视频介绍与教程
组件
🌟 :
构建应用感知的AI聊天机器人 ，可以“看到”当前的应用状态并在应用内执行操作。
AI聊天机器人可以与您的应用前端和后端以及第三方服务（如Salesforce、Dropbox等）进行对话，支持生成式UI。几秒钟内开始使用：
🌟 :
任何<textarea />的替代品，具有AI辅助文本生成功能。
自动完成 + AI编辑 + 从头生成。基于用户数据和Copilot应用上下文。
只需将textarea更改为CopilotTextarea。
🌟 应用内代理（由LangChain驱动）:
为代理提供实时应用上下文，让代理在应用内执行操作。
🌟 联合代理（由LangChain驱动，敬请期待）:
允许最终用户观察和干预应用内代理的操作，具有原生应用UX。
最终用户可以纠正 中间步骤中的错误（如果有），并从该点重新开始代理操作 。
工作原理
定义以下简单的入口点 进入您的应用程序，CopilotKit🪁执行引擎将处理其余部分！
- • 应用状态 （前端 + 后端 + 第三方）
- • 应用交互 （通过普通的TypeScript代码，前端 + 后端）
- • 特定用途的LLM链
- • 还有更多。
安装
要安装CopilotKit，请执行以下命令：
pnpm i
@copilotkit
/
react
-
core
# or
npm i
@copilotkit
/
react
-
core
# or
yarn add
@copilotkit
/
react
-
core
📚 阅读文档以了解更多 📚
组成模块
有关更全面和最新的概述，请参阅文档。大致如下：
Copilot入口点
- • ✅ useCopilotReadable ：将前端状态提供给copilot。
- • ✅ useMakeCopilotDocumentReadable ：将文档状态提供给copilot，特别适用于第三方状态（例如Gong通话记录）。
- • ✅ useCopilotAction ：前端应用程序交互。
- • ✅ CopilotRuntime ：服务器端运行时。
- • 🚧 useCopilotChain ：提供特定用例的LLM链。
内置UI组件
- • ✅ ：内置的、可定制的Copilot UI（可选 - 你可以使用自己的UI）。
- • ✅ ：内置的弹出UI。
- • ✅ ：独立的聊天UI。
- • ✅ ：具有Copilot自动完成功能的替代
<textarea />组件。 - • ✅ useCopilotChat()：用于完全自定义的UI组件。
- • 🚧 使用自定义UX元素在聊天中 （即将推出）。
示例
<
CopilotSidebar
/>
import
"@copilotkit/react-ui/styles.css"
;
// 添加到应用全局CSS
import
{
CopilotKit
}
from
"@copilotkit/react-core"
;
import
{
CopilotSidebar
}
from
"@copilotkit/react-ui"
;
function
MyAmazingContent
(
) {
const
importantInfo =
useImportantInfo
();
useCopilotReadable
({
description
:
"非常重要的信息"
,
value
: importantInfo,
});
useCopilotAction
(
{
name
:
`selectDestinations\_
${toCamelCase(heading)}
`
,
description
:
`在
${heading}
表格中将给定的目的地设置为“已选择”`
,
parameters
: [
{
name
:
"destinationNames"
,
type
:
"string[]"
,
description
:
"要选择的目的地名称"
,
required
:
true
,
},
],
handler
:
async
({ destinationNames }) => {
setCheckedRows
(
(
prevState
) =>
{
const
newState = { ...prevState };
destinationNames.
forEach
(
(
destinationName
) =>
{
newState[destinationName] =
true
;
});
return
newState;
});
},
},
[]
);
return
<
YourContent
/>
;
}
export
default
function
App
(
) {
return
(
<
CopilotKit
url
=
"/api/copilotkit/chat"
>
{/* 全局状态和copilot逻辑。将其放在整个应用程序周围 */}
<
CopilotSidebar
>
{/* 内置的Copilot UI（或使用你自己的UI）。放在单个页面或整个应用程序周围 */}
<
MyAmazingContent
/>
</
CopilotSidebar
>
</
CopilotKit
>
);
}
<
CopilotTextarea
/>
一个具有自动完成、
AI
插入/编辑和从头生成的替代
`
<textarea
/>
`
组件。
<br/>
基于提供给
Copilot
的数据进行索引。
import
"@copilotkit/react-textarea/styles.css"
;
// 添加到应用全局CSS
import
{
CopilotTextarea
}
from
"@copilotkit/react-textarea"
;
import
{
CopilotKit
}
from
"@copilotkit/react-core"
;
// 在应用程序中的任何地方调用以提供外部上下文（确保用<CopilotKit>包装应用）:
// 见下文以了解更多功能（父/子层次结构、类别等）
useCopilotReadable
({
description
:
"您的数据描述"
,
value
:
relevantInformation
,
});
useMakeCopilotDocumentReadable
(
document
);
return
(
<
CopilotKit
url
=
"/api/copilotkit/chat"
>
{
/* 全局状态和copilot逻辑。将其放在整个应用程序周围 */
}
<
CopilotTextarea
className
=
"p-4 w-1/2 aspect-square font-bold text-3xl bg-slate-800 text-white rounded-lg resize-none"
placeholder
=
"一个CopilotTextarea！"
autosuggestionsConfig
=
{{
purposePrompt
:
"
一个关于CopilotTextarea的酷炫公告帖
。
简短
、
清晰
、
酷炫
。"
,
forwardedParams
:
{
//
自定义自动完成的额外参数
max\_tokens
:
25
,
stop
:
[
"\
n
"
,
"
.
"
,
","
],
},
}}
/>
</
CopilotKit
>
);
用例
CopilotKit帮助开发者为用户构建全新的体验 。以下是一些常见用例：
- • SaaS应用程序中的AI助理 ：构建您的应用感知型AI聊天机器人。
- • AI编辑器助手 ：通过CopilotTextarea使用强大的助手。
- • AI增强的CRM ：使用AI增强您的客户关系管理工具。
- • 自定义AI工作流 ：在您的应用程序中定义自定义的AI工作流。
- • 还有更多！
知音难求，自我修炼亦艰
抓住前沿技术的机遇，与我们一起成为创新的超级个体
（把握AIGC时代的个人力量）
点这里👇关注我，记得标星哦～
一键三连「分享」、「点赞」和「在看」
科技前沿进展日日相见 ~