The StreamlitCallbackHandler output of langchain React Agent is missing the “Thought ” part.

[SenvenJ]

Checked other resources

• I added a very descriptive title to this question.
• I searched the LangChain documentation with the integrated search.
• I used the GitHub search to find a similar question and didn't find it.

Commit to Help

• I commit to help with one of those options 👆

Example Code

import requests
from typing import Any, List, Mapping, Optional, Dict

from langchain.callbacks.manager import CallbackManagerForLLMRun
from langchain.llms.base import LLM

from langchain.tools import BaseTool
from langchain.agents import initialize_agent
from langchain_community.llms.utils import enforce_stop_tokens
import json
import streamlit as st
from langchain_community.callbacks.streamlit import (
    StreamlitCallbackHandler,
)


# self-define tools
class WeatherTool(BaseTool):
    name = "Weather"
    description = "Use to search weather condition."

    def _run(self, query: str) -> str:
        return "raining"

class CustomCalculatorTool(BaseTool):
    name = "Calculator"
    description = "Use for calculation."

    def _run(self, query: str) -> str:
        return "3"

weather = WeatherTool()
calculator = CustomCalculatorTool()
tools = [weather, calculator]

# Initial agent
query = "How about today's weather?"
llm = QwenLLM()
agent = initialize_agent(tools, llm, agent="zero-shot-react-description", verbose=True)
# print(agent)
# print(agent.run(query))

if prompt := st.chat_input("Input"):
    with st.chat_message("user", avatar='🧑‍💻'):
        st.markdown(prompt)
    # print(f"[user] {prompt}", flush=True)
    with st.spinner("Processing..."):
        with st.chat_message("assistant", avatar='🤖'):
            try:
                st_callback = StreamlitCallbackHandler(st.container())
                res = agent.run(prompt, callbacks=[st_callback])
                st.write(res)
            except Exception as e:
                st.write("exception：{}".format(str(e)))
    st.button("Clear")

Description

I am using the React agent framework of langchain and displaying the execution process on the web interface using the StreamlitCallbackHandler. However, I cannot see the relevant information of Agent Thought on the web interface, as shown in the red box in the figure. But I can see it when printing locally. Could you please advise on how to display all the reasoning information of the Agent on the web interface? I have referred to the approach in https://blog.langchain.dev/langchain-streamlit/, but the problem still persists.

System Info

langchain==0.1.20
langchain-community==0.0.38
langchain-core ==0.1.52
langchain-experimental==0.0.49
langchain-text-splitters==0.0.2
langchainhub ==0.1.21

[dosubot[bot]]

Hello, @SenvenJ! I'm here to help you with any bugs, questions, or contributions you have. I'm looking forward to assisting you with your GitHub issue.

To display all the reasoning information of the Agent, including the "Thought" part, on the web interface using StreamlitCallbackHandler in the LangChain React Agent framework, you can follow the example provided in the documentation. Here is the relevant code snippet:

import streamlit as st
from langchain import hub
from langchain.agents import AgentExecutor, create_react_agent, load_tools
from langchain_openai import OpenAI
from langchain_community.callbacks.streamlit import StreamlitCallbackHandler

llm = OpenAI(temperature=0, streaming=True)
tools = load_tools(["ddg-search"])
prompt = hub.pull("hwchase17/react")
agent = create_react_agent(llm, tools, prompt)
agent_executor = AgentExecutor(agent=agent, tools=tools, verbose=True)

if prompt := st.chat_input():
    st.chat_message("user").write(prompt)
    with st.chat_message("assistant"):
        st_callback = StreamlitCallbackHandler(
            st.container(),
            max_thought_containers=4,
            expand_new_thoughts=True,
            collapse_completed_thoughts=True
        )
        response = agent_executor.invoke(
            {"input": prompt}, {"callbacks": [st_callback]}
        )
        st.write(response["output"])

This code sets up a Streamlit app that uses StreamlitCallbackHandler to display the thoughts and actions of the agent live in the app. The StreamlitCallbackHandler is passed to the agent_executor.invoke method to capture and display the reasoning information, including the "Thought" part. The handler's parameters such as max_thought_containers, expand_new_thoughts, and collapse_completed_thoughts can be adjusted to control how the thoughts are displayed.

The StreamlitCallbackHandler is designed to display the Agent's LLM and tool-usage "thoughts" inside a series of Streamlit expanders. It includes parameters to control the number of thought containers, whether new thoughts are expanded by default, and whether completed thoughts are collapsed. This ensures a flexible and dynamic display of the agent's reasoning process ^[1][2][3].

To continue talking to Dosu, mention @dosu.