Deep Agents UI

React components for building chat interfaces powered by LangGraph. These components are extracted from the Deep Agents UI application and can be embedded into other React applications.

Installation

npm install deep-agents-ui
# or
yarn add deep-agents-ui

Requirements

• React 18+ or 19+
• Tailwind CSS 3.4+
• LangGraph SDK (optional, for full functionality)

Quick Start

import { ChatInterface, ClientProvider, ChatProvider } from "deep-agents-ui";
import "deep-agents-ui/styles";

function App() {
  return (
    <ClientProvider
      deploymentUrl="https://your-langgraph-deployment.com"
      apiKey="your-api-key"
    >
      <ChatProvider activeAssistant={assistant}>
        <ChatInterface
          assistant={assistant}
          controls={<div>Custom controls</div>}
          skeleton={<div>Loading...</div>}
        />
      </ChatProvider>
    </ClientProvider>
  );
}

Styling

Option 1: Import CSS

import "deep-agents-ui/styles";

Option 2: Use Tailwind Preset

// tailwind.config.js
module.exports = {
  presets: [require("deep-agents-ui/tailwind-preset")],
  content: [
    "./src/**/*.{js,ts,jsx,tsx}",
    "./node_modules/deep-agents-ui/**/*.{js,ts,jsx,tsx}",
  ],
};

Components

ChatInterface

The main chat component that handles message display, input, and tool calls.

<ChatInterface
  assistant={assistant}
  debugMode={false}
  view="chat" // or "workflow"
  onViewChange={(view) => console.log(view)}
  controls={<CustomControls />}
  banner={<CustomBanner />}
  skeleton={<LoadingSkeleton />}
/>

ThreadList

Displays a list of conversation threads.

<ThreadList
  onThreadSelect={(threadId) => console.log(threadId)}
  onClose={() => console.log("closed")}
/>

ConfigDialog

Configuration dialog for setting up LangGraph deployments.

<ConfigDialog
  open={isOpen}
  onOpenChange={setIsOpen}
  onSave={(config) => console.log(config)}
/>

Providers

ClientProvider

Provides LangGraph SDK client context.

<ClientProvider
  deploymentUrl={url}
  apiKey={key}
>
  {/* Your components */}
</ClientProvider>

ChatProvider

Provides chat state management.

<ChatProvider
  activeAssistant={assistant}
  onHistoryRevalidate={callback}
>
  {/* Your components */}
</ChatProvider>

Hooks

useChat

Custom hook for chat functionality.

const chat = useChat({ activeAssistant, onHistoryRevalidate });

useThreads

Custom hook for thread management.

const threads = useThreads();

Types

All TypeScript types are exported:

import type {
  TodoItem,
  ToolCall,
  Thread,
  Assistant,
  Message,
} from "deep-agents-ui";

Advanced Usage

Custom Controls

<ChatInterface
  assistant={assistant}
  controls={
    <div className="flex gap-2">
      <Button onClick={handleClear}>Clear</Button>
      <Button onClick={handleExport}>Export</Button>
    </div>
  }
/>

Custom Styling

Override Tailwind classes or use CSS custom properties:

:root {
  --color-primary: #your-color;
  --color-background: #your-bg;
}

Development

# Install dependencies
yarn install

# Build component library
yarn build:all

# Run original app
yarn dev

License

MIT