LangGraph Studio IDE: Web Voyager issue

[sergiossm]

Checked other resources

• I added a very descriptive title to this issue.
• I searched the LangGraph/LangChain documentation with the integrated search.
• I used the GitHub search to find a similar question and didn't find it.
• I am sure that this is a bug in LangGraph/LangChain rather than my code.
• I am sure this is better as an issue rather than a GitHub discussion, since this is a LangGraph bug and not a design question.

Example Code

from langchain import hub
from langchain_core.output_parsers import StrOutputParser
from langchain_core.runnables import RunnablePassthrough
from langchain_openai import ChatOpenAI
from utils import mark_page
import re
from langchain_core.messages import SystemMessage
from state import AgentState
from langchain_core.runnables import RunnableLambda
from langgraph.graph import END, START, StateGraph
from tools import click, type_text, scroll, wait, go_back, to_google

async def annotate(state):
    marked_page = await mark_page.with_retry().ainvoke(state["page"])
    return {**state, **marked_page}


def format_descriptions(state):
    labels = []
    for i, bbox in enumerate(state["bboxes"]):
        text = bbox.get("ariaLabel") or ""
        if not text.strip():
            text = bbox["text"]
        el_type = bbox.get("type")
        labels.append(f'{i} (<{el_type}/>): "{text}"')
    bbox_descriptions = "\nValid Bounding Boxes:\n" + "\n".join(labels)
    return {**state, "bbox_descriptions": bbox_descriptions}


def parse(text: str) -> dict:
    action_prefix = "Action: "
    if not text.strip().split("\n")[-1].startswith(action_prefix):
        return {"action": "retry", "args": f"Could not parse LLM Output: {text}"}
    action_block = text.strip().split("\n")[-1]

    action_str = action_block[len(action_prefix) :]
    split_output = action_str.split(" ", 1)
    if len(split_output) == 1:
        action, action_input = split_output[0], None
    else:
        action, action_input = split_output
    action = action.strip()
    if action_input is not None:
        action_input = [
            inp.strip().strip("[]") for inp in action_input.strip().split(";")
        ]
    return {"action": action, "args": action_input}


# Will need a later version of langchain to pull
# this image prompt template
prompt = hub.pull("wfh/web-voyager")

llm = ChatOpenAI(model="gpt-4o", max_tokens=4096)
agent = annotate | RunnablePassthrough.assign(
    prediction=format_descriptions | prompt | llm | StrOutputParser() | parse
)

def update_scratchpad(state: AgentState):
    """After a tool is invoked, we want to update
    the scratchpad so the agent is aware of its previous steps"""
    old = state.get("scratchpad")
    if old:
        txt = old[0].content
        last_line = txt.rsplit("\n", 1)[-1]
        step = int(re.match(r"\d+", last_line).group()) + 1
    else:
        txt = "Previous action observations:\n"
        step = 1
    txt += f"\n{step}. {state['observation']}"

    return {**state, "scratchpad": [SystemMessage(content=txt)]}

graph_builder = StateGraph(AgentState)


graph_builder.add_node("agent", agent)
graph_builder.add_edge(START, "agent")

graph_builder.add_node("update_scratchpad", update_scratchpad)
graph_builder.add_edge("update_scratchpad", "agent")

tools = {
    "Click": click,
    "Type": type_text,
    "Scroll": scroll,
    "Wait": wait,
    "GoBack": go_back,
    "Google": to_google,
}


for node_name, tool in tools.items():
    graph_builder.add_node(
        node_name,
        # The lambda ensures the function's string output is mapped to the "observation"
        # key in the AgentState
        RunnableLambda(tool) | (lambda observation: {"observation": observation}),
    )
    # Always return to the agent (by means of the update-scratchpad node)
    graph_builder.add_edge(node_name, "update_scratchpad")


def select_tool(state: AgentState):
    # Any time the agent completes, this function
    # is called to route the output to a tool or
    # to the end user.
    action = state["prediction"]["action"]
    if action == "ANSWER":
        return END
    if action == "retry":
        return "agent"
    return action


graph_builder.add_conditional_edges("agent", select_tool)

graph = graph_builder.compile()

Error Message and Stack Trace (if applicable)

Unexpected Application Error!
h.id.split is not a function
TypeError: h.id.split is not a function
    at a5 (app://./assets/GraphThreadPage-bfi-2ssS.js:74:141765)
    at oJ (app://./assets/GraphThreadPage-bfi-2ssS.js:74:143433)
    at Iu (app://./assets/index-Bm4AZwAA.js:34:63888)
    at Ms (app://./assets/index-Bm4AZwAA.js:34:75556)
    at Dh (app://./assets/index-Bm4AZwAA.js:34:117134)
    at _h (app://./assets/index-Bm4AZwAA.js:34:112129)
    at Xg (app://./assets/index-Bm4AZwAA.js:34:112057)
    at Bi (app://./assets/index-Bm4AZwAA.js:34:111911)
    at Vs (app://./assets/index-Bm4AZwAA.js:34:108287)
    at _d (app://./assets/index-Bm4AZwAA.js:34:109092)

Description

I'm trying to build the Web Voyager notebook in LangGraph Studio but the IDE is unable to build the graph.

System Info

langgraph==0.2.44
langgraph-checkpoint==2.0.2
langgraph-sdk==0.1.35

Platform: macOS 14.6.1

{
  "dockerfile_lines": [],
  "graphs": {
    "simple_graph": "./simple.py:graph",
    "router": "./router.py:graph",
    "agent": "./agent.py:graph",
    "web_voyager": "./web_voyager.py:graph"
  },
  "env": "./.env",
  "python_version": "3.11",
  "dependencies": [
    "."
  ]
}

Python version: 3.11 as defined in langgraph.json file, but the Conda environment I'm using for VSCode is running Python 3.9.4. Could this be related to the issue somehow?