> ## 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.

# Studio

> Build custom security applications using conversational AI — full editor anatomy and lifecycle reference

## Overview

Studio is the creative heart of Dimension — describe what you want, and the [AI Composer](https://docs.dimension.io/studio/ai-composer.md) writes the React/TypeScript code. The live preview updates in place. When you're happy, **Publish**.

> [card] Natural Language
>
> Describe what you want in plain English — AI writes the code

> [card] Real-Time Preview
>
> See changes instantly with your actual data as you build

> [card] Full Ownership
>
> All code is yours — download, modify, run anywhere

> [!NOTE]
>
> **Privacy by Design**: by default the AI sees your data **schema** (field names like `deviceName`, `osVersion`) but never your actual data values. Tenant admins can opt in to AI data access under **Settings → AI**. See [Security & Privacy](https://docs.dimension.io/trust/security-privacy.md).

## Builder Mode

Dimension has two modes:

| Mode | Purpose |
| - | - |
| **View** (default) | The Gallery and any launched app run in read-only mode for end users |
| **Builder Mode** | Toggled via the **wrench icon** next to the Dimension logo. Exposes [Workspaces](https://docs.dimension.io/workspaces.md), the [Planner](https://docs.dimension.io/planner.md), the left rail (Connect Data, Create Actions, Build Apps, Store Credentials), and a Composer entry point on every screen |

![Workspace overview in Builder Mode showing the Vulnerability Management description, workspace counters for Data feed (1), Action (1) and Studio app (1), labels pointing to the left-rail shortcuts Connect Data, Create Actions and Build Apps, and the Planner panel](https://mintcdn.com/threataware-labs/JizGYqEeTbHV_69f/images/builder-mode-gallery.png?fit=max\&auto=format\&n=JizGYqEeTbHV_69f\&q=85\&s=11cdeec7a487e699382a4482e7f3c99e)

When Builder Mode is on, each app tile in the Studio list has a **right-click context menu**:

![Right-click context menu on the Exploited Vulnerabilities Dashboard tile in the Studio list, showing Open in new tab, Copy link, Launch, Edit, Select, Migrate, Export, Clone, Unpublish and Delete](https://mintcdn.com/threataware-labs/JizGYqEeTbHV_69f/images/app-context-menu.png?fit=max\&auto=format\&n=JizGYqEeTbHV_69f\&q=85\&s=0cd600d1df01608d704cf869ab223ff3)

| Menu item | What it does |
| - | - |
| **Open in new tab** | Launch the published app in a new browser tab |
| **Copy link** | Copy the published Share URL to clipboard |
| **Launch** | Open the app in the current tab (View mode) |
| **Edit** | Open the app in the **Studio editor** for the current workspace |
| **Select** | Start a multi-selection, so you can open or delete several apps at once |
| **Migrate** | Move the app and its dependencies to another workspace |
| **Export** | Download the app so it can be imported elsewhere |
| **Clone** | Create an editable copy in the current workspace |
| **Unpublish** | Take the published version offline. The draft stays |
| **Delete** | Delete the app. It goes to **Settings → Deleted Entities** for 30 days |

## Editor anatomy

When you **Edit** an app, the Studio editor opens. Here's every region:

![Studio editor: the Exploited Vulnerabilities Dashboard preview on the left (totals, a bar chart of the top 10 vendors and a Newest additions table), the Composer conversation on the right, and Data sources, Actions, Draft/Published and Publish in the bottom bar](https://mintcdn.com/threataware-labs/JizGYqEeTbHV_69f/images/studio-editor-real.png?fit=max\&auto=format\&n=JizGYqEeTbHV_69f\&q=85\&s=1cfa7bfbb0b06c6901929eff2024c63c)

### Top toolbar (left side)

| Region | Contains |
| - | - |
| Breadcrumb | **Studio** → app name with editable icon (left-most ▼ opens the icon picker — emojis + curated icons) |

### Top toolbar (right side)

| Button | What it does |
| - | - |
| **↻ Reload** | Reload the live preview without losing chat history |
| **`< >` X-Ray** | Open the source-code viewer (Files + Key Value Store) |
| **⛶ Fullscreen** | Hide the Composer panel and expand the preview |
| **⋯ Menu** | Open the editor's main menu (covered below) |

### Live preview (centre)

The middle column renders the app live with whatever data sources you've wired. Changes from Composer prompts appear here within seconds.

### Bottom toolbar

| Element | What it does |
| - | - |
| **Data sources** counter | How many Data Feeds are wired. Click + to add. Disabled while Published |
| **Actions** counter | How many Actions the app can invoke. Click + to add. Disabled while Published |
| **Draft / Published toggle** | The two state chips at the bottom-centre. Click **Published** to promote |
| **Publish** button | Commits the current Draft to Published |
| **3-dot menu** (next to Publish) | **Unpublish** when the app is currently Published |

> [!WARNING]
>
> **Data sources and Actions are only editable while Published is off.** Hover the disabled add button on the Published view and Studio shows *"Unpublish to make changes to data sources"*.

### Composer panel (right side)

The [AI Composer](https://docs.dimension.io/studio/ai-composer.md) lives here. Header shows the conversation's credit usage and a **Clear Chat** button. The conversation thread shows your prompts plus Composer's step-by-step trace (`Thought for X seconds`, `Created App.tsx`, `Saved Changes`, summary bullets). The input footer has **Add image**, **Inspect component**, **Add component template** (`+`), and **Send**.

The textbox placeholder changes contextually:

* **`Build anything…`** — on a fresh app, before any prompts
* **`Enhance or amend…`** — once the app has been generated, signalling iterative edits

## The Studio editor ⋯ menu

Click **⋯** in the top-right of the editor:

![Studio editor ⋯ menu open on a published app, showing Show Tutorial, Clone, Share URL, Generate PDF, Delete and Advanced](https://mintcdn.com/threataware-labs/JizGYqEeTbHV_69f/images/studio-editor-menu-full.png?fit=max\&auto=format\&n=JizGYqEeTbHV_69f\&q=85\&s=b01c33120e3ff48db0c737f3bdf413b8)

| Menu item | What it does |
| - | - |
| **Show Tutorial** / **Exit Tutorial** | Toggle the in-app guided tutorial overlay |
| **Clone** | Create an editable copy in the current workspace (becomes your Draft) |
| **Share URL** | Open the Share URL dialog with a customisable slug. Disabled while in Draft |
| **Generate PDF ▸** | Submenu — A4 Portrait, A4 Landscape, A3 Portrait, A3 Landscape, Schedule (Coming Soon) |
| **Delete** | Permanently delete (only enabled if you own it) |
| **Advanced ▸** | Submenu — see below |

### Advanced submenu

| Item | Action |
| - | - |
| **Inspect Element** | Enter selection mode — click any element in the live preview to reference it in your next Composer prompt. Equivalent to the cursor button in the Composer footer |
| **Export** | Download the complete package — source code, dependencies list, README, schema |
| **Migrate** | Move this app + its Data Feeds + its Actions to a different workspace |

## Draft and Published

Every app has two states:

| State | Visibility |
| - | - |
| **Draft** | Your unpublished changes — visible only to you while you build |
| **Published** | What everyone with access to the workspace sees |

The toggle and **Publish** button live at the bottom-centre. **Unpublish** is in the 3-dot menu next to Publish.

Publishing makes the app visible to everyone with access to the workspace and exposes the launch surfaces (Gallery, Command Menu, Share URL).

## X-Ray — source code viewer

Click **`< >`** in the editor header to open X-Ray:

![X-Ray view of the Exploited Vulnerabilities Dashboard: tabs for Files, Key Value Store, Private Key Value Store and the CISA Known Exploited Vulnerabilities data source, a file tree with a components folder and App.tsx under a Draft/Published toggle, a Download Package button, and the empty state Select a file on the left to view its source](https://mintcdn.com/threataware-labs/JizGYqEeTbHV_69f/images/xray-real.png?fit=max\&auto=format\&n=JizGYqEeTbHV_69f\&q=85\&s=02557d37e08d22bc7cf370e95c6fb6f5)

X-Ray has two tabs:

### Files tab

A file-tree explorer of the React/TypeScript source the AI generated. Click any file to view its source on the right. Top of the panel has a **Draft / Published** toggle for diffing. Bottom of the panel has a **Download Package** button (same artefact as **⋯ → Advanced → Export**).

A freshly-built app with only a header and button shows a single `App.tsx` at the root and a `components/` folder (visible in the X-Ray screenshot). Larger apps generate additional files as components are added.

![X-Ray Files tab with App.tsx selected, showing the TypeScript/React source for the Exploited Vulnerabilities Dashboard app, which reads data with useData and triggers an action with useAction](https://mintcdn.com/threataware-labs/JizGYqEeTbHV_69f/images/xray-app-tsx.png?fit=max\&auto=format\&n=JizGYqEeTbHV_69f\&q=85\&s=4964f926a071c0dd652497341a83643f)

### Key Value Store tab

![X-Ray Key Value Store tab showing the empty state, with Key value store empty in the left rail and an explanation of the shared store in the main pane](https://mintcdn.com/threataware-labs/JizGYqEeTbHV_69f/images/xray-key-value-store.png?fit=max\&auto=format\&n=JizGYqEeTbHV_69f\&q=85\&s=d072b8d2347f724c5c8595b3c9e0d79b)

A per-app, persistent **key-value store** for state, configuration, and small bits of data the app needs to remember across sessions. Use it for:

* **User preferences** — *"Save the user's selected department filter to the KV store under `pref:dept`"*
* **Workflow state** — partial form data between page navigations
* **App-level config** — values an end user can edit from the in-app Settings page
* **Counters and cursors** — sync watermarks, page-position memory

Composer wires the KV store automatically when you ask:

```text theme={null}
"Save the chosen department filter to the KV store and
restore it next time the user opens the app."

"Persist the analyst's notes for each device in the KV store
under key `notes:<device-id>`."
```

The X-Ray view of the KV Store exposes the live keys and values for inspection.

## Studio Apps tab

The **Studio Apps** list shows every app in the workspace, grouped into **Published Apps** and **Unpublished Apps**, with a **+ New** button and the **Gallery** of templates below:

![Studio apps list for the Vulnerability Management workspace: a New button, a Published Apps section with the Exploited Vulnerabilities Dashboard tile, the Gallery section below with Blank Canvas Light and Blank Canvas Dark, and the Planner on the right](https://mintcdn.com/threataware-labs/JizGYqEeTbHV_69f/images/studio-apps-list.png?fit=max\&auto=format\&n=JizGYqEeTbHV_69f\&q=85\&s=8ba04cd58ac3c3b954027b613f372b2a)

Each tile has a 3-dot menu in the top-right (the same Show Tutorial / Clone / Share URL / Generate PDF / Delete / Advanced menu as inside the editor) and shows the app's icon and name. Hovering a tile surfaces quick actions for opening the app.

### Templates available right now

The expanded **Gallery** section at the bottom of the Studio apps list:

![Studio Gallery: Start from a ready-made app. Preview it, then import it and everything it needs. Official entries are Blank Canvas Light, Blank Canvas Dark, Exposure management, Licence management, MFA coverage, Patch management and Shadow AI, with the Planner on the right](https://mintcdn.com/threataware-labs/JizGYqEeTbHV_69f/images/studio-templates-gallery.png?fit=max\&auto=format\&n=JizGYqEeTbHV_69f\&q=85\&s=8a1c54bf2a98f32c249f691f8c875add)

* **Blank Canvas Light** (Official) — light-mode starting point
* **Blank Canvas Dark** (Official) — dark-mode starting point (ideal for SOC wall displays)

Click any template to start a new app in the current workspace.

## Command Menu (⌘K)

Press **⌘K** (or **Ctrl+K**) anywhere in Dimension to open the palette:

![Command Menu palette open in Builder Mode with a Search, navigate, or type a command box, a Studio section with Create New App, a Vulnerability Management section listing its app, data feed and action, a Security Operations section with Go to Security Operations, and the Commands section starting with Home](https://mintcdn.com/threataware-labs/JizGYqEeTbHV_69f/images/command-menu-builder.png?fit=max\&auto=format\&n=JizGYqEeTbHV_69f\&q=85\&s=692792b4fa49a7efa787fa0ce001b291)

The palette is grouped:

| Group | Contents |
| - | - |
| **Current page** | Actions for where you are, such as **Create New App** in Studio |
| **Workspaces** | Every app, data feed and action in the active workspace, and **Go to** links for your other workspaces. Enter to open |
| **Commands** | Home, Switch Workspace, Create New…, Toggle Theme, Import, Enter / Exit Builder Mode, Feedback, Settings |

The header search field is dual-mode:

* **`⌘F`** — search within the current view (e.g. filter the visible app tiles)
* **`⌘K`** — open this Command Menu

## Getting started

**1. Enter Builder Mode**

Click the wrench icon next to the **Dimension** logo. The workspace overview opens with the left rail and the Planner.

**2. Create or open an app**

* **New** — open **Build Apps** in the left rail and click **New**, or pick **Blank Canvas Light** or **Dark** from the Gallery
* **Existing** — right-click a tile and choose **Edit**, or hover and click the **Edit** action button
* **Pre-built** — import an app from the Gallery. See [Pre-built Apps](https://docs.dimension.io/pre-built-apps.md)

**3. Connect Data (if needed)**

Apps that need external data reference a [Data Feed](https://docs.dimension.io/data-feeds.md). Build the Feed first via its Composer, then click **+** next to **Data sources** at the bottom of the Studio editor.

**4. Build with conversation**

Type prompts in the [AI Composer](https://docs.dimension.io/studio/ai-composer.md) on the right. The live preview updates per prompt.

**5. Publish**

Click the **Published** chip at the bottom-centre. The app becomes visible to everyone with access to the workspace; a Shortcut is auto-created.

## Application types

### Dashboards

Real-time views of your security posture.

```text theme={null}
"Create an executive dashboard with:
 - Overall security score gauge at the top
 - Three metrics showing EDR %, Encryption %, Patch compliance %
 - Trend line of security score over 30 days
 - Top 5 risks as a horizontal bar chart"
```

**Best for:** Leadership reporting, NOC displays, team metrics. See the [SOC Dashboard tutorial](https://docs.dimension.io/tutorials/soc-dashboard.md).

### Reports

Detailed analysis exportable as PDF.

```text theme={null}
"Build a compliance report showing:
 - Summary metrics at the top
 - Compliance status by control as a table
 - Devices failing each control
 - Add a 'Generate PDF' button"
```

**Best for:** Audit documentation, client deliverables, board presentations. See the [Compliance Scorecard tutorial](https://docs.dimension.io/tutorials/compliance-scorecard.md).

### Tools

Interactive applications with user input.

```text theme={null}
"Create a device validation wizard:
 - Page 1: Enter device name with autocomplete
 - Page 2: Show validation checklist (EDR, encryption, etc.)
 - Page 3: If all pass, show certificate. If fail, show issues."
```

**Best for:** Workflows, data entry, validation processes. Combine with [Actions](https://docs.dimension.io/actions.md) for write-back operations.

### Trackers

Monitor specific initiatives or projects.

```text theme={null}
"Build a Windows 11 migration tracker:
 - Show overall progress percentage
 - Pie chart of migrated vs pending
 - Table of pending devices with owner contact
 - Filter by department"
```

**Best for:** Projects, initiatives, remediation campaigns. See the [Patch Tracker tutorial](https://docs.dimension.io/tutorials/patch-tracker.md).

## Explore further

> [card] [AI Composer](https://docs.dimension.io/studio/ai-composer.md)
>
> Composer footer, prompts, Inspect Component, component templates, Restore checkpoint

> [card] [Components](https://docs.dimension.io/studio/components.md)
>
> The component library — General, Form, Popups, Navigation, Layout, Charts, Tables

> [card] [Themes](https://docs.dimension.io/studio/themes.md)
>
> Brand colours, dark mode, per-app overrides

> [card] [Exporting, Sharing & Cloning](https://docs.dimension.io/studio/exporting.md)
>
> PDF, Clone, Share URL, Export, Migrate, X-Ray code download


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