Build dashboards with AI
Because Dashboards as Code are just .embeddable.yml files, you can build and edit them by prompting an AI agent instead of writing YAML by hand. Embeddable ships a Claude skill that teaches the agent how Embeddable dashboards work, so it turns a plain-English description into a valid, working dashboard.
See it in action in the Dashboards as Code & Claude Skills Quick Hit (video + transcript).
The dashboard-as-code skill
The skill ships in the Remarkable Pro boilerplate (opens in a new tab) at .claude/skills/dashboard-as-code/. If you set up your workspace from the boilerplate, Claude Code (opens in a new tab) discovers it automatically — there's nothing to install.
It triggers whenever you ask for dashboard work — phrases like "create a dashboard", "add a widget", "wire up a date filter", or "make a custom canvas template" — or whenever you edit a .embeddable.yml file.
When it runs, the agent:
- Discovers the components available in your repo and component libraries (e.g. Remarkable Pro), reading each one's metadata so it picks the right chart and inputs.
- Reads your data models to confirm the cubes, dimensions, and measures you reference actually exist.
- Writes or edits the YAML under
src/embeddable.com/embeddables/, using valid components, inputs, positions, variables, and Custom Canvas templates. - Checks build validation (when
embeddable:devis running) and fixes issues such as overlapping widgets.
Everything it produces is the same Dashboards as Code YAML you'd write yourself — so it's fully reviewable in a normal code diff.
Workflow
Start your dev server
Run embeddable:dev so you get a live preview and build-time validation as the agent works.
Describe what you want
Prompt Claude Code in plain English. For example:
Reduce the bar chart to half-width and convert it to a line chart using the appropriate Remarkable Pro component. Then add a pie chart in the newly emptied space to the right, breaking down total listens by the age group dimension.
The agent reads your existing dashboard, the skill's reference files, and the relevant component code, then updates the .embeddable.yml accordingly.
Review and preview
Review the YAML diff like any other code change, and watch it render live in embeddable:dev. Iterate by prompting again, or by editing it yourself — in the code or in the local builder.
Push when you're ready
Push to create a new saved version in your workspace, then publish it.
The skill won't run embeddable:push or start embeddable:dev for you — those stay your call. It also treats a dashboard's name (and Custom Canvas template keys) as stable identifiers, since renaming them can break live embeds and drilldowns.
Other agents
The skill is written for Claude Code, but it's just markdown — SKILL.md and its reference files live in your repo under .claude/skills/dashboard-as-code/. Any agent (Cursor, Codex, and others) can use the same guidance: point it at those files, or copy them into that tool's own rules/config format. What's specific to Claude Code is the automatic discovery and triggering — other tools just need pointing at the folder. And since the dashboards themselves are plain .embeddable.yml, any agent can read and edit them regardless.