While IDE previews have improved, they often lag, consume excessive memory, or fail to accurately represent the layout on actual physical hardware.

To solve this friction in my daily workflow, I built ComposeBridge—an open-source JetBrains IDE plugin that enables real-time visual UI tweaks directly on running devices and writes the modifications back to Kotlin source files.

How ComposeBridge Works Under the Hood

The architecture relies on three primary pillars:

1. On-Device Parameter Inspection

During runtime composition, UI nodes retain source metadata (source file paths, line/column coordinates, and composable signatures) leveraging internal Compose tags. When an element is selected on the screen, these coordinates are sent back to the IDE over a lightweight WebSocket connection.

2. AST / PSI Code Mutations (No Fragile Regex)

Naive text replacement or regex easily breaks Kotlin code when formatting changes. Instead, ComposeBridge leverages IntelliJ's PSI (Program Structure Interface):

• It maps the incoming coordinates to the exact AST node in the Kotlin file.

• It safely rewrites only the specific argument (e.g., padding, backgroundColor, or fontSize).

• It tracks file mutations in real time, providing visual diffs and single-click rollbacks directly within Android Studio.

3. Model Context Protocol (MCP) Integration

ComposeBridge includes a local MCP server that exposes the live Compose UI hierarchy. This allows local AI coding agents (such as Claude Code, Cursor, or custom IDE agents) to inspect the actual UI state on the running device and propose layout patches based on real runtime context rather than static source code guessing.

Getting Started

ComposeBridge is fully open-source and officially verified on the JetBrains Marketplace:

• JetBrains Marketplace: Install ComposeBridge

• GitHub Repository: JALAL591/compose-bridge

Contributions, architectural feedback, and bug reports are welcome. If you test it out on your projects, feel free to share your thoughts in the comments!