uiux-agent-kit

AI UI Component Kit for Better Agents - Reusable React components for AI applications.

Installation

pnpm add uiux-agent-kit

Components

Agent Components

• AgentStatus - Visual status indicator for AI agents

Chat Components

• ChatMessageInput - Complete message input with audio recording, file upload, and transcription
• ChatMessage - Message display component with file attachments and audio support
• StreamingMessage - Real-time streaming message display
• FileUpload - Drag & drop file upload component
• FilePreview - File preview with thumbnails and icons
• AudioWaveform - Real-time audio waveform visualization

Common Components

• Spinner - Loading indicator with multiple sizes
• EmptyState - Empty state display component
• AudioRecorder - Standalone audio recording component
• MarkdownRenderer - Markdown content renderer with GitHub Flavored Markdown support

Usage

import { ChatMessageInput, Spinner, AgentStatus } from 'uiux-agent-kit';

function MyComponent() {
	const [input, setInput] = useState('');

	return (
		<>
			<AgentStatus status='active' showLabel showIcon />
			<ChatMessageInput value={input} onChange={setInput} onSend={message => console.log(message)} />
			<Spinner size='md' />
		</>
	);
}

Requirements

• React 18.2.0 or higher
• Tailwind CSS (for styling)

License

ISC