useLangGraphInterrupt

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

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