⚡️快速安装
npx CopilotKit @latest init
阅读文档→尝试Copilot Cloud→加入我们的Discord→
入门
完整入门指南→
为什么要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→
与我们的最新版本保持最新状态！
在LinkedIn上关注我们→
在X→上关注我们
??♂️贡献
感谢您对CopilotKit贡献的兴趣！ ?
我们重视所有贡献，无论是通过代码，文档，创建演示应用程序还是只是传播这个词。
这里有一些有用的资源来帮助您入门：
-
对于代码贡献，贡献.md。
-
有关与文档相关的贡献，请查看文档贡献指南。
-
想贡献，但不确定如何？加入我们的不和谐，我们会为您提供帮助！
?许可证
该存储库的源代码可根据MIT许可证获得。
