Skip to main content

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.

  1. Select Create in App Hub.
  2. Select Blank app.
  3. Enter Packaging Workstation as the name.
  4. Select an empty project directory under Workspace path.
  5. 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

  1. Select the AI icon in the editor navbar, or press Cmd/Ctrl+I.
  2. If no model is available, follow the prompt to complete AI settings first.
  3. 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:

  1. Open the new packaging-station Page under Resources → Pages.
  2. Confirm that the central workspace shows the title, simulation mode, status, and count.
  3. Select each widget and inspect its text, hierarchy, and layout in the property panel.
  4. Open Problems and confirm that the page has no errors.
  5. 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

  1. Select Start in the editor toolbar.
  2. Wait for the state to become Running.
  3. 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.md update 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

SymptomCheck first
No AI model is availableConfigure and use AI Command Center
The page does not open or Problems reports an errorAttach the current page with @, include the exact error, and ask AI to diagnose before editing
Run failsOpen Console and Problems, then follow Build and run
The runtime page says no home page is configuredSet the current page as the home page under Resources → Pages
Runtime still shows old contentConfirm 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.