Components
Web Components available in the Metreek Frontend SDK.
The SDK provides three main Web Components that can be used in any HTML page or framework. All components use Shadow DOM for style isolation.
<metreek-chat>
AI-powered conversational chat interface with real-time streaming responses.
Usage
HTML
<metreek-chat customer-uid="your-customer-id" position="bottom-right" theme="auto" analysis-mode="fast" placeholder="Ask me anything..." title="AI Assistant"> </metreek-chat>
Attributes
| Attribute | Type | Required | Description |
|---|---|---|---|
customer-uid | string | Yes | Customer identifier |
position | string | No | 'bottom-right' | 'bottom-left' | 'top-right' | 'top-left' |
theme | string | No | 'light' | 'dark' | 'auto' |
analysis-mode | string | No | 'fast' | 'deep' |
chat-id | string | No | Existing chat ID to resume |
agent-id | string | No | Specific agent to use |
placeholder | string | No | Input placeholder text |
title | string | No | Chat window title |
Methods
JavaScript
const chat = document.querySelector('metreek-chat')
// Open chat window
chat.open()
// Close chat window
chat.close()
// Send a message programmatically
await chat.sendMessage('What are my top products?')
// Clear chat history
chat.clearChat()<metreek-widget>
Interactive data visualization component powered by Apache ECharts.
Usage
HTML
<metreek-widget id="sales-chart" query-id="c93ba0a0-3a50-4d12-8b22-54c2a82c7b6f" block-id="5332c68e-cecd-4442-8ea3-da872f8af6b5" customer-uid="your-customer-id" auto-refresh="60000" show-title="true" show-controls="true"> </metreek-widget>
Attributes
| Attribute | Type | Required | Description |
|---|---|---|---|
query-id | string | Yes | Query identifier |
block-id | string | Yes | Block identifier |
customer-uid | string | Yes | Customer identifier |
auto-refresh | number | No | Auto-refresh interval in ms (0 = disabled) |
theme | string | No | 'light' | 'dark' | 'auto' |
show-title | boolean | No | Show/hide title (default: true) |
show-controls | boolean | No | Show/hide controls (default: true) |
raw | boolean | No | Raw mode without wrapper (default: false) |
Methods
JavaScript
const widget = document.querySelector('#sales-chart')
// Refresh widget data
await widget.refresh()
// Export chart as image
const blob = await widget.exportImage()
// Export raw data
const data = widget.exportData()<metreek-status>
System health monitoring component showing API key validation and plugin status.
Usage
HTML
<metreek-status auto-refresh="30000"></metreek-status>
Attributes
| Attribute | Type | Description |
|---|---|---|
auto-refresh | number | Interval in ms between status checks |
Styling
Components use Shadow DOM for style isolation. You can customize appearance using CSS custom properties:
styles.css
/* Customize widget dimensions */
metreek-widget {
--metreek-widget-min-height: 400px;
--metreek-widget-border-radius: 12px;
}
/* Customize chat appearance */
metreek-chat {
--metreek-chat-primary-color: #3b82f6;
--metreek-chat-border-radius: 16px;
} Shadow DOM ensures component styles don't leak into your application and vice versa. Use CSS custom properties (variables) to customize appearance.