mui-agent-chat-ui

A reusable Material-UI (MUI) based Agent Chat UI component for React + Vite projects. This package provides a plug-and-play chat interface that integrates with LangGraph agents.

Features

• 🎨 Built with Material-UI (MUI) v7
• ⚡ Ready for React 18+ and Vite
• 🔌 Plug-and-play component
• 💬 Real-time streaming chat interface
• 🔄 Auto-scroll to latest message
• ♻️ Regenerate response support
• 📱 Responsive design

Installation

yarn add mui-agent-chat-ui

Or with npm:

npm install mui-agent-chat-ui

Peer Dependencies

Make sure you have the following installed in your project:

yarn add @mui/material @mui/icons-material @emotion/react @emotion/styled @langchain/langgraph-sdk uuid

Quick Start

Basic Usage

import React from 'react';
import { AgentChatUI } from 'mui-agent-chat-ui';

function App() {
  return (
    <div style={{ padding: '20px' }}>
      <AgentChatUI
        apiUrl="http://localhost:2024"
        assistantId="agent"
      />
    </div>
  );
}

export default App;

With Authentication

import React from 'react';
import { AgentChatUI } from 'mui-agent-chat-ui';

function App() {
  return (
    <AgentChatUI
      apiUrl="https://your-deployment.com"
      apiKey="your-api-key"
      assistantId="your-assistant-id"
      authScheme="langsmith-api-key"
    />
  );
}

With Thread Management

import React, { useState } from 'react';
import { AgentChatUI } from 'mui-agent-chat-ui';

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

  return (
    <>
      <button onClick={() => setThreadId(null)}>New Chat</button>
      <AgentChatUI
        apiUrl="http://localhost:2024"
        assistantId="agent"
        threadId={threadId}
        onThreadIdChange={(id) => setThreadId(id)}
      />
    </>
  );
}

Custom Styling

import React from 'react';
import { AgentChatUI } from 'mui-agent-chat-ui';

function App() {
  return (
    <AgentChatUI
      apiUrl="http://localhost:2024"
      assistantId="agent"
      className="my-custom-chat"
      sx={{
        height: '500px',
        maxWidth: '600px',
        border: '1px solid #ddd',
        borderRadius: '8px',
      }}
    />
  );
}

Props

AgentChatUI

| Prop | Type | Default | Description | |------|------|---------|-------------| | apiUrl | string | 'http://localhost:2024' | URL of your LangGraph deployment | | apiKey | string? | undefined | API key for authentication (e.g., LangSmith API key) | | assistantId | string | 'agent' | ID or name of the graph/assistant to use | | authScheme | string? | undefined | Authentication scheme (e.g., 'langsmith-api-key') | | threadId | string \| null | undefined | Current thread ID for conversation history | | onThreadIdChange | (id: string \| null) => void | undefined | Callback when thread ID changes | | className | string | undefined | CSS class name for the container | | sx | SxProps<Theme> | undefined | MUI sx prop for custom styling |

Advanced Usage

Using Individual Components

You can also use the individual components separately:

import {
  StreamProvider,
  useStreamContext,
  HumanMessage,
  AIMessage,
  ChatInput,
} from 'mui-agent-chat-ui';

function CustomChat() {
  const stream = useStreamContext();
  
  return (
    <div>
      {stream.messages.map((msg) =>
        msg.type === 'human' ? (
          <HumanMessage key={msg.id} message={msg} />
        ) : (
          <AIMessage key={msg.id} message={msg} />
        )
      )}
      <ChatInput onSend={(text) => stream.submit({ messages: [{ type: 'human', content: text }] })} />
    </div>
  );
}

function App() {
  return (
    <StreamProvider
      apiUrl="http://localhost:2024"
      assistantId="agent"
    >
      <CustomChat />
    </StreamProvider>
  );
}

Requirements

• React 18.2.0 or higher
• Material-UI 7.3.5 or higher
• LangGraph SDK 1.8.0 or higher
• Vite 4.3.9 or higher (for development/build)

Development

# Install dependencies
yarn install

# Build the package
yarn build

# Watch mode for development
yarn dev

License

MIT

Contributing

Contributions are welcome! Please feel free to submit a Pull Request.