Tauri Dev MCP

https://github.com/zhxiaogg/tauri-dev-mcp
Admin
Tokens:12,831
Snippets:99
Trust Score:7.4
Update:1 year ago
Show doc for...
Tokens:
Raw
### Install MCP Server Dependencies

Source: https://github.com/zhxiaogg/tauri-dev-mcp/blob/main/docs/getting-started.md

Navigate to the mcp-server directory, install Node.js dependencies, and build the project. This prepares the server for execution.

```bash
cd mcp-server
npm install
npm run build
```

--------------------------------

### Test Tauri Dev MCP Integration

Source: https://github.com/zhxiaogg/tauri-dev-mcp/blob/main/docs/getting-started.md

Run the example Tauri application, start the MCP server, and verify the server's health endpoint using `curl`. This confirms the end-to-end setup is working.

```bash
# Terminal 1: Start the example Tauri app
cd example-app
npm install
npm run tauri:dev

# Terminal 2: Start the MCP server
cd mcp-server
npm start

# Terminal 3: Test the HTTP API directly
curl http://localhost:3001/api/health
```

--------------------------------

### Initialize Tauri Dev MCP Plugin in main.rs

Source: https://github.com/zhxiaogg/tauri-dev-mcp/blob/main/docs/getting-started.md

Integrate the `tauri-dev-mcp` plugin into your Tauri application's `src-tauri/src/main.rs` file by calling `tauri_dev_mcp::init()` during the builder setup. This activates the plugin within your app.

```rust
fn main() {
    tauri::Builder::default()
        .plugin(tauri_dev_mcp::init())
        .run(tauri::generate_context!())
        .expect("error while running tauri application");
}
```

--------------------------------

### Start the MCP Server

Source: https://github.com/zhxiaogg/tauri-dev-mcp/blob/main/docs/getting-started.md

Launch the MCP server from its directory. This makes the server available for connections from the Tauri app and Claude Desktop.

```bash
cd mcp-server
npm start
```

--------------------------------

### Build Tauri Plugin

Source: https://github.com/zhxiaogg/tauri-dev-mcp/blob/main/docs/getting-started.md

Navigate to the tauri-plugin directory and build the Rust project. This compiles the plugin for use in a Tauri application.

```bash
cd tauri-plugin
cargo build
```

--------------------------------

### Install and Run Tauri Dev MCP Server Locally

Source: https://github.com/zhxiaogg/tauri-dev-mcp/blob/main/mcp-server/README.md

Steps to clone the repository, install dependencies, build, and start the MCP server for local development. The server listens for MCP connections via STDIO.

```bash
cd mcp-server
npm install
```

```bash
npm run build
```

```bash
npm start
```

--------------------------------

### Tauri Dev MCP Available Tools API Reference

Source: https://github.com/zhxiaogg/tauri-dev-mcp/blob/main/docs/getting-started.md

A reference of the 11 tools provided by the MCP server for interacting with your Tauri application, categorized by functionality.

```APIDOC
DOM Inspection:
  inspect_element: Get detailed element information (styles, attributes, etc.)
  query_selector: Find multiple elements by CSS selector

Console Monitoring:
  get_console_logs: Retrieve latest console messages (newest first)

Automation:
  click_element: Click elements by CSS selector
  input_text: Type text into form fields
  scroll_to_element: Scroll to bring elements into view
  hover_element: Trigger hover states
  select_option: Select dropdown options
  check_checkbox: Check/uncheck checkboxes
  press_key: Send keyboard input
  wait_for_element: Wait for element state changes
```

--------------------------------

### Add Tauri Dev MCP Plugin to Cargo.toml

Source: https://github.com/zhxiaogg/tauri-dev-mcp/blob/main/docs/getting-started.md

Configure your Tauri app's `src-tauri/Cargo.toml` to include the `tauri-dev-mcp` plugin as a local dependency. This links the plugin to your project.

```toml
[dependencies]
tauri = { version = "2.0", features = [] }
tauri-dev-mcp = { path = "path/to/tauri-plugin" }
```

--------------------------------

### Configure Claude Desktop for MCP Server

Source: https://github.com/zhxiaogg/tauri-dev-mcp/blob/main/docs/getting-started.md

Add a new `mcpServers` entry to your Claude Desktop configuration file (`claude_desktop_config.json`) to specify how to launch the Tauri Dev MCP server. This allows Claude Desktop to connect to and utilize the server.

```json
{
  "mcpServers": {
    "tauri-dev": {
      "command": "node",
      "args": ["path/to/mcp-server/dist/index.js"]
    }
  }
}
```

--------------------------------

### Configure Claude Desktop for Tauri Dev MCP Server

Source: https://github.com/zhxiaogg/tauri-dev-mcp/blob/main/mcp-server/README.md

Example JSON configuration to integrate the Tauri Dev MCP server into Claude Desktop, specifying the command and arguments to start the server.

```json
{
  "mcpServers": {
    "tauri-dev": {
      "command": "node",
      "args": ["/path/to/mcp-server/dist/index.js"]
    }
  }
}
```

--------------------------------

### Start a Repeating Counter in JavaScript

Source: https://github.com/zhxiaogg/tauri-dev-mcp/blob/main/example-app/index.html

Initializes and starts a counter that increments every second, updating a display element on the page. It prevents multiple intervals from running simultaneously and logs when the counter starts.

```JavaScript
let counterInterval = null;
let counterValue = 0;
function startCounter() {
  if (counterInterval) return;
  counterInterval = setInterval(() => {
    counterValue++;
    document.getElementById('counter').textContent = counterValue;
  }, 1000);
  console.log('Counter started');
}
```

--------------------------------

### Common CSS Selectors for UI Components

Source: https://github.com/zhxiaogg/tauri-dev-mcp/blob/main/design/css-selectors-guide.md

Presents CSS selector examples for widely used UI patterns like modals, tooltips, alerts, cards, sidebars, headers, and footers.

```css
/* Common UI patterns */
.modal                   /* Modal dialogs */
.tooltip                 /* Tooltips */
.alert                   /* Alert messages */
.card                    /* Card components */
.sidebar                 /* Sidebars */
.header                  /* Page headers */
.footer                  /* Page footers */
```

--------------------------------

### Run Tauri Example Application

Source: https://github.com/zhxiaogg/tauri-dev-mcp/blob/main/README.md

How to run the example Tauri application, showing configurations for both default and custom server addresses (host and port).

```bash
# Default (127.0.0.1:3001)
cd example-app && npm run tauri dev

# Custom address
cd example-app && TAURI_MCP_HOST=localhost TAURI_MCP_PORT=8080 npm run tauri dev
```

