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
Pick the one that fits you. Each is a single step.
Run the one-line installer once. It drops the compose-preview CLI and
the agent skill into place (Claude Code, Codex, Gemini):
curl -fsSL https://raw.githubusercontent.com/yschimke/skills/main/scripts/install.sh | bashThen just ask your agent to preview a composable. The
compose-preview skill
is the playbook — it tells the agent how to render, iterate, and check its own
work. You don't have to learn the commands; the agent reads the skill. (If
your agent can fetch URLs but not run the installer, point it straight at the
SKILL.md
— it bootstraps the CLI itself.)
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 PNGThe 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.
- Data products — alongside each PNG the renderer can emit structured data: accessibility findings, layout trees, theme tokens, recomposition heat maps, drawn text, resource captures, and more. One page per product.
- Agents & MCP — a push-based, token-frugal agent loop over Compose UI: target by semantic ref, observe semantics instead of pixels, diff renders, turn recordings into tests. The aria-snapshot story for Compose.
- Daemon — an optional long-lived renderer that keeps Robolectric / Compose-Desktop warm so re-renders are fast.
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,
samples:remotecompose, samples:xr-spatial. Source under
samples/. 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 fromPlay Store — …@Previewcomposables, replacing hand-crafted PNGs.
Have one to add? Open a PR or an issue.
- Documentation site — install, reference, agents & MCP, daemon.
- How it works — discovery, renderer, caching, project structure.
- Configuration-only plugin — commit
composePreview { }config to your build without pinning the rendering runtime. - PR review workflow — reusable, preview-gated AI PR review (Codex / Claude / Gemini).
- Development — building plugin, CLI, and extension from source; consuming
-SNAPSHOTbuilds. - Architecture (contributor) — class-by-class map of the four-stage pipeline.
- Contributor docs index — the full map of the
docs/tree. - Releases · Changelog · License (Apache 2.0)