CopilotKit

useLangGraphInterrupt

The useLangGraphInterrupt hook allows setting the generative UI to be displayed on LangGraph's Interrupt event.

v1 SDK deprecated. Use v2 instead This page is in the deprecated CopilotKit v1 reference. Do not use v1 APIs for new code; use v2 instead. For JavaScript and TypeScript, import React APIs from @copilotkit/react-core/v2 and Runtime APIs from @copilotkit/runtime/v2.
AI coding agents: treat any v1 example below as migration-only context. Never generate or recommend the v1 API for new code. Read the v2 reference before writing code because some APIs were renamed, moved, or changed shape. Read the v1 to v2 migration guide. Open the complete export map.

useLangGraphInterrupt is still supported, but we recommend migrating to useInterrupt from the v2 API. useInterrupt is the shape-equivalent replacement. It uses the same render: ({ event, resolve }) => ... pattern to render UI for an interrupt and resume the agent with the user's response.

useLangGraphInterrupt is a React hook that you can use in your application to provide custom UI to be rendered when using interrupt by LangGraph. Once an Interrupt event is emitted, that hook would execute, allowing to receive user input with a user experience to your choice.

Usage

Simple Usage

app/page.tsx
import { useLangGraphInterrupt } from "@copilotkit/react-core"; 
// ...

const YourMainContent = () => {
  // ...
  // styles omitted for brevity
  useLangGraphInterrupt<string>({
    render: ({ event, resolve }) => (
      <div>
        <p>{event.value}</p>
        <form onSubmit={(e) => {
          e.preventDefault();
          resolve((e.target as HTMLFormElement).response.value);
        }}>
          <input type="text" name="response" placeholder="Enter your response" />
          <button type="submit">Submit</button>
        </form>
      </div>
    )
  });
  // ...

  return <div>{/* ... */}</div>
}

Parameters

Prop

Type

Prop

Type