@nrohan09/agent-ui

Reusable React UI for LangGraph-backed agents. This package is designed for:

• host-owned deployment_url and assistant_id
• host-owned LangGraph runtime context such as database_id
• streaming chat and thread history
• a drop-in widget plus composable primitives
• future structured UI blocks such as charts, tables, and metrics

Install

npm install @nrohan09/agent-ui @langchain/langgraph-sdk

Quickstart

"use client";

import {
  AgentProvider,
  AgentWidget,
} from "@nrohan09/agent-ui";
import "@nrohan09/agent-ui/styles.css";

export function AnalystAgent() {
  return (
    <AgentProvider
      deployment_url={process.env.NEXT_PUBLIC_LANGGRAPH_URL!}
      assistant_id="my_agent"
      run_context={{
        database_id: process.env.NEXT_PUBLIC_LANGGRAPH_DATABASE_ID,
      }}
      resolve_headers={async () => ({
        "X-Api-Key": await fetch("/api/agent-token").then((res) => res.text()),
      })}
    >
      <AgentWidget />
    </AgentProvider>
  );
}

Use run_context for runtime values that the agent should receive on each run. Avoid putting these values under run_config.configurable; newer LangGraph APIs use context for long-lived runtime state.

Composable usage

import {
  AgentProvider,
  AgentThreadList,
  AgentChatPanel,
  AgentFilesPanel,
} from "@nrohan09/agent-ui";
import "@nrohan09/agent-ui/styles.css";

export function CustomAgentLayout() {
  return (
    <AgentProvider
      deployment_url="http://127.0.0.1:2024"
      assistant_id="my_agent"
    >
      <div style={{ display: "grid", gridTemplateColumns: "280px 1fr 320px", gap: 16 }}>
        <AgentThreadList />
        <AgentChatPanel />
        <AgentFilesPanel />
      </div>
    </AgentProvider>
  );
}

Future visual blocks

The package already exposes a renderer registry so the backend can later emit structured UI blocks such as charts or tables:

<AgentProvider
  deployment_url="http://127.0.0.1:2024"
  assistant_id="my_agent"
  renderers={{
    chart: ({ block }) => <MyChart data={block.data as any[]} />,
  }}
>
  <AgentWidget />
</AgentProvider>

Local example consumer

There is a small Vite consumer app in examples/agent-ui-vite that shows how a host app should own connection state and embed the widget.