code-dioxus-inspector

name	code:dioxus-inspector
description	Set up dioxus-inspector for MCP-based debugging of Dioxus Desktop apps. Embed bridge, configure MCP, troubleshoot connectivity. <example> Context: User wants to add debugging to a Dioxus app user: "add dioxus-inspector to my desktop app" </example> <example> Context: User has MCP connection issues user: "dioxus inspector tools aren't showing up" </example>

Dioxus Inspector Integration

Enable Claude Code to debug Dioxus Desktop apps via MCP.

Tools Reference

MCP Tool	Purpose
mcp__dioxus__status	Check app connection, PID, uptime
mcp__dioxus__get_dom	Get simplified DOM tree
mcp__dioxus__query_text	Get text content by selector
mcp__dioxus__query_html	Get innerHTML by selector
mcp__dioxus__query_all	List elements matching selector
mcp__dioxus__click	Click element by selector
mcp__dioxus__type_text	Type into input field
mcp__dioxus__eval	Execute JavaScript in webview
mcp__dioxus__inspect	Analyze element visibility
mcp__dioxus__diagnose	Quick UI health check
mcp__dioxus__screenshot	Capture window (macOS)
mcp__dioxus__resize	Resize window
mcp__dioxus__dom_to_rsx	Convert HTML to RSX
mcp__dioxus__doctor	Run dx doctor
mcp__dioxus__check	Run dx check

Quick Setup

1. Add Dependency

# Cargo.toml
[features]
desktop = ["dioxus/desktop", "dioxus-inspector"]

[dependencies]
dioxus-inspector = { version = "0.1.2", optional = true }

2. Embed Bridge

#[cfg(feature = "desktop")]
use dioxus_inspector::{start_bridge, EvalResponse};

#[cfg(feature = "desktop")]
const INSPECTOR_PORT: u16 = 9999;

fn app() -> Element {
    #[cfg(feature = "desktop")]
    use_effect(|| {
        let mut eval_rx = start_bridge(INSPECTOR_PORT, "my-app");
        spawn(async move {
            while let Some(cmd) = eval_rx.recv().await {
                let response = match document::eval(&cmd.script).await {
                    Ok(val) => EvalResponse::success(val.to_string()),
                    Err(e) => EvalResponse::error(e.to_string()),
                };
                let _ = cmd.response_tx.send(response);
            }
        });
    });

    rsx! { /* ... */ }
}

3. Configure MCP

// .mcp.json in project root
{
  "mcpServers": {
    "dioxus": {
      "command": "dioxus-mcp",
      "env": { "DIOXUS_BRIDGE_URL": "http://127.0.0.1:9999" }
    }
  }
}

4. Restart Claude Code

After adding .mcp.json, restart Claude Code to load the MCP server.

Verification

# Start your app
dx serve --features desktop

# Test bridge is running
curl http://127.0.0.1:9999/status

Troubleshooting

Issue	Solution
No response from /status	App not running or bridge not embedded
MCP tools not available	Restart Claude Code after adding .mcp.json
Port already in use	Change INSPECTOR_PORT and update .mcp.json
Eval returns errors	Check JavaScript syntax in webview context

Related Skills

• marauder:code:rust-dioxus - Dioxus development patterns
• marauder:code:dioxus-debug - Debugging workflows with inspector