docs/content/docs/reference/v1/hooks/useLangGraphInterrupt.mdx
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.
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>
}
<PropertyReference name="name" type="string" required>
The name of the action.
</PropertyReference>
<PropertyReference name="handler" type="(args: LangGraphInterruptRenderProps<T>) => any | Promise<any>">
A handler to programmatically resolve the Interrupt, or perform operations which result will be passed to the `render` method
</PropertyReference>
<PropertyReference name="render" type="(props: LangGraphInterruptRenderProps<T>) => string | React.ReactElement">
Render lets you define a custom component or string to render when an Interrupt event is emitted.
</PropertyReference>
<PropertyReference name="enabled" type="(args: { eventValue: TEventValue; agentMetadata: AgentSession }) => boolean">
Method that returns a boolean, indicating if the interrupt action should run. Useful when using multiple interrupts
</PropertyReference>
<PropertyReference name="agentId" type="string">
Optional agent ID to scope this interrupt to a specific agent. Defaults to the agent configured in the CopilotKit chat configuration.
</PropertyReference>