# Luzmo Developer Documentation

> Luzmo is an embedded analytics platform that enables developers to integrate dashboards, code-first visualizations (Flex SDK), and AI-powered data assistants (Luzmo IQ) into their applications. This documentation covers the Core API, frontend SDKs, and all embedding options.

## Quick Start

Luzmo offers two main integration paths:

1. **Core API (Backend)**: Manage resources, query data, generate embed tokens. Use official SDKs for Node.js, Python, PHP, Java, or C#.
2. **Frontend SDKs**: Embed dashboards or create code-first visualizations. Available for React, Angular, Vue, Web Components, and React Native.

**Security**: Never expose API keys in client-side code. Generate short-lived embed tokens server-side for frontend access.

## Agent Skills

Install Luzmo agent skills to turn your AI coding assistant into a Luzmo embedded-analytics expert. Compatible with Cursor, Claude Code, Codex, Windsurf, Google Antigravity, and GitHub Copilot.

```bash
npx @luzmo/agent-skills@alpha
```

Non-interactive (Cursor, all skills, project scope):

```bash
npx @luzmo/agent-skills add --tool cursor --skills all --scope project --yes
```

- Package: `@luzmo/agent-skills` on npm — `npm install @luzmo/agent-skills`
- Full guide: [/guide/ai-resources--luzmo-skills.md](https://developer.luzmo.com/guide/ai-resources--luzmo-skills.md)
- GitHub: [luzmo-official/agent-skills](https://github.com/luzmo-official/agent-skills)

## Documentation

**For LLMs:** To discover which docs to fetch from user queries, use [llms-full.txt](https://developer.luzmo.com/llms-full.txt) — a complete index of all documentation pages in markdown format with descriptions for each entry.

### Guides

- [Generating an Embed token](/guide/dashboard-embedding--generating-an-authorization-token.md): Server-side token generation using API key-token pair. Required for all embedding.
- [Handling multi-tenant data](/guide/dashboard-embedding--handling-multi-tenant-data.md): Row-level security via parameterized filters and connection overrides.
- [Embedding dashboards](/guide/dashboard-embedding--embed-into-application.md): Embed dashboards using Web Components, React, Angular, Vue, or React Native.
- [Embedding the dashboard editor](/guide/dashboard-embedding--embedded-dashboard-editor.md): Let users create/edit dashboards with 'designer' or 'owner' roles.
- [Embedding AI Assistant](/guide/iq--introduction.md): Add AI-powered data Q&A via chat or answer components.
- [Adding IQ to an agentic workflow](/guide/guides--adding-luzmo-iq-to-agentic-workflow.md): Let LLM agents call Luzmo IQ via the IQMessage API (tool/function calling) so they can query your analytics data while answering users.
- [Code-first visualizations](/guide/flex--introduction.md): Build charts programmatically with Luzmo Flex SDK.
- [Querying data](/guide/guides--querying-data.md): Data API query syntax: dimensions, measures, filters, order, limit.
- [Building a dashboard studio](/guide/guides--building-a-dashboard-studio.md): Build a custom in-app chart and dashboard editor with Analytics Components Kit (ACK) when you need your own UI instead of embedding Luzmo's built-in editor.

### Luzmo IQ (AI Assistant)

- [Introduction](/guide/iq--introduction.md): AI-powered natural language data queries via embeddable components.
- [Chat Component API](/guide/iq--chat-component-api.md): Chat component props, events, CSS variables, TypeScript types.
- [Answer Component API](/guide/iq--answer-component-api.md): Render AI responses with chart config and feedback options.
- [IQ Backend API](/guide/iq--api-introduction.md): Server-side API for IQ conversations and messages.

## Frontend SDKs

Always search and use the latest version of the package.

| Framework | Package | Install |
|-----------|---------|---------|
| Web Components | @luzmo/embed | `npm install @luzmo/embed` |
| React | @luzmo/react-embed | `npm install @luzmo/react-embed` |
| Angular | @luzmo/ngx-embed | `npm install @luzmo/ngx-embed` |
| Vue | @luzmo/vue-embed | `npm install @luzmo/vue-embed` |
| React Native | @luzmo/react-native-embed | `npm install @luzmo/react-native-embed` |  

### Frontend Component API References

| Component | API Reference |
|-----------|---------------|
| Dashboard | /guide/embedding--component-api-reference.md |
| Flex | /guide/flex--component-api-reference.md |
| IQ Chat | /guide/iq--chat-component-api.md |
| IQ Answer | /guide/iq--answer-component-api.md |

## Analytics Components Kit (ACK)

Use ACK when you need to build chart configuration interfaces inside your own application. ACK provides web components for selecting data fields, assigning them to slots, editing chart options, applying filters, and arranging charts in a grid. It does not render charts itself; instead, your application stores the emitted chart configuration state and passes it to Luzmo Embed for rendering.

Package:
- `@luzmo/analytics-components-kit`

### ACK Guides

- [Overview](/guide/ack--overview.md): What ACK is, when to use it, and how it fits together with Luzmo Embed.
- [Patterns](/guide/ack--patterns.md): Authentication, theming, localization, shared state flow, and ACK-to-Flex mapping.
- [Utilities](/guide/ack--utilities.md): Helper functions such as `loadDataFieldsForDatasets` and `switchItem`.
- [Item definitions](/guide/ack--item-definitions.md): Available item types, slot configs, options configs, and override patterns.

### ACK Components

- [Data fields](/guide/ack--components--data-fields.md): Overview of field-picking components.
- [luzmo-data-field](/guide/ack--components--data-fields--luzmo-data-field): Single draggable data field.
- [luzmo-data-field-panel](/guide/ack--components--data-fields--luzmo-data-field-panel): Full data field browser with search and dataset switching.
- [Item data slots](/guide/ack--components--data-slots.md): Overview of drag-and-drop slot assignment components.
- [luzmo-item-slot-drop](/guide/ack--components--data-slots--luzmo-item-slot-drop): Drop target for one slot.
- [luzmo-item-slot-drop-panel](/guide/ack--components--data-slots--luzmo-item-slot-drop-panel): Full slot assignment panel for a chart type.
- [Item data pickers](/guide/ack--components--data-picker.md): Overview of dropdown slot picker components.
- [luzmo-item-slot-picker](/guide/ack--components--data-picker--luzmo-item-slot-picker): Dropdown picker for one slot.
- [luzmo-item-slot-picker-panel](/guide/ack--components--data-picker--luzmo-item-slot-picker-panel): Full picker panel for all slots.
- [Item options](/guide/ack--components--item-options.md): Overview of chart option editor components.
- [luzmo-item-option](/guide/ack--components--item-options--luzmo-item-option): Single option control.
- [luzmo-item-option-panel](/guide/ack--components--item-options--luzmo-item-option-panel): Full grouped option editor.
- [luzmo-filters](/guide/ack--components--filters--luzmo-filters.md): Filter editor with nested AND/OR groups.
- [luzmo-embed-viz-item with ACK](/guide/ack--components--chart-rendering--luzmo-embed-viz-item.md): How to render a configured chart with Luzmo Embed.
- [luzmo-item-grid](/guide/ack--components--chart-rendering--luzmo-item-grid.md): Interactive multi-chart grid with built-in rendering.

## Flex Charts

Individual chart documentation: `https://developer.luzmo.com/flex/charts/{chart-type}.md`

### Available Chart Types

**Standard Charts**: area-chart, bar-chart, column-chart, line-chart, donut-chart, funnel-chart, scatter-plot, bubble-chart, radar-chart, combination-chart, pyramid-chart
**Tables**: regular-table, pivot-table, heat-table
**Gauges & Numbers**: circular-gauge, speedometer-chart, bullet-chart, evolution-number, conditional-number
**Filters**: date-filter, dropdown-filter, slicer-filter, slider-filter, search-filter
**Maps**: choropleth-map, marker-map, hexbin-map, symbol-map, route-map, spike-map
**Hierarchical**: treemap-chart, sunburst-chart, sankey-diagram, circle-pack-chart
**Statistical**: box-plot, strip-plot, parallel-coordinates-plot, heat-map
**Other**: wordcloud-chart, ohlc-chart, image, video, text

Luzmo also supports [Custom charts](/guide/guides--custom-charts.md) - the `chart-type` in this case is user-defined when creating the Custom chart in Luzmo (just like the slots of a custom chart). 
Luzmo doesn't expose any schema for the `slots` or `options` of Custom charts; if necessary, ask the user to provide these details.

## Core API Reference

All Core API operations use POST requests with an `action` parameter. The API does NOT use traditional REST HTTP verbs. 
ALWAYS fetch the documentation for the resource and action you are using. All API resources are referenced in here: https://developer.luzmo.com/guide/api--overview.md.

**Documentation URL pattern:** `https://developer.luzmo.com/api/{action}{Resource}.md`

Examples: 
- Create an Embed Authorization token: `https://developer.luzmo.com/api/createAuthorization.md`
- Search for dashboards: `https://developer.luzmo.com/api/searchDashboard.md`
- Search for datasets: `https://developer.luzmo.com/api/searchDataset.md`
- Search for themes: `https://developer.luzmo.com/api/searchTheme.md`
- Search for columns: `https://developer.luzmo.com/api/searchColumn.md`
- Search for formulas: `https://developer.luzmo.com/api/searchFormula.md`

## Backend SDKs (Server-side only)

Always search and use the latest version of the SDK.

| Language | Package | Install |
|----------|---------|---------|
| Node.js | @luzmo/nodejs-sdk | `npm install @luzmo/nodejs-sdk` |
| Python | luzmo-sdk | `pip install luzmo-sdk` |
| PHP | luzmo/luzmo-sdk-php | `composer require luzmo/luzmo-sdk-php` |
| Java | com.luzmo:sdk | `pkg:maven/com.luzmo/sdk` |
| C# | LuzmoSDK | `dotnet add package LuzmoSDK` |

## Optional

- [Plugin API Introduction](/guide/plugin--introduction.md): Create custom data source plugins
- [Custom Charts Guide](/guide/guides--custom-charts.md): Develop custom chart types
- [Academy AI Search](https://ai-knowledge-base.luzmo.com/ask-question): AI-powered answers about Luzmo (POST with `{"question": "query", "stream": true}`)