Skip to main content

Introducing the QML Live Preview MCP Tool for Agentic Development of Embedded Devices

Comments

Agents Edit QML, But Don’t See the Result Without Building, Compiling, and Running

AI agents can make many UI changes in a single iteration. AI agents edit files, maybe run a build, and then report success. Every change can costs a full rebuild and relaunch, or it goes unchecked by the developer. Qt's QML Live Preview MCP tool makes autonomous AI agent work transparent for the developer at a low token expense: it runs the app and hot reloads changed QML files, without a rebuild and without a restart.

Qt 6.12 already ships the qmlpreview executable, but using it directly from an agentic harness is harder than it looks. The agent has to:

  • launch qmlpreview as a long-running background process and keep track of it

  • know when the hot reload needs to be restarted because some code changes, such as C++ or singleton registration, cannot be represented without restart and replay of events

  • shut the process down and restart it when something goes wrong

Each of these is a chance for the agent to lose time, guess wrong, or stop using the preview after the first hiccup.

Video: QML Live Preview in Claude Code CLI (Note: the video has been edited for clarity and compactness)

But there are limits how far the hot-reload with QML preview goes. There will be occasionally a need to restart or even rebuilt the app and then restart the preview by manual prompt.

QML Hot Reload for AI Agents and Developers

The QML Live Preview MCP tool turns qmlpreview into a tool an agent can call. It is a Model Context Protocol server that exposes one tool, run_qmlPreview. The agent passes the absolute path to the application executable, and the tool starts the application with live preview (hot reload) enabled. From then on, edits to most QML sources show up in the running application without rebuilding it.

The same preview window is what you watch while the agent works, so you can give feedback on the live UI and not on a description of it.

Works Together With the QML Coding Skill

The QML (qt-qml) coding skill has been updated to steer how the agent uses the MCP tool. When the tool is connected and the project uses Qt 6.12 or newer, the skill:

  • checks that the application target is built with QT_QML_DEBUG and, if it is missing, offers the exact CMake line to add, scoped to debug builds, and asks before editing your CMakeLists.txt

  • offers to start the preview and waits for your answer

  • tells you up front when a change needs a rebuild, and suggests a restart of the preview when edits stop showing up

An agent that only has the qmlpreview executable has to work all of this out on its own. With the skill and the tool installed together, these steps are built in.

Limitations

  • Qt 6.12 or newer only. The QML Live Preview MCP tool is available only for Qt UI development with Qt 6.12 and newer.

  • QML only. The tool watches QML files on disk. Some changes need a rebuild of the application: any C++ change, changes to qmldir, the module URI or version, or singleton registration, changes to CMakeLists.txt (including adding a file to a module), new imports of modules the application does not link, and new QML files when the project compiles its QML into Qt resources.

  • Not every QML edit survives hot reload. Some edits, such as turning a plain value into a binding or moving a binding to another property, may be applied but lose UI state, or may not show up at all. If the preview reports a hot reload failure, it restarts the application and replays recorded input events. If edits stop showing up, start the preview again.

  • Single QML engine. QML Live Preview is unreliable in applications that create more than one QQmlEngine or QQmlApplicationEngine, or that load QML on a worker thread.

  • QML must come from a QML module. If the application does not link any QML module created with qt_add_qml_module(), hot reload of QML embedded in Qt resources does not work.

Tested with

The QML Live Preview MCP Tool has been tested using Claude Code CLI with Claude Sonnet 5.5, GitHub Copilot with GPT 6-Luna, and Qwen Code with GLM 5.2.

Where can I get the tool?

Unlike the agent skills, the QML Live Preview MCP tool is distributed through the Qt Installer or the Qt Maintenance application: in the component tree, open the new folder "Agentic Development Tools" and select the “QmlPreview MCP Server”. After the server is installed, you can find the binary in the `bin`folder of your Qt 6.12+ installation.

You can connect the MCP server with your agentic harness by prompting something like “Connect to the QmlPreviewMcpServer located in the Qt 6.12 installation bin folder”.

The updated qt-qml coding skill is available from the Qt agent skills repository.

Comments

Subscribe to our blog

Try Qt 6.12 Now!

Download the latest release here: www.qt.io/download

Qt 6.12 LTS is now available, with new features and improvements for application developers and device creators.

We're Hiring

Check out all our open positions here and follow us on Instagram to see what it's like to be #QtPeople.