Request for converting LangGraph output to Chainlit UI tool - Help Needed

[mraguth]

My objective here is to convert the LangGraph output (enclosed in my LangGraph react code below) into a Chainlit message and display it in the Chainlit UI. I have found multiple samples that mainly focus on llm_chain.acall (code enclosed below). My request convert my LangGraph output message and simulate a similar template code provided with LangChain. Please help. At the end I like to see my LangGraph ouput in chainlit (what I currently seeing via llm_chain).

My LangGraph code is below:

from langgraph.prebuilt import create_react_agent

# First we initialize the model we want to use.
from langgraph.prebuilt import create_react_agent

# from langchain.agents import AgentExecutor, create_react_agent
from langgraph.prebuilt.chat_agent_executor import AgentState
from langgraph.errors import GraphRecursionError
from typing import Literal
from langchain_core.tools import tool
from langgraph.checkpoint.memory import MemorySaver  # an in-memory checkpointer

################################################## Variable assignment Start #########################################
RECURSION_LIMIT = 2 * 15 + 1
model = llm
query = output_query_str
prompts = [prompt_repl_lg]
######################################################################################################################

tools = [
    repl,
    retriever_tool_n,
    add,
    subtract,
    multiply,
    divide,
]


def _modify_state_messages(state: AgentState):
    modified_messages = state["messages"]
    for prompt in prompts:
        modified_messages = prompt.invoke({"messages": modified_messages}).to_messages()
    modified_messages.append(("user", "Also say 'Pandamonium!' after the answer."))
    return modified_messages


langgraph_agent_executor = create_react_agent(
    model, tools, state_modifier=_modify_state_messages
)

try:
    # Invoke the method with configuration
    result = langgraph_agent_executor.invoke(
        {
            "messages": [("human", query)],
            "recursion_limit": RECURSION_LIMIT,
            # Uncomment and add additional configuration if needed
            # **config
        }
    )
    print(result["messages"][-1])  # Print the last message in the result
except GraphRecursionError:
    print({"input": query, "output": "Agent stopped due to max iterations."})

The sample code I got for Chainlit to conver llm_chain to Chainlit application is below:

from langchain.memory.buffer import ConversationBufferMemory
conversation_memory = ConversationBufferMemory(memory_key="chat_history",
                                               max_len=50,
                                               return_messages=True,
                                                   )
from langchain.prompts import PromptTemplate

ice_cream_assistant_template = """
You are an ice cream assistant chatbot named "Scoopsie". Your expertise is 
exclusively in providing information and advice about anything related to 
ice creams. This includes flavor combinations, ice cream recipes, and general
ice cream-related queries. You do not provide information outside of this 
scope. If a question is not about ice cream, respond with, "I specialize 
only in ice cream related queries."
Chat History: {chat_history}
Question: {question}
Answer:"""

ice_cream_assistant_prompt_template = PromptTemplate(
    input_variables=["chat_history", "question"],
    template=ice_cream_assistant_template
)

@cl.on_chat_start
def quey_llm():
    llm = OpenAI(model='gpt-3.5-turbo-instruct',
                 temperature=0)
    
    conversation_memory = ConversationBufferMemory(memory_key="chat_history",
                                                   max_len=50,
                                                   return_messages=True,
                                                   )
    llm_chain = LLMChain(llm=llm, 
                         prompt=ice_cream_assistant_prompt_template,
                         memory=conversation_memory)
    
    cl.user_session.set("llm_chain", llm_chain)

@cl.on_message
async def query_llm(message: cl.Message):
    llm_chain = cl.user_session.get("llm_chain")
    
    response = await llm_chain.acall(message.content, 
                                     callbacks=[
                                         cl.AsyncLangchainCallbackHandler()])
    
    await cl.Message(response["text"]).send()

chainlit run chatbot.py -w --port 8000

[dosubot[bot]]

To convert the LangGraph output to be displayed in the Chainlit UI, you need to adapt the LangGraph output to the format expected by Chainlit. Here's a step-by-step guide to achieve this:

1. Extract the LangGraph Output:
   The LangGraph agent executor returns a list of messages. You need to extract the relevant message content from this output.

2. Integrate with Chainlit:
   Use Chainlit's message handling to display the extracted message. You can use the cl.Message class to send messages to the Chainlit UI.

Here's how you can modify your existing code to achieve this:

from langgraph.prebuilt import create_react_agent
from langgraph.errors import GraphRecursionError
from langchain_core.tools import tool
from langgraph.checkpoint.memory import MemorySaver
import chainlit as cl

# Initialize your model and other variables
RECURSION_LIMIT = 2 * 15 + 1
model = llm
query = output_query_str
prompts = [prompt_repl_lg]

tools = [
    repl,
    retriever_tool_n,
    add,
    subtract,
    multiply,
    divide,
]

def _modify_state_messages(state: AgentState):
    modified_messages = state["messages"]
    for prompt in prompts:
        modified_messages = prompt.invoke({"messages": modified_messages}).to_messages()
    modified_messages.append(("user", "Also say 'Pandamonium!' after the answer."))
    return modified_messages

langgraph_agent_executor = create_react_agent(
    model, tools, state_modifier=_modify_state_messages
)

@cl.on_chat_start
def setup_langgraph():
    cl.user_session.set("langgraph_agent_executor", langgraph_agent_executor)

@cl.on_message
async def handle_message(message: cl.Message):
    langgraph_agent_executor = cl.user_session.get("langgraph_agent_executor")
    
    try:
        # Invoke the LangGraph agent executor
        result = langgraph_agent_executor.invoke(
            {
                "messages": [("human", message.content)],
                "recursion_limit": RECURSION_LIMIT,
            }
        )
        # Extract the last message content
        response_content = result["messages"][-1].content
    except GraphRecursionError:
        response_content = "Agent stopped due to max iterations."
    
    # Send the response to Chainlit UI
    await cl.Message(response_content).send()

# Run Chainlit
# chainlit run your_script.py -w --port 8000

Key Points:

• State Management: Ensure that the langgraph_agent_executor is stored in the user session for access during message handling.
• Error Handling: Handle potential errors like GraphRecursionError to provide a fallback message.
• Message Sending: Use cl.Message to send the extracted message content to the Chainlit UI.

This setup will allow you to convert the LangGraph output into a format that can be displayed in the Chainlit UI, similar to how you handle messages with llm_chain.

To continue talking to Dosu, mention @dosu.