🧅 MACLLM Widget SDK
50+ production-grade widgets — Web Components, themeable, embeddable, i18n
Installation
Embed (1 line)
<script type="module" src="https://macllm.ai/widgets/macllm.js"
data-type="macllm-chat"
data-theme="dark"
data-lang="th"
data-key="YOUR_API_KEY">
</script>
JavaScript API
import MACLLM from '/widgets/macllm.js';
MACLLM.init({ theme: 'dark', locale: 'th', key: 'YOUR_KEY' });
// Create widget programmatically
const chat = MACLLM.create('chat', { position: 'bottom-right' });
document.body.appendChild(chat);
// Or use HTML directly
// <macllm-chat position="inline" agent="coder"></macllm-chat>
Chat Widget Core
<macllm-chat>
Full-featured AI chat: bubble, sidebar, fullscreen, inline modes. SSE streaming, markdown, code blocks.
| Prop | Type | Default | Description |
|---|---|---|---|
position | string | bottom-right | bottom-right | bottom-left | sidebar | inline |
theme | string | dark | dark | light | custom |
agent | string | assistant | assistant | coder | legal | medical | analyst |
title | string | MACLLM Chat | Chat window title |
api | string | - | API base URL |
key | string | - | API key for auth |
<macllm-chat position="inline" agent="coder" title="Code Assistant"></macllm-chat>
KPI Card Data
<macllm-kpi>
Animated KPI card with trend arrow, sparkline, and configurable color.
| Prop | Type | Default | Description |
|---|---|---|---|
title | string | KPI | Card title |
value | string | 0 | Display value |
trend | string | - | Trend text (e.g., +12%) |
color | string | primary | primary | success | danger | warning | info | #hex |
sparkline | string | - | Comma-separated values for sparkline |
prefix | string | - | Value prefix (e.g., ฿) |
suffix | string | - | Value suffix (e.g., %) |
<macllm-kpi title="Revenue" value="฿1.2M" trend="+15%" color="success" sparkline="10,15,12,18,25,22,30"></macllm-kpi>
Chart Data
<macllm-chart>
10 chart types rendered on Canvas 2D — no external dependencies.
| Prop | Type | Default | Description |
|---|---|---|---|
type | string | bar | bar | line | area | pie | donut | radar | gauge | scatter | heatmap | horizontal-bar |
data | JSON | [] | Chart data array |
labels | JSON | - | Label array |
title | string | - | Chart title |
colors | JSON | auto | Color array |
<macllm-chart type="line"
data="[120,150,180,160,200,250]"
labels='["Jan","Feb","Mar","Apr","May","Jun"]'
title="Monthly Traffic">
</macllm-chart>
Table Data
<macllm-table>
Smart table with sort, filter, search, pagination, and CSV export.
| Prop | Type | Default | Description |
|---|---|---|---|
data | JSON | [] | Array of row objects |
columns | JSON | auto | [{key, label, sortable}] |
paginate | number | 20 | Rows per page |
searchable | bool | true | Show search box |
exportable | bool | true | Show export button |
Dashboard Builder Builder
<macllm-dashboard>
Drag-and-drop dashboard with presets and HTML export.
| Prop | Type | Default | Description |
|---|---|---|---|
preset | string | - | analytics | monitoring | social |
cols | number | 4 | Grid columns |
editable | bool | false | Enable drag-and-drop editing |
<macllm-dashboard preset="analytics" editable></macllm-dashboard>