Generated banner for Matlab Build App
Generated logo for Matlab Build App

Matlab Build App

MathWorksOfficialCreated by MathWorks

  • Skill
  • Workflow
  • Software development
  • BSD-2-Clause
  • No issues found

From the author

Build MATLAB apps from requirements to working code. Asks discovery questions (or skips them when the path is known), recommends UIFigure or UIHTML architecture, identifies layout archetype (Dashboard, Explorer, Tabbed, Wizard, Canvas), produces an implementation plan, and executes the build. For UIFigure apps, optionally serializes as App Designer (.mlapp or plain-text .m + .xml). Use when a user wants to build a MATLAB app, create a GUI, make an interactive tool, build a uifigure app, build a uihtml app, build an App Designer app, build a .mlapp app, build a plain-text App Designer app, or asks which approach to use. Also use when user describes spatial layout needs: dashboard, control panel, sidebar, tabs, wizard, stepper, canvas, workspace.
— the description by MathWorks

AutoGineer summary

Written by AutoGineer from the skill’s own files, not by the author

This skill provides a structured approach to developing MATLAB applications, guiding users from initial requirements to a fully implemented codebase. It helps determine the optimal architecture (UIFigure or UIHTML) and layout archetype (e.g., Dashboard, Explorer, Wizard) based on the user's specific needs, team expertise, and maintenance requirements. The skill enforces a rigorous planning phase, requiring an implementation plan before any code is written, and supports multiple serialization formats for UIFigure apps, including App Designer (.mlapp) and plain-text (.m + .xml) formats.

What it does

  • Conducts discovery to identify app purpose, maintenance needs, and visual requirements.
  • Recommends the best architecture (UIFigure or UIHTML) and layout archetype.
  • Produces a detailed implementation plan and writes it to a markdown file.
  • Supports building UIFigure apps with optional App Designer serialization.
  • Ensures structural integrity by enforcing grid-based layouts and proper background task handling.
  • Provides a clear, step-by-step build sequence based on internal documentation.

When to use it

  • When you need to build a new MATLAB GUI or interactive tool.
  • When you are unsure whether to use UIFigure or UIHTML for a specific project.
  • When you need to define a clear development plan for a complex MATLAB application.
  • When you want to create an App Designer app using either binary or plain-text formats.

Advantages

  • Ensures consistent, maintainable application architecture.
  • Prevents common pitfalls by enforcing proven layout and background task patterns.
  • Provides clear guidance on choosing between App Designer and programmatic approaches.
  • Facilitates collaboration by requiring a documented implementation plan before coding.

Usage examples

“I need to build a MATLAB dashboard to monitor sensor data. What approach should I take?”
The agent will ask discovery questions about the app's lifespan, team skills, and visual needs, then recommend an architecture and layout archetype before creating a plan.
“Build me a UIHTML app for visualizing experimental results.”
The agent will skip the architecture recommendation, ask for any missing requirements, and proceed to generate an implementation plan for a UIHTML-based app.

Install

Documentation by MathWorks

MATLAB Build App

Determine the best architecture for a MATLAB application, produce an implementation plan grounded in internal references, and execute the build. For UIFigure apps, optionally serialize into an App Designer format.

When to Use This Skill

Use this skill when:

  • User wants to build a MATLAB app, GUI, or interactive tool

  • User asks "how should I build this app?" or "which approach should I use?"

  • User describes an application — with or without specifying an implementation path

  • User mentions: MATLAB app, GUI, uifigure, uihtml, interactive tool, dashboard, visualization app, App Designer, .mlapp, plain-text app

  • User describes spatial layout needs: dashboard, control panel, sidebar, tabs, wizard, stepper, canvas, workspace

  • User has already chosen a path (e.g., "build me a uihtml app") — handle directly

When Not to Use

  • The request is purely about MATLAB computation with no UI component

  • The user is asking about an existing app they want to modify → read references/editing-guide.md

  • The user wants to convert between App Designer formats (e.g., .mlapp to plain-text or vice versa) → tell them to use File > Save As in App Designer. Do NOT attempt the conversion programmatically.

