集成 CopilotKit(AG-UI)
当你有一个 CopilotKit React 前端,并想通过 AG-UI 协议接入 awaken agent server 时,使用本页。
- 已有可运行的 awaken runtime
awaken启用了server- Node.js 项目中已安装
@copilotkit/react-core和@copilotkit/react-ui
[dependencies]awaken = { git = "https://github.com/AwakenWorks/awaken", features = ["server"] }tokio = { version = "1", features = ["full"] }async-trait = "0.1"serde_json = "1"tracing-subscriber = "0.3"- 启动后端 server:
use std::sync::Arc;
use awaken::engine::GenaiExecutor;use awaken::contract::storage::ThreadRunStore;use awaken::registry_spec::ModelSpec;use awaken::registry_spec::AgentSpec;use awaken::stores::{InMemoryMailboxStore, InMemoryStore};use awaken::AgentRuntimeBuilder;use awaken::server::app::{ServerState, ServerConfig};use awaken::server::mailbox::{Mailbox, MailboxConfig};use awaken::server::routes::build_router;
#[tokio::main]async fn main() { tracing_subscriber::fmt().with_target(true).init();
let agent_spec = AgentSpec::new("copilotkit-agent") .with_model_id("gpt-4o-mini") .with_system_prompt( "You are a CopilotKit-powered assistant. \ Update shared state and suggest actions when appropriate.", ) .with_max_rounds(10);
let runtime = AgentRuntimeBuilder::new() .with_provider("openai", Arc::new(GenaiExecutor::new())) .with_model(ModelSpec::new("gpt-4o-mini", "openai", "gpt-4o-mini")) .with_agent_spec(agent_spec) .build() .expect("failed to build runtime"); let runtime = Arc::new(runtime);
let store = Arc::new(InMemoryStore::new()); let resolver = runtime.resolver_arc();
let mailbox_store = Arc::new(InMemoryMailboxStore::new()); let mailbox = Arc::new(Mailbox::new( runtime.clone(), mailbox_store as Arc<dyn awaken::contract::MailboxStore>, store.clone() as Arc<dyn ThreadRunStore>, format!("copilotkit:{}", std::process::id()), MailboxConfig::default(), ));
let state = ServerState::new( runtime, mailbox, store as Arc<dyn ThreadRunStore>, resolver, ServerConfig { address: "127.0.0.1:3000".into(), ..Default::default() }, );
let app = build_router().with_state(state);
let listener = tokio::net::TcpListener::bind("127.0.0.1:3000") .await .expect("failed to bind"); axum::serve(listener, app).await.expect("server crashed");}服务器会自动在以下路径注册 AG-UI 路由:
AG-UI 路由包括:
POST /v1/ag-ui/runPOST /v1/ag-ui/threads/:thread_id/runsPOST /v1/ag-ui/agents/:agent_id/runsPOST /v1/ag-ui/threads/:thread_id/interruptGET /v1/ag-ui/threads/:thread_id/replayGET /v1/ag-ui/threads/:id/messages
Replay 路由要求接入 ProtocolReplayLog,用于按 thread 回放持久协议 frame;
普通 live reconnect 仍然使用活动 SSE stream。
- 安装 CopilotKit:
npm install @copilotkit/react-core @copilotkit/react-ui- 用
CopilotKitprovider 包裹应用:
import { CopilotKit } from "@copilotkit/react-core";import { CopilotChat } from "@copilotkit/react-ui";import "@copilotkit/react-ui/styles.css";
export default function App() { return ( <CopilotKit runtimeUrl="http://localhost:3000/v1/ag-ui/run"> <CopilotChat labels={{ title: "Agent", initial: "How can I help?" }} /> </CopilotKit> );}- 分别启动后端和前端。
- 打开页面
- 在 CopilotChat 中发送消息
- 确认聊天 UI 中有流式回复
- 查看后端日志里的
RunStart/RunFinish
| 错误 | 原因 | 修复 |
|---|---|---|
| 浏览器 CORS 错误 | 未配置 CORS 中间件 | 给 axum router 加 CORS |
| CopilotKit 提示 connection failed | runtimeUrl 错了 | 指向 http://localhost:3000/v1/ag-ui/run(AG-UI 的 run 端点,不是命名空间) |
| 有事件但 UI 不更新 | AG-UI 事件格式不兼容 | 确认 CopilotKit 版本匹配 |
/v1/ag-ui/run 返回 404 | 没开 server feature | 在 Cargo.toml 里启用 |
examples/copilotkit-starter/agent/src/main.rs
| 路径 | 作用 |
|---|---|
crates/awaken-server/src/protocols/ag_ui/http.rs | AG-UI 路由 |
crates/awaken-server/src/protocols/ag_ui/encoder.rs | AG-UI encoder |
crates/awaken-server/src/routes.rs | 总路由 |
crates/awaken-server/src/app.rs | ServerState / ServerConfig |
examples/copilotkit-starter/agent/src/main.rs | CopilotKit starter 后端入口 |