Integrating Agent Clarification Node in Langgraph with UI

[nathan-vo810]

I'm creating a chatbot for customer support with Langgraph. If the context is unclear, there will be a "clarification" node where the agent will ask further questions and wait for user's input.

For example:

User: I would like to book a hotel.

Agent: (ask for clarification - this is a node)

Here is my list of hotel suggestion. Which one do you want to book?

1. Hotel A
2. Hotel B
3. Hotel C

(Show this message in UI + Wait for user answer)

User: 1
Agent: You've successfully booked Hotel A

In command line, this can be achieved by using input(question). However, I'm struggling to integrate this with my frontend (ReactJS). I can't forward the additional question to the user in the middle of the process.

Any suggestion for how to solve this problem?

Thank you in advance.

[hwchase17]

Great question. I actually just a how-to guide that I think will help answer your question: https://langchain-ai.github.io/langgraph/how-tos/human_in_the_loop/wait-user-input/

Does this help? Happy to clarify/add anything if not. we want this to be easy!