copilotkit-develop

Wrap your app in CopilotKitProvider with a runtimeUrl, then render CopilotChat, CopilotPopup, or CopilotSidebar with an agentId. The provider connects to your runtime endpoint and the chat component handles message submission and agent communication.

Use the useFrontendTool hook with a name, description, Zod parameters schema, and a handler function. The agent can then invoke the tool in the browser, and the hook re-registers when the name, availability, or dependencies change.

Create a route at app/api/copilotkit/[[...path]]/route.ts that instantiates CopilotRuntime with your agents, calls createCopilotEndpoint with basePath /api/copilotkit, and exports GET and POST handlers from app.fetch.

Yes, createCopilotEndpointExpress returns an Express router with all CopilotKit routes mounted under your basePath. Mount it with app.use() after creating a CopilotRuntime with your agents.

Use useInterrupt with a render function that receives the interrupt event and a resolve callback. Render your confirmation UI and call resolve with the user's decision to resume agent execution.

useFrontendTool executes a handler immediately when the agent calls it, while useHumanInTheLoop pauses agent execution and renders a UI with a respond callback until the user replies. Use the latter for approval workflows.