@nexus-ai/agent-chat-ui

Reusable chat interface component for Ara Browser with LangGraph integration.

Installation

npm install @nexus-ai/agent-chat-ui

Features

• 🚀 LangGraph WebSocket integration
• 🎨 Customizable widget system
• 📝 Markdown support
• 🔌 Type-safe API
• 🎯 Flexible widget registration
• 🎭 Default widgets included

Quick Start

import { ChatInterface } from '@nexus-ai/agent-chat-ui'
import '@nexus-ai/agent-chat-ui/styles'

function App() {
  return (
    <ChatInterface
      serverUrl="http://localhost:1100"
      onMessage={(msg) => console.log(msg)}
    />
  )
}

Widget System

Register Custom Widgets

import { registerWidget } from '@nexus-ai/agent-chat-ui'

registerWidget('my_tool', (toolOutput) => {
  return <MyCustomWidget data={toolOutput} />
})

Pass Widgets via Props

<ChatInterface
  serverUrl="http://localhost:1100"
  widgets={{
    'my_tool': (output) => <MyWidget data={output} />
  }}
/>

Default Widgets

The package includes default widgets for common tools:

• bash_command - Terminal output display
• write_file - File creation notification
• Generic success messages

Documentation

See docs/chat-package for detailed documentation:

• Implementation Plan
• Technical Specification
• Widget System
• Quick Start Guide

Advanced Usage

Using the Hook Directly

import { useChat, MessageList, MessageInput } from '@nexus-ai/agent-chat-ui'

function CustomChat() {
  const { events, sendMessage, isProcessing } = useChat({
    serverUrl: 'http://localhost:1100'
  })

  return (
    <div>
      <MessageList events={events} />
      <MessageInput onSubmit={sendMessage} loading={isProcessing} />
    </div>
  )
}

Examples

See the examples/ directory for more usage examples:

• basic.tsx - Basic usage
• with-custom-widgets.tsx - Custom widgets example
• with-hook.tsx - Using the hook directly

Development

# Install dependencies
npm install

# Build
npm run build

# Development mode (watch)
npm run dev

API Reference

Components

• ChatInterface - Main chat component
• MessageList - Message list display
• MessageInput - Input component
• EventCard - Event card component

Hooks

• useChat - Main chat hook
• useAutoScroll - Auto-scroll hook

Library

• LangGraphClient - WebSocket client
• StreamingMessageParser - Message parser
• widgetRegistry - Widget registry
• registerWidget - Register custom widget

License

MIT