Build your first runnable app with AI

This tutorial starts with a truly blank project. You create the project shell, review the AI changes, and run the acceptance check. AI creates the first operator page and its localized text.

When you finish, you will have a runnable app named “Packaging Workstation.” Its runtime page shows the workstation name, simulation mode, current status, and package count, but it does not control any equipment yet.

What you will accomplish

• Create a blank project in App Hub
• Ask AI to create and validate the first .qxpage
• Understand exactly which resources AI changed
• Set the page as Home yourself
• Start the app and accept it in the runtime

Three concepts are enough for now

Concept	What you need to know now
App	An independent Theseus project containing pages, objects, graphs, and configuration.
Page	An operator-facing HMI screen stored as a .qxpage file.
Widget	A visible page element such as a title, status label, number, or button.

AI Command Center can change only the app currently open in the editor. It cannot create, import, or register an app in App Hub, so you must complete the first step.

Before you start

• Use the Theseus desktop app. App creation and AI authoring tools are not available in the runtime-only browser.
• Make sure the AI input can select a model. If no model is available, complete AI provider setup first.
• Prepare and select an empty project directory for the workspace.

Step 1: Create Packaging Workstation

1. In App Hub, select Create.
2. Select Blank app.
3. Enter Packaging Workstation as the app name.
4. Under Workspace path, select the empty project directory you prepared. Do not leave the field blank or choose a directory that already contains files.
5. Select Save. Theseus opens the new app in the editor.

A blank app contains only the base configuration. An empty Resources → Pages section is expected.

Step 2: Give AI a bounded task

Select the AI icon in the title bar, or press Cmd+I on macOS or Ctrl+I on Windows and Linux. Start a new conversation, type @ in the input, select the qxpage skill, and paste this prompt:

Goal: Create the first runnable operator home page for the current Packaging Workstation app.

Page content:
- The title “Packaging Workstation”
- A clearly visible “Simulation mode” label
- A “Not started” status
- A package count of 0
- A clear, restrained layout that operators can scan quickly

Scope:
- Add pages/packaging-station.qxpage
- Add English and Simplified Chinese translations for visible page text to the current app's i18n.json
- Do not change manifest.json, objects.json, variables.json, graphs, custom C#, PLC, Pulsar, or Safety

Requirements:
- Use native controls supported by the current editor and keep the structure inspectable in the Properties panel
- Do not create physical-device actions or controls that appear to start real equipment
- Validate the page and i18n.json when finished
- Report the changed files, the main widgets, and the validation result

The prompt states the outcome, scope, exclusions, and acceptance evidence. Use the same structure for future engineering requests.

Main project output for this tutorial

Before sending the task, open Git or Task details and note any changes already present in the workspace. Task details shows the entire current workspace, not a change list owned exclusively by this AI task.

The main project output for this tutorial is:

• pages/packaging-station.qxpage
• i18n.json

AI may read other configuration to understand the app. After the conversation, the auto-managed section of AGENTS.md may also record stable design information. When the task finishes, open Task details in full-screen AI Command Center and compare its file list with the baseline you recorded.

If you see objects.json, a .qxgraph, a .cs file, pulsar.json, or a PLC file, do not run the app yet. Ask AI to explain where each change came from. Revert an item only after confirming that this task created it and that it is out of scope. Never delete or overwrite a pre-existing, unknown, or another person's change.

Step 3: Review the result in the editor

After AI saves the files, Resources refreshes automatically. Check the result in this order:

1. Confirm that packaging-station appears under Resources → Pages.
2. Open the page and confirm that the canvas contains the title, simulation mode, status, and count.
3. Select a widget and confirm that the Properties panel shows understandable IDs and content fields.
4. Open Problems and confirm that the page and i18n.json have no errors.
5. Compare the AI file summary with what the editor shows.

If you had already opened and edited the same page before AI changed it, the editor preserves your dirty draft and reports a disk conflict. Decide which version to keep before saving anything over the other version.

Your manual adjustment: Set the home page

AI authoring tools do not own app creation or registration metadata. Make this small but important decision yourself:

1. Right-click packaging-station under Resources → Pages.
2. Select Set as Home Page.
3. Confirm that a gray Home marker appears beside the page.

The home page controls what Open runtime in App Hub and Player will open. Theseus does not guess the first page when no home page is configured.

Step 4: Start and accept the app

1. Make sure the page is saved and its tab no longer shows a dirty marker.
2. Select Start in the title-bar runtime controls.
3. Wait for the status to become Running.
4. Open the app menu in the upper-left corner and select Return to App Hub.
5. Select Open runtime on the Packaging Workstation card.

The result passes when all of these are true:

• The runtime opens the packaging-station home page directly.
• The title, simulation mode, Not started status, and count 0 are visible.
• There are no real-equipment controls.
• Refreshing the runtime page loads it successfully again.

Safety boundary

warning

This tutorial creates a static simulation page only. Do not replace “Not started” with real equipment status, and do not let AI guess PLC addresses, axes, I/O, cameras, or interlock meaning. Engineers must provide the physical equipment and process semantics before object or graph design begins.

A page that looks correct does not prove that equipment logic is correct. Before running, verify that AI did not add hidden actions or out-of-scope files.

Recovery guide

Symptom	Recovery
No model is available	Open AI provider settings, complete authentication, or refresh the model list.
The page does not appear under Pages	Check whether the file exists in Files. Resolve any unsaved conflict, then use the current tab's refresh action.
Problems reports a page error	Mention pages/packaging-station.qxpage with @ and ask AI to fix only the current diagnostics without adding features. Recheck Problems.
Open runtime says no home page is configured	Return to Resources, right-click the page, and select Set as Home Page.
AI appears to have changed objects, graphs, or scripts	Do not start. Compare with the pre-task baseline and ask AI to explain. Revert only out-of-scope changes confirmed to come from this task; preserve pre-existing and unknown changes.

Next

In the next tutorial, you will add page variables, buttons, and Page Methods, then make one change yourself: Page variables, buttons, and Page Methods.