Skip to main content
Exports give you files. Promote to app gives you a living app. The selected frames become real React components in a Vite + React + Tailwind project, deployed to vibeflow.build (or your custom domain), with the same editor and the same agent you’d use on any UI project. This is the “ship it” path.

​
When to use it

The frames stop being canvas artboards and start being a deployable surface you can refine, deploy, and update.

​
How it works

1

Select frames

Pick the frames you want to ship. One frame for a single landing page, multiple frames for a multi-page app.
2

Open Add to app

Right sidebar → Add to app (or right-click → Add to app).
3

Pick a target

Two options:
  • New project. Creates a fresh UI project (costs 1 credit). The agent scaffolds a Vite + React + Tailwind project and drops your frames in as components.
  • Existing project. Merges into a UI project you already have in this org. Useful when you’ve been iterating on something and want to add a new page.
4

Wait for the merge

The client converts each selected frame’s HTML into React + Tailwind, packages the file tree, and writes it into the target project’s storage. A Daytona sandbox picks it up and hot-reloads.
5

Open the UI editor

You land in the UI editor at /project/:id with your frames as live pages. Same chat-driven workflow, same export options, plus deploy.

​
What lands in the project

The output project is a standard, editable Vite + React app. Nothing exotic. You can git clone it, run it locally, deploy it elsewhere.

​
Connected apps

Every promote creates a link between the source frames and the target project. The canvas right sidebar surfaces this under Connected apps with sync state per link:
  • In sync. The project has the latest version of every promoted frame.
  • Stale. You’ve edited a frame on the canvas since the last promote. Re-promote to push the update.
  • Never synced. The link exists but no merge has happened yet.
Re-promote always picks the same target by default, so the update path is one click.

​
Deploying

Promote does not deploy on its own. After promoting, the UI editor has a Deploy button in the top bar. Click it and the project ships to:
  • your-project.vibeflow.build by default
  • A custom domain you’ve attached at the project level
Subsequent deploys replace the previous one at the same URL. Your shareable link is stable. For the deploy mechanics, the deploy is a UI-product feature. The full UI docs at docs.vibeflow.ai cover deploy, publishing, custom domains, and rollback.

​
A few honest constraints

The target is a static React + Vite + Tailwind project. No backend, no database, no auth. If you need server logic, add it after promote, in the UI editor.
Most frames convert one-to-one. A frame that uses obscure CSS (@container queries, :has selectors, mask-composite) may need a follow-up touch in the UI editor. Tell the agent in the UI editor “clean this up” and it will normalize it.
The source frames stay on the canvas. The project is a copy. If you keep editing the canvas, the project is “stale” until you re-promote.

​
Next

MCP overview

Trigger canvas runs and promotes from your editor.