compose-ai-tools

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) and Compose Multiplatform Desktop.

That’s the whole idea. Everything else is optional.

Get started Reference GitHub

Get started

Pick the one that fits you. Each is a single step.

🤖 With an AI coding agent

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 | bash

Then 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.

Already have an agent that fetches URLs but can’t run the installer? Point it straight at the skill — it’s self-contained and will bootstrap the CLI itself.

🧩 In VS Code (or Cursor / Windsurf / VSCodium)

Open the Extensions view (⇧⌘X / Ctrl+Shift+X), search Compose Preview, click Install. That’s it — it renders previews inline and needs no project changes.

Marketplace · Open VSX

⌨️ From the command line

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

The CLI injects itself into your build at runtime, so projects that already use com.android.application / com.android.library / org.jetbrains.compose just work. Full options on the Install page.

Want a version-pinned Gradle plugin instead?

If you’d rather wire it into your build explicitly, the plugin is on Maven Central — no auth, no token:

// <module>/build.gradle.kts
plugins {
    id("ee.schimke.composeai.preview") version "0.16.3"
}

./gradlew :app:composePreviewRenderAll   # render every @Preview to PNG

Requirements and CI recipes live on the Install page.

Going further

Once you’re rendering PNGs, there’s more your agent can do — but none of it is required to get value from the tool.

Data products — alongside each PNG the renderer can emit structured data: accessibility findings, layout trees, theme tokens, recomposition heat maps, drawn text, and more. One page per product.
MCP server — a push-based, token-frugal agent loop over Compose UI (target by semantic ref, observe semantics instead of pixels, diff renders, generate tests). The aria-snapshot story for Compose.
Daemon — a long-lived renderer that keeps Robolectric / Compose-Desktop warm so re-renders are fast.

How it works — discovery, renderer pipeline, caching.
Samples — rendered baselines for samples:android, samples:wear, samples:cmp, samples:remotecompose, regenerated on every push to main.
Releases · Changelog · License (Apache 2.0).

</content> </invoke>