UI Bridge MCP
Allows AI agents to inspect and interact with UI elements in a Tauri webview application
Click on "Deploy Server".
Wait a few minutes for the server to deploy. Once ready, it will show a "Started" state.
In the chat, type
@followed by the MCP server name and your instructions, e.g., "@UI Bridge MCPTake a snapshot of the current UI to see all elements."
That's it! The server will respond to your query, and you can continue using it as needed.
Here is a step-by-step guide with screenshots.
UI Bridge MCP
MCP (Model Context Protocol) server for UI Bridge - enables AI to inspect and interact with UI elements.
Overview
This MCP server provides tools for:
Inspecting UI elements - Get element positions, bounds, visibility, and state
Interacting with elements - Click, type, focus, hover
Two modes of operation:
Control mode: Interact with the qontinui-runner's own Tauri webview
SDK mode: Interact with external apps via the UI Bridge SDK
Related MCP server: uiautomation-mcp
Installation
# Using pip
pip install ui-bridge-mcp
# Using poetry
poetry add ui-bridge-mcpPrerequisites
The MCP server requires the qontinui-runner to be running on port 9876.
For external app access, the target application must have the UI Bridge SDK integrated.
Configuration
Claude Desktop
Add to your claude_desktop_config.json:
{
"mcpServers": {
"ui-bridge": {
"command": "ui-bridge-mcp"
}
}
}Claude Code
Add to your MCP settings:
{
"mcpServers": {
"ui-bridge": {
"command": "ui-bridge-mcp"
}
}
}Environment Variables
Variable | Default | Description |
|
| Runner hostname |
|
| Runner port |
Available Tools
Health Check
Tool | Description |
| Check if qontinui-runner is accessible |
Control Mode (Runner's Own UI)
Tool | Description |
| Get complete UI state with all elements |
| Force element discovery/registration |
| Get detailed info for a specific element |
| Click an element by ID |
| Type text into an input element |
| Focus an element |
SDK Mode (External Apps)
Tool | Description |
| Connect to an SDK-integrated app by URL |
| Disconnect from the current app |
| Check SDK connection status |
| Get all elements from the connected app |
| Get a full UI snapshot from the connected app |
| Click an element by ID |
| Type into an element by ID |
Note: The MCP server also includes legacy
extension_*tools for browser tab access via a Chrome extension. These are deprecated and will be removed in a future release. Use the SDK tools instead.
Usage Examples
Inspect Runner UI
AI: Let me check what's on the runner's Settings page.
1. First, get a snapshot of the UI:
ui_snapshot
2. Click the Settings button:
ui_click element_id="sidebar-nav-item-settings"
3. Get another snapshot to see the new page:
ui_snapshotInspect an SDK-Integrated App
AI: Let me check the login form on localhost:3000.
1. Connect to the app:
sdk_connect url="http://localhost:3000"
2. Get all elements:
sdk_elements
3. Type into the email field:
sdk_type element_id="email-input" text="test@example.com"
4. Click the submit button:
sdk_click element_id="login-button"Element IDs
Elements in the runner's UI have registered IDs that follow patterns like:
sidebar-nav-item-{name}- Sidebar navigation itemsbutton-{action}- Action buttonsinput-{field}- Input fieldsdialog-{name}- Dialog components
Use ui_snapshot to discover all available element IDs.
Architecture
Claude/AI
| MCP Protocol
ui-bridge-mcp (this server)
| HTTP
qontinui-runner (port 9876)
|-- /ui-bridge/control/* --> Runner's Tauri webview
|-- /ui-bridge/sdk/* --> SDK-integrated apps (direct HTTP)Development
# Install dependencies
poetry install
# Run linting
poetry run ruff check .
poetry run mypy src
# Format code
poetry run ruff format srcLicense
Licensed under the GNU Affero General Public License v3.0 or later (AGPL-3.0-or-later). See LICENSE for full terms.
This server cannot be deployed
Maintenance
Related MCP Connectors
Drive real devices from your AI Coding tool. Embed a client SDK (Unity, Godot, Flutter, iOS/macOS, Android, React Native, Web) in your app, then capture screenshots, traverse the UI tree, inject taps and key events, and run automated test tasks on the physical device over a secure relay.
Control real Android and iOS devices with LLM agents — tap, swipe, type, automate flows.
remote debug iOS/Android/Unity/Godot/Flutter/RN/Web on real-device.ui-tree/screenshots/taps,tests.
UI design from prompts, screenshots, and URLs for AI coding agents and theme tokens.
Related MCP Servers
- AlicenseAqualityBmaintenanceEnables AI assistants to control mobile and desktop devices with natural language, including running automation tasks, taking screenshots, and managing devices.65 npmMIT
- AlicenseNot gradedqualityCmaintenanceEnables AI assistants to inspect and automate Windows desktop UI elements by exploring UI trees, checking properties, performing actions like clicking and typing, and generating Python automation scripts.MIT
- AlicenseNot gradedqualityDmaintenanceEnables real-time screen monitoring, UI element analysis, and predictive user behavior learning for AI assistants.1MIT
- FlicenseNot gradedqualityDmaintenanceEnables GUI automation by capturing screen, controlling mouse/keyboard, and targeting controls via accessibility layer; optionally supports voice commands and synthesis.-