Critical Rules

  • MUST ask discovery questions before recommending a path — unless the user already specified one

  • MUST confirm the path choice with the user before producing the implementation plan

  • MUST produce an implementation plan grounded in internal references before writing any code

  • MUST write the plan to a file (<app-name>-plan.md) in the working directory

  • NEVER recommend a path without understanding the user's constraints (unless path was pre-specified)

  • NEVER apply dark mode, custom colors, or visual themes unless the user explicitly requests them

  • ALWAYS present the recommendation as guidance, not a mandate — the user decides

  • MUST choose archetype based on the user's primary task, not aesthetics

  • NEVER treat two archetypes as equals within one app — one is always the primary container

  • UIFigure app: MUST use uigridlayout for all structural layout — never Position-based sizing

  • UIHTML/web app: MUST use CSS Grid or Flexbox for chrome — no absolute positioning for structural panels

  • The chrome (header, sidebar, tabs, step indicator) MUST remain spatially stable

  • Background execution (any operation taking more than ~1 second) requires a class-structured app and MUST be read up first in references/background-tasks.md — do NOT hand-write parfeval/backgroundPool/DataQueue plumbing from memory. For an App Designer app (.mlapp or plain text) you MUST use the addBackgroundTask verb and NEVER hand-roll the infrastructure or reuse the standalone-programmatic manual wiring. For a standalone programmatic app, use the MVVM structure per that doc. A flat nested-function app that needs background work MUST escalate to one of these.

  • App Designer serialization: MUST read references/app-designer/agent-guide-shared.md (covers ownership models, editing discipline, property rules, quoting) plus the format-specific guide (agent-guide-mlapp.md or agent-guide-plaintext.md) before building. Those docs are the single source of truth; do not attempt to edit app files without reading them first.

Workflow

User request arrives
        │
        ├── Path NOT specified → Full Discovery
        │       │
        │       ▼
        │   Ask Q1-Q4 (purpose, lifespan, polish, team skills)
        │       │
        │       ▼
        │   Identify layout archetype
        │       │
        │       ▼
        │   Recommend UIFigure vs UIHTML based on Q1-Q4
        │       │
        │       ▼
        │   *** STOP: Present recommendation and WAIT for user confirmation ***
        │   (Do NOT produce a plan or read references until user says yes)
        │       │
        │       ▼
        │   Ask Q5 (FINAL): Serialization format? (UIFigure apps only)
        │       │
        │       ├── App Designer → release check, present format choice,
        │       │       continue with UIFigure references + add serialization step
        │       │
        │       └── Standalone programmatic → no extra step
        │       │
        │       ▼
        │   Produce Implementation Plan → write to <app-name>-plan.md
        │       │
        │       ▼
        │   User reviews plan → confirms or adjusts
        │       │
        │       ▼
        │   Begin building (read references per the plan)
        │
        └── Path IS specified
                │
                ├── Serialization explicit (e.g., ".mlapp app", "plain-text app")
                │       → Skip Q5, proceed with stated format
                │       → Ask only missing requirements + archetype if unclear
                │       → Produce Implementation Plan
                │
                ├── Architecture explicit but serialization not stated
                │   (e.g., "build me a uifigure app")
                │       → Still ask Q5 (serialization) before planning
                │       → Ask missing requirements + archetype if unclear
                │       → Produce Implementation Plan
                │
                └── UIHTML or standalone programmatic explicit
                        → Skip Q5 entirely (not applicable)
                        → Ask missing requirements + archetype if unclear
                        → Produce Implementation Plan

Discovery Questions

Ask these conversationally — not as a rigid checklist. Gather requirements and layout intent first; ask the serialization question last, once you understand what the app needs to do.

Core Questions

1. What does the app do and who is it for?

What will this app do? Who will use it?

Listen for archetype signals: "dashboard", "control panel", "step-by-step", "workspace".

2. Is this a quick tool or something you'll maintain over time?

Is this meant to be maintained and evolved, or is it more of a quick, proof-of-concept tool?

  • Maintained → proceed to remaining questions; team skills matter

  • Ephemeral → favor UIHTML app path; can skip team question

3. How polished does the UI need to look?

Are standard MATLAB buttons, sliders, tables, and plots enough? Or do you need custom visuals — branded, animated, or visually richer?

  • Standard controls sufficient → UIFigure app signal

  • Custom visuals needed → UIHTML app signal

4. Who will work on this app going forward?

Will this be maintained by people comfortable only with MATLAB, or by people also comfortable with web technologies?

Only ask for maintained apps.

  • MATLAB-only team → UIFigure app

  • Web-comfortable team → UIHTML app

5. (FINAL) How should this app be saved?

Do you want this app to open and edit inside App Designer, or do you prefer a standalone programmatic file (no App Designer dependency)?