--------------------------------

### Select Elements by Class Attribute

Source: https://github.com/zhxiaogg/tauri-dev-mcp/blob/main/design/css-selectors-guide.md

Shows how to select elements based on their 'class' attribute, including examples for single and multiple class selections.

```css
.btn          /* <button class="btn"> */
.nav-item     /* <li class="nav-item"> */
.error-msg    /* <span class="error-msg"> */
.btn.primary  /* <button class="btn primary"> (both classes) */
```

--------------------------------

### Select Elements by Unique ID

Source: https://github.com/zhxiaogg/tauri-dev-mcp/blob/main/design/css-selectors-guide.md

Illustrates selecting elements using their unique 'id' attribute, with examples for a button, header, and login form.

```css
#my-button    /* <button id="my-button"> */
#header       /* <div id="header"> */
#login-form   /* <form id="login-form"> */
```

--------------------------------

### Select Elements by HTML Tag

Source: https://github.com/zhxiaogg/tauri-dev-mcp/blob/main/design/css-selectors-guide.md

Demonstrates how to select HTML elements using their tag names, providing examples for common elements like div, button, input, and span.

```css
div           /* All <div> elements */
button        /* All <button> elements */
input         /* All <input> elements */
span          /* All <span> elements */
```

--------------------------------

### Common CSS Selectors for Navigation Components

Source: https://github.com/zhxiaogg/tauri-dev-mcp/blob/main/design/css-selectors-guide.md

Offers CSS selector examples for common navigation elements such as navigation bars, menus, items, dropdowns, and breadcrumbs.

```css
/* Navigation elements */
.navbar                  /* Navigation bar */
.nav-menu                /* Navigation menu */
.nav-item                /* Navigation items */
.dropdown                /* Dropdown menus */
.breadcrumb              /* Breadcrumb navigation */
```

--------------------------------

### Start Tauri App and MCP Server Development Stack

Source: https://github.com/zhxiaogg/tauri-dev-mcp/blob/main/mcp-server/README.md

Sequence of commands to start both the Tauri application (with the plugin) and the MCP server in separate terminals, preparing the environment for Claude Desktop interaction.

```bash
cd your-tauri-app
npm run tauri:dev
```

```bash
cd mcp-server
npm start
```

--------------------------------

### Display Initial Console Log Messages on Page Load in JavaScript

Source: https://github.com/zhxiaogg/tauri-dev-mcp/blob/main/example-app/index.html

Outputs a series of console messages with different log levels (log, info, debug, warn) immediately when the script starts. This demonstrates early logging capabilities and provides initial status information for the application.

```JavaScript
console.log('🌟 Very early log message - page script starting');
console.info('📋 DOM content loading...');
console.debug('🔧 Setting up event handlers...');
console.log('🚀 Tauri Dev MCP Example App loaded');
console.info('This app is ready for MCP testing');
console.warn('⚠️ Testing warning level logging');
console.log('✨ All initial setup completed');
```

--------------------------------

### Example Claude Prompts for Tauri Dev MCP

Source: https://github.com/zhxiaogg/tauri-dev-mcp/blob/main/mcp-server/README.md

Illustrative examples of natural language prompts that can be used in Claude to interact with a Tauri application via the MCP server, demonstrating various functionalities like inspection, UI automation, and log retrieval.

```APIDOC
"Can you inspect the main navigation menu and tell me about its structure?"

"Click the 'New Project' button and then fill out the project name field with 'My Test Project'"

"Get the latest console logs to see if there are any JavaScript errors"

"Scroll down to the footer and click the 'Contact Us' link"
```

--------------------------------

### Set Environment Variables for Tauri MCP Server

Source: https://github.com/zhxiaogg/tauri-dev-mcp/blob/main/mcp-server/README.md

Example of setting environment variables (`TAURI_MCP_HOST`, `TAURI_MCP_TIMEOUT`) to customize the Tauri app HTTP host and request timeout, then starting the server.

```bash
export TAURI_MCP_HOST=http://localhost:3002
export TAURI_MCP_TIMEOUT=10000
npm start
```

--------------------------------

### Common CSS Selectors for Form Elements and Validation

Source: https://github.com/zhxiaogg/tauri-dev-mcp/blob/main/design/css-selectors-guide.md

Provides practical CSS selector examples for targeting various form inputs, text areas, buttons, and for styling based on form validation states like invalid or required.

```css
/* Form elements */
form                     /* The form itself */
input[type="text"]       /* Text inputs */
input[type="password"]   /* Password inputs */
input[type="email"]      /* Email inputs */
select                   /* Dropdown selects */
textarea                 /* Text areas */
button[type="submit"]    /* Submit buttons */

/* Form validation */
.error                   /* Error messages */
input:invalid            /* Invalid inputs */
input:required           /* Required fields */
```

--------------------------------

### Test MCP Tools via Direct HTTP API

Source: https://github.com/zhxiaogg/tauri-dev-mcp/blob/main/README.md

Example `curl` command demonstrating how to execute an MCP tool, such as `query_selector`, directly via the server's HTTP API endpoint.

```bash
npm test

curl -X POST http://127.0.0.1:3001/api/execute \
  -H "Content-Type: application/json" \
  -d '{
    "tool": "query_selector",
    "params": {"selector": "button", "limit": 5}
  }'
```

--------------------------------

### Tauri Dev MCP Server Development Scripts

Source: https://github.com/zhxiaogg/tauri-dev-mcp/blob/main/mcp-server/README.md

Common npm scripts for developing the MCP server, including starting, building, watching for changes, and running tests.

```bash
npm start
```

```bash
npm run build
```

```bash
npm run dev
```

```bash
npm test
```

--------------------------------

### Tooltip Component Styling

Source: https://github.com/zhxiaogg/tauri-dev-mcp/blob/main/example-app/index.html

Implements the CSS for a tooltip component, managing its positioning, initial hidden state, and a smooth transition effect for visibility on hover. This provides contextual information on user interaction.

```CSS
.tooltip { position: relative; display: inline-block; }
.tooltip .tooltiptext { visibility: hidden; width: 120px; background-color: black; color: white; text-align: center; border-radius: 6px; padding: 5px; position: absolute; z-index: 1; bottom: 125%; left: 50%; margin-left: -60px; opacity: 0; transition: opacity 0.3s; }
.tooltip:hover .tooltiptext { visibility: visible; opacity: 1; }
```

--------------------------------

### CSS Selectors for `inspect_element`

