FixThis — Claude Code MCP server for Compose UI feedback
Debug-only MCP server for Jetpack Compose: pick a UI element, describe the change, hand your coding agent the source context.
claude mcp add fixthis -- npx -y @beyondwin/fixthisWhat FixThis does
FixThis attaches a sidekick to a debug build of a Compose app and mirrors the screen into a browser console on your machine. You click a component to select it, or drag over an area when the target is spacing or empty room, then type what should change. The result is a compact handoff for the agent: screenshot bounds, semantics, source candidates and confidence warnings.
It stays out of release builds. The Gradle plugin io.github.beyondwin.fixthis.compose wires the sidekick into debug only, and everything runs over ADB and 127.0.0.1 with no external API calls. JDK 21 and Node 20 or newer are required; the CLI itself comes from Homebrew, npm or GitHub Releases.
One command sets the project up: fixthis install-agent --project-dir . --target all --verify --json. It applies the Gradle plugin, writes the MCP config and creates .fixthis/project.json with the agent setup files. If doctor reports NEEDS_INSTALL or metadata is missing, run ./gradlew fixthisSetup first and repeat the install. Restart Claude or Codex when the report asks for it, then call fixthis_open_feedback_console.
What it helps with
- locate the source file behind a tapped component
- hand the agent layout bounds and node semantics
- tell identical list cards apart by instance
- describe a spacing or empty-area fix that has no Compose node
- keep a save tied to the screen it came from
Example prompts for the agent
- Install FixThis in this project and configure it for my agent
- Open the feedback console and show me what can be edited on this screen
- Save this element's context to MCP for Claude
How to install FixThis
Platform CLI
claude mcp add fixthis -- npx -y @beyondwin/fixthisPlatform CLI
codex mcp add fixthis -- npx -y @beyondwin/fixthisConfig file
{
"mcpServers": {
"fixthis": {
"command": "npx",
"args": [
"-y",
"@beyondwin/fixthis"
]
}
}
}Config file
{
"servers": {
"fixthis": {
"type": "stdio",
"command": "npx",
"args": [
"-y",
"@beyondwin/fixthis"
]
}
}
}Platform CLI
gemini mcp add fixthis npx -y @beyondwin/fixthisStep by step, with commands for each platform: How to add an MCP server to Claude Code, Codex, Cursor, VS Code, Gemini CLI and more
Questions about FixThis
How do I install FixThis in Claude Code?
Add the server with claude mcp add fixthis -- npx -y @beyondwin/fixthis. Then, from the root of your Compose project, run fixthis install-agent --project-dir . --target all --verify --json and restart Claude if the report asks for it.
What does FixThis do?
It attaches a sidekick to a debug Compose app and mirrors the screen into a local console. Your annotations become a handoff for the agent with bounds, semantics and source candidates.
Does FixThis need internet access?
No. It runs locally over ADB and 127.0.0.1 and makes no external API calls. JDK 21 and Node 20 or newer are needed to build and run it.
