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

# Build your first app

> A guided Studio walkthrough from blank canvas to published

A 15-minute walkthrough that takes you from the gallery to a working, published Studio app. We'll use a simple example — a device count by department dashboard — but the pattern is the same for anything you'd build.

## Prerequisites

* An account that can enter Builder Mode (Super Admin or Analyst role)
* A Workspace you can build in. The default **Gallery** workspace is read-only; create a personal workspace first if you don't have one (see [Workspaces](https://docs.dimension.io/workspaces.md))
* Optional: at least one [Data Feed](https://docs.dimension.io/data-feeds.md) connected, or use the standard ThreatAware Devices table

## Step 1 — Enter Builder Mode

From the gallery, click the **wrench icon** next to the Dimension logo. The workspace overview opens with the Planner on the right and the left rail for Connect Data, Create Actions and Build Apps.

![Builder Mode workspace overview for Vulnerability Management showing its description and counters for 1 Data feed, 1 Action and 1 Studio app, with labels pointing to Toggle builder mode, Easily switch workspaces, Search across everything, Connect Data, Create Actions, Build Apps and Store Credentials, and the Planner panel on the right with a Build anything textbox](https://mintcdn.com/threataware-labs/JizGYqEeTbHV_69f/images/builder-mode-gallery.png?fit=max\&auto=format\&n=JizGYqEeTbHV_69f\&q=85\&s=11cdeec7a487e699382a4482e7f3c99e)

> [!TIP]
>
> If you don't have a workspace to build in yet, click the workspace chip in the header and create one. Keep yourself as the only person in its **Access** list for this walkthrough so the app stays yours while you experiment.

## Step 2 — Start a new app

Open **Build Apps** (the palette icon in the left rail). The Studio apps list opens with the template gallery:

![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)

Pick **Blank Canvas Light** (or **Dark** — your call). You'll land in the Studio editor with an empty canvas and an empty Composer chat panel on the right.

## Step 3 — First prompt

In the Composer (right pane), type:

```text theme={null}
"Create a dashboard showing device counts grouped by department.
 Use a donut chart at the top and a sortable table below.
 Add a filter for OS at the very top."
```

Press **Send**. Composer thinks for a few seconds (you'll see `Thought for X seconds`), generates the React components, and renders them live in the preview. The chat shows a step-by-step trace:

* `Thought for 6.7 seconds`
* `I'll build a clean, polished dashboard with...`
* `✓ Created App.tsx`
* `✓ Saved Changes`
* `All done! Here's what was built:` + bullet list

## Step 4 — Confirm whether you have data

If this app needs external data and your workspace has none, Composer pops a **"Did you forget to add a data feed?"** confirmation:

![Confirmation 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)

* **Proceed with no data feeds** — for purely UI apps or when you'll connect data later
* **Cancel** — go and wire up a Data Feed first ([Connect Your Data](https://docs.dimension.io/connect-your-data.md))

If you already have the ThreatAware Devices table available, the app builds with real data straight away — no prompt.

## Step 5 — Iterate

Refine through conversation. Try:

```text theme={null}
"Make the donut chart larger and put it on the left.
 Move the OS filter into the donut chart's header."

"Add a metric card above the donut showing total device count.
 Colour it green if all devices are healthy, amber otherwise."

"Sort the table by department descending, then by risk level."
```

Each prompt updates the preview live. Use **Inspect Component** (the cursor icon in the Composer footer) to point at specific elements without naming them:

![Inspect Component selection mode active: the Composer pane is dimmed and a Select Element prompt reads Select an element to reference it in Composer, while the Due in next 14 days label 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)

> [!TIP]
>
> **Restore checkpoint** — if a Composer round-trip goes sideways, scroll up to that message and click **Restore checkpoint**. The app reverts to the state after that message. See [AI Composer → Restore checkpoint](https://docs.dimension.io/studio/ai-composer.md#restore-checkpoint).

## Step 6 — Wire up an Action (optional)

If you want a button on each row that opens a Jira ticket, first [create a Webhook Action](https://docs.dimension.io/actions.md) targeting Jira. Then in Studio:

```text theme={null}
"On each table row, add an 'Open Ticket' button that invokes
 the Jira Webhook Action with the device name and risk level."
```

Composer wires the button to the Action, including the input mapping.

## Step 7 — Polish

Common polish prompts:

```text theme={null}
"Use our brand colors — primary is #16A34A."

"Add a header with our logo and the title 'Device Compliance'."

"Add auto-refresh that updates the data every 5 minutes."

"Add a 'Generate PDF' button so people can export the dashboard."
```

The PDF button is built-in via **⋯ → Generate PDF** — you can either rely on that or surface a button in-app for end users.

## Step 8 — Publish

Click **Publish** at the bottom-right of the editor (see [Draft and published](https://docs.dimension.io/publishing.md)). Dimension:

* Promotes Draft → Published
* Auto-creates a [Shortcut](https://docs.dimension.io/settings.md) using the app's name as the slug
* Fires a **Publish app** notification in the bell-icon panel
* Records the publish in the **Audit Log**

Who can see the published app follows the **workspace's** [Access](https://docs.dimension.io/workspaces.md#access) list. If everyone in your tenant has access to the workspace, everyone can see the app. If only you do, only you see it.

## Step 9 — Share or pin

Once published:

| Action | Where | What you get |
| - | - | - |
| **Share URL** | ⋯ → Share URL | A customisable short URL like `https://<tenant>/app/<slug>` |
| **Generate PDF** | ⋯ → Generate PDF | A4/A3 Portrait or Landscape PDF of the current view |
| **Pin to Sidebar** | ⋯ menu | App appears in the main ThreatAware sidebar |
| **Clone** | ⋯ → Clone | Editable copy in the current workspace |

## What you just built

In \~15 minutes you've got:

* A live dashboard with real data
* Branded look-and-feel
* Auto-refresh
* A button that opens tickets
* A published, shareable URL
* A PDF export

All in conversation, no code.

## Where to go next

> [card] [Tutorials](https://docs.dimension.io/tutorials.md)
>
> More step-by-step walkthroughs — License Tracker, SOC Dashboard, Compliance Scorecard, Patch Tracker

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

> [card] [Components](https://docs.dimension.io/studio/components.md)
>
> The full 46-component library

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


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