Source: https://github.com/zhxiaogg/tauri-dev-mcp/blob/main/design/css-selectors-guide.md

Provides examples of specific CSS selectors recommended for use with an `inspect_element` function, which typically targets a single, unique UI element for detailed information retrieval. These selectors are precise to ensure accurate identification.

```css
#main-nav-button
.user-profile-dropdown
[data-testid="checkout-btn"]
```

--------------------------------

### CSS Selectors for Automation Actions

Source: https://github.com/zhxiaogg/tauri-dev-mcp/blob/main/design/css-selectors-guide.md

Offers examples of precise and stable CSS selectors ideal for automation actions such as `click_element` or `input_text`. These selectors ensure reliable interaction with specific UI components, minimizing the risk of automation script failures.

```css
#login-submit          /* Specific button ID */
[name="username"]      /* Form field by name */
.modal .close-btn      /* Close button in modal */
```

--------------------------------

### General Page and Container Styling

Source: https://github.com/zhxiaogg/tauri-dev-mcp/blob/main/example-app/index.html

Defines the foundational visual styles for the entire page body, a central content container, and main headings. It includes background gradients, font settings, and basic layout for the application.

```CSS
body { margin: 0; font-family: system-ui, sans-serif; background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); min-height: 100vh; padding: 20px; box-sizing: border-box; }
.container { max-width: 800px; margin: 0 auto; background: white; border-radius: 12px; padding: 30px; box-shadow: 0 10px 30px rgba(0,0,0,0.2); }
h1 { color: #333; text-align: center; margin-bottom: 30px; }
.demo-section { margin: 20px 0; padding: 20px; border: 2px solid #eee; border-radius: 8px; }
.demo-section h2 { color: #555; margin-top: 0; }
```

--------------------------------

### Select Elements by Attribute Values

Source: https://github.com/zhxiaogg/tauri-dev-mcp/blob/main/design/css-selectors-guide.md

Explains how to select elements based on the presence or value of any attribute, covering exact matches, partial matches, and attribute presence.

```css
[type="email"]           /* <input type="email"> */
[data-id="123"]          /* <div data-id="123"> */
[aria-label="Close"]     /* Elements with aria-label="Close" */
[disabled]               /* Elements with disabled attribute */
[class*="btn"]           /* Elements where class contains "btn" */
[href^="https"]          /* Links starting with https */
[src$=".png"]            /* Images ending with .png */
```

--------------------------------

### Advanced CSS Selectors: Combining Multiple Conditions

Source: https://github.com/zhxiaogg/tauri-dev-mcp/blob/main/design/css-selectors-guide.md

Demonstrates how to create more specific selectors by combining multiple conditions, such as class and attribute combinations, or using the `:not()` pseudo-class.

```css
button.btn.primary              /* Button with both btn and primary classes */
input[type="text"][required]    /* Required text inputs */
.container .btn:not(.disabled)  /* Enabled buttons in container */
```

--------------------------------

### Axum Router Setup for HTTP Endpoints

Source: https://github.com/zhxiaogg/tauri-dev-mcp/blob/main/design/tauri-plugin-api.md

Illustrates the creation of an Axum router, defining the API routes for health checks and command execution, mapping them to their respective handler functions.

```rust
use axum::{Router, routing::{get, post}};

pub fn create_router() -> Router {
    Router::new()
        .route("/api/health", get(health_handler))
        .route("/api/execute", post(execute_handler))
}
```

--------------------------------

### Select Multiple Different Elements Simultaneously

Source: https://github.com/zhxiaogg/tauri-dev-mcp/blob/main/design/css-selectors-guide.md

Shows how to select several distinct elements or groups of elements by separating selectors with a comma, applying the same styles to all.

```css
button, input, select    /* All buttons, inputs, and selects */
.btn, .link             /* Elements with .btn OR .link class */
```

--------------------------------

### Common CSS Selectors for Custom Data Attributes

Source: https://github.com/zhxiaogg/tauri-dev-mcp/blob/main/design/css-selectors-guide.md

Illustrates using CSS selectors to target elements based on custom 'data-' attributes, useful for test automation, action triggers, component identification, and state tracking.

```css
/* Custom data attributes */
[data-testid="login-btn"]      /* Test automation */
[data-action="submit"]         /* Action triggers */
[data-component="slider"]      /* Component identification */
[data-state="active"]          /* State tracking */
```

--------------------------------

### Invoke Tauri Commands via MCP Tools

Source: https://github.com/zhxiaogg/tauri-dev-mcp/blob/main/README.md

Examples of using the `tauri_invoke` MCP tool to call Tauri commands like `get_app_version` and `greet` with specified arguments, typically used within an MCP client or AI assistant.

```APIDOC
Tool: tauri_invoke
Arguments:
- command: "get_app_version"
- args: {}

Tool: tauri_invoke  
Arguments:
- command: "greet"
- args: {"name": "Claude"}
```

--------------------------------

### Examples of Stable vs. Brittle CSS Selectors

Source: https://github.com/zhxiaogg/tauri-dev-mcp/blob/main/design/css-selectors-guide.md

Illustrates the difference between reliable CSS selectors suitable for automation and brittle selectors that are prone to breaking with minor UI changes. Stable selectors prioritize unique identifiers and semantic meaning, while brittle ones rely on structural position or styling.

```css
#submit-form
[data-testid="user-profile"]
.login-button
button[type="submit"]
input[name="email"]

div > div > button:nth-child(3)    /* Too dependent on structure */
.red-button                        /* Based on styling, not function */
body > main > section:first        /* Too much nesting */
```

--------------------------------

### Button Styling and Hover Effects

Source: https://github.com/zhxiaogg/tauri-dev-mcp/blob/main/example-app/index.html

Provides comprehensive CSS styles for standard and secondary buttons, including their default appearance, padding, borders, and interactive hover effects to enhance user experience.

```CSS
button { background: #4CAF50; color: white; border: none; padding: 10px 20px; border-radius: 4px; cursor: pointer; margin: 5px; font-size: 14px; }
button:hover { background: #45a049; }
button.secondary { background: #2196F3; }
button.secondary:hover { background: #1976D2; }
```

--------------------------------

### Simulate Test Suite Execution with Console Logging in JavaScript

Source: https://github.com/zhxiaogg/tauri-dev-mcp/blob/main/example-app/index.html

Simulates a series of test outcomes using `setTimeout` to mimic asynchronous operations. It demonstrates various console log levels (log, warn, error) and updates a status element to show test progress.

