@ai-chat-ui/react

React components for AI Chat UI, built with shadcn/ui and the AG-UI protocol.

Installation

npm install @ai-chat-ui/react
# or
pnpm add @ai-chat-ui/react
# or
yarn add @ai-chat-ui/react

Usage

Basic Setup

Import the styles in your app:

import "@ai-chat-ui/react/styles.css";

ResizableChatLayout

The main layout component that provides a resizable split view between your client content and a chat panel.

import {
  ResizableChatLayout,
  ChatPanel,
  AgentClient,
  useAgentChat,
} from "@ai-chat-ui/react";

function App() {
  const { messages, sendMessage, isLoading } = useAgentChat({
    agentId: "my-agent",
  });

  return (
    <ResizableChatLayout
      clientPanel={<AgentClient />}
      chatPanel={
        <ChatPanel
          messages={messages}
          onSendMessage={sendMessage}
          isLoading={isLoading}
        />
      }
      defaultClientSize={60}
      defaultChatSize={40}
    />
  );
}

Components

ResizableChatLayout

Main layout component with resizable panels.

Props:

• clientPanel: React.ReactNode - Content for the main/client panel
• chatPanel: React.ReactNode - Content for the chat panel
• defaultClientSize?: number - Default size percentage for client panel (default: 60)
• defaultChatSize?: number - Default size percentage for chat panel (default: 40)
• minClientSize?: number - Minimum size percentage for client panel (default: 30)
• minChatSize?: number - Minimum size percentage for chat panel (default: 20)
• direction?: "horizontal" | "vertical" - Layout direction (default: "horizontal")
• className?: string - Additional CSS classes

ChatPanel

Chat interface component with messages and input.

Props:

• messages: Message[] - Array of chat messages
• onSendMessage: (content: string) => void - Callback for sending messages
• isLoading?: boolean - Loading state
• className?: string - Additional CSS classes
• placeholder?: string - Input placeholder text

ChatInput

Message input component with auto-resize textarea.

Props:

• onSend: (message: string) => void - Callback for sending messages
• disabled?: boolean - Disabled state
• placeholder?: string - Placeholder text
• className?: string - Additional CSS classes

AgentClient

Placeholder component for the main client/content area.

Props:

• children?: React.ReactNode - Custom content
• className?: string - Additional CSS classes

Hooks

useAgentChat

Hook for managing chat with an AG-UI agent.

Basic Usage:

const { messages, sendMessage, isLoading, error, clearMessages, abort } =
  useAgentChat({
    agentId: "my-agent",
    onEvent: (event) => console.log(event),
    onError: (error) => console.error(error),
  });

With Agent Configuration:

const { messages, sendMessage, isLoading } = useAgentChat({
  agentId: "my-agent",
  agentUrl: "http://localhost:3000/api/agent",
  agentHeaders: {
    Authorization: "Bearer your-token",
  },
  onEvent: (event) => console.log(event),
  onError: (error) => console.error(error),
});

Options:

• agentId?: string - Agent identifier
• agentUrl?: string - URL of the AG-UI compatible agent endpoint
• agentHeaders?: Record<string, string> - Optional HTTP headers (e.g., for authentication)
• initialMessages?: Message[] - Initial messages
• onEvent?: (event: Event) => void - Event handler for AG-UI protocol events
• onError?: (error: Error) => void - Error handler

Returns:

• messages: Message[] - Current messages
• isLoading: boolean - Loading state
• error: Error | null - Current error
• sendMessage: (content: string) => Promise - Send a message
• clearMessages: () => void - Clear all messages
• abort: () => void - Abort current request

Styling

This package uses Tailwind CSS. Make sure Tailwind is configured in your project and includes the package in your content paths:

// tailwind.config.js
module.exports = {
  content: [
    "./src/**/*.{js,ts,jsx,tsx}",
    "./node_modules/@ai-chat-ui/react/dist/**/*.{js,mjs}",
  ],
  // ... rest of config
};

License

MIT