⚡️快速安装
npx CopilotKit @latest init
阅读文档→尝试Copilot Cloud→加入我们的Discord→
入门
- 安装：运行一个简单的CLI命令
- 配置：将CopilotKit提供商添加到您的应用
- 自定义：使用无头UI或可自定义的预构建组件
- 部署：你完成了！
完整入门指南→
为什么要CopilotKit ？
- 整合的分钟 - 快速开始使用我们的CLI
- 框架不可知论 - 与React，Next.JS，Agui等合作
- 可以使用生产的UI-使用可自定义的组件或使用无头UI构建
- 内置安全性 - 及时注射保护
- 开源 - 完全透明度和社区驱动
?现实生活中用例
部署与用户在应用程序中与用户一起工作的深入集成的AI助手和代理商。
代码样本
放入这些构建块，并根据您的需求量身定制它们。
使用无头的API和预构建组件构建
// Headless UI with full control
const { visibleMessages , appendMessage , setMessages , ... } = useCopilotChat ( ) ;
// Pre-built components with deep customization options (CSS + pass custom sub-components)
< CopilotPopup
instructions = { "You are assisting the user as best as you can. Answer in the best way possible given the data you have." }
labels = { { title : "Popup Assistant" , initial : "Need any help?" } }
/ > // Frontend actions + generative UI, with full streaming support
useCopilotAction ( {
name : "appendToSpreadsheet" ,
description : "Append rows to the current spreadsheet" ,
parameters : [
{ name : "rows" , type : "object[]" , attributes : [ { name : "cells" , type : "object[]" , attributes : [ { name : "value" , type : "string" } ] } ] }
] ,
render : ( { status , args } ) => < Spreadsheet data = { canonicalSpreadsheetData ( args . rows ) } / > ,
handler : ( { rows } ) => setSpreadsheet ( { ... spreadsheet , rows : [ ... spreadsheet . rows , ... canonicalSpreadsheetData ( rows ) ] } ) ,
} ) ;将应用程序内串联与Langgraph集成
// Share state between app and agent
const { agentState } = useCoAgent ( {
name : "basic_agent" ,
initialState : { input : "NYC" }
} ) ; ! [ banner ] ( https : / / github . com / user - attachments / assets / b4d76fab - 7439 - 4010 - 9319 - a5b16546b569 )
! [ class - support - ecosystem ] ( https : / / github . com / user - attachments / assets / 65 de96b7 - dc12 - 4 c3d - a704 - 30 c2d3b0ea3c )
! [ form - filling - copilot ] ( https : / / github . com / user - attachments / assets / 46 b0ad80 - 33 dc - 4 a49 - 94 ba - f270a32fc123 )
! [ chat - with - your - data ] ( https : / / github . com / user - attachments / assets / 4 ffd9b7a - 86 d9 - 4 b22 - 9 c17 - 148 de581e7c6 )
! [ state - machine - copilot ] ( https : / / github . com / user - attachments / assets / 65581290 - f4bd - 4486 - 840 b - 27 d3d0c77bc8 )
// agentic generative UI
useCoAgentStateRender ( {
name : "basic_agent" ,
render : ( { state } ) => < WeatherDisplay { ... state . final_response } / > ,
} ) ;
// Human in the Loop (Approval)
useCopilotAction ( {
name : "email_tool" ,
parameters : [
{
name : "email_draft" ,
type : "string" ,
description : "The email content" ,
required : true ,
} ,
] ,
renderAndWaitForResponse : ( { args , status , respond } ) => {
return (
< EmailConfirmation
emailContent = { args . email_draft || "" }
isExecuting = { status = = = "executing" }
onCancel = { ( ) => respond ?. ( { approved : false } ) }
onSend = { ( ) =>
respond ?. ( {
approved : true ,
metadata : { sentAt : new Date ( ) . toISOString ( ) } ,
} )
}
/ >
) ;
} ,
} ) ; CopilotKitCustomizeConfig(config, {
emitIntermediateState: [{
stateKey: "outline",
tool: "set_outline",
toolArgument: "outline"
}],
});
const response = await ChatOpenAI({ model: "gpt-4o" }).invoke(messages, modifiedConfig);">
// intermediate agent state streaming (supports both LangGraph.js + LangGraph python) const modifiedConfig = CopilotKit CustomizeConfig ( config , { emitIntermediateState : [ { stateKey : "outline" , tool : "set_outline" , toolArgument : "outline" } ] , } ) ; const response = await ChatOpenAI ( { model : "gpt-4o" } ) . invoke ( messages , modifiedConfig ) ;
?以示例为例
AG-UI：代理 - 用户交互协议
将代理工作流程连接到面向用户的应用程序，并在整个代理堆栈中具有深厚的合作伙伴关系和第一方集成，包括Langgraph，Crewai等。
在AG-UI读数中了解更多信息→?社区
有问题还是需要帮助？
阅读文档→
尝试Copilot Cloud→
与我们的最新版本保持最新状态！
在X→上关注我们
??♂️贡献
感谢您对CopilotKit贡献的兴趣！ ?
我们重视所有贡献，无论是通过代码，文档，创建演示应用程序还是只是传播这个词。
这里有一些有用的资源来帮助您入门：
对于代码贡献，贡献.md。
有关与文档相关的贡献，请查看文档贡献指南。
想贡献，但不确定如何？加入我们的不和谐，我们会为您提供帮助！
?许可证
该存储库的源代码可根据MIT许可证获得。
下载源码
通过命令行克隆项目:
git clone https://github.com/CopilotKit/CopilotKit.git