```JavaScript
function runTests() {
  console.log('🧪 Starting test suite...');
  document.getElementById('test-status').textContent = 'Running tests...';
  setTimeout(() => {
    console.log('✅ Test 1: DOM element found');
  }, 500);
  setTimeout(() => {
    console.warn('⚠️ Test 2: Performance warning');
  }, 1000);
  setTimeout(() => {
    console.log('✅ Test 3: Form validation passed');
  }, 1500);
  setTimeout(() => {
    console.error('❌ Test 4: Network error simulated');
  }, 2000);
  setTimeout(() => {
    console.log('🎉 Test suite completed');
    document.getElementById('test-status').textContent = 'All tests completed!';
  }, 2500);
}
```

--------------------------------

### Handle Menu Option Clicks in JavaScript

Source: https://github.com/zhxiaogg/tauri-dev-mcp/blob/main/example-app/index.html

Logs the selected menu option to the console and updates a status element on the page. This function is used to demonstrate simple event handling and UI feedback.

```JavaScript
function menuClick(option) {
  console.log('Menu clicked:', option);
  document.getElementById('test-status').textContent = `Menu option selected: ${option}`;
}
```

--------------------------------

### Handle Form Submission and Display Status in JavaScript

Source: https://github.com/zhxiaogg/tauri-dev-mcp/blob/main/example-app/index.html

Captures username and email from form inputs, logs them to the console, and updates a status element on the page. It demonstrates basic form data retrieval and DOM manipulation.

```JavaScript
function submitForm() {
  const username = document.getElementById('username').value;
  const email = document.getElementById('email').value;
  console.log('Form submitted:', { username, email });
  document.getElementById('test-status').textContent = `Form submitted with username: ${username}`;
}
```

--------------------------------

### Advanced CSS Selectors: Content-Based Selection

Source: https://github.com/zhxiaogg/tauri-dev-mcp/blob/main/design/css-selectors-guide.md

Shows advanced selectors that can target elements based on their content or placeholder state, such as links containing specific text or inputs with visible placeholders.

```css
a[href*="github"]               /* Links containing "github" */
div:contains("Error")           /* Divs containing "Error" text */
input:placeholder-shown         /* Inputs showing placeholder */
```

--------------------------------

### Select Elements Based on Parent-Child Relationship

Source: https://github.com/zhxiaogg/tauri-dev-mcp/blob/main/design/css-selectors-guide.md

Demonstrates selecting elements based on their hierarchical relationship to other elements, including descendant (any depth) and direct child selectors.

```css
.container button        /* Buttons inside .container (any depth) */
form > input             /* Direct child inputs of form */
.nav li                  /* List items inside .nav */
#sidebar .menu-item      /* .menu-item inside #sidebar */
```

--------------------------------

### Advanced CSS Selectors: Position-Based Selection

Source: https://github.com/zhxiaogg/tauri-dev-mcp/blob/main/design/css-selectors-guide.md

Explores advanced pseudo-selectors for targeting elements based on their position within a group, including first, last, nth-child, and nth-of-type.

```css
li:first-child                  /* First item */
li:last-child                   /* Last item */
li:nth-child(odd)               /* Odd-numbered items */
li:nth-child(3)                 /* Third item */
tr:nth-of-type(even)            /* Even table rows */
```

--------------------------------

### Enable Debug Logging for Tauri MCP

Source: https://github.com/zhxiaogg/tauri-dev-mcp/blob/main/mcp-server/README.md

This command enables detailed debug logging for the Tauri MCP plugin, allowing developers to monitor internal processes and identify issues. It should be run before starting the application to capture all relevant logs.

```bash
DEBUG=tauri-mcp:* npm start
```

--------------------------------

### Dropdown Menu Component Styling

Source: https://github.com/zhxiaogg/tauri-dev-mcp/blob/main/example-app/index.html

Provides the CSS for a dropdown menu, including styles for its container, hidden content, positioning, and visual effects like box shadows. It also defines hover states for individual dropdown options.

```CSS
.dropdown { position: relative; display: inline-block; }
.dropdown-content { display: none; position: absolute; background-color: #f9f9f9; min-width: 160px; box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2); z-index: 1; border-radius: 4px; overflow: hidden; }
.dropdown-content a { color: black; padding: 12px 16px; text-decoration: none; display: block; }
.dropdown-content a:hover { background-color: #f1f1f1; }
.dropdown:hover .dropdown-content { display: block; }
```

--------------------------------

### Console Log Output Area Styling

Source: https://github.com/zhxiaogg/tauri-dev-mcp/blob/main/example-app/index.html

Styles the dedicated display area for console messages, providing a distinct background, border, and scrollable overflow. This ensures that long log outputs are contained and easily reviewable.

```CSS
.log-output { background: #f5f5f5; border: 1px solid #ddd; border-radius: 4px; padding: 10px; margin: 10px 0; font-family: monospace; font-size: 12px; max-height: 200px; overflow-y: auto; }
```

--------------------------------

### Log Complex JavaScript Objects to Console

Source: https://github.com/zhxiaogg/tauri-dev-mcp/blob/main/example-app/index.html

Defines and logs a JavaScript object with nested properties and arrays to the console. This function is useful for debugging and inspecting structured data.

```JavaScript
function logComplexObject() {
  const obj = {
    name: 'Test Object',
    values: [1, 2, 3],
    nested: { property: 'value', array: ['a', 'b', 'c'] }
  };
  console.log('Complex object:', obj);
}
```

--------------------------------

### API Method: inspect_element

Source: https://github.com/zhxiaogg/tauri-dev-mcp/blob/main/design/low-level-api-design.md

Get detailed information about a specific DOM element, returning the first match. Use this method when comprehensive details about a single element are required, including its styles, attributes, and properties.

```APIDOC
Method: inspect_element
Description: Get detailed information about a specific DOM element (returns first match)
When to use: When you need comprehensive details about ONE specific element, including styles, attributes, and properties.
```

```json
{
  "type": "object",
  "properties": {
    "selector": {
      "type": "string",
      "description": "CSS selector (returns first matching element)",
      "examples": ["#submit-btn", ".login-form", "[data-testid='user-menu']"]
    },
    "include_styles": {
      "type": "boolean",
      "default": true,
      "description": "Include computed styles"
    }
  },
  "required": ["selector"]
}
```

