The App Editor
The editor is where you build an app. It splits the screen into two: a panel on the left for the AI chat or version history, and a panel on the right for the live preview or the code editor. A toolbar across the top carries the app name and status, the panel toggles, and the GitHub and Publish actions.
You can build entirely through conversation, drop into the code editor for precise changes, or mix the two. Every change — whether the AI made it or you typed it — is committed to the app's git history, so you can always look back or roll back.
Layout at a glance
| Area | What it does |
|---|---|
| Top toolbar | App name and session status badge, App settings (gear), version-history and sidebar toggles, the Preview / Code tab switch, GitHub controls, and the Publish button. |
| Left panel | Chat with the AI agent, or Version history (the commit timeline). The divider between the panels is draggable to resize. |
| Right panel | Preview (the running app in an iframe) or Code (the file tree plus editor). A third Changes view shows a commit's diff when opened from the timeline. |
The status badge reflects the session state: CREATING / PROVISIONING while the sandbox spins up, READY or ACTIVE once it's running, IDLE after a period of inactivity, and TERMINATED when the sandbox has been reaped. A terminated session restarts automatically when you reopen it.
Editor sessions are ephemeral. The sandbox is reaped after a period of inactivity (by default 30 minutes idle, and 8 hours maximum lifetime — both configurable per environment). Uncommitted work is auto-committed and pushed before termination, and reopening the app restarts the session from its last snapshot, so you don't lose progress.
Building with the AI
Type what you want in the chat composer and send it. The AI agent works the way a developer would: it asks a couple of clarifying questions, proposes a short plan, and — once you confirm — writes the code. As it works you see its steps inline:
- Thinking — the agent's reasoning before it acts.
- Tool steps — each action it takes, such as reading a file, writing a file, running a command, or checking the preview for errors.
The agent has a fixed set of tools scoped to the sandbox workspace:
| Tool | What it does |
|---|---|
| View file | Reads a file, optionally a line range. |
| Write file | Creates a new file or fully overwrites one. |
| Edit file | Replaces an exact substring within a file — the preferred way to make targeted changes. |
| List directory | Lists files and subdirectories at a path. |
| Run command | Runs a shell command in the workspace (for example, to install a dependency). Destructive and container-escape commands are blocked. |
| Check errors | Reads runtime errors captured from the preview — browser errors, failed network responses, and server-side handler errors — so the agent can verify its work and fix problems on its own. |
After every turn that changes files, the agent checks the preview for runtime errors and fixes anything it finds before reporting back. When the turn finishes, the file tree and editor refresh and the preview reloads once so you see the result.
The agent only edits files inside your app's workspace. Platform-critical files — the build config, auth middleware, the database connector, the AI Employee client — are protected and can't be overwritten. To add a dependency, ask the AI to install it; don't hand-edit package.json.
You can stop a response mid-stream, and only one chat can run at a time per session. Your full conversation is saved and reloads when you reopen the app.
Editing code directly
Switch the right panel to Code to open the in-browser editor. It has a Files tree on the left and a Monaco editor (the same engine behind VS Code) with syntax highlighting and multiple open tabs.
From the file tree you can:
- Open a file by selecting it.
- Create a new file, rename or move a file, and delete a file. Each of these auto-commits.
- Search files by name, and search within code.
When you edit a file, a save bar appears. Save commits your edits and reloads the preview; Discard reverts all uncommitted changes. You can also Download codebase to get the whole workspace as a .tar.gz archive.
The same protected-file rule applies in the editor as in chat: attempting to write or delete an infrastructure file is blocked. Writes, creates, deletes, and renames all commit automatically, so your manual edits land in the version history alongside the AI's.
The live preview
The Preview tab embeds the running app in an iframe so you see exactly what your users will. The preview toolbar gives you:
- Device sizes — desktop, tablet (768px), and mobile (375px) widths to check responsive layouts.
- A URL bar with a route dropdown — the builder discovers the client-side routes declared in your app's source and lists them, so you can jump between pages (for example
/,/about,/post/:id). The route you're currently viewing stays selectable too. - Open in new tab — opens the current route in a standalone browser tab.
- Refresh — reloads the preview iframe.
- Fullscreen — expands the preview to fill the screen.
The preview is the live dev server, not a build — changes appear within a second or two of a save or an AI edit.
Configuration and bindings
An app declares the AI Employees and config values it needs as named slots in its catalog.yaml, but the actual values live in the platform, bound per tenant. You manage them from the app's detail page (open the app's name from the home page, rather than "Open editor") on the Configuration tab.
Each slot has a kind:
| Kind | UI | What you bind |
|---|---|---|
AI Employee (aie) | AI Employee picker | A workflow in your tenant. The slot is injected as a pod environment variable at publish time. |
Text (string) | Text input | A free-text value. |
Number (number) | Number input | A numeric value. |
Toggle (boolean) | Toggle | True or false. |
Secret (secret) | Masked, read-only | An encrypted value stored in the cluster and emitted to the pod as a secret reference, never returned to the UI. |
Slot names are also the environment-variable names the app reads at runtime: uppercase letters, digits, and underscores, starting with a letter (for example AIE_RESUME_PARSER, API_BASE_URL). You can Add slot manually, or Import catalog.yaml by pasting your app's catalog file to seed the schema (existing values are preserved; new slots are added empty). Download catalog.yaml exports the slot schema — without values — so you can clone it into another tenant or environment.
Secret slots come from catalog.yaml, not the Add-slot form. The Add slot modal only creates AI Employee, Text, Number, and Toggle slots. A secret slot must be declared in your app's catalog.yaml (kind: secret) and seeded by importing it. Setting a secret's value from the UI isn't available yet — set it directly on the deployed app pod's Kubernetes Secret for now.
Every declared AI Employee slot must be bound before you can publish. If a slot has no binding, publish is blocked and the builder opens a modal listing the unbound slots so you can pick a workflow for each and republish. Likewise, a required typed slot with no value blocks publish.
Slot edits save immediately, but they don't change a running app on their own: the preview keeps its current values until you restart the session, and a deployed app keeps its values until you publish again. When configuration drifts from what's live, the Configuration tab surfaces a Republish prompt — see Republishing after a config change.
App settings
The gear icon in the editor (and the overflow menu on the home page) opens App settings, where you can:
- Rename the app's display name under General.
- See and change the public URL slug under URL & access — see The app URL. A Custom domain field is shown here marked "Coming soon."
- See the connected Source (GitHub repo), if any.
- Delete app from the Danger zone. This permanently removes the deployment, database, sessions, and preview links and cannot be undone. Only the app's owner or a tenant admin can delete an app; for everyone else the button is disabled with a tooltip.
GitHub sync
An app's code lives in a private git repository. From the editor toolbar you can Connect GitHub to create that repo under the Ema organization and push your full commit history to it. Once connected, the toolbar shows a button to open the repo and a Pull from GitHub action.
- Connect creates a private repo (for template-created apps) or, for imported apps, reconnects to the source repository and pushes back there.
- Pull fetches the connected repo's default branch and fast-forwards your sandbox onto it. Uncommitted sandbox edits are auto-committed first so nothing is lost. If the sandbox and the remote have diverged in a way that can't fast-forward, the pull is refused with a merge-conflict message; reconcile the histories locally and push back.
Pushes from the sandbox to GitHub happen automatically after AI turns and edits — the connect and pull controls are the manual half of the two-way sync. The GitHub access token never enters the sandbox; the builder service does the network-and-auth-sensitive git work itself.
The app database
Each app gets its own MongoDB database. You can inspect it from the app detail page's Database tab, which lists collections and lets you run read queries (find, findOne, aggregate) and write operations (insertOne, insertMany, updateOne, deleteOne, deleteMany). A scope toggle switches between the Preview database (your editor session) and the Published database (the live app); draft apps default to preview, published apps to published. If the app isn't running, the tab prompts you to start it first.
What's next
- Deploying and Versioning — publish your app and use the commit timeline to roll back.
- App Permissions — control who can open and manage the app.