useLangGraphInterrupt
The useLangGraphInterrupt hook allows setting the generative UI to be displayed on LangGraph's Interrupt event.
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";
// ...
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
The action to perform when an Interrupt event is emitted. Either handler or render must be defined as arguments
The name of the action.
A handler to programmatically resolve the Interrupt, or perform operations which result will be passed to the render method
Render lets you define a custom component or string to render when an Interrupt event is emitted.
Method that returns a boolean, indicating if the interrupt action should run. Useful when using multiple interrupts
An optional array of dependencies.
