How to implement Generative User Interfaces with LangGraph

How to implement Generative User Interfaces with LangGraph

https://langchain-ai.github.io/langgraph/cloud/how-tos/generative_ui_react/

 

Generative user interfaces (Generative UI) allows agents to go beyond text and generate rich user interfaces. This enables creating more interactive and context-aware applications where the UI adapts based on the conversation flow and AI responses.

LangGraph Platform supports colocating your React components with your graph code. This allows you to focus on building specific UI components for your graph while easily plugging into existing chat interfaces such as Agent Chat and loading the code only when actually needed.

 

assistant-ui-langgraph-fastapi

https://github.com/fanqingsong/assistant-ui-langgraph-fastapi

A demonstration project that combines LangGraph, assistant-stream, and FastAPI to create an AI agent with a modern UI. The project uses assistant-ui and Next.js.

Overview

This project showcases:

• A LangGraph agent running on a FastAPI
• Real-time response streaming to the frontend using assistant-stream
• A modern chat UI built with assistant-ui and Next.js
• Demonstrate how to integrate external tools and APIs

 

AI Agent Service Toolkit

https://github.com/fanqingsong/agent-service-toolkit

Full toolkit for running an AI agent service built with LangGraph, FastAPI and Streamlit

A full toolkit for running an AI agent service built with LangGraph, FastAPI and Streamlit.

It includes a LangGraph agent, a FastAPI service to serve it, a client to interact with the service, and a Streamlit app that uses the client to provide a chat interface. Data structures and settings are built with Pydantic.

This project offers a template for you to easily build and run your own agents using the LangGraph framework. It demonstrates a complete setup from agent definition to user interface, making it easier to get started with LangGraph-based projects by providing a full, robust toolkit.

🎥 Watch a video walkthrough of the repo and app

Overview

Try the app!

 

 

How to integrate LangGraph into your React application¶

https://langchain-ai.github.io/langgraph/cloud/how-tos/use_stream_react/

!!! info "Prerequisites" - LangGraph Platform - LangGraph Server

The useStream() React hook provides a seamless way to integrate LangGraph into your React applications. It handles all the complexities of streaming, state management, and branching logic, letting you focus on building great chat experiences.

Key features:

• Messages streaming: Handle a stream of message chunks to form a complete message
• Automatic state management for messages, interrupts, loading states, and errors
• Conversation branching: Create alternate conversation paths from any point in the chat history
• UI-agnostic design: bring your own components and styling

Let's explore how to use useStream() in your React application.

The useStream() provides a solid foundation for creating bespoke chat experiences. For pre-built chat components and interfaces, we also recommend checking out CopilotKit and assistant-ui.

Installation¶

 

npm install @langchain/langgraph-sdk @langchain/core

Example¶

 

"use client";

import { useStream } from "@langchain/langgraph-sdk/react";
import type { Message } from "@langchain/langgraph-sdk";

export default function App() {
  const thread = useStream<{ messages: Message[] }>({
    apiUrl: "http://localhost:2024",
    assistantId: "agent",
    messagesKey: "messages",
  });

  return (
    <div>
      <div>
        {thread.messages.map((message) => (
          <div key={message.id}>{message.content as string}</div>
        ))}
      </div>

      <form
        onSubmit={(e) => {
          e.preventDefault();

          const form = e.target as HTMLFormElement;
          const message = new FormData(form).get("message") as string;

          form.reset();
          thread.submit({ messages: [{ type: "human", content: message }] });
        }}
      >
        <input type="text" name="message" />

        {thread.isLoading ? (
          <button key="stop" type="button" onClick={() => thread.stop()}>
            Stop
          </button>
        ) : (
          <button keytype="submit">Send</button>
        )}
      </form>
    </div>
  );
}

Customizing Your UI¶

The useStream() hook takes care of all the complex state management behind the scenes, providing you with simple interfaces to build your UI. Here's what you get out of the box:

• Thread state management
• Loading and error states
• Interrupts
• Message handling and updates
• Branching support

Here are some examples on how to use these features effectively:

Loading States¶

The isLoading property tells you when a stream is active, enabling you to:

• Show a loading indicator
• Disable input fields during processing
• Display a cancel button

 

export default function App() {
  const { isLoading, stop } = useStream<{ messages: Message[] }>({
    apiUrl: "http://localhost:2024",
    assistantId: "agent",
    messagesKey: "messages",
  });

  return (
    <form>
      {isLoading && (
        <button key="stop" type="button" onClick={() => stop()}>
          Stop
        </button>
      )}
    </form>
  );
}

Thread Management¶

Keep track of conversations with built-in thread management. You can access the current thread ID and get notified when new threads are created:

 

const [threadId, setThreadId] = useState<string | null>(null);

const thread = useStream<{ messages: Message[] }>({
  apiUrl: "http://localhost:2024",
  assistantId: "agent",

  threadId: threadId,
  onThreadId: setThreadId,
});

We recommend storing the threadId in your URL's query parameters to let users resume conversations after page refreshes.

Messages Handling¶

