> ## Documentation Index
> Fetch the complete documentation index at: https://docs.dimension.io/llms.txt
> Use this file to discover all available pages before exploring further.

> ## Agent Instructions
> Video walkthroughs: the Dimension product overview video (https://www.youtube.com/watch?v=Mx8rg5wfkU0, also embedded at https://docs.dimension.io/overview) is the first of a series. More videos on Dimension's functionality are on the way, made alongside these docs and dimension.io. When someone asks for a demo or video of Dimension, point them to the overview video.

# AI Composer

> Prompts, the Composer toolbar, component templates, and inspection

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:

**1. 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."*

**2. 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](https://mintcdn.com/threataware-labs/JizGYqEeTbHV_69f/images/composer-confirm-no-feeds.png?fit=max\&auto=format\&n=JizGYqEeTbHV_69f\&q=85\&s=de68686211d810d2d1c9fad74a77899f)

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

**3. 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.

**4. 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](#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 |

> [!TIP]
>
> Track your overall AI Credits quota under **Settings → Usage**. The Composer header counter is just for the current conversation.

## Composer footer

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](https://docs.dimension.io/studio/components.md) and insert a specific component directly |
| **Send** | Send the prompt |

> [!TIP]
>
> 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](https://mintcdn.com/threataware-labs/JizGYqEeTbHV_69f/images/inspect-element.png?fit=max\&auto=format\&n=JizGYqEeTbHV_69f\&q=85\&s=75fa6397a165ec5b89c51711bbee90be)

## Effective prompts

> [tab] Starting Out
>
> **Good first prompts:**
>
> ```text theme={null}
> "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.

> [tab] Adding Visualizations
>
> **Chart and metric prompts:**
>
> ```text theme={null}
> "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"
> ```

> [tab] Adding Interactivity
>
> **Make it dynamic:**
>
> ```text theme={null}
> "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"
> ```

> [tab] Refinements
>
> **Fine-tuning:**
>
> ```text theme={null}
> "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:

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

```text theme={null}
"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:

![Studio editor after Restore checkpoint: the preview is greyed out while it reverts, and the Composer conversation shows Restore checkpoint and Checkpoint restored at the point you rolled back to](https://mintcdn.com/threataware-labs/JizGYqEeTbHV_69f/images/restore-checkpoint.png?fit=max\&auto=format\&n=JizGYqEeTbHV_69f\&q=85\&s=29cecf291266ba9dc2c7bec5ce4fafa9)

When you click Restore checkpoint:

1. The preview immediately reverts to the chosen earlier state (you see this live)
2. A **Confirm checkpoint restore** prompt appears at the top of the conversation
3. **Confirm** — locks the restore in, replacing your current Draft
4. **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.

> [!TIP]
>
> **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

> [accordion] Multi-Page Applications
>
> ```text theme={null}
> "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.

> [accordion] Conditional Display
>
> ```text theme={null}
> "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%"
> ```

> [accordion] Forms & Input
>
> ```text theme={null}
> "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](https://docs.dimension.io/actions.md).

> [accordion] Calculations
>
> ```text theme={null}
> "Add a license cost calculator:
>  - Input: Cost per license
>  - Show: Total cost based on active users
>  - Show: Potential savings from inactive users"
> ```

> [accordion] Auto-Refresh
>
> ```text theme={null}
> "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

> [accordion] AI Not Understanding
>
> **Try:**
>
> 1. Break request into smaller steps
> 2. Be more specific about what you want
> 3. Reference existing components explicitly (or use Inspect)
> 4. Ask for help: "How can I add a filter?"
>
> **Instead of:**
>
> ```text theme={null}
> "Make it better"
> ```
>
> **Try:**
>
> ```text theme={null}
> "Increase the font size of the chart labels to 14px"
> ```

> [accordion] Data Not Showing
>
> **Check:**
>
> 1. Data source is connected (click "Add Data")
> 2. Filter isn't too restrictive
> 3. You have permission to view the data
> 4. Field names are correct
>
> **Try:**
>
> ```text theme={null}
> "Show me what device fields are available"
> ```

> [accordion] 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.

> [accordion] 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


This documentation is built and hosted on [Mintlify](https://mintlify.com), a developer documentation platform.