CopilotKit - v1.52.0 Release Notes

v1.52.0 drops a fresh batch of v2 hooks, brings first-class interrupt handling, adds reasoning message rendering, and squashes the Tailwind style-leak bug that's been messing with host apps. Seven packages updated, zero breaking changes. Let's get into it.

New Hooks

This release adds four new hooks to the v2 API surface in @copilotkit/react-core/v2:

useComponent

Register custom UI components that render directly inside the chat context. Clean, composable, and framework-aligned.

:::tsx
import { useComponent } from "@copilotkitnext/react";

useComponent({
  name: "WeatherCard",
  render: ({ data }) => (
    <div className="weather-card">
      <h3>{data.city}</h3>
      <p>{data.temp}°F — {data.conditions}</p>
    </div>
  ),
});

useRenderTool

Wire up a named tool call renderer with full Zod-typed args and lifecycle-aware render props (in-progress → executing → complete). You get type safety and granular control over how each tool call looks to the user.

:::tsx
import { useRenderTool } from "@copilotkitnext/react";
import { z } from "zod";

useRenderTool({
  name: "lookupOrder",
  args: z.object({ orderId: z.string() }),
  render: ({ args, status, result }) => {
    if (status === "in-progress") return <Spinner text={`Looking up #${args.orderId}...`} />;
    if (status === "executing") return <Spinner text="Fetching details..." />;
    return <OrderCard order={JSON.parse(result)} />;
  },
});

useDefaultRenderTool

The wildcard (*) catch-all. Any tool call that doesn't have its own renderer falls through to this one — great for building default loading states or generic tool UIs without registering every single tool name.

:::tsx
import { useDefaultRenderTool } from "@copilotkitnext/react";

useDefaultRenderTool({
  render: ({ name, status }) => (
    <div className="tool-call">
      <span>{status === "complete" ? "✓" : "⏳"}</span>
      <span>Running <code>{name}</code>...</span>
    </div>
  ),
});

useInterrupt

A clean way to handle interrupt events on the frontend. Supports:

• render — Show custom UI when an interrupt fires (confirmation dialogs, approval forms, you name it).
• handler — Handle interrupts programmatically, no UI needed.
• enabled — Conditionally filter which interrupts to respond to, with access to agent metadata.

• agentId scoping — Target interrupts from a specific agent only.

  :::tsx import { useInterrupt } from "@copilotkitnext/react";

  useInterrupt({ render: ({ event, resolve }) => (

  Agent wants to: {event.value.action}

  <button onClick={() => resolve({ approved: true })}>Approve</button> <button onClick={() => resolve({ approved: false })}>Deny</button>
  ), enabled: ({ agentName }) => agentName === "research-agent", });

Under the hood, the existing useLangGraphInterrupt v1 hook now delegates to useInterrupt, converting v2 InterruptEvent objects to the legacy shape so nothing breaks.

All four hooks are exported from packages/v2/react alongside the existing v2 hooks (useFrontendTool, useAgent, useAgentContext, etc.).

New Features

available Prop on useFrontendTool()

You can now pass available: "enabled" | "disabled" to dynamically show or hide a tool from the LLM without unmounting the hook. Perfect for multi-step workflows where certain actions should only surface at the right moment.

Reasoning Message Support

The chat UI now renders model reasoning/thinking steps out of the box with new default components. Ships with both React and Angular support — no extra setup required.

Bug Fixes

Tailwind Style Scoping

The big one. CopilotKit's Tailwind classes were leaking into host applications and stomping on your styles. This release introduces a cpk prefix on all internal utility classes via extendTailwindMerge({ prefix: "cpk" }). Your app's Tailwind config stays clean, CopilotKit stays in its lane.

Style Generation Pipeline

Additional fixes to the CSS generation pipeline ensure proper isolation — CopilotKit styles no longer interfere with existing application styling, period.

Under the Hood

v1 → v2 Bridge

All the v1 hooks (useFrontendTool, useRenderToolCall, useLangGraphInterrupt) are now thin compatibility wrappers around the v2 implementations. Your existing code keeps working exactly as before — the v2 engine is just running underneath. This sets up a smooth migration path when you're ready to adopt the new API directly.

Upgrading

• Zero breaking changes. All v1 APIs stay fully backward compatible.
• If CopilotKit was messing with your Tailwind styles, the new cpk prefix should fix that automatically.
• Want the new v2 hooks? Import from @copilotkit/react-core/v2 instead of @copilotkit/react-core.