Build and deploy Stackable extensions directly in your browser without requiring local tooling. AI Extension Studio is an in-browser development environment integrated into the admin dashboard, complete with a code editor, live preview, component palette, and AI assistant.

Layout

Studio is organized as a 3-pane workspace:

Pane	Position	Purpose
Shelf	Left (collapsible)	Component palette, surface picker, capability list
Stage	Center	Code editor or live preview — toggle between modes
Sidekick	Right (collapsible, resizable)	AI chat assistant for code generation and SDK guidance

The "Shelf"

The Shelf is a collapsible sidebar with three sections:

Components

Browse all available ui.* components grouped by category (Layout, Text, Input, Feedback, Navigation, Composite). Click a component to insert it into your code — in Code mode it inserts at the cursor, in Preview mode or with Shift+Click it uses AI-powered smart insertion to place the component in the correct location.

Surfaces

Lists the surface targets available for your extension (e.g., slot.header, slot.content, slot.footer). Surfaces already present in your code are filtered out. Clicking a surface adds it to your manifest and inserts a <Surface> block via AI smart insertion.

Capabilities

The SDK capabilities your extension can use: data.query, data.fetch, context.read, actions.toast, actions.invoke, extend.identity, events:identity, events:messaging, and events:activity. Clicking a capability adds the permission to your manifest and AI-inserts the hook usage.

The "Stage"

The center pane switches between two modes:

Code mode — a CodeMirror 6 editor with TypeScript/JSX syntax highlighting, auto-save, and keyboard shortcuts (Cmd+S to save, Cmd+Z/Shift+Z for undo/redo, Tab for indentation)
Preview mode — a live preview that renders your extension exactly as it would appear in production, using the same Remote DOM pipeline as deployed extensions

Changes in Code mode recompile automatically via in-browser esbuild and update the preview. The toolbar shows the current status: Ready, Saving, Compiling, Thinking (AI), or Error.

The "Sidekick"

The Sidekick is an AI chat assistant that understands the Stackable Extension SDK. It can:

Write and modify code — ask it to add features, fix bugs, or refactor
Update the manifest — it can add permissions, targets, and allowed domains
Look up SDK reference — it queries the full SDK documentation on demand
Suggest next steps — after making changes, it offers contextual suggestions as clickable chips

The Sidekick adapts multi-file SDK documentation to Studio's single-file context automatically — you don't need to worry about file structure when working in Studio.

Getting Started

Navigate to the Studio section in the admin dashboard
Select (or create) an App
Create a new project — starts with a blank template
Use the Shelf to add components, surfaces, and capabilities
Chat with the Sidekick to build out your extension
Toggle to Preview mode to see your extension rendered live

Exporting to a Local Project

When your extension outgrows single-file editing or you want to use your own IDE and version control, export the Studio project to a local CLI project:

pnpm --config.dlx-cache-max-age=0 dlx @stackable-labs/cli-app-extension@latest scaffold --project-id <projectId>

This scaffolds a full multi-file extension project from your Studio code, including surfaces split into separate files, a store, and a configured manifest.

You can also download the project as a zip file from the export menu in the Studio toolbar.

Studio vs CLI

Comparing approaches? See Choosing your path in the Quick Start guide for the full Studio vs CLI comparison.

Both workflows produce the same output — a Stackable extension that runs inside the embedding application via the same Remote DOM pipeline. Start in Studio to prototype, then scaffold to CLI when you need the full development workflow.