v1.0.1
Frontend SDK
Embed AI-powered data analysis and interactive visualizations into any web application.
The Metreek Frontend SDK is a Web Components-based library for integrating AI-powered analytics into your applications. It's framework-agnostic and works with React, Vue, Angular, Next.js, or vanilla HTML.
Features
Framework-agnostic Web Components
Real-time SSE streaming
Apache ECharts visualizations
Smart request caching
Shadow DOM isolation
TypeScript support
Auto-refresh widgets
Debug mode
Installation
Include the SDK via CDN or install from npm:
CDN
<script src="https://cdn.jsdelivr.net/npm/@metreek/frontend-sdk@latest/dist/metreek-sdk.min.js"></script>
NPM
npm install @metreek/frontend-sdk
Basic Usage
JavaScript
// Initialize the SDK
MetreekSDK.init({
apiKey: 'wk_YOUR_API_KEY',
baseUrl: 'https://api.metreek.com',
customerUid: 'your-customer-id'
})
// Use the chat
MetreekSDK.chat.open()
MetreekSDK.chat.sendMessage('Show me sales data')
// Refresh widgets
MetreekSDK.widget.refreshAll()
// Listen to events
MetreekSDK.on('message:received', (e) => {
console.log('Response:', e.detail)
})Components
<metreek-chat>
View docsAI-powered conversational chat interface with streaming responses.
<metreek-widget>
View docsInteractive data visualization component powered by ECharts.
<metreek-status>
View docsSystem health monitoring and API key validation indicator.
Architecture
The SDK follows a layered architecture:
| Layer | Components |
|---|---|
| Public API | window.MetreekSDK |
| Core | EventBus, ApiClient, StateManager |
| Web Components | MetreekChat, MetreekWidget, MetreekStatus |
| Utilities | Logger, DOMObserver, Debouncer |