Real-Time Android UI Development with AI Agents - MCP Server

How to use

You connect an AI agent to a running app and leverage real-time UI analysis to guide design and implementation. Start your development server (Expo, React Native, Flutter, or native Android), then configure your AI client to use this MCP server. As you make UI changes, ask your agent to analyze the current screen, suggest improvements, or help implement adjustments. The agent captures screenshots and provides contextual feedback to accelerate iteration and ensure UI quality across devices.

Typical usage patterns include: taking screenshots after each change to validate layouts, requesting accessibility checks with visual context, and iterating on spacing, color, and component composition with immediate AI-driven guidance. You can target multiple devices or emulators to compare layouts side by side and verify cross-device consistency.

How to install

Prerequisites you need before installation are clearly defined for a smooth setup.

1) Install Node.js (18.x or newer) and npm (included with Node.js). 2) Ensure ADB (Android Debug Bridge) is installed and available in your PATH. 3) Have Git installed if you plan to build from source.

Install the MCP server globally so you can run it from anywhere:

npm install -g android-ui-assist-mcp

Verify the installation to confirm the MCP server is accessible:

android-ui-assist-mcp --version
```
If you installed via npm, you can also run:
```
npx android-ui-assist-mcp --version

If you prefer compiling from source, use these steps to clone and build the project, then install dependencies and build the project before running:

git clone https://github.com/yourusername/android-ui-assist-mcp
cd android-ui-assist-mcp
npm install
npm run build

Configuration and running with MCP clients

You connect AI agents that support MCP to your running app. The following connection patterns are shown in examples and enable you to integrate various clients.

Claude Code client connection (CLI): use a direct CLI integration to connect the MCP server for local development.

Claude Desktop and GitHub Copilot (VS Code) connections: configure the respective clients to point to the MCP server using a standard stdio configuration.

Gemini CLI: connect the Gemini client to the MCP server with a standard stdio configuration.

Example stdio MCP configuration in clients (all use the same MCP binary and arguments, ensuring quick adoption across tools):

{"type": "stdio", "name": "android-ui_assist", "command": "npx", "args": ["android-ui-assist-mcp"], "timeout": 10000}

Development workflow

During development, run your app with Expo, React Native, Flutter, or native Android. Then connect the MCP server to your preferred AI agent. The agent will take screenshots and provide UI refinement suggestions in real time, helping you iterate faster and maintain design consistency.

Prerequisites

- Node.js 18.0+ - npm 8.0+ - ADB (Android SDK Platform Tools) - A running Android development environment (Expo, React Native, Flutter, or native Android)

Development environment setup

Expo Development

1) Start your Expo development server

npx expo start
# or
npm start

2) Open your app on a connected device or emulator 3) Ensure your device appears in adb devices 4) Your AI agent can now take screenshots during development

React Native Development

npx react-native start
```

```
npx react-native run-android

Flutter Development

flutter run

Native Android Development

Open project in Android Studio and run the app with a connected device or emulator.

Docker deployment

You can deploy the MCP server in Docker to enable team collaboration and CI/CD.

Docker Compose

cd docker
 docker-compose up --build -d

Configure a Docker-based MCP server command in your client configuration with a running container and the appropriate entry to execute the MCP server.

Manual Docker Build

docker build -t android-ui-assist-mcp .
docker run -it --rm --privileged -v /dev/bus/usb:/dev/bus/usb android-ui-assist-mcp

Available tools

Tools exposed by the MCP server allow you to interact with the Android UI and manage devices.

- take_android_screenshot: captures a screenshot from a device or emulator - list_android_devices: lists connected devices with details

Usage examples

Real-time UI development: start your app, connect an AI agent, and request screenshots after each change to analyze layout and accessibility in real time.

Troubleshooting

ADB issues: ensure ADB is installed and in PATH, check device authorization, and verify the device shows up with adb devices.

Connection issues: confirm the MCP client is configured to connect to the server, restart ADB if needed, and check USB debugging permissions on the device.

Development

Build commands you can use during development include linting, formatting, and tests:

npm run build     # Production build
npm test          # Run tests
npm run lint      # Code linting
npm run format    # Code formatting

Project structure

Key source files organize the MCP server and utilities.

src/ contains core server implementations and helpers, such as server.ts, types.ts, and utilities for adb, screenshots, and error handling.

Performance

The server focuses on efficient, secure stdio communication with timeout handling and in-memory screenshot processing to minimize latency.

License

MIT License - see LICENSE file for details.

take_android_screenshot

Captures a screenshot from an Android device or emulator, optionally specifying a deviceId to target a specific device.

list_android_devices

Lists all connected Android devices and emulators with detailed information.