The paper details a methodology for streaming AI agent responses to generative user interfaces, primarily leveraging the LangGraph framework.

The backend infrastructure utilizes a LangGraph dev server, typically deployed on localhost:2024, to host AI agents. Agents, often constructed using LangChain, are exported from specific subdirectories and configured via a langraph configuration file, which the npm create langraph command automatically generates. This server facilitates branching and advanced agent patterns. An exemplary "tool calling agent" is described, comprising an LLM (e.g., GPT-4 mini), a get_weather tool integrated with the Open-Meteo API, and a web_search tool provided by the OpenAI provider package.

On the frontend, specifically within a React application, the @langraph/sdk-react library's useStream hook is the central primitive for managing real-time agent interactions. This hook is initialized by referencing the desired agent's name as defined in the LangGraph configuration (e.g., "tool calling agent"). The useStream hook provides two key functionalities:

1. Access to a messages array, which contains a chronological stream of all messages sent from the agent server to the client.
2. A submit function, which allows the client to send new messages (e.g., user input) back to the agent. Specifically, in a handleSubmit event, a human message can be transmitted using stream.submit(newMessage).

The rendering logic on the frontend iterates over the stream.messages array, dynamically displaying content based on message types. Each message object within the LangGraph SDK has a distinct type property (e.g., HumanMessage, AIMessage, SystemMessage), enabling differentiated UI rendering (e.g., distinct bubble styles or colors).

A core aspect of the methodology is the detailed handling of tool calls. When an LLM within the agent environment determines a tool execution is necessary, the tool call information is embedded within an AIMessage. The frontend extracts this information by checking if an AIMessage contains tool calls and utilizes a getToolCalls method provided by the stream object to retrieve a list of ToolCall objects. For each detected ToolCall, a specific UI component (e.g., a ToolCallCard) is rendered. For instance, the get_weather tool triggers a WeatherToolCard that displays not only the tool's input (e.g., location) but also structured outputs such as temperature, wind, and humidity. Following the rendering of any tool call cards, the associated assistant message (the LLM's natural language response) is displayed.

This approach enables seamless streaming of agent thought processes, including tool invocations and their results, directly to the UI, supporting the development of rich, interactive generative applications. Future developments include expanding useStream support to other frontend frameworks and exploring advanced streaming patterns like human-in-the-loop workflows, resuming agent streams, displaying reasoning information, and sending custom events to the UI.