How does Server-Sent Events stream a LangGraph run to a browser?

Category: Backend & API

Answer

Each LangGraph stream(...) iteration yields either a (node_name, state) tuple (state transition) or a dict (token chunk). Your async generator maps tuples to {"type": "status", "step": node_name} and state["final_response"] or human/escalation branches to {"type": "response"}, then yields them as `data: JSON-payload

`. The browser keeps a single EventSource and gets live status + final answer.

Concrete examples from the fca project context

Example 1

/chat/stream endpoint: agent = AgentCoordinator.stream_message(); generator yields SSE-wrapped events.

Example 2

ContextVar bridges log calls inside the agent notebook to the same SSE stream — logger.info("step X") appears live.

Example 3

ESC_PLACEHOLDER: {type: "escalation", payload: ...} so the UI can render a “human needed” card.

Data flow / flow chart

agent.stream -> queue -> SSE -> browser EventSource
(node tuples / chunks -> status or response events)

Takeaway

SSE is the lightweight, browser-native way to stream an agent — no WebSockets needed.