The useStream() hook will keep track of the message chunks received from the server and concatenate them together to form a complete message. The completed message chunks can be retrieved via the messages property.

By default, the messagesKey is set to messages, where it will append the new messages chunks to values["messages"]. If you store messages in a different key, you can change the value of messagesKey.

 

import type { Message } from "@langchain/langgraph-sdk";
import { useStream } from "@langchain/langgraph-sdk/react";

export default function HomePage() {
  const thread = useStream<{ messages: Message[] }>({
    apiUrl: "http://localhost:2024",
    assistantId: "agent",
    messagesKey: "messages",
  });

  return (
    <div>
      {thread.messages.map((message) => (
        <div key={message.id}>{message.content as string}</div>
      ))}
    </div>
  );
}

Under the hood, the useStream() hook will use the streamMode: "messages-key" to receive a stream of messages (i.e. individual LLM tokens) from any LangChain chat model invocations inside your graph nodes. Learn more about messages streaming in the How to stream messages from your graph guide.

Interrupts¶

The useStream() hook exposes the interrupt property, which will be filled with the last interrupt from the thread. You can use interrupts to:

• Render a confirmation UI before executing a node
• Wait for human input, allowing agent to ask the user with clarifying questions

Learn more about interrupts in the How to handle interrupts guide.

 

const thread = useStream<{ messages: Message[] }, { InterruptType: string }>({
  apiUrl: "http://localhost:2024",
  assistantId: "agent",
  messagesKey: "messages",
});

if (thread.interrupt) {
  return (
    <div>
      Interrupted! {thread.interrupt.value}
      <button
        type="button"
        onClick={() => {
          // `resume` can be any value that the agent accepts
          thread.submit(undefined, { command: { resume: true } });
        }}
      >
        Resume
      </button>
    </div>
  );
}

Branching¶

For each message, you can use getMessagesMetadata() to get the first checkpoint from which the message has been first seen. You can then create a new run from the checkpoint preceding the first seen checkpoint to create a new branch in a thread.

A branch can be created in following ways:

1. Edit a previous user message.
2. Request a regeneration of a previous assistant message.

 

"use client";

import type { Message } from "@langchain/langgraph-sdk";
import { useStream } from "@langchain/langgraph-sdk/react";
import { useState } from "react";

function BranchSwitcher({
  branch,
  branchOptions,
  onSelect,
}: {
  branch: string | undefined;
  branchOptions: string[] | undefined;
  onSelect: (branch: string) => void;
}) {
  if (!branchOptions || !branch) return null;
  const index = branchOptions.indexOf(branch);

  return (
    <div className="flex items-center gap-2">
      <button
        type="button"
        onClick={() => {
          const prevBranch = branchOptions[index - 1];
          if (!prevBranch) return;
          onSelect(prevBranch);
        }}
      >
        Prev
      </button>
      <span>
        {index + 1} / {branchOptions.length}
      </span>
      <button
        type="button"
        onClick={() => {
          const nextBranch = branchOptions[index + 1];
          if (!nextBranch) return;
          onSelect(nextBranch);
        }}
      >
        Next
      </button>
    </div>
  );
}

function EditMessage({
  message,
  onEdit,
}: {
  message: Message;
  onEdit: (message: Message) => void;
}) {
  const [editing, setEditing] = useState(false);

  if (!editing) {
    return (
      <button type="button" onClick={() => setEditing(true)}>
        Edit
      </button>
    );
  }

  return (
    <form
      onSubmit={(e) => {
        e.preventDefault();
        const form = e.target as HTMLFormElement;
        const content = new FormData(form).get("content") as string;

        form.reset();
onEdit({type:"human",content});
setEditing(false);
}}
>
<inputname="content"defaultValue={message.contentasstring}/>
<buttontype="submit">Save</button>
</form>
);
}

exportdefaultfunctionApp(){
constthread=useStream({
apiUrl:"http://localhost:2024",
assistantId:"agent",
messagesKey:"messages",
});

return(
<div>
<div>
{thread.messages.map((message)=>{
constmeta=thread.getMessagesMetadata(message);
constparentCheckpoint=meta?.firstSeenState?.parent_checkpoint;

return(
<divkey={message.id}>
<div>{message.contentasstring}</div>

{message.type==="human"&&(
<EditMessage
message={message}
onEdit={(message)=>
thread.submit(
{messages:[message]},
{checkpoint:parentCheckpoint}
)
}
/>
)}

{message.type==="ai"&&(
<button
type="button"
onClick={()=>
thread.submit(undefined,{checkpoint:parentCheckpoint})
}
>
<span>Regenerate</span>
</button>
)}

<BranchSwitcher
branch={meta?.branch}
branchOptions={meta?.branchOptions}
onSelect={(branch)=>thread.setBranch(branch)}
/>
</div>
);
})}
</div>

<form
onSubmit={(e)=>{
e.preventDefault();

constform=e.targetasHTMLFormElement;
constmessage=newFormData(form).get("message")asstring;

form.reset();
thread.submit({messages:[message]});
}}
>
<inputtype="text"name="message"/>

{thread.isLoading?(
<buttonkey="stop"type="button"onClick={()=>thread.stop()}>
Stop
</button>
):(
<buttonkey="submit"type="submit">
Send
</button>
)}
</form>
</div>
);
}

