copilotkit-develop

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

Use the useFrontendTool hook from @copilotkit/react with a name, description, a Zod parameters schema, and a handler function. The agent can then invoke the tool in the browser, and you can optionally add a render component for the tool call in chat.

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

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

Use useInterrupt with a render function that displays the interrupt event and calls resolve() with the user's decision. For tool-style approval flows, useHumanInTheLoop pauses execution and provides a respond callback during the executing status.

Yes, pass a labels prop to CopilotChat with partial overrides such as chatInputPlaceholder, welcomeMessageText, and modalHeaderTitle. Layout slots like input, messageView, and welcomeScreen can also be replaced with custom components.