Orion OrionBrowserManual
中文EN

Tutorial 1: Build an interface with AI (recommended)

Describe the interface you want to an AI agent: it writes the web page and builds it, and the Blueprint or C++ on the Unreal side can be handed to it as well. The four steps below get you started, and step 2 can be skipped.

On this page
  1. Download the dependencies, open WebUIStudioyouthe toolbar button; the first time, click Download in the window that opens, then add app packages, an AI desktop app, Node.js
  2. A UI style library first (optional)you chooseAI writesonly for large projects with many interfaces
  3. Create the interface with a promptyou describeAI writes and buildswhat it shows, what the player can do, Blueprint or C++ on the Unreal side
  4. Add soundsyou name the soundsor the AI adds themconfigure them in Blueprint, or ask the AI in a prompt
Figure 1Four steps to get started, and step 2 can be skipped. Wiring and code are not in this tutorial; Tutorial 3 has them when you need them.

Step 1: Download the dependencies and open WebUIStudio

  1. Complete installation and enable the plugin in the editor.
  2. Click the WebUIStudio button on the Level Editor toolbar. The first time, the OrionBrowser Dependencies window opens: click Download, then Open WebUIStudio when it has finished.
  3. From then on, the button opens WebUIStudio directly with the current project.
Figure 2The main toolbar of Unreal's level editor. The outlined button is WebUIStudio, right after the Add, Blueprint and Cinematics drop-downs. Until the dependencies have been downloaded, clicking it opens the OrionBrowser Dependencies window first.
The first click on the WebUIStudio button: both files are missing
After Download: the current file, the bytes transferred and the progress
Downloaded and verified: click Open WebUIStudio
Figure 3The OrionBrowser Dependencies window: missing, downloading, ready.

Then provide these three things:

Needed How to provide it
App packages When they are missing, Studio shows a banner: click "Install environment"
The Codex or Claude desktop app Install one of them yourself and sign in. Studio hands your request to the AI through it
Node.js 22 or a newer LTS release Install it yourself; the AI needs it to build the page

Keep the plugin in the project's Plugins/OrionBrowser: the pages the AI writes refer to the plugin there.

Step 2 (optional): Make a UI style library first

Do this first in a large project with many interfaces: settle colours, type, spacing and the look of the controls once, and every later interface follows it, which keeps the style consistent. Skip it for one or two interfaces.

Send the prompt below to the AI (step 3 shows how), with your own game and the feeling you want:

Say to the agent
Make a UI style library for this game. Every OrionBrowser interface will follow it from now on.
Game: third-person sci-fi survival, cold and dark imagery. Feeling: restrained, hard-edged, few words, interfaces sit along the edges.
Platform: PC, usable with keyboard and mouse and with a gamepad. Design resolution 1920×1080. Languages: English and Simplified Chinese.

Deliver three things:
1. Docs/UI/ui-style.md: the style rules and a checklist to run before delivery.
2. Content/UI/WebUI/Shared/src/game-ui/: design tokens (colours, sizes, spacing, durations) and control styles shared by all interfaces.
3. Tools/WebUI/UIStyleGuide: a development-only interface showing colours, type, every button state, a sample panel and a HUD strip.
Give me 3 clearly different directions to choose from first, and lock the chosen one afterwards.

When the AI is done, UIStyleGuide appears in Studio's left rail. Look through its pages, choose a direction and say what to change (for example "take direction B, make the primary colour a warmer orange, no rounded corners"). From then on, add "follow Docs/UI/ui-style.md" to your prompts.

Step 3: Create the interface with a prompt

Write the interface down as a short description: what it shows, what the player can do, and whether the Unreal side is Blueprint or C++. Here is the settings panel as an example to adapt:

Say to the agent
Build a settings panel named SettingsPanel.
It shows: volume (0–100), quality (low / medium / high), language (English / 简体中文).
The player can: change the volume, choose the quality, restore defaults, close the panel.
The Unreal side is Blueprint (or write: C++), and you do that part too: host the interface, receive and validate these actions, send the state to the interface.
Build when you are done, and tell me which steps are left for me in the editor and what you did not verify.

When you are unsure, ask for a plan first: turn on "Plan mode" in Studio, or end the description with "give me a plan first, change no files".

  1. Click "New app" in the first row of the left rail.
  2. Enter SettingsPanel as "App name" and paste the description above into "Description".
  3. Choose Codex or Claude and click "Send to …".

You write only the request; Studio tells the AI which rules to read. When it is done, the new app appears in the left rail.

Figure 4The WebUIStudio window (dark appearance) with the finished SettingsPanel open. Three areas matter for this step: ② the left rail, whose first row is "New app" and which also lists the finished apps; ④ the stage, showing the real page; ⑥ the right panel, where you write a request and send it. Click the picture to enlarge it.

In Codex, Claude or another AI tool

Open the project root (the folder with the .uproject) in it, and put one line in front of the description:

Say to the agent
Read Plugins/OrionBrowser/Skills/orion-webui-creation/SKILL.en.md completely first, then do the following by its rules.

You can also click "Copy prompt" in Studio's "New app" sheet and paste the complete prompt into any AI tool.

Who does the Unreal side

You chose The AI does May be left to you
C++ Writes and builds the page; writes the C++ class that hosts the interface Compiling the project; creating assets in the editor by the steps it lists
Blueprint Writes and builds the page; with an editor automation tool, also creates the assets and connects the nodes Without such a tool, it lists the steps for you to do in the editor

Do the steps left to you with Tutorial 3. Never let an AI edit a .uasset or .umap file as text or bytes.

Look at the result and ask for changes

  • In Studio. Click the new app in the left rail and look at each view. To change something, click it with the "Element" tool in the tool dock and write what should change; then choose the receiver in the right panel and click "Send annotations"; see Tutorial 2.
  • In Unreal. Press Play and carry out every action for real. When something is wrong, see Troubleshooting in Tutorial 3.
Figure 5The annotation popover after clicking Restore defaults with the Element tool: write what should change here and press Enter to save. The slider icon on the left opens the property adjustments.

Step 4: Add sounds

Hover and click sounds are played by Unreal; you only say which control uses which sound. Choose one of two ways.

Configure it in Blueprint yourself. Add a sound policy variable to the Widget Blueprint that hosts the interface, fill in the default hover and click sounds, and name individual controls by control Id where needed; see Tutorial 3: Control sounds. Click a control with Studio's "Element" tool to see its Id.

Figure 6Default value of the ControlSounds variable (Default Value in Details, with the variable selected in My Blueprint). Default Sounds apply to every control; here they are S_StationHover and S_StationClick from the plugin's sample. Control Overrides replace them per control Id. The entry shown silences the click of settings-close: Override Click Sound is ticked and Enabled of the Click Sound below it is cleared.

Have the AI add it. Give it the sound assets and what you want, with the asset paths of your own project:

Say to the agent
Add control sounds to SettingsPanel, on the Unreal side in the same way as the previous step.
Hover uses /Game/Audio/UI/SC_Hover, click uses /Game/Audio/UI/SC_Click.
The click sound of the Restore defaults button (settings-reset) becomes /Game/Audio/UI/SC_Confirm; the volume slider has no hover sound.
The page must not play hover or click sounds itself.

Sounds with a meaning in the game, such as "saved", are in Tutorial 3: Sounds with a business meaning.

Next

Type two or more characters

Contact us

Questions about the plugin, purchases or partnerships? Send us an email.