useLangGraphInterrupt

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

import { useLangGraphInterrupt } from "@copilotkit/react-core"; // [!code highlight]
// ...

const YourMainContent = () => {
  // ...
  // [!code highlight:15]
  // 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