Components Overview
OpenAssistant provides React components for building interactive data visualization and chat interfaces.
Available Components
Chat Components (@openassistant/assistant)
Full-featured chat interface components for building AI-powered chat applications.
Features:
- Message display with markdown support
- Code syntax highlighting
- Image and file attachments
- Voice input support
- Settings panel
- Conversation management
Visualization Components
ECharts (@openassistant/echarts)
React components for ECharts visualizations.
Components:
- HistogramChart
- ScatterPlot
- BoxPlot
- BubbleChart
- ParallelCoordinatePlot
- MoranScatterPlot
Kepler.gl (@openassistant/keplergl)
React wrapper for Kepler.gl map visualizations.
Leaflet (@openassistant/leaflet)
Leaflet map components for React.
Vega-Lite (@openassistant/vegalite)
Vega-Lite chart components.
Tables (@openassistant/tables)
Data table components with sorting and filtering.
Utility Components
Common (@openassistant/common)
Shared UI utilities and components.
Components:
- ExpandableContainer
- ResizablePlotContainer
- EChartsSkeleton
Hooks (@openassistant/hooks)
Reusable React hooks.
Hooks:
- useBrushLink
- useDraggable
- useResizeObserver
- useShiftDrag
Installation
bash
# Chat components
npm install @openassistant/chat
# Visualization components
npm install @openassistant/echarts
npm install @openassistant/keplergl
npm install @openassistant/leaflet
npm install @openassistant/vegalite
npm install @openassistant/tables
# Utilities
npm install @openassistant/common
npm install @openassistant/hooksBasic Usage
Chat Component
tsx
import { ChatContainer, PromptInput } from '@openassistant/chat';
export default function MyChat() {
return (
<div>
<ChatContainer messages={messages} />
<PromptInput onSubmit={handleSubmit} />
</div>
);
}ECharts Component
tsx
import { ScatterPlot } from '@openassistant/echarts';
export default function MyChart() {
return (
<ScatterPlot
data={data}
xField="income"
yField="housing_price"
colorField="region"
/>
);
}