Help Needed: Displaying Selectable List in Agent Chat UI from Python Backend

[ImAbhishekTomar]

I am using Agent Chat UI with a Python backend. One of my nodes returns a list of items (each with id and title). I want to:
1. Show this list in the UI.
2. Let users click one item.
3. Send the selected item’s id to another state.

I tried updating the backend as per this doc:
https://langchain-ai.github.io/langgraph/cloud/how-tos/generative_ui_react/
But Im stuck on the client-side part.

Can I use a CSR or any other method to handle this? Any working example or reference would help a lot. Thanks!

[ImAbhishekTomar]

Can anyone please give me a advice on this..
@bracesproul can you please help on this... I just need an advice.

[bracesproul]

@ImAbhishekTomar you can use the useStreamContext hook from @langchain/langgraph-sdk/react-ui inside the generative UI components to make requests back to the server. See an example here (this repo contains many examples)

[ImAbhishekTomar]

@bracesproul
Thank you 🙏 so much to giving me a time.. let me check this.

[ImAbhishekTomar]

Hi @bracesproul,

I've created a simple test component following the example provided in the agent-chat-ui solution. However, I'm currently stuck on where i can register this component so that it appears in the UI when the corresponding tool is called.

Note: my backend in python and I'm trying to create that custom component in a agent-chat-ui app

import "./index.css";
import { useEffect, useState } from "react";
import { v4 as uuidv4 } from "uuid";
import { Button } from "@/components/ui/button";
import { Input } from "@/components/ui/input";
import { UIMessage, useStreamContext } from "@langchain/langgraph-sdk/react-ui";
import { Message,ToolMessage } from "@langchain/langgraph-sdk";


type StreamContextType = ReturnType<
  typeof useStreamContext<
    { messages: Message[]; ui: UIMessage[] },
    { MetaType: { ui: UIMessage | undefined } }
  >
>;

export function getToolResponse(
  toolCallId: string,
  thread: StreamContextType,
): ToolMessage | undefined {
  const toolResponse = thread.messages.findLast(
    (message): message is ToolMessage =>
      message.type === "tool" && message.tool_call_id === toolCallId,
  );
  return toolResponse;
}


export type Todo = {
    userId: string;
    id: number;
    title: string;
    completed:boolean;
};

export default function TodoComponent(props:{toolCallId: string,data:Todo[]}){
    const { data, toolCallId } = props;
    const [todos, setTodos] = useState<Todo[]>(data || []);
    const thread = useStreamContext<
        { messages: Message[]; ui: UIMessage[] },
        { MetaType: { ui: UIMessage | undefined } }
    >();

    useEffect(() => {
        if (typeof window === "undefined" || todos) return;
        const toolResponse = getToolResponse(toolCallId, thread);
        if (toolResponse) {
        try {
            JSON.parse(toolResponse.content as string) as Todo[];
            const parsedContent = JSON.parse(toolResponse.content as string);
            if (!parsedContent.todos || !Array.isArray(parsedContent.todos)) {
                console.error("Invalid todos format in tool response content.");
                return;
            }
            setTodos(parsedContent.todos);
        } catch {
            console.error("Failed to parse tool response content.");
        }
        }
    }, []);
    return (
        <>
            <div className="todo-component">
            <h2>Todo List</h2>
            <ul>
                {todos.length === 0 && (
                    <li>No todos available.</li>
                )}

                {todos.length > 0 && (
                    <li>{JSON.stringify(todos)}</li>
                )}


                {todos.map((todo:Todo, index) => (
                    <>
                        <li key={index}>{todo.id}</li>
                        <li key={index}>{todo.userId}</li>
                        <li key={index}>{todo.title}</li>
                        <li key={index}>{todo.completed ? "Completed" : "Not Completed"}</li>
                    </>
                ))}
            </ul>
            </div>
        </>
    );
}


export const ComponentMap = {
  "get_todo_by_id": TodoComponent,
  "get_list_of_todo_items": TodoComponent,
} as const;

[ImAbhishekTomar]

SuperElectron

I'm building a custom UI and have already completed all the backend work using LangGraph (via the langgraph dev API). I've chosen this UI for my project, but I'm currently facing a challenge: I need to display custom widgets during specific tool calls when get multiple docs (Ref: Document List in image its my custom component that i need to render when my document tool call).

I understand that this can be achieved by modifying the core codebase of this repository. However, I noticed that agent-chat-ui appears to support such extensibility without requiring core code modifications. I'm trying to explore and implement that approach.

If anyone has guidance, examples, or documentation on how to inject or render custom widgets in agent-chat-ui, Ideally in a modular or plugin-like way—without altering the core, it would be greatly appreciated.

Note: I want to keep all the UI things in this "agent-chat-ui" project.