LangGraph로 생성적 사용자 인터페이스 구현하기

const WeatherComponent = (props: { city: string }) => {
  return <div className="bg-red-500">Weather for {props.city}</div>;
};

export default {
  weather: WeatherComponent,
};
```

from langchain.messages import AIMessage
from langchain_core.messages import BaseMessage
from langchain_openai import ChatOpenAI
from langgraph.graph import StateGraph
from langgraph.graph.message import add_messages
from langgraph.graph.ui import AnyUIMessage, ui_message_reducer, push_ui_message


class AgentState(TypedDict):  # noqa: D101
    messages: Annotated[Sequence[BaseMessage], add_messages]
    ui: Annotated[Sequence[AnyUIMessage], ui_message_reducer]


async def weather(state: AgentState):
    class WeatherOutput(TypedDict):
        city: str

    weather: WeatherOutput = (
        await ChatOpenAI(model="gpt-5.4-mini")
        .with_structured_output(WeatherOutput)
        .with_config({"tags": ["nostream"]})
        .ainvoke(state["messages"])
    )

    message = AIMessage(
        id=str(uuid.uuid4()),
        content=f"Here's the weather for {weather['city']}",
    )

    # Emit UI elements associated with the message
    push_ui_message("weather", weather, message=message)
    return {"messages": [message]}


workflow = StateGraph(AgentState)
workflow.add_node(weather)
workflow.add_edge("__start__", "weather")
graph = workflow.compile()
```

```typescript title="src/agent/index.ts"
import {
  typedUi,
  uiMessageReducer,
} from "@langchain/langgraph-sdk/react-ui/server";

import { ChatOpenAI } from "@langchain/openai";
import { z } from "zod";

import type ComponentMap from "./ui.js";

import {
  Annotation,
  MessagesAnnotation,
  StateGraph,
  type LangGraphRunnableConfig,
} from "@langchain/langgraph";

const AgentState = Annotation.Root({
  ...MessagesAnnotation.spec,
  ui: Annotation({ reducer: uiMessageReducer, default: () => [] }),
});

export const graph = new StateGraph(AgentState)
  .addNode("weather", async (state, config) => {
    // Provide the type of the component map to ensure
    // type safety of `ui.push()` calls as well as
    // pushing the messages to the `ui` and sending a custom event as well.
    const ui = typedUi<typeof ComponentMap>(config);

    const weather = await new ChatOpenAI({ model: "gpt-5.4-mini" })
      .withStructuredOutput(z.object({ city: z.string() }))
      .withConfig({ tags: ["nostream"] })
      .invoke(state.messages);

    const response = {
      id: crypto.randomUUID(),
      type: "ai",
      content: `Here's the weather for ${weather.city}`,
    };

    // Emit UI elements associated with the AI message
    ui.push({ name: "weather", props: weather }, { message: response });

    return { messages: [response] };
  })
  .addEdge("__start__", "weather")
  .compile();
```

from langchain_anthropic import ChatAnthropic
from langchain.messages import AIMessage, AIMessageChunk, BaseMessage
from langgraph.graph import StateGraph
from langgraph.graph.message import add_messages
from langgraph.graph.ui import AnyUIMessage, push_ui_message, ui_message_reducer


class AgentState(TypedDict):  # noqa: D101
    messages: Annotated[Sequence[BaseMessage], add_messages]
    ui: Annotated[Sequence[AnyUIMessage], ui_message_reducer]


class CreateTextDocument(TypedDict):
    """Prepare a document heading for the user."""

    title: str


async def writer_node(state: AgentState):
    model = ChatAnthropic(model="claude-sonnet-4-6")
    message: AIMessage = await model.bind_tools(
        tools=[CreateTextDocument],
        tool_choice={"type": "tool", "name": "CreateTextDocument"},
    ).ainvoke(state["messages"])

    tool_call = next(
        (x["args"] for x in message.tool_calls if x["name"] == "CreateTextDocument"),
        None,
    )

    if tool_call:
        ui_message = push_ui_message("writer", tool_call, message=message)
        ui_message_id = ui_message["id"]

        # We're already streaming the LLM response to the client through UI messages
        # so we don't need to stream it again to the `messages` stream mode.
        content_stream = model.with_config({"tags": ["nostream"]}).astream(
            f"Create a document with the title: {tool_call['title']}"
        )

        content: AIMessageChunk | None = None
        async for chunk in content_stream:
            content = content + chunk if content else chunk

            push_ui_message(
                "writer",
                {"content": content.text()},
                id=ui_message_id,
                message=message,
                # Use `merge=True` to merge props with the existing UI message
                merge=True,
            )

    return {"messages": [message]}
```

import type ComponentMap from "./ui";

const AgentState = Annotation.Root({
  ...MessagesAnnotation.spec,
  ui: Annotation({ reducer: uiMessageReducer, default: () => [] }),
});

async function writerNode(
  state: typeof AgentState.State,
  config: LangGraphRunnableConfig
): Promise<typeof AgentState.Update> {
  const ui = typedUi<typeof ComponentMap>(config);

  const model = new ChatAnthropic({ model: "claude-sonnet-4-6" });
  const message = await model
    .bindTools(
      [
        {
          name: "create_text_document",
          description: "Prepare a document heading for the user.",
          schema: z.object({ title: z.string() }),
        },
      ],
      { tool_choice: { type: "tool", name: "create_text_document" } }
    )
    .invoke(state.messages);

  type ToolCall = { name: "create_text_document"; args: { title: string } };
  const toolCall = message.tool_calls?.find(
    (tool): tool is ToolCall => tool.name === "create_text_document"
  );

  if (toolCall) {
    const { id, name } = ui.push(
      { name: "writer", props: { title: toolCall.args.title } },
      { message }
    );

    const contentStream = await model
      // We're already streaming the LLM response to the client through UI messages
      // so we don't need to stream it again to the `messages` stream mode.
      .withConfig({ tags: ["nostream"] })
      .stream(`Create a short poem with the topic: ${message.text}`);

    let content: AIMessageChunk | undefined;
    for await (const chunk of contentStream) {
      content = content?.concat(chunk) ?? chunk;

      ui.push(
        { id, name, props: { content: content?.text } },
        // Use `merge: true` to merge props with the existing UI message
        { message, merge: true }
      );
    }
  }

  return { messages: [message] };
}
```

export default {
  weather: WriterComponent,
};
```

# push message
message = push_ui_message("weather", {"city": "London"})

# remove said message
delete_ui_message(message["id"])
```

// remove said message
ui.delete(message.id);
```