This is a serialization question, not an architecture question. The app's structure (components, layout, callbacks) is designed using UIFigure knowledge regardless of the answer. Q5 only determines how that design is persisted to disk.

  • App Designer → .mlapp or plain-text .m + .xml. Check release (plain-text needs R2026b+). If Q3 indicated custom visuals, note that App Designer constrains visual customization vs UIHTML and confirm.

  • Standalone programmatic → programmatic .m code, no App Designer dependency. MVVM may warrant multiple files; that is decided at build time.

Follow-up Probes (only if path isn't clear)
  • Interaction style: Real-time feedback needed? → slight UIFigure lean

  • Existing work: Existing MATLAB UI code? → UIFigure. Existing web assets? → UIHTML

  • Distribution: May need to work outside MATLAB? → UIHTML

  • Long computations: Will any operation take more than a second? → use a background task (read references/background-tasks.md). Note this requires a class-structured app: App Designer serialization, or MVVM if standalone programmatic. Heavy, long, or one-shot work is ALWAYS a background task, never a timer; a timer fits only scheduled, cheap-per-tick work that must update the UI on the main thread (read references/timers.md).

Path Decision Logic

Two stages: first determine architecture (Q1-Q4), then determine serialization format (Q5).

Stage A — Architecture (from Q1-Q4):

Ephemeral app? → Strong default to UIHTML app

Maintained app? → Weigh signals:

Strong UIFigure signals:
  ✓ Maintained + MATLAB-only team
  ✓ Standard UI components sufficient
  ✓ Tight real-time interaction
  ✓ Existing MATLAB UI code

Strong UIHTML signals:
  ✓ Ephemeral (regardless of team)
  ✓ Maintained + web-skilled team
  ✓ Custom visuals, branded look, animations
  ✓ Existing web assets
  ✓ Future portability outside MATLAB

UIFigure + uihtml accent:
  Mostly standard app but needs one custom visualization panel.

Stage B — Serialization format (Q5, UIFigure apps only):

Q5 = Standalone → programmatic code (no App Designer). Done.

Q5 = App Designer → adds a serialization layer ON TOP of Stage A.
  UIFigure references still apply in full. Serialization is IN ADDITION TO,
  not instead of, the normal UIFigure build.
  → Check release, present format choice (plain text vs .mlapp).
  → If Stage A indicated UIHTML for custom visuals, surface the trade-off:
    App Designer constrains custom visuals — confirm before committing.

Weighting: 1. Architecture (Q1-Q4) 2. Serialization (Q5, applies only to UIFigure)

Paths at a Glance

ArchitectureKey strength
UIFigure appSingle language, any MATLAB dev can maintain
UIHTML appFull visual control, rich interactivity
UIFigure + accentBest of both when you need one custom visual

For UIFigure apps, three serialization formats:

FormatTrade-off
Programmatic .mStandalone, no App Designer dependency
App Designer .mlappBinary, works on any release, opens in App Designer
App Designer plain text .m + .xmlSource-controllable, AI-editable, R2026b+

Layout Archetype

Pick based on the user's primary task:

ArchetypePrimary user taskStructure
DashboardMonitor and compare at a glanceKPI cards + charts + table; read-only
ExplorerAdjust parameters, observe live resultsSidebar controls + live display
TabbedNavigate between independent sectionsTab bar + content panels
WizardComplete a sequential workflowStep indicator + one-step-at-a-time
CanvasCreate, inspect, or edit spatial artifactsCentral workspace + tools

If unclear, ask: "Will users mostly be watching results (Dashboard), tweaking controls (Explorer), switching sections (Tabbed), going through steps (Wizard), or working on a central figure (Canvas)?"

Implementation Plan

After confirming path and archetype, produce a plan and write it to <app-name>-plan.md in the working directory. Present a concise summary inline with the approval request.

Plan Template
**Implementation Plan: [App Name]**

**Architecture:** [UIFigure app / UIHTML app / UIFigure + accent]
**Serialization:** [Programmatic .m / App Designer .mlapp / App Designer plain text]
**Layout:** [Archetype] — [one sentence describing spatial structure]

**Structure:**
- [Major panel/area — spatial description]
- [e.g., "Left sidebar (220px) with date range picker, category filter, refresh button"]
- [e.g., "Main area with line chart showing filtered results"]

**Key behaviors:**
- [User-visible interaction effects]

**Internal references that will be used:**

| Reference | Role in this app |
|-----------|-----------------|
| `references/path/file.md` | [what it provides] |
| ... | ... |

**External skills:**
- `matlab-build-chart` — [role, if applicable]
- `matlab-apply-theme` — [role, if applicable]

**File organization:**
[app directory tree]

**Implementation sequence:**
1. [First reference read] — [what it establishes]
2. [Next reference] — [what it adds]
3. [...]

Each reference pointer carries provenance: [src: references/uifigure/grid-layout.md §Spanning]

Plan Quality Checks

Before presenting:

  • [ ] Every reference listed has a concrete role

  • [ ] Structure uses spatial terms the user can visualize

  • [ ] Behaviors describe user-visible effects

  • [ ] Implementation sequence shows a logical build order

  • [ ] Plan is specific enough for "yes, that's what I want" or "change X"

Reference Router

After plan approval, read the relevant internal references to execute the build.

UIFigure Path
When building...Read
Grid layout, sizing, componentsreferences/uifigure/guide.md
Grid details (spanning, collapse)references/uifigure/grid-layout.md
Panels, tab groups, nested gridsreferences/uifigure/containers.md
Component reference (controls, display)references/uifigure/components.md
Callback patterns, data sharingreferences/uifigure/callbacks.md
Layout recipes (sidebar, form, split)references/uifigure/layout-patterns.md
MVVM architecture (complex apps)references/uifigure/mvvm-guide.md
View binding patternsreferences/uifigure/mvvm-view-binding.md
ViewModel testingreferences/uifigure/mvvm-testing.md
Background execution — concepts + routing (read first)references/background-tasks.md
Background execution — standalone programmatic (MVVM) wiringreferences/uifigure/mvvm-background-tasks.md
Timers — periodic main-thread work (NOT for offloading heavy work)references/timers.md
UIHTML Path
When building...Read
MATLAB-JS bridge, setup(), eventsreferences/uihtml/bridge-guide.md
Communication patterns (4 patterns)references/uihtml/communication-patterns.md
Data type conversionreferences/uihtml/data-types.md
Platform constraintsreferences/uihtml/platform-limitations.md
uihtml creation, hybrid layoutsreferences/uihtml/setup.md
Error handling (both sides)references/uihtml/error-handling.md
JS MVVM architecturereferences/uihtml/mvvm-guide.md
Observable/Computed classesreferences/uihtml/mvvm-observable-classes.md
JS View bindingreferences/uihtml/mvvm-view-binding.md
JS coding patterns, modulesreferences/uihtml/js-coding-guide.md
JS testing & debuggingreferences/uihtml/js-testing-debugging.md
Chart.js setup & patternsreferences/uihtml/charting-guide.md
Chart type selectionreferences/uihtml/chart-type-selection.md
Chart.js initializationreferences/uihtml/chartjs-setup.md
Line & bar chartsreferences/uihtml/line-bar-charts.md
Doughnut & scatter chartsreferences/uihtml/doughnut-scatter-charts.md
Chart data updatesreferences/uihtml/chart-updates.md
Chart ↔ bridge integrationreferences/uihtml/chart-bridge-integration.md
Chart performancereferences/uihtml/chart-performance.md
CSS styling & tokensreferences/uihtml/styling-guide.md
Component CSS (buttons, inputs)references/uihtml/component-styles.md
CSS layout patternsreferences/uihtml/css-layout-patterns.md
Brand design tokensreferences/uihtml/brand-design-tokens.md
Dark modereferences/uihtml/dark-mode.md
External color schemesreferences/uihtml/external-color-schemes.md
App Designer Serialization (UIFigure apps only)

Important: App Designer serialization is an additional step AFTER the normal UIFigure build. You MUST also read the UIFigure path references above (components, grid-layout, callbacks, containers, layout-patterns) to design the app's structure. The serialization references below cover only how to persist that design to disk.

Both formats use the same AppDesignerAgentInterface API via the bundled scripts/ tool; only the file extension passed to create()/open() differs.

Read first (both formats):

When building...Read
Verbs, build sequence, editing, save()/validate()/finalize(), inspect()references/app-designer/agent-guide-shared.md
Background execution — concepts + routing (read first)references/background-tasks.md
Background execution — addBackgroundTask verb referencereferences/app-designer/background-tasks.md

Plain-text (.m + .xml):

When building...Read
Ownership model, .xml authoring, flow, gotchasreferences/app-designer/agent-guide-plaintext.md
classdef structure & block ordering rulesreferences/app-designer/plaintext/classdef-template.md
XML structure and which properties to setreferences/app-designer/plaintext/xml-template.md
Per-component property names, types, defaultsreferences/app-designer/plaintext/property-reference.md
Authoritative XML schemareferences/app-designer/plaintext/matlabAppSchema.xsd

Binary .mlapp:

When building...Read
Build flow, native property values, save()/finalize()references/app-designer/agent-guide-mlapp.md
Editing an Existing App
When editing...Read
Any existing app (determines format, routes to approach)references/editing-guide.md
Archetype References
ArchetypeFile
Dashboardreferences/archetypes/dashboard.md
Explorerreferences/archetypes/explorer.md
Tabbedreferences/archetypes/tabbed.md
Wizardreferences/archetypes/wizard.md
Canvasreferences/archetypes/canvas.md
External Skills (invoked, not read)
  • matlab-build-chart — when the app includes MATLAB plots (UIFigure path or UIFigure+accent)

  • matlab-apply-theme — when the app needs dark mode, brand colors, or custom palettes (UIFigure path)

After Plan Approval

All UIFigure apps (regardless of serialization format)
  1. Read the archetype reference for the spatial skeleton

  2. If MVVM warranted (Explorer, Wizard, Canvas, or complex apps): read the architecture reference

  3. Read the UIFigure guide to establish layout (grid, components, containers)

  4. Layer in path-specific references per the implementation sequence

  5. For visual polish: invoke matlab-apply-theme (UIFigure) or read styling references (UIHTML accent)

  6. For charts: invoke matlab-build-chart (UIFigure) or read charting references (UIHTML accent)

  7. If App Designer serialization: read the app-designer reference docs (shared guide + format-specific guide), then use the AppDesignerAgentInterface API to persist the app. The docs contain the complete build flow, property rules, and editing discipline.

UIHTML path
  1. Read the archetype reference for the spatial skeleton

  2. If MVVM warranted: read the JS MVVM architecture reference

  3. Read the bridge guide to establish the MATLAB-JS connection

  4. Layer in path-specific references per the implementation sequence

  5. For visual polish: read styling/CSS references

  6. For charts: read charting references

Format Fallback

If the plain text path produces errors that cannot be resolved (e.g., version mismatch, unsupported component), fall back to the .mlapp path — the same verbs drive both formats; re-create the handle with a .mlapp extension. Only fall back to fully programmatic UIFigure code as a last resort.

Recommendation Template

Recommended architecture: [UIFigure app / UIHTML app / UIFigure + accent]

Based on what you've described:

  • [Key signal 1]

  • [Key signal 2]

  • [Key signal 3, if applicable]

What this means: [1-2 sentences on development experience]

Trade-off: [Main thing they'd give up vs the other path]

Serialization (if App Designer): I'd recommend [.mlapp / plain text] because [reason]. This doesn't change the app's structure, just how it's saved.

Want to proceed with this approach, or would you prefer the other path?


Copyright 2026 The MathWorks, Inc.


Files

references/app-designer/agent-guide-plaintext.md

AppDesignerAgentInterface: Plain-text (.m + .xml) Guide

Read agent-guide-shared.md first. This file covers what is specific to plain-text apps. Plaintext behaves differently from mlapp — do not carry over mlapp habits.

Ownership model: YOU own the .xml, the tool owns the .m

A plain-text app is two files with a split of ownership:

ConcernOwnerHow
Component tree: types, properties, layout, nesting, and callback wiringYOU (the agent)hand-edit the .xml on disk directly
Code: callback bodies, custom properties, methods, ClassName, StartupFcn bodythe toolcode verbs -> in-memory model
the .xml fileYOUtool writes a boilerplate ONCE (at create, only if absent); NEVER regenerates it
the .m filethe toolregenerated at save() from (your .xml tree) + (the model's code)

Consequence: component verbs are disabled for plaintext. Calling addComponent / setProperty / removeComponent / moveComponent / addCallback on a plaintext model HARD-ERRORS with AppDesignerAgentInterface:plaintextComponentsInXml. To add/remove/reconfigure a component or wire a callback, edit the .xml. Use the code verbs (setCallbackCode, addProperty, addMethod) for the .m.

Why: save() re-reads the .xml as the live source of truth for components every time. A component verb would mutate an in-memory tree that save() discards — so it fails loudly instead of silently no-op'ing.

The flow (important — differs from mlapp)

You cannot create() then open(): create() writes only the .xml; the .m does not exist until save(), and open() requires the .m. Keep the handle from create() and drive the whole session on it:

% 1. create(): seeds a boilerplate <ClassName>.xml (only if none exists),
%    returns an in-memory handle. Does NOT write the .m.
appBuilder = AppDesignerAgentInterface.create("C:/path/MyApp.m");

% 2. Hand-author the component tree in C:/path/MyApp.xml on disk
%    (see XML format below). This is where components live.

% 3. Code side via verbs on the SAME handle (tool-owned .m):
appBuilder.setCallbackCode("startupFcn", "app.UIFigure.Name = ""Ready"";");
appBuilder.setCallbackCode("onGo", "app.UIFigure.Color = [0.2 0.6 0.9];");
appBuilder.addProperty("ClickCount", 0, "private");
appBuilder.addMethod("reset", strjoin([ ...
    "function reset(app)" ...
    "    app.ClickCount = 0;" ...
    "end" ], newline), "private");

% 4. save(): re-reads the .xml, merges the code, regenerates ONLY the .m,
%    gates on the real product loader. NEVER rewrites the .xml.
appBuilder.save();

To edit an existing plaintext app later, open("C:/path/MyApp.m") (both .m and .xml must exist) and use code verbs; edit the .xml on disk for component changes.

Editing timing: the model is a snapshot, the .xml is re-read at save

open()/create() snapshot the code side into the in-memory model. The component side lives only in the .xml, which save() re-reads fresh from disk. So the two sides update at different times, and the order that is always safe is:

  1. open() (or keep the create() handle).

  2. Edit the .xml on disk for any component change.

  3. Apply code verbs on the handle for .m changes.

  4. save() — it reads your latest .xml from disk and merges the model code.

You do NOT need to re-open after editing the .xml; save() reads the file, not a cached copy. inspect(), however, reflects the model as loaded — it will not show .xml edits you made after open(). Trust the file on disk for components, and inspect() for code.

Match the existing layout manager before adding a component

Before adding a component to an existing app, look at how the parent lays out its children in the .xml. If the parent's children carry <Layout> blocks (a GridLayout parent), your new child needs a <Layout> with <Column>/<Row> too — a bare <Position> will not place correctly under a grid. If children use <Position> (absolute), match that. Do not mix the two under one parent.

The .xml format

create() seeds this boilerplate at <ClassName>.xml, co-located with the .m:

<?xml version='1.0' encoding='UTF-8' standalone='yes'?>
<MATLABApp schemaVersion='1.0.0' release='R2026b.0' minRelease='R2026b'>
    <UIFigure name='UIFigure'>
    </UIFigure>
    <AppDetails>
        <Name>MyApp</Name>
        <Version>1.0</Version>
    </AppDetails>
    <InternalData>
        <AppId>...</AppId>
    </InternalData>
    <Thumbnail autoCapture='true'></Thumbnail>
</MATLABApp>

You fill in the tree. A figure with one wired button:

    <UIFigure name='UIFigure'>
        <Name>'Mini App'</Name>
        <Position>[100 100 300 200]</Position>
        <Children>
            <Button name='GoButton'>
                <Position>[100 80 100 40]</Position>
                <Text>'Go'</Text>
                <ButtonPushedFcn>onGo</ButtonPushedFcn>
            </Button>
        </Children>
    </UIFigure>
    <AppDetails> ... </AppDetails>
    <InternalData> ... </InternalData>
    <RunConfiguration>
        <StartupFcn>startupFcn</StartupFcn>
    </RunConfiguration>
    <Thumbnail autoCapture='true'></Thumbnail>
XML rules (get these right or the parse/load fails)
  1. Each component is an element named after its type, with a name attribute = its codeName: <Button name='GoButton'>. Nest children inside <Children>.

  2. Property values are parsed as NATIVE MATLAB literals — this is the big one:

    • string: single-quoted — <Text>'Go'</Text>, <Name>'Mini App'</Name>. A bare <Text>Go</Text> throws PlainTextBackend:unparseableValue.

    • numeric vector / scalar: bare or bracketed — <Position>[100 80 100 40]</Position>, <FontSize>14</FontSize>.

    • cell array: {...}.

    • logical: true / false.

    • escape a literal ' inside a quoted string by doubling it ('').

  3. Callback-wiring tags are the exception — they are bare (a function name, not a parsed value): <ButtonPushedFcn>onGo</ButtonPushedFcn>. Wiring tags are detected by name (the *Fcn event names). Only the wiring lives in the .xml; the body is a code verb (setCallbackCode).

  4. Handle-typed properties (component -> component references) use the referenced component's codeName as a quoted string literal, same as any other string value. The canonical example is attaching a <ContextMenu> (declared as a child of the figure) to another component:

    <UIFigure name='UIFigure'>
        <Children>
            <ContextMenu name='MyCtx'>
                <Children>
                    <Menu name='Item1'><Text>'Item 1'</Text></Menu>
                </Children>
            </ContextMenu>
            <Button name='MyBtn'>
                <Text>'Right-click me'</Text>
                <ContextMenu>'MyCtx'</ContextMenu>
            </Button>
        </Children>
    </UIFigure>

    The quotes are non-negotiable — the value goes through the same PlainTextBackend:unparseableValue gate as any other string. A bare <ContextMenu>MyCtx</ContextMenu> fails the parse; the product loader resolves the quoted codename to the live component handle at load time.

  5. StartupFcn is NOT a figure property — put it under <RunConfiguration>, not as a <UIFigure> child. A <StartupFcn> under the figure becomes a bad constructor arg and fails to load.

  6. Layout (for grid children only): a <Layout> block with <Column> before <Row>. <Layout> is valid only when the component's parent is a GridLayout. The top-level container (the direct child of UIFigure) must have no <Layout>. A stray <Layout> on a non-grid child loads without error but renders a blank canvas.

  7. The root is always <UIFigure name='UIFigure'>.

  8. NEVER change <AppId>. create() seeds a unique AppId under <InternalData>. It is the app's stable identity — leave it exactly as seeded. Do not regenerate, edit, blank, or copy it from another app. Editing it can break the product's caching/identity tracking. When you hand-author or edit the .xml, preserve the <InternalData>/<AppId> block verbatim.

The property/type/event names are the same product-validated set as mlapp — see the type list and event examples in the shared guide.

validate() — the dry-run you should use before/instead of guessing

For plaintext, save() has an unavoidable side effect (it writes the .m), so a side-effect-free check is genuinely useful. validate():

  • re-reads your .xml, merges the model code, runs the cross-file (Layer-3) reconcile in report mode,

  • returns a struct array of {code, message} (empty = coherent), throws nothing, writes nothing.

The one real cross-file drift it catches: a callback wired in the .xml with no body in the model (AppDesignerAgentInterface:missingCallbackBody) — a silently broken app you cannot see by eye. It also flags orphan bodies (a setCallbackCode for a callback nothing wires) as advisory. Run validate() after authoring the .xml and setting bodies, before save().

save() for plaintext: write-then-gate, and it NEVER writes the .xml

  1. Re-read your .xml (live component truth) and merge with the model's code.

  2. Layer-3 reconcile (throws AppDesignerAgentInterface:missingCallbackBody on wired-but-bodyless).

  3. Regenerate only the .m and write it to the real path.

  4. Run the real product loader on the .m + your .xml. On failure, the files are left on disk (they are human-readable and recoverable) and the loader errors are thrown — open the files, fix the drift, save again.

The .xml is byte-identical before and after save(). The tool never edits a file you authored. If a component is wrong, that is a .xml edit you make, not something the tool will "reconcile" for you.

finalize(): canonicalize the .xml and open it for viewing

finalize() works for plaintext too — same verb, same contract as mlapp (launch App Designer, save through the product, leave the app open for the user to view with its theme rendered). What the save accomplishes differs by format:

  • mlapp bakes the runnable classdef (there is a stub to fill in).

  • plaintext has no stub to bake — the product regenerates the runnable class on load, so the .m is left unchanged. The save instead canonicalizes the .xml into App Designer's exact form: it drops default-valued properties (e.g. a <Value>0</Value> that equals the default disappears) and normalizes element order, so an agent-authored app matches what a human's AD session would produce. It also gates on the product's real loader, so finalize() doubles as an early surface for any load issue in the files you wrote.

AppDesignerAgentInterface.finalize("C:/path/MyApp.m");            % default 60s deadline
AppDesignerAgentInterface.finalize("C:/path/MyApp.m", 120);       % raise deadline
  • The <AppId> is preserved through the canonicalizing save — the product does not touch it (consistent with rule 7).

  • Cost: ~3-5s warm, up to ~16s on a cold AD launch.

  • Requires a live App Designer / connector session (the save routes through AD's JS code engine). Works headless (no -desktop needed).

  • Only needed when you want the app viewed (theme rendered) or the .xml canonicalized. If you are going to keep editing via AppDesignerAgentInterface, you do not need to finalize between edits — save() alone keeps the files loadable.

Close-then-open: finalize releases the file from AD first

Like mlapp, finalize() runs the posture-A guard before it opens: if App Designer is already holding this file, it closes the clean copy first, then opens it fresh. If AD holds the file with unsaved edits, finalize() rejects (never discards your work) — save or close it in App Designer, then retry. This close-then-open sequence is why finalize is safe to call on an app you may already have open in AD, as long as it has no unsaved changes.

finalize deadline / wedge behavior (know this)

App Designer can wedge (e.g. a modal dialog if a file changed under it), and the open/save waits have no built-in timeout. finalize runs under a hard-deadline watchdog: if the open wait exceeds the deadline it aborts and throws AppDesignerAgentInterface:finalizeTimeout without closing anything — recover manually (close App Designer / the stuck app, then retry, or raise deadlineSeconds). A save-side wedge is rare (save on an already-open, ready app is fast) and is intentionally NOT force-closed either.

Editing after finalize() — free the file first (avoid the reload wedge)

finalize() leaves the app open in App Designer. AD is now holding the file. If you edit that file on disk while AD holds it, AD detects the out-of-band change and raises a modal "reload?" dialog that wedges the client. So before any post-finalize edit, release the file from AD first. Which verb depends on what you are editing:

  • Editing components (the .xml) → call AppDesignerAgentInterface.release("C:/path/MyApp.m") first. There is nothing to snapshot (save() re-reads the .xml fresh), so you just need the file freed. Then hand-edit the .xml, save(), and finalize() again to re-preview.

  • Editing code (callbacks / properties / methods) → call AppDesignerAgentInterface.open("C:/path/MyApp.m") first. open() both releases AD and snapshots the existing .m into the model so your code verbs edit real content instead of an empty model. Then apply code verbs, save(), finalize() again.

Both release() and open() run the same posture-A guard: a clean open copy is closed (disk holds the truth); an open copy with unsaved edits is rejected (AppDesignerAgentInterface:appOpenAndModified) — save or close it in App Designer first.

finalize() is otherwise the last action of a build or an edit — you do not finalize between edits. The only reason to finalize, edit, and finalize again is the iterate-to-preview loop above (small adjustments after seeing the app).

Gotchas specific to plaintext

  • Quote your string property values (rule 2 above). This is the most common first mistake coming from the mlapp path, where values are passed natively.

  • Keep the create() handle; do not create() then open() before the first save() (the .m will not exist yet).

  • Do not call component verbs — they hard-error. Author components in the .xml.

  • The .xml filename must be <ClassName>.xml and co-located with the .m (the loader resolves AppConfigFilename as ./<ClassName>.xml relative to the .m).

  • Never touch <AppId> (rule 7 above) — preserve the seeded value verbatim on every edit; it is the app's stable identity.


Copyright 2026 The MathWorks, Inc.


Requirements and compatibility

Works with: Claude Code, Claude apps, OpenAI Codex, GitHub Copilot, Cursor, Gemini CLI, Kiro, OpenCode, Goose, Amp, Roo Code, JetBrains Junie, Factory Droid, Devin (ex-Windsurf), Mistral Vibe, OpenHands, Letta

“Works with” means the tool reads the open Agent Skills format; a skill written for one tool may use features others lack.

Needs: Declares allowed tools

Security

No issues found by our static scan· No issues found

A static scan is not a guarantee. Skills are third-party content: review a skill before you let an agent use it.

Attribution and licence

Created by
MathWorks
Publisher
MathWorks (Official)
Source
matlab/matlab-agentic-toolkit · skills-catalog/matlab-app-building/matlab-build-app · commit 2a7f215
Licence
BSD 2-Clause License (redistribution allowed)
  • LICENSE (added by AutoGineer from LICENSE.md)
  • ATTRIBUTION.md (written by AutoGineer)
Synced

AutoGineer is not affiliated with or endorsed by MathWorks or MathWorks.

Get it from the source

5 of this skill’s files are not mirrored here, so there is no ZIP. Get the complete skill from its source: matlab/matlab-agentic-toolkit