```json
{
  "type": "object",
  "properties": {
    "element": {
      "type": "object",
      "properties": {
        "tagName": {"type": "string"},
        "id": {"type": "string"},
        "className": {"type": "string"},
        "textContent": {"type": "string"},
        "innerHTML": {"type": "string"},
        "attributes": {
          "type": "object",
          "additionalProperties": {"type": "string"}
        },
        "computedStyles": {
          "type": "object",
          "additionalProperties": {"type": "string"}
        },
        "boundingRect": {
          "type": "object",
          "properties": {
            "x": {"type": "number"},
            "y": {"type": "number"},
            "width": {"type": "number"},
            "height": {"type": "number"},
            "top": {"type": "number"},
            "right": {"type": "number"},
            "bottom": {"type": "number"},
            "left": {"type": "number"}
          }
        },
        "isVisible": {"type": "boolean"},
        "isInteractable": {"type": "boolean"}
      }
    },
    "found": {"type": "boolean"},
    "error": {"type": "string"}
  }
}
```

--------------------------------

### Stop a Repeating Counter in JavaScript

Source: https://github.com/zhxiaogg/tauri-dev-mcp/blob/main/example-app/index.html

Clears the interval for the running counter, effectively stopping it. It checks if a counter is active before attempting to stop it and logs the action.

```JavaScript
function stopCounter() {
  if (counterInterval) {
    clearInterval(counterInterval);
    counterInterval = null;
    console.log('Counter stopped');
  }
}
```

--------------------------------

### Select Elements Based on State or Position (Pseudo-selectors)

Source: https://github.com/zhxiaogg/tauri-dev-mcp/blob/main/design/css-selectors-guide.md

Illustrates the use of pseudo-selectors to target elements based on their current state (e.g., hover, focus, checked) or position within a group (e.g., first-child, nth-child).

```css
button:hover             /* Button being hovered */
input:focus              /* Focused input */
li:first-child           /* First li in its parent */
div:nth-child(2)         /* Second div child */
input:checked            /* Checked checkboxes/radios */
option:selected          /* Selected option */
```

--------------------------------

### API Endpoint: Health Check (GET /api/health)

Source: https://github.com/zhxiaogg/tauri-dev-mcp/blob/main/design/tauri-plugin-api.md

Checks the health status of the Tauri plugin and the readiness of the WebView. Returns a status indicating if the plugin is healthy and if the WebView is initialized.

```APIDOC
GET /api/health
Health check
```

```json
{
  "status": "healthy",
  "webview_ready": true
}
```

--------------------------------

### Early Console Log Injection Test

Source: https://github.com/zhxiaogg/tauri-dev-mcp/blob/main/example-app/index.html

Tests the timing of script injection by logging messages to the console very early during page parsing. This helps verify if the HEAD script is captured promptly by the Tauri Dev MCP server.

```JavaScript
console.log('🏁 HEAD script: Page parsing started'); console.warn('⏰ HEAD script: This should be captured if injection is early enough');
```

--------------------------------

### Form Element Styling

Source: https://github.com/zhxiaogg/tauri-dev-mcp/blob/main/example-app/index.html

Defines consistent visual styles for various form input types such as text fields, email fields, text areas, and select dropdowns. It also includes styling for form groups and labels to ensure proper alignment and readability.

```CSS
input\[type="text"\]\, input\[type="email"\]\, textarea { padding: 8px; margin: 5px; border: 1px solid #ddd; border-radius: 4px; font-size: 14px; }
select { padding: 8px; margin: 5px; border: 1px solid #ddd; border-radius: 4px; }
.form-group { margin: 10px 0; }
label { display: inline-block; width: 120px; font-weight: bold; }
```

--------------------------------

### CSS Selectors for `query_selector`

Source: https://github.com/zhxiaogg/tauri-dev-mcp/blob/main/design/css-selectors-guide.md

Demonstrates broader CSS selectors suitable for a `query_selector` function, designed to find multiple related elements. These selectors are less specific, allowing for the selection of collections of elements based on common attributes or classes.

```css
.nav-item              /* All navigation items */
input[type="text"]     /* All text inputs */
.error-message         /* All error messages */
```

--------------------------------

### Invoke Tauri Commands via Direct HTTP API

Source: https://github.com/zhxiaogg/tauri-dev-mcp/blob/main/README.md

Examples of using `curl` to directly invoke Tauri commands through the dedicated HTTP API endpoint, including commands with and without parameters, and those returning complex JSON responses.

```bash
# Invoke Tauri commands via dedicated endpoint
curl -X POST http://127.0.0.1:3001/api/invoke \
  -H "Content-Type: application/json" \
  -d '{
    "command": "get_app_version",
    "args": {}
  }'

# Command with parameters
curl -X POST http://127.0.0.1:3001/api/invoke \
  -H "Content-Type: application/json" \
  -d '{
    "command": "greet",
    "args": {"name": "World"}
  }'

# Complex command with JSON response
curl -X POST http://127.0.0.1:3001/api/invoke \
  -H "Content-Type: application/json" \
  -d '{
    "command": "get_system_info",
    "args": {}
  }'
```

--------------------------------

### Add Dynamic List Item to DOM in JavaScript

Source: https://github.com/zhxiaogg/tauri-dev-mcp/blob/main/example-app/index.html

Appends a new list item (`<li>`) with dynamic content to an unordered or ordered list (`<ul>`/`<ol>`) element in the DOM. It increments a counter for unique item numbering and logs the action.

```JavaScript
function addListItem() {
  const list = document.getElementById('dynamic-list');
  const li = document.createElement('li');
  li.textContent = `Dynamic item ${listCounter}`;
  list.appendChild(li);
  listCounter++;
  console.log(`Added list item ${listCounter - 1}`);
}
```

--------------------------------

### Toggle Element Visibility in JavaScript

Source: https://github.com/zhxiaogg/tauri-dev-mcp/blob/main/example-app/index.html

Toggles the display style property of a specified HTML element between 'none' and 'block'. It logs the visibility state change to the console, providing a simple way to show or hide UI elements.

```JavaScript
function toggleVisibility() {
  const element = document.getElementById('hidden-element');
  if (element.style.display === 'none') {
    element.style.display = 'block';
    console.log('Element made visible');
  } else {
    element.style.display = 'none';
    console.log('Element hidden');
  }
}
```

--------------------------------

### Handle Input Field Events on DOM Content Load in JavaScript

Source: https://github.com/zhxiaogg/tauri-dev-mcp/blob/main/example-app/index.html

Attaches event listeners for 'input', 'change', 'focus', and 'blur' events to username and email input fields once the DOM is fully loaded. It logs the event type and target value to the console, useful for tracking user interaction.

