Compose UI Builder

Design real Compose screens with your agent.

A visual editor for real, compiled Compose components that works hand in hand with your coding agent. Three steps from idea to code you can ship:

Start from a template

Pick a Wear list screen, a phone scaffold or a Wear widget. The full, unrolled screen sits on the left, with instant interactive previews on the right.

Iterate with your agent

Describe the screen and watch the edit land. Then right-click anything: comment, and your note reaches the chat with that element attached, or Quick edit its properties in place.

Export code and SVG

Copy readable Compose code for your app, SVG that pastes into Figma as editable layers, or a PNG for review.

Get started

Everything runs on the hosted service at ui.coo.ee. The only setup is the skill and one MCP server for your agent.

Connect your agent, once

Install the compose-ui-builder skill and the compose-catalogs plugin. The skill teaches your agent how to work with your design; the plugin connects it to the hosted MCP server. No local Compose project or Java installation is needed.

In Claude Code:

/plugin marketplace add yschimke/skills
/plugin install compose-skills@yschimke-skills
/plugin marketplace add yschimke/compose-agent-plugins
/plugin install compose-catalogs@compose-agent-plugins

Leave the optional token blank and approve access in the browser. Restart, then check /mcp.

codex plugin marketplace add yschimke/skills
codex plugin marketplace add yschimke/compose-agent-plugins

Enable compose-skills and compose-catalogs from /plugins, then start a new session. Check codex mcp list for compose-preview-catalog.

agy plugin install https://github.com/yschimke/skills/tree/main/plugins/compose-skills
agy plugin install https://github.com/yschimke/compose-agent-plugins/tree/main/plugins/compose-catalogs
agy plugin enable compose-skills
agy plugin enable compose-catalogs

Restart Antigravity and check agy plugin list. Install the skills as a plugin: Antigravity does not load the skills CLI's shared skills directory.

For an agent that supports skills and Streamable HTTP MCP:

npx skills add yschimke/skills --global --yes --skill compose-ui-builder

Add https://preview.coo.ee/mcp as compose-preview-catalog in your client's MCP settings. For clients using mcpServers, such as Cursor:

{
  "mcpServers": {
    "compose-preview-catalog": { "url": "https://preview.coo.ee/mcp" }
  }
}

Add MCP to VS Code

The link opens VS Code's connection review. It installs the MCP configuration; paste the design prompt into your agent afterward. Other clients can add the endpoint manually.

When your agent requests access, approve its request in the browser. It uses its own grant; you do not need to copy your browser's credentials.

Create a design

Choose what to create, sign in with GitHub, and pick a starting template. Each link opens the create screen with its catalog selected:

Adaptive Mobile App Wear App Wear Widget

Hand it to your agent

Open Connect agent and press Save and copy prompt in the editor's toolbar, paste it into your agent, and add what you want after it. The prompt names your design in place of <design>:

Work with the Compose UI Builder design `<design>`:
https://ui.coo.ee/ui-builder/<design>

Use `compose-preview-catalog` at https://preview.coo.ee/mcp and follow the `compose-ui-builder` skill. If setup is missing, see https://yschimke.github.io/compose-ui-builder/#get-started. Read the design and comments before editing, then verify the Compose export.

Turn it into a podcast library with "Latest episodes" and "Podcasts" buttons, then a Queue section with Up Next.

This minimal prompt assumes you completed the setup above. The editor also offers a full setup prompt for first-time use, plus your own general or per-design instructions. Keep the editor open beside the chat: your agent's edits appear as it makes them.

Prefer to work locally or offline? The desktop app, the IntelliJ plugin, the VS Code extension (early access) and compose-preview-server ui keep designs as .uid files in your repository. See running it locally.

Built for the way Compose apps are actually made

Real components, not mockups

The canvas renders compiled Material 3 and Wear Material 3 composables. What you see is what Compose draws.

You and your agent, one design

Browser, IDE and agent edits all go through one revisioned design, so changes arrive live wherever it is open.

Point at it, talk about it

Comments carry the node, its properties and a picture into the chat. No more describing which button you mean.

Readable Compose export

Get idiomatic Kotlin that calls real components, or your own project's composables when you point it at your module.

Phones, tablets and Wear OS

Design adaptive phone and tablet screens, Wear OS screens, and Wear widgets built on Remote Compose.

Designs live in git

A design is a .uid file. Review it in a pull request with rendered before/after images, not JSON diffs.

Figma-compatible SVG

Export any saved revision as SVG for design review, pinned to the exact catalog it was built with.

Wherever you work

Web, a native desktop app, IntelliJ, VS Code, or inside your agent's chat as an MCP App.

A Material 3 tablet inbox with a list and reading pane in the editor — Adaptive Material 3 layouts, built from the same catalog your app uses.