For advanced use cases you can use the experimental_branchTree property to get the tree representation of the thread, which can be used to render branching controls for non-message based graphs.

Optimistic Updates¶

You can optimistically update the client state before performing a network request to the agent, allowing you to provide immediate feedback to the user, such as showing the user message immediately before the agent has seen the request.

 

const stream = useStream({
  apiUrl: "http://localhost:2024",
  assistantId: "agent",
  messagesKey: "messages",
});

const handleSubmit = (text: string) => {
  const newMessage = { type: "human" as const, content: text };

  stream.submit(
    { messages: [newMessage] },
    {
      optimisticValues(prev) {
        const prevMessages = prev.messages ?? [];
        const newMessages = [...prevMessages, newMessage];
        return { ...prev, messages: newMessages };
      },
    }
  );
};

TypeScript¶

The useStream() hook is friendly for apps written in TypeScript and you can specify types for the state to get better type safety and IDE support.

 

// Define your types
type State = {
  messages: Message[];
  context?: Record<string, unknown>;
};

// Use them with the hook
const thread = useStream<State>({
  apiUrl: "http://localhost:2024",
  assistantId: "agent",
  messagesKey: "messages",
});

You can also optionally specify types for different scenarios, such as:

• ConfigurableType: Type for the config.configurable property (default: Record<string, unknown>)
• InterruptType: Type for the interrupt value - i.e. contents of interrupt(...) function (default: unknown)
• CustomEventType: Type for the custom events (default: unknown)
• UpdateType: Type for the submit function (default: Partial<State>)

 

const thread = useStream<
  State,
  {
    UpdateType: {
      messages: Message[] | Message;
      context?: Record<string, unknown>;
    };
    InterruptType: string;
    CustomEventType: {
      type: "progress" | "debug";
      payload: unknown;
    };
    ConfigurableType: {
      model: string;
    };
  }
>({
  apiUrl: "http://localhost:2024",
  assistantId: "agent",
  messagesKey: "messages",
});

If you're using LangGraph.js, you can also reuse your graph's annotation types. However, make sure to only import the types of the annotation schema in order to avoid importing the entire LangGraph.js runtime (i.e. via import type { ... } directive).

 

import {
  Annotation,
  MessagesAnnotation,
  type StateType,
  type UpdateType,
} from "@langchain/langgraph/web";

const AgentState = Annotation.Root({
  ...MessagesAnnotation.spec,
  context: Annotation<string>(),
});

const thread = useStream<
  StateType<typeof AgentState.spec>,
  { UpdateType: UpdateType<typeof AgentState.spec> }
>({
  apiUrl: "http://localhost:2024",
  assistantId: "agent",
  messagesKey: "messages",
});

Event Handling¶

The useStream() hook provides several callback options to help you respond to different events:

• onError: Called when an error occurs.
• onFinish: Called when the stream is finished.
• onUpdateEvent: Called when an update event is received.
• onCustomEvent: Called when a custom event is received. See Custom events to learn how to stream custom events.
• onMetadataEvent: Called when a metadata event is received, which contains the Run ID and Thread ID.

 

LangGraph.js

https://github.com/langchain-ai/langgraphjs

LangGraph — used by Replit, Uber, LinkedIn, GitLab and more — is a low-level orchestration framework for building controllable agents. While langchain provides integrations and composable components to streamline LLM application development, the LangGraph library enables agent orchestration — offering customizable architectures, long-term memory, and human-in-the-loop to reliably handle complex tasks.

npm install @langchain/langgraph @langchain/core

 

To learn more about how to use LangGraph, check out the docs. We show a simple example below of how to create a ReAct agent.

// npm install @langchain-anthropic
import { createReactAgent } from "@langchain/langgraph/prebuilt";
import { ChatAnthropic } from "@langchain/anthropic";
import { tool } from "@langchain/core/tools";

import { z } from "zod";

const search = tool(async ({ query }) => {
  if (query.toLowerCase().includes("sf") || query.toLowerCase().includes("san francisco")) {
    return "It's 60 degrees and foggy."
  }
  return "It's 90 degrees and sunny."
}, {
  name: "search",
  description: "Call to surf the web.",
  schema: z.object({
    query: z.string().describe("The query to use in your search."),
  }),
});

const model =  new ChatAnthropic({
  model: "claude-3-7-sonnet-latest"
});

const agent = createReactAgent({
  llm: model,
  tools: [search],
});

const result = await agent.invoke(
  {
    messages: [{
      role: "user",
      content: "what is the weather in sf"
    }]
  }
)

 

AI SDK Python Streaming Preview

https://github.com/fanqingsong/ai-sdk-preview-python-streaming

This template demonstrates the usage of Data Stream Protocol to stream chat completions from a Python endpoint (FastAPI) and display them using the useChat hook in your Next.js application.