compose-ai-tools plugin
Lets an agent render Jetpack Compose previews to PNG and see its UI edits: plugin, CLI, VS Code extension and MCP.
- 127 ★ on the repository
- Last commit
Extended access
Why this level
- The install script for other agents is downloaded and run from the network.
- The Gradle plugin is injected into the project build.
Install
- Works in
Manual install
/plugin marketplace add yschimke/compose-agent-pluginsFirst README command, then `/plugin install compose-preview@compose-agent-plugins`.
Access and checks
How we reviewExtended accessThe tool runs code or makes network calls and only reads external data.
- The install script for other agents is downloaded and run from the network.
- The Gradle plugin is injected into the project build.
This is third-party code. Review the repository files before installing.
What it does
compose-ai-tools shows an agent how a Jetpack Compose UI looks after a change. The `compose-preview render` command turns every `@Preview` annotation into a PNG and `compose-preview browse` opens them for viewing. Next to each image it returns data: accessibility findings, layout tree, theme tokens and recomposition heat maps. The `compose-preview` plugin installs in Claude Code and Codex, and other agents get the same skills through an install script. A local and a hosted MCP server, a GitHub Action that posts before and after renders in pull requests and a VS Code extension are included. Project build files stay untouched: the tool attaches itself to projects that apply the Android and Compose plugins.
Who it is for. Android developers on Compose who hand screen edits to an agent and want to see the result without starting an emulator.
Good fit when
- An agent changed a screen and a picture must confirm the layout held.
- A pull request with UI edits needs before and after shots.
- Screen accessibility checks should run together with rendering.
- App store screenshots are needed straight from `@Preview`.
Not a fit when
- The project uses classic XML screens without Compose.
- You need verification on a real device with all sensors.
- Java, Gradle or Kotlin versions are below the required ones.
Example request
Render the settings screen previews and show whether text is clipped on small screens.Limitations
Java 17 or newer, Gradle 8.13 or newer, AGP 8.13.0 or newer and Kotlin 2.0.21 or newer are required. The tool attaches to projects that already apply `com.android.application`, `com.android.library` or `org.jetbrains.compose`. The install script for other agents is fetched with `curl` from GitHub, so read it before running. Rendering goes through Robolectric or Compose Desktop and does not reproduce some real-device effects. Some features, such as the preview server, need separate setup.
How to disable. In Claude Code remove the plugin with `/plugin` and the `compose-agent-plugins` source. For the CLI delete the `compose-preview` binary, and remove the Gradle plugin entry from the build.
FAQ
Is an emulator needed?
No, previews are built through Robolectric or Compose Desktop. The `compose-preview launch app.apk` command runs an APK without an emulator.
How do I install it in Claude Code?
Run `/plugin marketplace add yschimke/compose-agent-plugins`, then `/plugin install compose-preview@compose-agent-plugins`.
Does it work without an agent?
Yes, a VS Code extension and a CLI exist. The extension installs in VS Code, Cursor, Windsurf and VSCodium without project changes.
What is the MCP mode?
A local or hosted MCP server exposes rendering as an agent tool and saves tokens in the UI edit loop.
Which versions are needed?
Java 17 or newer, Gradle 8.13 or newer, AGP 8.13.0 or newer and Kotlin 2.0.21 or newer.
Discussion
No questions or reviews yet.
Related
PluginsA plugin that shows the agent and you Compose Previews in a browser, redrawn a second after each save, with no Android Studio.
A skill for Jetpack Compose and Compose Multiplatform: the agent writes UI from references and checks it against androidx source
Two Jetpack Compose skills: a repository audit scored 0–100 from compiler data and a coding helper that warns as you write.
21 skills for Android and KMP in Claude Code, Codex and Copilot CLI: Compose, coroutines, Flow, networking, storage, Gradle
MCP server and CLI that renders SwiftUI previews to PNG on chosen devices, so an agent can check a screen after editing it
A set of 26 skills on Jetpack Compose performance, from a measured audit to Baseline Profiles and R8
README in short
The README describes five install paths, a no-agent mode and extras such as accessibility data, PR review and MCP. A section with real agent pull requests shows the tool in practice.