Build your first AI-assisted app in 15 minutes
This tutorial builds a “Packaging Workstation” status page without connecting physical equipment. You will complete the whole loop: create the app yourself → let AI modify the current project → inspect the result → Start → open the runtime page.
What you will have
The runtime page should contain:
- A “Packaging Workstation” title
- A “Simulation mode” label
- Status “Not started” and package count 0
- A clear industrial dashboard layout in the active theme
This lesson creates only a page. It does not create physical devices, control IO, or orchestrate a production process.
Step 1: Create the app
AI authoring tools are scoped to the current app. They do not create, import, or register apps, so you own the first step.
- Select Create in App Hub.
- Select Blank app.
- Enter
Packaging Workstationas the name. - Select an empty project directory under Workspace path.
- Leave Qixin code hosting disabled for now, then confirm.
Theseus no longer creates projects in a default app directory; the empty directory you selected becomes this app's workspace. Theseus then opens the editor. A blank app has no Page yet, so an empty Resources → Pages section is expected.
Step 2: Open AI Command Center
- Select the AI icon in the editor navbar, or press
Cmd/Ctrl+I. - If no model is available, follow the prompt to complete AI settings first.
- Start a new conversation.
Step 3: Give AI a bounded task
Before sending, note the workspace changes already shown in Git or Task details. Task details shows the whole workspace, not a change list owned exclusively by this task. Then copy this prompt:
Outcome: Create `pages/packaging-station.qxpage` in the current app as a Packaging Workstation status page.
Scope: Add only this Page and any required app i18n text. Do not create Objects, Graphs, Queries, or custom C# code, and do not change manifest.json.
Content:
- Title: “Packaging Workstation”
- A clear “Simulation mode” label
- Status “Not started”
- Package count 0
- A clear, compact industrial dashboard layout
Acceptance:
- First tell me which resources you plan to change
- Run page diagnostics after the edit
- Tell me where to inspect the title, mode, status, and count in the editor
Review the impact statement before AI proceeds. If it plans to create device objects, a Graph, or scripts, ask it to stay within this lesson's scope. When it finishes, compare the file list with your baseline and act only on out-of-scope changes confirmed to come from this task.
Step 4: Inspect the actual changes
AI completion is not tutorial completion. Verify the project in this order:
- Open the new
packaging-stationPage under Resources → Pages. - Confirm that the central workspace shows the title, simulation mode, status, and count.
- Select each widget and inspect its text, hierarchy, and layout in the property panel.
- Open Problems and confirm that the page has no errors.
- If AI used i18n, open Settings → I18n and confirm that both Chinese and English values exist.
If the editor still shows older content, first check for an unsaved draft or a disk conflict in the open tab. Do not immediately ask AI to overwrite the file again.
Step 5: Set the home page yourself
Right-click packaging-station under Resources → Pages, select Set as home page, and confirm that the home-page marker appears beside the Page.
AI created normal project assets that remain visible and editable, but choosing the application entry point is a product decision that you confirm yourself in this lesson.
Step 6: Run and open the runtime page
- Select Start in the editor toolbar.
- Wait for the state to become Running.
- Return to App Hub and select Open runtime page on the app card.
The runtime page should show “Packaging Workstation,” “Simulation mode,” “Not started,” and count 0, with no physical-device control.
Acceptance checklist
- The main project outputs are only the Page and optional i18n; any auto-managed
AGENTS.mdupdate was reviewed separately - Problems contains no page error
- The page is saved and selected as the home page
- The app reaches the Running state
- Runtime content matches the editor
- No unreviewed equipment action was created
If something goes wrong
| Symptom | Check first |
|---|---|
| No AI model is available | Configure and use AI Command Center |
| The page does not open or Problems reports an error | Attach the current page with @, include the exact error, and ask AI to diagnose before editing |
| Run fails | Open Console and Problems, then follow Build and run |
| The runtime page says no home page is configured | Set the current page as the home page under Resources → Pages |
| Runtime still shows old content | Confirm that the page is saved; Graph or custom-code changes also require a new Build or Run |
Next step
Your result now matches lesson 1 of the complete tutorial. Continue directly with Page variables, buttons, and Page Methods to add safe interaction. If you want to repeat the full exercise from a blank app, start with complete tutorial lesson 1.