Best way to handle interrupts with v1.50 and LangGraph

[crimson pawn]

I'm in the process of converting my front end copilotkit react application and my backend python langgraph agent to use v1.50. I'm using the v2 useAgent on the front end, but I've noticed that there is no v2 useLangGraphInterrupt and so far I'm not able to get the v1 useLangGraphInterrupt to work, I get an error that says it requires a Toast context. I'm wondering if I should be converting to useHumanInTheLoop instead? If so, do I need to convert my backend to call a remote tool (on the frontend) to handle the interrupt? instead of using langgraph's interrupt?

[mellow falcon]

From what I could find, in v1.50 you could replace useLangGraphInterrupt with useHumanInTheLoop. The approach is to model interrupts as a remote tool – the backend calls it, and the frontend resolves it via useHumanInTheLoop instead of using LangGraph's native interrupt().
On the frontend, use useAgent and useHumanInTheLoop to register actions that show UI and capture user decisions. On the backend, define a tool that routes to the frontend for user input, then continues execution based on the response.
If this doesn't help, let me connect you with someone from the team who can give you a clearer answer.

[crimson pawn]

That confirms what I was thinking. Thank you @obtuse wolf I appreciate your quick response.

[crimson pawn]

Well, I've worked on this most of the day, had some limited success. I suspect I could get the useHumanInTheLoop hook to work with some more effort. However, when I look at the copilotkit documentation it says, "The usage of node based interrupt is now discouraged by both LangGraph and CopilotKit. As of LangGraph 0.2.57, the recommended way to set breakpoints is using the interrupt function as it simplifies human-in-the-loop patterns." When I go to the "interrupt function" link: https://docs.copilotkit.ai/coagents/human-in-the-loop/interrupt-flow, it then talks about using useLangGraphInterrupt() hook. I was able to get my code to work with useLangGraphInterrupt() before I upgraded to v2. But with v2, as I mentioned above, I get an error that says it requires a Toast context. At the end of the day, I'm happy to go either way, but what I really want to know is what do the fine folks at Copilotkit recommend going forward in a v2+ world. 🙃 . My goal here is to establish a pattern for my company for how to use this framework. --Thanks

[mellow falcon]

Thank you @crimson pawn for the detailed context! I've shared your question with the team, and they'll get back to you as soon as they can. Really appreciate your patience!

[limpid rampart]

That toast would notify you (in dev mode) if there are duplications of interrupt actions and whatnot. It should be provided along with the copilotkit provider, which to me flags that the wrong provider may be used, or otherwise several versions of React are rendering.

Can you pleae post which copilotkit provider are you using, and where are you importing it from? @crimson pawn

[crimson pawn]

Hello Ran, I'm using import { CopilotKitProvider } from "@copilotkit/react-core/v2"; which comes from 1.50.1

[crimson pawn]

I've dug some more into this, trying to get the useLangGraphInterrupt working with v2 (1.50.1) CopilotKitProvider. I've opened a bug that describes the problem I'm having. https://github.com/CopilotKit/CopilotKit/issues/2945#top. The copilotkit support bot is saying that useLangGraphInterrupt is not supported with v2. Is this correct? I've escalated the issue to development.

[limpid rampart]

Can you try:
import { CopilotKit } from "@copilotkit/react-core";
Instead of the "CopilotKitProvider"
?

[crimson pawn]

I believe we tried that, but then had trouble using the useAgent hook instead of the useCoAgent hook. We like the new capabilities that are available with v2, but we found early on that trying to mix the two cause a lot of problems.