
Render @Preview composables to PNG from the command line and editor integrations, enabling AI agents to inspect UI; emit structured data (accessibility, layout, tokens), fast daemon and CI-friendly plugin.
See your Compose UI without opening Android Studio.
compose-ai-tools renders your @Preview composables to PNG from the
command line — so your AI coding agent can actually look at the screen it
just changed, and so can you. Works with Jetpack Compose (Android, via
Robolectric) and Compose Multiplatform Desktop (via ImageComposeScene).
That's the whole idea. Everything else on this page is optional.
📖 Documentation · Install · Reference
Start here: https://yschimke.github.io/compose-ai-tools/ — rendering and inspecting your project's previews with the CLI, an agent, VS Code or the Gradle plugin. Designing a new screen with an agent in the UI Builder? That flow starts at https://ui.coo.ee/start.
One command installs the compose-preview CLI and the default agent skills:
curl -fsSL https://raw.githubusercontent.com/yschimke/skills/main/scripts/install.sh | bashThen ask your agent to preview a composable. The
compose-preview skill
is the playbook — you don't have to learn the commands; the agent reads the skill.
npx skills, flags, opt-in skills, updating):
setup.https://preview.coo.ee/mcp; configure it once.
Local vs hosted MCP: Agents & MCP.Open the Extensions view (⇧⌘X / Ctrl+Shift+X), search Compose Preview, click Install. It renders previews inline and needs no project changes. (Marketplace · Open VSX)
Install the CLI (same one-liner as above), then point it at any Compose project — no build edits required:
compose-preview render # render every @Preview to PNG
compose-preview browse # open the streamlined component browserThe CLI injects itself into your build at runtime, so projects that already
apply com.android.application / com.android.library /
org.jetbrains.compose just work.
Prefer a version-pinned Gradle plugin? It's on Maven Central (no auth, no token). See the Install page for that, CI recipes, and the full requirements (Java 17+, Gradle 8.13+, AGP 8.13.0+, Kotlin 2.0.21+).
None of this is required to get value from the tool — it's there when you want more than a PNG.
Rendered baselines (PNGs and animation GIFs, regenerated on every push to
main) are browsable inline on the
compose-preview/main
branch — samples:android, samples:wear, samples:cmp, and
samples:remotecompose. Source under samples/. The XR renderer and its spatial
sample live in compose-preview-xr. The
integration matrix also renders the
plugin against real-world external Compose projects on every push.
Real-world PRs opened by AI coding agents that used compose-preview to
verify their changes.
yschimke/meshcore-mobile#36 — renders Play Store listing screenshots (phone + 7"/10" tablet) directly from Play Store — … @Preview composables, replacing hand-crafted PNGs.Have one to add? Open a PR or an issue.
composePreview { } config to your build without pinning the rendering runtime.-SNAPSHOT builds.docs/ tree.See your Compose UI without opening Android Studio.
compose-ai-tools renders your @Preview composables to PNG from the
command line — so your AI coding agent can actually look at the screen it
just changed, and so can you. Works with Jetpack Compose (Android, via
Robolectric) and Compose Multiplatform Desktop (via ImageComposeScene).
That's the whole idea. Everything else on this page is optional.
📖 Documentation · Install · Reference
Start here: https://yschimke.github.io/compose-ai-tools/ — rendering and inspecting your project's previews with the CLI, an agent, VS Code or the Gradle plugin. Designing a new screen with an agent in the UI Builder? That flow starts at https://ui.coo.ee/start.
One command installs the compose-preview CLI and the default agent skills:
curl -fsSL https://raw.githubusercontent.com/yschimke/skills/main/scripts/install.sh | bashThen ask your agent to preview a composable. The
compose-preview skill
is the playbook — you don't have to learn the commands; the agent reads the skill.
npx skills, flags, opt-in skills, updating):
setup.https://preview.coo.ee/mcp; configure it once.
Local vs hosted MCP: Agents & MCP.Open the Extensions view (⇧⌘X / Ctrl+Shift+X), search Compose Preview, click Install. It renders previews inline and needs no project changes. (Marketplace · Open VSX)
Install the CLI (same one-liner as above), then point it at any Compose project — no build edits required:
compose-preview render # render every @Preview to PNG
compose-preview browse # open the streamlined component browserThe CLI injects itself into your build at runtime, so projects that already
apply com.android.application / com.android.library /
org.jetbrains.compose just work.
Prefer a version-pinned Gradle plugin? It's on Maven Central (no auth, no token). See the Install page for that, CI recipes, and the full requirements (Java 17+, Gradle 8.13+, AGP 8.13.0+, Kotlin 2.0.21+).
None of this is required to get value from the tool — it's there when you want more than a PNG.
Rendered baselines (PNGs and animation GIFs, regenerated on every push to
main) are browsable inline on the
compose-preview/main
branch — samples:android, samples:wear, samples:cmp, and
samples:remotecompose. Source under samples/. The XR renderer and its spatial
sample live in compose-preview-xr. The
integration matrix also renders the
plugin against real-world external Compose projects on every push.
Real-world PRs opened by AI coding agents that used compose-preview to
verify their changes.
yschimke/meshcore-mobile#36 — renders Play Store listing screenshots (phone + 7"/10" tablet) directly from Play Store — … @Preview composables, replacing hand-crafted PNGs.Have one to add? Open a PR or an issue.
composePreview { } config to your build without pinning the rendering runtime.-SNAPSHOT builds.docs/ tree.