```JavaScript
document.addEventListener('DOMContentLoaded', function() {
  const usernameInput = document.getElementById('username');
  const emailInput = document.getElementById('email');
  if (usernameInput) {
    usernameInput.addEventListener('input', function(e) {
      console.log('Username input event fired:', e.target.value);
    });
    usernameInput.addEventListener('change', function(e) {
      console.log('Username change event fired:', e.target.value);
    });
    usernameInput.addEventListener('focus', function(e) {
      console.log('Username focus event fired');
    });
    usernameInput.addEventListener('blur', function(e) {
      console.log('Username blur event fired');
    });
  }
  if (emailInput) {
    emailInput.addEventListener('input', function(e) {
      console.log('Email input event fired:', e.target.value);
    });
    emailInput.addEventListener('change', function(e) {
      console.log('Email change event fired:', e.target.value);
    });
  }
});
```

--------------------------------

### Monitor MCP Server Logs

Source: https://github.com/zhxiaogg/tauri-dev-mcp/blob/main/mcp-server/README.md

This command starts the MCP server and pipes its standard error output to a file, allowing continuous monitoring of tool executions and errors. It's useful for real-time debugging and operational oversight of the server's activities.

```bash
npm start 2>&1 | tee mcp-server.log
```

--------------------------------

### Remove Last Dynamic List Item from DOM in JavaScript

Source: https://github.com/zhxiaogg/tauri-dev-mcp/blob/main/example-app/index.html

Removes the last child element from a specified dynamic list in the DOM. It includes a check to prevent errors if the list is empty and logs the action or a warning.

```JavaScript
function removeListItem() {
  const list = document.getElementById('dynamic-list');
  if (list.children.length > 0) {
    list.removeChild(list.lastElementChild);
    console.log('Removed last list item');
  } else {
    console.warn('No items to remove');
  }
}
```

--------------------------------

### Tauri Plugin HTTP API Endpoints and Error Handling

Source: https://github.com/zhxiaogg/tauri-dev-mcp/blob/main/design/low-level-api-design.md

Defines the HTTP API endpoints for the Tauri plugin, including the base URL, specific POST and GET methods for executing commands and health checks, and a standardized error response format with common error codes.

```APIDOC
HTTP API Endpoints (Tauri Plugin):
  Base URL Structure:
    http://localhost:3001/api/
  Endpoint Definitions:
    POST /execute:
      Description: Execute any tool command
      Request Body:
        {
          "tool": "inspect_element",
          "params": {
            "selector": "#my-button"
          }
        }
      Response:
        {
          "success": true,
          "data": { /* tool-specific response */ }
        }
    GET /health:
      Description: Health check endpoint
      Response:
        {
          "status": "healthy",
          "webview_ready": true
        }
  Error Handling:
    Error Response Format:
      {
        "success": false,
        "error": {
          "code": "ELEMENT_NOT_FOUND",
          "message": "No element found matching selector '#missing'"
        }
      }
    Error Codes:
      - ELEMENT_NOT_FOUND - CSS selector returned no results
      - ELEMENT_NOT_INTERACTABLE - Element not clickable/visible
      - TIMEOUT - Operation timed out
      - INVALID_SELECTOR - Malformed CSS selector
      - WEBVIEW_NOT_READY - WebView not initialized
```

--------------------------------

### Build and Run Tauri Dev MCP Server for Production

Source: https://github.com/zhxiaogg/tauri-dev-mcp/blob/main/mcp-server/README.md

Instructions to build the MCP server for production and run the compiled JavaScript file.

```bash
npm run build

node dist/index.js
```

--------------------------------

### Configure MCP Client for Tauri Dev Server

Source: https://github.com/zhxiaogg/tauri-dev-mcp/blob/main/design/project-summary.md

This JSON configuration snippet illustrates how to define a new MCP server entry for the Tauri Dev MCP server within an MCP-compatible client. It specifies the command and arguments required to launch the server, enabling the client to connect and utilize its functionalities.

```JSON
{
  "mcpServers": {
    "tauri-dev": {
      "command": "node",
      "args": ["tauri-dev-mcp-server"]
    }
  }
}
```

--------------------------------

### Build Tauri Dev MCP Components

Source: https://github.com/zhxiaogg/tauri-dev-mcp/blob/main/README.md

Instructions to build the `mcp-server` (npm) and `tauri-plugin` (cargo) components required for the Tauri Dev MCP Server.

```bash
cd mcp-server && npm install && npm run build
cd ../tauri-plugin && cargo build --release
```

--------------------------------

### Tauri Dev MCP Server Core Tools Overview

Source: https://github.com/zhxiaogg/tauri-dev-mcp/blob/main/design/high-level-architecture.md

Lists the primary tools available for DOM inspection, console monitoring, and automation, with a brief description of each tool's purpose.

```APIDOC
DOM Inspection Tools:
  inspect_element: Get detailed element info (styles, attributes) for ONE element
  query_selector: Find MULTIPLE elements, basic info only
Console Tools:
  get_console_logs: Retrieve latest N console messages (newest first)
Automation Tools:
  click_element: Click elements (left/right/double click)
  input_text: Type text into form fields
  scroll_to_element: Scroll to bring elements into view
  hover_element: Hover over elements to trigger hover states
  select_option: Select dropdown options
  check_checkbox: Check/uncheck checkboxes and radio buttons
  press_key: Send keyboard input (Enter, Tab, Escape, etc.)
  wait_for_element: Wait for elements to appear/disappear/change state
```

--------------------------------

### Tauri Dev MCP Server Tool Capabilities Matrix

Source: https://github.com/zhxiaogg/tauri-dev-mcp/blob/main/design/high-level-architecture.md

Provides a detailed matrix of each core tool's capabilities, including its category, required input, expected output, and any side effects.

```APIDOC
Tool Capabilities:
- inspect_element:
    Category: DOM
    Input: CSS selector
    Output: detailed element info
    Side Effects: None
- query_selector:
    Category: DOM
    Input: CSS selector
    Output: multiple elements list
    Side Effects: None
- get_console_logs:
    Category: Console
    Input: limit + level filter
    Output: latest N log entries
    Side Effects: Optional clear
- click_element:
    Category: Automation
    Input: CSS selector + click type
    Output: success status
    Side Effects: Click event
- input_text:
    Category: Automation
    Input: CSS selector + text
    Output: success status
    Side Effects: Form input
- scroll_to_element:
    Category: Automation
    Input: CSS selector
    Output: success status
    Side Effects: Page scroll
- hover_element:
    Category: Automation
    Input: CSS selector
    Output: success status
    Side Effects: Hover state
- select_option:
    Category: Automation
    Input: selector + option
    Output: success status
    Side Effects: Selection change
- check_checkbox:
    Category: Automation
    Input: CSS selector + state
    Output: success status
    Side Effects: Checkbox state
- press_key:
    Category: Automation
    Input: key + modifiers
    Output: success status
    Side Effects: Key event
- wait_for_element:
    Category: Automation
    Input: selector + condition
    Output: wait result
    Side Effects: None
```

