Tutorial 2: WebUIStudio

Related: Tutorial 1: Build an interface with AI, Tutorial 4: Write the interface by hand.

Start

Download the dependencies before the first use. Click the WebUIStudio button on the Level Editor toolbar; when a dependency is missing or does not match the plugin version, the OrionBrowser Dependencies window opens. Click Download, and when it has finished click Open WebUIStudio; see Installation. Once the dependencies are in place, start Studio in either of these ways:

• From Unreal (recommended): click the WebUIStudio button on the Level Editor's main toolbar. Studio opens the current project and trusts it.
• Directly: double-click Binaries/Win64/WebUIStudio.exe in the plugin folder and choose a .uproject. A project opened this way needs one click on "Trust project".

"Local data" in Settings shows how much space Studio's data takes and lets you clean it up.

Trust and environment

Until a project is trusted, Studio only lists its interfaces. After you click "Trust project" on the banner, it runs previews, installs dependencies and sends requests. Do not trust a project of unknown origin.

Studio brings its own Node.js and npm. When an app's packages are missing, click "Install environment" on the banner. Sending annotations and new-app requests needs the Codex or Claude desktop app, installed and signed in; isolated drafts also need their command-line tools and Git. Press Ctrl+K and type "Check the environment…" to check again.

The window

Open an interface

1. Click an app in the left rail. Your project's apps are under "Production"; the plugin's Showcase and Sample are under "Plugin samples".
2. For an app with several pages or views, expand the arrow at the end of its row and click a page or a view.
3. Choose "Source" in the context bar:

After adding or moving an app, click "Rescan project" in the left rail.

The page lays out at the chosen "Resolution". Drag the grip outside the bottom-right corner of the preview to change the aspect ratio, and double-click it to return to 1920 × 1080. For zooming and moving, see Shortcuts; "Capture and copy" in the tool dock puts a screenshot of the preview on the clipboard.

In the preview, business actions are not executed, sounds are not played, and a Native Surface, runtime images and Unreal assets appear as placeholders; when fallback fonts are used, the context bar says "Fallback fonts and assets". Blueprint or C++ logic, real input, sounds, performance and readability over the level must be checked in Unreal.

Preview backdrop

Most of the page is transparent. "Preview backdrop" in the tool dock decides what shows where the page is transparent: the transparency grid (default), white, black, grey, a colour of your choice, or a picture. With a screenshot of your game as the backdrop you can see whether text is readable over it. Screenshots carry the same backdrop.

Transparency grid (default)

White

Black

Picture (a stand-in here)

Views: webui-preview.json

A page often has several appearances: another language, empty data, an open dialog. Put a webui-preview.json in the app root and register them as views, and each can be opened from the left rail.

For example, the settings panel the tutorials share:

{
	"schemaVersion": 1,
	"views": [
		{ "id": "default", "route": "", "title": "Default" },
		{ "id": "chinese", "route": "", "title": "Chinese", "patch": { "culture": "zh-Hans" } },
		{ "id": "muted", "route": "", "title": "Volume 0", "patch": { "volume": 0 } }
	]
}

"default" · no patch

"chinese" · patch: { "culture": "zh-Hans" }

"muted" · patch: { "volume": 0 }

A view's data comes from the app's preview state: an export below src whose name contains both preview and state (for example createSettingsPanelPreviewState), either a constant or a function without required parameters; or name it with the state field. Without a preview state the page opens on an empty state, and "Discovery report" states the reason.

The first view of a route is the default one. The supplied Showcase's webui-preview.json can serve as a reference.

Scenarios

"Scenario" in the context bar defaults to "Live preview from project source", one per view. When you need a special state that the source does not provide, open "Scenario" at the bottom of the left rail, edit the JSON (initial state, answer rules for actions, events on a timeline) and click "Validate and save"; you can then select this custom scenario in the context bar.

Inspect and Log

Inspect tab. Click a control with the Element tool. The right panel shows its control Id, size, source file and line, component chain and matched style rules. "Open in editor" opens the source file with the system's default program.

Log tab. Messages between the page and the host, the page's console output and blocked external requests, newest first, filterable by "All", "Warnings" and "Errors". When the page reports an error or an action is rejected, the Log tab is marked with a red dot.

Inspect tab: the settings-reset control was clicked

Log tab: after Low and Restore defaults were clicked in Browse

Annotate and send to an agent

Studio can hand your change requests to Codex or Claude together with the control's location, screenshots and source line. Requirements: the project is trusted, and the desktop app of that service is installed and signed in.

Annotate

Choose an annotation tool in the tool dock:

A popover appears next to the target:

• Write "What should change here?", press Enter to save, Shift+Enter for a new line, Esc to cancel.
• While the comment is empty, the Element tool moves to the parent or the first child control with ↑ and ↓.
• For a single control you can open "Adjust properties" and change text, colour, font, spacing, size, border and more. These adjustments apply to the preview only and do not change source. They travel with the annotation as target values for the agent.

Saved annotations show a number on the page. In the "Annotations" tab of the right panel you can edit them, "Re-anchor" them and delete them. One batch holds at most 30. After the page or the source changes, an annotation is marked "Needs re-anchoring"; use "Re-anchor" to choose the new target.

While an annotation tool is active, clicks do not reach the page. Switch back to "Browse" to operate the page.

Send

1. Write the overall request for this batch at the bottom of the right panel.
2. Click "Send to" and choose Codex or Claude and the kind. The first three change the current project directly:

3. Adjust if needed: model and reasoning effort, the scope of changes, or "Plan mode" (writes a plan only, changes no files).
4. Click "Send annotations".

Without annotations the button becomes "Send page request", which asks the agent to change the whole page on stage.

The delivery records in the right panel show the state of each one; when the receiver has changed the source, the preview shows the result. "Stop tracking" only ends Studio's wait; it does not stop a task the desktop app has already started.

When you send to Claude, Studio registers a few hooks whose statusMessage is Orion WebUI Studio bridge in the project's .claude/settings.json to receive the reply. This file is normally shared through version control, so look at this change before you commit it.

New app

"New app" in the first row of the left rail opens a sheet:

1. Write the "Description": what to build, what it shows, what can be done in it. See Tutorial 1 for how to write it.
2. "App name" is optional: it starts with a capital letter, contains only letters and digits, and must not match an existing app. Left empty, the receiver names the app.
3. Choose Codex or Claude, and a new chat or the Studio chat.
4. Click "Send to …". Or click "Copy prompt" and paste it into any conversation.

When the receiver has finished, the new app appears in the left rail; the receiver lists the steps that remain to be done in the Editor.

Isolated drafts

To see a change before deciding on it, use an isolated draft:

1. Add annotations, choose "Isolated draft" of Codex or Claude under "Send to", and click "Generate isolated draft".
2. Studio lets the command-line tool change a copy of the app, then runs the app's own type check, tests and build.
3. Review the differences in the "Draft" tab. You can preview the draft side by side with the original project.
4. When satisfied, click "Apply to project" (you can "Undo this apply" afterwards), then "Rebuild this app's dist" if needed.

All annotations must belong to the same app and come from the "Source" source. A draft may change only the source files the annotations located, plus shared components and entry or bridge files when you allowed them; only apps below the project's Content/UI/WebUI can take a draft.

Shortcuts

Troubleshooting