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

# Compose mode: generate apps and presentations

> Write a prompt and watch Portals stream a complete app, presentation, or storyboard into a live preview viewport across mobile, tablet, and desktop sizes.

Compose mode is where you turn a prompt — or an artboard from Design mode — into a fully rendered output. You write what you want, choose the generation type, and watch the result stream into a real-time preview viewport as it is built. You can refine the output iteratively, switch between layout sizes, and export when ready.

## The generation viewport

The viewport is a live preview window in the center of the screen. As generation runs, content streams into the viewport in real time — you can see the structure appear and fill in rather than waiting for a completed result.

The viewport toolbar above the preview gives you controls for zoom, layout mode, and generation actions.

<Note>
  If you are coming from Design mode, you can send an artboard here using the **Generate** button in the Design mode toolbar. The AI uses your artboard screenshot as a visual reference. See [Design-to-Build](/workflows/design-to-build) for the full workflow.
</Note>

## Writing prompts

Type your prompt in the input bar at the bottom of the screen. Be as specific as you need — describe the content, the structure, and any style requirements.

<AccordionGroup>
  <Accordion title="App prompts">
    Describe the application's purpose and key screens. Example: "A project tracker with a Kanban board, a task detail drawer, and a team member sidebar. Use a dark theme."
  </Accordion>

  <Accordion title="Slides prompts">
    Describe the topic, number of slides, and any structure you want. Example: "A ten-slide investor deck for a B2B SaaS product. Include a problem slide, solution, market size, traction, and team."
  </Accordion>

  <Accordion title="Storyboard prompts">
    Describe the narrative sequence. Example: "A five-frame storyboard showing a user onboarding flow for a mobile finance app, from download to first transaction."
  </Accordion>
</AccordionGroup>

## Generation modes

Compose mode supports three generation types. Select the one you want from the mode tabs at the top of the input bar before generating.

<Tabs>
  <Tab title="Build (apps)">
    Generates an interactive application. The output renders as a live HTML/CSS/JS preview in the viewport. You can click through the app, scroll, and interact with elements as you would in a browser. Use this for dashboards, tools, landing pages, and functional prototypes.
  </Tab>

  <Tab title="Slides (presentations)">
    Generates a slide deck with individual slides laid out in sequence. You can navigate between slides in the viewport. A template carousel lets you choose a visual style before generating. Use this for pitch decks, reports, and presentations.
  </Tab>

  <Tab title="Storyboard">
    Generates a sequence of frames depicting a narrative or user flow. Each frame is a discrete scene. Use this for UX flows, video pre-production, and product walkthroughs.
  </Tab>
</Tabs>

## Layout modes

The layout mode selector in the viewport toolbar lets you preview and generate output at different screen sizes.

| Mode    | Approximate width     |
| ------- | --------------------- |
| Mini    | Compact, widget-sized |
| Mobile  | \~375 px              |
| Tablet  | \~768 px              |
| Desktop | \~1440 px             |

Switching layout mode after generation re-renders the preview at the new size. You can also set a layout mode before generating to direct the AI to target a specific form factor.

## Streaming generation and real-time preview

Generation in Compose mode is streaming — the AI sends output incrementally and the viewport renders each chunk as it arrives. This means you can:

* **See structure early**: The overall layout appears before content is finished, letting you catch major issues quickly.
* **Stop mid-generation**: If the output is clearly going in the wrong direction, click **Stop** in the toolbar to halt generation and start a new prompt.
* **Iterate on the result**: After generation completes, type a follow-up prompt to refine specific parts — for example, "Change the color scheme to green" or "Add a pricing section after the hero."

<Tip>
  Short, focused follow-up prompts produce more predictable edits than rewriting the entire prompt. Start broad, then refine incrementally.
</Tip>

## Design System integration

If you have a design system connected in Design mode, Compose mode will use its color tokens, typography, and component styles when generating. Click the **Design System** button in the toolbar to review or update the connected system before running a generation.