--------------------------------

### Tauri Dev MCP Server Implementation Notes

Source: https://github.com/zhxiaogg/tauri-dev-mcp/blob/main/design/high-level-architecture.md

Provides key implementation details and constraints for the Tauri Dev MCP Server, such as connection specifics, security, and future considerations.

```APIDOC
- Single Tauri app connection (localhost:3001)
- No authentication/security required (dev tool only)
- No real-time streaming or events
- No batching or complex operations
- No application state monitoring
- Future: Optional `list_tools` and `invoke_tool` support
```

--------------------------------

### Integrate Tauri Dev MCP Plugin

Source: https://github.com/zhxiaogg/tauri-dev-mcp/blob/main/README.md

Steps to add the `tauri-dev-mcp` plugin to an existing Tauri application, including Cargo.toml dependency, main.rs initialization, and tauri.conf.json configuration for global Tauri API access.

```toml
# In your Cargo.toml
[dependencies]
tauri-dev-mcp = { path = "path/to/tauri-dev-mcp/tauri-plugin" }
```

```rust
// In your main.rs
fn main() {
    // Initialize logging (choose one):
    env_logger::init();  // For env_logger
    // OR
    tracing_subscriber::fmt::init();  // For tracing

    tauri::Builder::default()
        .plugin(tauri_dev_mcp::init())
        .invoke_handler(tauri::generate_handler![
            // Your Tauri commands here
        ])
        .run(tauri::generate_context!())
        .expect("error while running tauri application");
}
```

```json
// In your tauri.conf.json, enable global Tauri API access:
{
  "app": {
    "withGlobalTauri": true,
    // ... other settings
  }
}
```

--------------------------------

### Tauri Dev MCP Server API Methods

Source: https://github.com/zhxiaogg/tauri-dev-mcp/blob/main/design/project-summary.md

This section outlines the core API methods exposed by the Tauri Dev MCP Server, categorized by their functionality. These methods allow AI assistants to interact with Tauri applications for DOM inspection, console monitoring, and basic automation tasks.

```APIDOC
Tauri Dev MCP Server API Methods:

1. DOM Inspection:
   - inspect_element(selector: string):
     Description: Retrieves detailed information (styles, attributes) for an element identified by a CSS selector.
     Parameters:
       - selector (string): A standard CSS selector targeting the desired element.
     Returns: JSON object containing element details.

   - query_selector(selector: string):
     Description: Queries for single or multiple elements using a CSS selector.
     Parameters:
       - selector (string): A standard CSS selector.
     Returns: Array of JSON objects, each representing a matched element.

2. Console Monitoring:
   - get_console_logs():
     Description: Fetches a snapshot of console messages from the Tauri application's WebView.
     Parameters: None.
     Returns: Array of strings, each representing a console log entry.

3. Basic Automation:
   - click_element(selector: string):
     Description: Simulates a click action on an element identified by a CSS selector.
     Parameters:
       - selector (string): A standard CSS selector targeting the element to click.
     Returns: Boolean indicating success or failure.

   - input_text(selector: string, text: string):
     Description: Inputs specified text into a form field or text area identified by a CSS selector.
     Parameters:
       - selector (string): A standard CSS selector targeting the input field.
       - text (string): The text string to input.
     Returns: Boolean indicating success or failure.
```

--------------------------------

### Integrate Tauri Dev MCP Plugin into a Tauri Application

Source: https://github.com/zhxiaogg/tauri-dev-mcp/blob/main/design/project-summary.md

This Rust code snippet demonstrates how to initialize and add the `tauri_dev_mcp` plugin to a Tauri application's main function. This step is crucial for exposing the plugin's HTTP API, allowing the MCP server to interact with the Tauri app's WebView.

```Rust
fn main() {
    Builder::default()
        .plugin(tauri_dev_mcp::init())
        .run(tauri::generate_context!())
        .expect("error while running tauri application");
}
```

--------------------------------

### Tauri Build Commands for Development and Production

Source: https://github.com/zhxiaogg/tauri-dev-mcp/blob/main/docs/production-builds.md

Commands to run Tauri applications, distinguishing between development builds where the MCP plugin is enabled and production builds where it is disabled.

```bash
# Development (MCP enabled)
npm run tauri:dev

# Production (MCP disabled)  
npm run tauri:build
```

--------------------------------

### Tauri Dev MCP Server Architecture Diagram

Source: https://github.com/zhxiaogg/tauri-dev-mcp/blob/main/design/high-level-architecture.md

Illustrates the high-level components and their interaction within the Tauri Dev MCP Server ecosystem, showing the flow from MCP Client to Tauri App.

```APIDOC
┌─────────────────┐    JSON-RPC 2.0     ┌─────────────────┐    HTTP/REST    ┌─────────────────┐
│   MCP Client    │ ←→ (STDIO only) ←→  │  Tauri Dev MCP  │ ←→             │  Tauri Plugin   │
│   (Claude AI)   │                     │     Server      │                 │   (HTTP API)    │
└─────────────────┘                     └─────────────────┘                 └─────────────────┘
                                                                                      ↓
                                                                             ┌─────────────────┐
                                                                             │   Tauri App     │
                                                                             │   (WebView)     │
                                                                             └─────────────────┘
```

--------------------------------

### Configure Claude Desktop for MCP Server

Source: https://github.com/zhxiaogg/tauri-dev-mcp/blob/main/README.md

JSON configuration for Claude Desktop to integrate with the Tauri Dev MCP server, specifying the command to run the server and environment variables for host and port.

```json
{
  "mcpServers": {
    "tauri-dev": {
      "command": "node",
      "args": ["./mcp-server/dist/index.js"],
      "env": {
        "TAURI_MCP_HOST": "localhost",
        "TAURI_MCP_PORT": "8080"
      }
    }
  }
}
```

--------------------------------

### Tauri Plugin Registration in Main Function

Source: https://github.com/zhxiaogg/tauri-dev-mcp/blob/main/design/tauri-plugin-api.md

Demonstrates how to register the `tauri_dev_mcp` plugin within a Tauri application's `main` function, ensuring it's initialized and available during application startup.

```rust
use tauri::Builder;

fn main() {
    Builder::default()
        .plugin(tauri_dev_mcp::init())
        .run(tauri::generate_context!())
        .expect("error while running tauri application");
}
```

