Integrations

CopilotKit v2

Connect CopilotKit v2 with the AG-UI adapter after the agent is ready.

Use the AG-UI adapter

CopilotKit v2 exposes an AG-UI agent through useAgent. Bind only after isReady, use a stable scope, and dispose the subscription from the effect cleanup.

tsx

const bindingScopeId = useId();
const { agent, isReady } = useAgent({ agentId });

useEffect(() => {
  if (!isReady) return;
  const binding = bindAgent({
    agent,
    runtime,
    scopeId: `copilotkit:${bindingScopeId}`,
  });
  return () => binding.dispose();
}, [agent, isReady, runtime, bindingScopeId]);

How this code works

01
Create a mount identity
useId supplies a stable namespace that survives normal rerenders.
02
Wait for readiness
Your effect subscribes only after CopilotKit exposes a ready AG-UI agent.
03
Reuse the protocol adapter
CopilotKit v2 exposes a public AG-UI agent, so the AG-UI adapter can connect it directly.
04
Return cleanup
React effect cleanup disposes exactly the subscription created by this mount.

Why there is no CopilotKit package

A second adapter would duplicate the same work. If an app has client tools that AG-UI cannot identify, connect those tools directly instead of guessing from their names.