@nrohan09/assistant-agent-ui

assistant-ui powered React SDK for LangGraph-backed agents.

This package is a sibling to @nrohan09/agent-ui. It keeps the same host-owned configuration model, but uses assistant-ui's runtime foundation so generated UI such as charts, tables, approvals, and custom data blocks can be added without replacing the SDK.

Install

npm install @nrohan09/assistant-agent-ui react react-dom

Usage

"use client";

import {
  AssistantAgentProvider,
  AssistantAgentThread,
  AssistantAgentWidget,
} from "@nrohan09/assistant-agent-ui";
import "@nrohan09/assistant-agent-ui/styles.css";

export function AppAssistant() {
  return (
    <AssistantAgentProvider
      deployment_url={process.env.NEXT_PUBLIC_LANGGRAPH_URL!}
      assistant_id="my_agent"
      run_context={{
        database_id: process.env.NEXT_PUBLIC_LANGGRAPH_DATABASE_ID,
      }}
      auto_page_context
    >
      <AssistantAgentWidget />
    </AssistantAgentProvider>
  );
}

AssistantAgentWidget is the lightweight package-owned widget. AssistantAgentThread uses assistant-ui primitives for a visual style closer to assistant-ui examples:

<AssistantAgentProvider deployment_url={deploymentUrl} assistant_id="my_agent">
  <AssistantAgentThread />
</AssistantAgentProvider>

Page Context

Stable runtime values go in run_context. Current page state goes in page_context, which the package sends to LangGraph as runtime context.page_context.

<AssistantAgentProvider
  deployment_url={deploymentUrl}
  assistant_id="my_agent"
  run_context={{ database_id: "rms_dev" }}
  resolve_page_context={() => ({
    page_type: "orders",
    selected_order_id: selectedOrderId,
    filters,
  })}
>
  <AssistantAgentWidget />
</AssistantAgentProvider>

Pages and mounted child components can register namespaced context:

import { useAssistantAgentPageContext } from "@nrohan09/assistant-agent-ui";

function OrdersTable() {
  useAssistantAgentPageContext("table_orders", () => ({
    selected_billing_type: selectedBillingType,
    visible_order_ids: visibleOrders.map((order) => order.id),
  }));

  return null;
}

Renderers

The package includes a built-in chart renderer for assistant-ui/LangGraph data UI messages. The backend should emit this canonical payload:

type ChartPayload = {
  kind: "bar" | "line" | "area" | "pie";
  title: string;
  summary?: string;
  x_key?: string;
  y_key?: string;
  series?: string[];
  label_key?: string;
  value_key?: string;
  rows: Record<string, string | number | null>[];
};

Host apps can override built-ins or add new renderers by name:

<AssistantAgentProvider
  deployment_url={deploymentUrl}
  assistant_id="my_agent"
  renderers={{
    chart: CustomChartRenderer,
    table: TableRenderer,
  }}
>
  <AssistantAgentWidget />
</AssistantAgentProvider>

Runtime Contract

The package sends LangGraph runtime values in context, not config.configurable.

{
  context: {
    database_id: "rms_dev",
    page_context: {
      browser: {
        path: "/orders"
      },
      table_orders: {
        visible_order_ids: ["order_1"]
      }
    }
  }
}

resolve_headers runs close to request time so host apps can provide fresh auth tokens.