--------------------------------

### Tauri Dev MCP Server Tool Execution Flow

Source: https://github.com/zhxiaogg/tauri-dev-mcp/blob/main/design/high-level-architecture.md

Outlines the step-by-step data flow for how a tool execution request is processed from the MCP Client through the server and bridge layers to the Tauri Plugin and back.

```APIDOC
1. MCP Client → Tool Call Request → MCP Server
2. MCP Server → Validate Input → Bridge Layer
3. Bridge Layer → HTTP Request → Tauri Plugin
4. Tauri Plugin → Execute in WebView → Return Result
5. Bridge Layer → Transform Response → MCP Server
6. MCP Server → Format Response → MCP Client
```

--------------------------------

### Tauri Dev MCP: UI Automation API

Source: https://github.com/zhxiaogg/tauri-dev-mcp/blob/main/mcp-server/README.md

API commands for interacting with UI elements, including clicking, typing, scrolling, hovering, selecting options, checking checkboxes, pressing keys, and waiting for element state changes.

```APIDOC
click_element: Click on elements
  Example: "Click the login button"

input_text: Type into form fields
  Example: "Enter 'user@example.com' in the email field"

scroll_to_element: Scroll elements into view
  Example: "Scroll to the footer section"

hover_element: Trigger hover states
  Example: "Hover over the dropdown menu"

select_option: Select dropdown options
  Example: "Select 'United States' from the country dropdown"

check_checkbox: Toggle checkboxes
  Example: "Check the 'Remember me' checkbox"

press_key: Send keyboard input
  Example: "Press Enter to submit the form"

wait_for_element: Wait for element state changes
  Example: "Wait for the loading spinner to disappear"
```

--------------------------------

### Tauri Dev MCP Server Error Handling Strategy

Source: https://github.com/zhxiaogg/tauri-dev-mcp/blob/main/design/high-level-architecture.md

Describes the basic error handling mechanisms implemented for tool execution, including input validation, error mapping, and timeout handling.

```APIDOC
Tool Execution Errors:
- Input Validation: Basic CSS selector validation
- Error Mapping: Convert Tauri errors to MCP error format
- Timeout Handling: Simple timeout for HTTP requests
```

--------------------------------

### TypeScript Tool Execution Flow in MCP Server

Source: https://github.com/zhxiaogg/tauri-dev-mcp/blob/main/design/low-level-api-design.md

Illustrates the asynchronous `executeTool` function in the MCP Server, demonstrating the process of validating input parameters, sending an HTTP POST request to the Tauri plugin's `/api/execute` endpoint, and processing the JSON response. This function is central to how tool commands are executed.

```typescript
// MCP Server receives tool call
async function executeTool(name: string, params: any): Promise<any> {
  // 1. Validate input
  const validatedParams = validateSchema(name, params);

  // 2. Send HTTP request to Tauri plugin
  const response = await fetch('http://localhost:3001/api/execute', {
    method: 'POST',
    headers: {'Content-Type': 'application/json'},
    body: JSON.stringify({
      tool: name,
      params: validatedParams
    })
  });

  // 3. Return transformed response
  return await response.json();
}
```

--------------------------------

### Tauri Dev MCP Server Core Components

Source: https://github.com/zhxiaogg/tauri-dev-mcp/blob/main/design/high-level-architecture.md

Describes the main internal components of the MCP Server, including its transport layer, protocol handler, tool registry, and the Tauri Bridge's functionalities.

```APIDOC
MCP Server Core:
  Transport Layer: STDIO transport only
  Protocol Handler: JSON-RPC 2.0 with MCP extensions
  Tool Registry: Static tool registration
Tauri Bridge:
  HTTP Client: Simple HTTP requests to Tauri plugin
  Response Transformation: Convert Tauri responses to MCP format
  Error Handling: Basic error mapping
```

--------------------------------

### Tauri Dev MCP: DOM Inspection API

Source: https://github.com/zhxiaogg/tauri-dev-mcp/blob/main/mcp-server/README.md

API commands for inspecting HTML elements, including `inspect_element` for detailed information and `query_selector` for finding multiple elements using CSS selectors.

```APIDOC
inspect_element: Get detailed element information
  Example: "Inspect the submit button with ID 'submit-btn'"

query_selector: Find multiple elements
  Example: "Find all navigation links in the header"
```

--------------------------------

### API Method: query_selector

Source: https://github.com/zhxiaogg/tauri-dev-mcp/blob/main/design/low-level-api-design.md

Find multiple elements matching a CSS selector, returning an array of matches. This method is suitable for finding multiple elements or obtaining a list/overview of elements, providing basic information without detailed styles.

```APIDOC
Method: query_selector
Description: Find multiple elements matching a selector (returns array of matches)
When to use: When you need to find MULTIPLE elements or get a list/overview of elements. Returns basic info without detailed styles.
```

```json
{
  "type": "object",
  "properties": {
    "selector": {
      "type": "string",
      "description": "CSS selector (returns all matching elements)",
      "examples": [".nav-item", "input[type='text']", "button", ".error-message"]
    },
    "limit": {
      "type": "number",
      "default": 10,
      "description": "Maximum elements to return"
    }
  },
  "required": ["selector"]
}
```

```json
{
  "type": "object",
  "properties": {
    "elements": {
      "type": "array",
      "items": {
        "type": "object",
        "properties": {
          "tagName": {"type": "string"},
          "id": {"type": "string"},
          "className": {"type": "string"},
          "textContent": {"type": "string"}
        }
      }
    },
    "count": {"type": "number"}
  }
}
```

--------------------------------

### Define Zod Schema for New Tool Input

Source: https://github.com/zhxiaogg/tauri-dev-mcp/blob/main/mcp-server/README.md

This snippet demonstrates how to define a Zod schema for the input parameters of a new tool. It ensures type safety and provides a clear description for each parameter, which is used for runtime validation.

```typescript
export const MyNewToolInputSchema = z.object({
  parameter: z.string().describe("Description of parameter")
});
```

--------------------------------

### Implement Tool Handler in Switch Statement

Source: https://github.com/zhxiaogg/tauri-dev-mcp/blob/main/mcp-server/README.md

This snippet shows how to implement the handler logic for a new tool within a switch statement. It parses the incoming arguments using the defined Zod schema and then executes the tool via an HTTP client.

```typescript
case 'my_new_tool': {
  const input = MyNewToolInputSchema.parse(args);
  const response = await this.httpClient.execute('my_new_tool', input);
  // Handle response...
}
```
Tokens:
Raw