AI Composer

The Composer is the AI panel on the right side of the Studio editor. It’s a conversation, not a form — you describe what you want and it generates, edits, and explains the underlying components and data wiring.

What a Composer round-trip looks like

A typical first prompt → finished app cycle:

You describe what you want

Type a prompt and hit Send. Example: “Build a simple dashboard with a ‘Hello from Dimension’ header and a button that just shows an alert when clicked.”

Composer may ask about Data Feeds

If your app’s prompt sounds like it would benefit from data and you haven’t wired any Feeds, Composer pops a confirmation:

Confirm dialog over a new Blank Canvas app: Did you forget to add a data feed? Studio apps greatly benefit from having data feeds available to generate rich reports, dashboards, and apps. Buttons: Cancel and Proceed with no data feeds

Click Proceed with no data feeds for purely UI apps, or Cancel to wire up a Feed first.

Composer thinks, edits, and explains

The chat panel shows a step-by-step trace:

Thought for 6.7 seconds
I'll build a clean, polished simple dashboard with a header and an interactive button for you!
✓ Created App.tsx
✓ Saved Changes
All done! Here's what was built: followed by a bullet list of components

The live preview updates in place — no reload needed.

Iterate or restore

Each completed message gets an inline Restore checkpoint action at the top right of the conversation. Use it to roll back if a refinement went sideways (see Restore checkpoint below).

Composer header

The Composer header sits above the chat log and shows:

Control	What it does
Composer label + credit counter (e.g. “4 credits used”)	Running tally of AI credits this conversation has consumed
Clear Chat	Wipes the current conversation. The app itself is unaffected

Track your overall AI Credits quota under Settings → Usage. The Composer header counter is just for the current conversation.

Four buttons sit in the input row at the bottom of the Composer:

Button	What it does
Add image	Attach a screenshot or mockup — useful for “build something that looks like this”
Inspect component	Enter selection mode — click any element in the live preview to reference it in your next message
Add component template (`+`)	Open the searchable component library and insert a specific component directly
Send	Send the prompt

The Inspect component button is the fastest way to refer to a specific element without naming it. Click it, click the chart you want to change, then type “make it 50% taller” — the Composer knows which chart you mean.

Inspect Component selection mode active: a Select Element prompt overlays the dimmed Composer pane with the instruction Select an element to reference it in Composer, and the hovered element in the app preview is outlined

Effective prompts

Starting Out
Adding Visualizations
Adding Interactivity
Refinements

Good first prompts:

"Create a security dashboard showing our overall posture"

"Make a table of all Windows devices with their owner and last seen date"

"Build a report showing EDR coverage across the organization"

Start with the big picture, then refine.

Chart and metric prompts:

"Add a donut chart showing devices grouped by manufacturer"

"Create a bar chart of vulnerabilities by severity"

"Add three metric cards showing: total devices, healthy EDR percentage,
 and devices needing patches"

"Insert a line chart showing device count trend over the last 30 days"

Make it dynamic:

"Add a dropdown filter to filter all charts by department"

"Make the table sortable by clicking column headers"

"Add a search box to find specific devices"

"Add a date range picker that filters the trend chart"

Fine-tuning:

"Round all percentages to 1 decimal place"

"Sort the pie chart by count, largest first"

"Only show the top 10 items in the bar chart"

"Exclude devices tagged 'test' from all charts"

"Add a tooltip that shows the exact count when hovering"

Referencing components

Three ways to point the Composer at a specific element:

Describe it — “the donut chart at the top right”, “the metric showing EDR coverage”
Use Inspect component — click the selection arrow then click the element
Use the Add component template menu — picks the component by name and lets you specify where it goes

"Change the donut chart to show OS version instead of manufacturer"

"Move the filter dropdown to the left side"

"In the table at the bottom, add a column for risk level"

"Remove the metric card on the right"

Restore checkpoint

The Composer keeps the app code at every Composer turn as a checkpoint. The most recent checkpoint is restorable via the Restore checkpoint link at the top right of the conversation:

When you click Restore checkpoint:

The preview immediately reverts to the chosen earlier state (you see this live)
A Confirm checkpoint restore prompt appears at the top of the conversation
Confirm — locks the restore in, replacing your current Draft
Cancel — returns to the latest state without committing the restore

This is the primary “undo” mechanism for Composer-driven changes. Use it together with Clear Chat when you want a fully fresh slate.

Restore is per-message. If you’ve made 10 edits and want to go back 3, scroll up to the relevant message and click Restore checkpoint there — Composer reverts to the state after that message.

Advanced features

Multi-Page Applications

"Make this a 3-page app:
 Page 1: Device search
 Page 2: Device details (when clicked)
 Page 3: Action history for that device"

The AI handles navigation and state management automatically.

Conditional Display

"Show a red warning banner at the top if any devices
 have critical risk level"

"Only display the 'Urgent Actions' section if there are
 devices needing immediate attention"

"Color the EDR metric red if below 95%, yellow if 95-99%,
 green if 100%"

Forms & Input

"Add a form to tag devices:
 - Device selection dropdown
 - Tag name text input
 - Submit button that adds the tag"

Forms can write to custom fields or trigger an Action.

Calculations

"Add a license cost calculator:
 - Input: Cost per license
 - Show: Total cost based on active users
 - Show: Potential savings from inactive users"

Auto-Refresh

"Add auto-refresh that updates data every 60 seconds"

"Show a 'Last updated' timestamp in the header"

Great for NOC displays and monitoring screens.

Troubleshooting prompts

AI Not Understanding

Try:

Break request into smaller steps
Be more specific about what you want
Reference existing components explicitly (or use Inspect)
Ask for help: “How can I add a filter?”

Instead of:

"Make it better"

Try:

"Increase the font size of the chart labels to 14px"

Data Not Showing

Check:

Data source is connected (click “Add Data”)
Filter isn’t too restrictive
You have permission to view the data
Field names are correct

Try:

"Show me what device fields are available"

Hit a credit limit

Check Settings → Usage to see AI credit usage against your billing period. The Composer header credit counter only tracks the current conversation.

Made a Mistake

Restore checkpoint — revert to the state before a specific message (inline in the chat)
Undo — type “undo that” in a new prompt
Clear Chat — start a fresh conversation (the app keeps its current state)
Clone — if badly broken, clone the published version and start modifications fresh

Get started

Core Concepts

Build

Reference

Settings

Trust & Security

What a Composer round-trip looks like

Composer header

Composer footer

Effective prompts

Referencing components

Restore checkpoint

Advanced features

Troubleshooting prompts