langgraphjs-gen-ui-examples

langgraphjs-gen-ui-examples

https://github.com/langchain-ai/langgraphjs-gen-ui-examples

LangGraph Generative UI Examples

This repository contains a series of agents intended to be used with the Agent Chat UI (repo).

 

https://deepwiki.com/langchain-ai/langgraphjs-gen-ui-examples

 

 

Agents

Key

• Supervisor
  • Stockbroker
  • Trip Planner
  • Open Code
  • Order Pizza
• Chat Agent
• Email Agent

Supervisor

This is the default agent, which has access to a series of subgraphs it can call, depending on the context of the conversation. This includes the following agents:

• Stockbroker
• Trip Planner
• Open Code
• Order Pizza

This agent works by taking in the input, and passing it, along with the rest of the chat history to a router node. This node passes the entire chat history to Gemini 2.0 Flash, and forces it to call a tool, with the route to take based on the conversation.

If the context does not have a clear subgraph which should be called, it routes to the General Input node, which contains a single LLM call used to respond to the user's input.

Stockbroker

The stockbroker agent has a series of tools available to it which will render generative UI components in the Agent Chat UI. It should be accessed via the agent graph ID, which means you'll need to go through the Supervisor agent to access it. The following are the prompts you can use to test the stockbroker agent:

• What's the current price of <insert company/stock ticker here> - Will trigger a generative UI stockbroker agent which renders the current price of the stock.
• I want to buy <insert quantity here> shares of <insert company/stock ticker here>. - Will trigger a generative UI stockbroker agent which renders a UI to buy a stock at its current price.
• Show me my portfolio - Will trigger a generative UI stockbroker agent which renders a UI to show the user's portfolio.

Trip Planner

The trip planner agent has tools available to it which can render generative UI components for planning/booking trips. It should be accessed via the agent graph ID, which means you'll need to go through the Supervisor agent to access it. The following prompts will trigger the trip planner agent:

• Show me places to stay in <insert location here> - Will trigger a generative UI travel agent which renders a UI to select accommodations.
• Recommend some restaurants for me in <insert location here> - Will trigger a generative UI travel agent which renders a UI to select restaurants.

The agent will first extract the following information from your input, if present:

• location - Required field. This can be the city, state, or some other location for the trip.
• startDate - Optional field. The start date of the trip. Defaults to 4 weeks from now.
• endDate - Optional field. The end date of the trip. Defaults to 5 weeks from now.
• numberOfGuests - Optional field. The number of guests attending the trip. Defaults to 2.

The only field, location, is required, and the rest are optional.

Open Code

This is a dummy code writing agent, used to demonstrate how you can implement generative UI components in agents. It should be accessed via the agent graph ID, which means you'll need to go through the Supervisor agent to access it. It is triggered by requesting the agent to write a React TODO app, like this:

• Write a React TODO app for me

This will then render a plan (these steps are static, and will always be the same). After that, it'll "generate" code (each plan item has a corresponding "generated code output") for each item in the plan. It only does this one at a time, and will not suggest the next part of generated code until after the previous suggestion has been accepted, rejected, or accepted for all future requests in this session. If you select that button, it will resume the graph, and continue through the rest of the steps, and suggest code without pausing to wait for your approval.

Order Pizza

The order pizza agent is used to demonstrate how tool calls/results are rendered in the UI. It should be accessed via the agent graph ID, which means you'll need to go through the Supervisor agent to access it. You can trigger it via the following query:

• Order me a pizza <include optional topping instructions> in <include location here>

It will then call two tools, once to extract the fields from your input for the pizza order (order details, and location). After that, it calls the tool to "order" the pizza. Each of these tool calls will have corresponding tool call/result UI components rendered in the Agent Chat UI. These are the default UI components rendered when your graph calls a tool/returns a tool result.

Chat Agent

The chat agent is a single LLM call, used to demonstrate the plain back and forth of a chat agent. It should be accessed via the chat graph ID. It does not have access to any tools, or generative UI components.

Email Agent

The email agent is a dummy implementation of how you'd implement an email assistant with the Agent Chat UI. It is accessed via the email_agent graph ID. You can trigger it via the following query:

• Write me an email to <insert email here> about <insert email description here>

This will then call the graph which extracts fields from your input (or responds with a request for more information). Once it's extracted all of the required information it will interrupt, passing the standardized HumanInterrupt schema. The Agent Chat UI is able to detect when interrupts with this schema are thrown, and when it finds one it renders a UI component to handle actions by the user which are used to resume the graph.

The allowed actions are:

• Accept - If you accept the email as is, without making changes to any fields, it will "send" the email (emails aren't actually sent, just a message is displayed indicating the email was sent).
• Edit - If you edit any of the email fields and submit, it will "send" the email with the new values.
• Respond - If you send a text response back, it will be used to rewrite the email in some way, then interrupt again and wait for you to take an action.
• Ignore - This will send back an ignore response, and the graph will end without taking any actions.
• Mark as resolved - If you select this, it will resume the graph, but starting at the __end__ node, causing the graph to end without taking any actions.

Writer Agent

This is a dummy agent used to demonstrate how you can stream generative UI components as an artifact. It should be accessed via the writer graph ID. It should be accessed via the agent graph ID, which means you'll need to go through the Supervisor agent to access it. The following prompts will trigger the writer agent:

• Write me a short story about a <insert topic here>

This will render a generative UI component that contains the title and content of your short story. The generative UI component will be rendered in a side panel to the right of the chat and the contents of the story will be streamed to the UI as it is generated.