yschimke/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, via
Robolectric) and Compose Multiplatform Desktop (via ImageComposeScene).
That's the whole idea. Everything else on this page is optional.
**📖 Documentation** ·
Install ·
Reference
Get started
**Start here: ** — 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 .
🤖 With an AI coding agent
One command installs the compose-preview CLI and the default agent skills:
Then 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.
- Other install routes (npx skills, flags, opt-in skills, updating):
setup.
- Plugins and MCP wiring for Claude Code, Codex, Gemini/Antigravity and OpenCode:
host setup.
- The hosted catalog MCP server is https://preview.coo.ee/mcp; configure it once.
Local vs hosted MCP: Agents & MCP.
🧩 In VS Code (or Cursor / Windsurf / VSCodium)
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)
⌨️ From the command line
Install the CLI (same one-liner as above), then point it at any Compose
project — **no build edits required**:
The 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+).
What else it can do
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. The same native MCP process can
optionally connect agents to a concurrent preview-server UI-builder session;
see the MCP design reference.
- **Daemon** — an
optional long-lived renderer that keeps Robolectric / Compose-Desktop warm
so re-renders are fast.
Samples
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