dioxus-inspector

HTTP bridge for inspecting and debugging Dioxus Desktop apps.
Embed this in your app to enable MCP-based debugging from Claude Code.

Quick Start

use dioxus::prelude::*;
use dioxus_inspector::{start_bridge, EvalResponse};

fn main() {
    dioxus::launch(app);
}

fn app() -> Element {
    use_inspector_bridge(9999, "my-app");
    rsx! { div { "Hello, inspector!" } }
}

fn use_inspector_bridge(port: u16, app_name: &str) {
    use_hook(|| {
        let mut eval_rx = start_bridge(port, app_name);
        spawn(async move {
            while let Some(cmd) = eval_rx.recv().await {
                let result = document::eval(&cmd.script).await;
                let response = match result {
                    Ok(val) => EvalResponse::success(val.to_string()),
                    Err(e) => EvalResponse::error(e.to_string()),
                };
                let _ = cmd.response_tx.send(response);
            }
        });
    });
}

Endpoints

Endpoint	Method	Purpose
/status	GET	App status, PID, uptime
/eval	POST	Execute JavaScript in webview
/query	POST	Query DOM by CSS selector
/dom	GET	Get simplified DOM tree
/inspect	POST	Element visibility analysis
/validate-classes	POST	Check CSS class availability
/diagnose	GET	Quick UI health check
/screenshot	POST	Capture window (macOS only)
/resize	POST	Resize window

MCP Server

Use with dioxus-mcp for Claude Code integration:

{
  "mcpServers": {
    "dioxus": {
      "command": "dioxus-inspector",
      "env": { "DIOXUS_BRIDGE_URL": "http://127.0.0.1:9999" }
    }
  }
}

License

MIT