tauri-mcp-server-development

# Tauri MCP Server Development > Skill by [ara.so](https://ara.so) — MCP Skills collection. A Model Context Protocol (MCP) server that enables AI assistants to build, test, and debug Tauri v2 applications through UI automation, IPC monitoring, log streaming, and mobile device management. ## What It Does The Tauri MCP server provides 21 tools across four categories: - **UI Automation**: Screenshots, element finding, clicking, typing, scrolling, visual element picker - **IPC Monitoring**: Capture and inspect Tauri IPC calls in real-time - **Mobile Development**: List iOS simulators and Android emulators - **Logs**: Stream console, Android logcat, iOS, and system logs It consists of two components: 1. **MCP Server** (Node.js) - Connects to AI assistants via stdio 2. **MCP Bridge Plugin** (Rust) - Installed in your Tauri app, exposes automation APIs via WebSocket ## Installation ### Install MCP Server for AI Assistant Use `install-mcp` to add the server to your AI assistant: ```bash # For Claude Code npx -y install-mcp @hypothesi/tauri-mcp-server --client claude-code # For Cursor npx -y install-mcp @hypothesi/tauri-mcp-server --client cursor # For VS Code / Copilot npx -y install-mcp @hypothesi/tauri-mcp-server --client vscode # For Windsurf npx -y install-mcp @hypothesi/tauri-mcp-server --client windsurf ``` Supported clients: `claude-code`, `cursor`, `windsurf`, `vscode`, `cline`, `roo-cline`, `claude`, `zed`, `goose`, `warp`, `codex` **Restart your AI assistant** after installation. ### CLI Usage (Optional) Install the CLI to call tools directly from terminal: ```bash npm install -g @hypothesi/tauri-mcp-cli # Start driver session tauri-mcp driver-session start --port 9223 # Take screenshot tauri-mcp webview-screenshot --file screenshot.png # Find element tauri-mcp webview-find-element --selector "button.submit" # Read console logs tauri-mcp read-logs --type console ``` ### Add MCP Bridge Plugin to Tauri App #### Automated Setup Ask your AI assistant: > "Help me set up the Tauri MCP Bridge plugin" The AI will examine your project, show required changes, and ask permission before modifying files. Or use the `/setup` slash command in your AI assistant. #### Manual Setup **1. Add dependency to `Cargo.toml`:** ```toml [dependencies] tauri-plugin-mcp-bridge = "0.1" ``` **2. Register plugin in `src-tauri/src/lib.rs`:** ```rust #[cfg_attr(mobile, tauri::mobile_entry_point)] pub fn run() { tauri::Builder::default() .plugin(tauri_plugin_mcp_bridge::init()) .run(tauri::generate_context!()) .expect("error while running tauri application"); } ``` **3. Add permissions to `src-tauri/capabilities/default.json`:** ```json { "permissions": [ "mcp-bridge:default" ] } ``` **4. (Optional) Initialize frontend bindings:** ```typescript import { invoke } from '@tauri-apps/api/core'; import { listen } from '@tauri-apps/api/event'; // Listen for element selection events await listen('mcp-bridge://element-selected', (event) => { console.log('Selected element:', event.payload); }); // Get backend state const state = await invoke('plugin:mcp-bridge|get_backend_state'); console.log('App state:', state); ``` ## Key Tools Reference ### Setup & Configuration #### `get_setup_instructions` Get instructions for setting up or updating the MCP Bridge plugin. ```typescript // Used by AI assistant automatically // Returns setup instructions and current project status ``` ### UI Automation #### `driver_session` Start, stop, or check status of automation session. ```bash # CLI tauri-mcp driver-session start --port 9223 tauri-mcp driver-session status tauri-mcp driver-session stop # In AI assistant - automatically managed ``` Parameters: - `action`: `"start"` | `"stop"` | `"status"` - `port`: WebSocket port (default: 9223) - `host`: Host address (default: "localhost") #### `webview_screenshot` Capture screenshots of webview or specific elements. ```bash # CLI - Full window tauri-mcp webview-screenshot --file screenshot.png # Specific element tauri-mcp webview-screenshot --selector ".main-content" --file content.png # Base64 output tauri-mcp webview-screenshot --format base64 ``` Parameters: - `selector?`: CSS selector for element to capture - `format?`: `"png"` | `"base64"` (default: "png") - `file?`: Output file path (CLI only) - `windowId?`: Target specific window #### `webview_find_element` Find elements using CSS selectors. ```bash # CLI tauri-mcp webview-find-element --selector "button.submit" tauri-mcp webview-find-element --selector "input[type='text']" --all ``` Returns: ```json { "selector": "button.submit", "found": true, "count": 1, "elements": [{ "tagName": "BUTTON", "text": "Submit", "visible": true, "bounds": {"x": 100, "y": 200, "width": 80, "height": 40} }] } ``` Parameters: - `selector`: CSS selector - `all?`: Return all matches (default: false) - `windowId?`: Target specific window #### `webview_interact` Click, scroll, swipe, focus, or long-press elements. ```bash # Click tauri-mcp webview-interact --action click --selector "button#login" # Scroll tauri-mcp webview-interact --action scroll --selector ".content" --x 0 --y 100 # Swipe (mobile) tauri-mcp webview-interact --action swipe --direction up --duration 300 # Long press tauri-mcp webview-interact --action longPress --selector ".context-menu-trigger" ``` Parameters: - `action`: `"click"` | `"scroll"` | `"swipe"` | `"focus"` | `"longPress"` - `selector?`: CSS selector (required for click, scroll, focus, longPress) - `x?`, `y?`: Coordinates for scroll - `direction?`: `"up"` | `"down"` | `"left"` | `"right"` (for swipe) - `duration?`: Duration in ms (for swipe, longPress) - `windowId?`: Target specific window #### `webview_keyboard` Type text or send key events. ```bash # Type text tauri-mcp webview-keyboard --action type --text "Hello, World!" # Press key tauri-mcp webview-keyboard --action press --key Enter # Key combination tauri-mcp webview-keyboard --action press --key c --modifiers '["Control"]' ``` Parameters: - `action`: `"type"` | `"press"` - `text?`: Text to type (for type action) - `key?`: Key name (for press action) - `modifiers?`: Array of `"Control"` | `"Shift"` | `"Alt"` | `"Meta"` - `windowId?`: Target specific window #### `webview_wait_for` Wait for elements, text, or events. ```bash # Wait for element tauri-mcp webview-wait-for --type element --selector ".loaded" --timeout 5000 # Wait for text tauri-mcp webview-wait-for --type text --text "Success" # Wait for event tauri-mcp webview-wait-for --type event --eventName "data-loaded" ``` Parameters: - `type`: `"element"` | `"text"` | `"event"` - `selector?`: CSS selector (for element) - `text?`: Text to wait for - `eventName?`: Event name to listen for - `timeout?`: Timeout in ms (default: 5000) - `windowId?`: Target specific window #### `webview_execute_js` Execute JavaScript in webview. ```bash # CLI tauri-mcp webview-execute-js --code "document.title" tauri-mcp webview-execute-js --code "document.querySelector('.count').textContent" ``` Parameters: - `code`: JavaScript code to execute - `windowId?`: Target specific window #### `webview_dom_snapshot` Get structured accessibility tree snapshot. ```bash # CLI tauri-mcp webview-dom-snapshot --selector ".main-content" tauri-mcp webview-dom-snapshot --max-depth 3 ``` Returns structured DOM tree with accessibility information. Parameters: - `selector?`: Root selector (default: "body") - `maxDepth?`: Maximum tree depth - `windowId?`: Target specific window #### `webview_select_element` Visual element picker - user clicks element in app, returns metadata and screenshot. ```bash # CLI tauri-mcp webview-select-element --timeout 30000 ``` Process: 1. App enters selection mode 2. User hovers/clicks element 3. Returns element metadata + screenshot with highlight Parameters: - `timeout?`: Selection timeout in ms (default: 30000) - `windowId?`: Target specific window #### `webview_get_pointed_element` Get metadata for element user Alt+Shift+Clicked. ```bash # CLI tauri-mcp webview-get-pointed-element ``` Returns most recently pointed element metadata. #### `manage_window` List windows, get info, or resize. ```bash # List all windows tauri-mcp manage-window --action list # Get window info tauri-mcp manage-window --action info --window-id "main" # Resize window tauri-mcp manage-window --action resize --window-id "main" --width 800 --height 600 ``` Parameters: - `action`: `"list"` | `"info"` | `"resize"` - `windowId?`: Window ID (for info, resize) - `width?`, `height?`: Dimensions (for resize) ### IPC & Plugin Tools #### `ipc_execute_command` Execute Tauri IPC commands. ```bash # CLI tauri-mcp ipc-execute-command --command "get_app_version" tauri-mcp ipc-execute-command --command "save_data" --args '{"key": "value"}' ``` Parameters: - `command`: Command name - `args?`: Command arguments (JSON object) #### `ipc_get_backend_state` Get app metadata and backend state. ```bash # CLI tauri-mcp ipc-get-backend-state ``` Returns: ```json { "metadata": { "name": "my-app", "version": "1.0.0", "os": "macos", "arch": "aarch64" }, "capabilities": { "windows": ["main"], "commands": ["get_app_version", "save_data"] } } ``` #### `ipc_monitor` Start or stop IPC monitoring. ```bash # Start monitoring tauri-mcp ipc-monitor --action start --events '["command", "event"]' # Stop monitoring tauri-mcp ipc-monitor --action stop ``` Parameters: - `action`: `"start"` | `"stop"` - `events?`: Array of event types to capture #### `ipc_get_captured` Get captured IPC traffic. ```bash # CLI tauri-mcp ipc-get-captured --clear ``` Parameters: - `clear?`: Clear captured events after reading (default: false) #### `ipc_emit_event` Emit custom events to Tauri app.