-
Notifications
You must be signed in to change notification settings - Fork 984
Description
Is your feature request related to a problem? Please describe.
The chrome-devtools-mcp server currently exposes DevTools capabilities through text and structured data. While powerful for many automation and debugging tasks, this creates friction when the data is inherently visual (like performance profiles, network waterfalls, or complex DOM structures) AND when the agent needs to gather complex, multi-step configuration from the human user.
Currently, a human user must describe these complex states in text, which can be verbose and imprecise, or ask the user to manually check the DevTools window, breaking the autonomous workflow.
Describe the solution you'd like
We are exploring the implementation of the newly proposed MCP Apps Extension (SEP-1865) to allow the DevTools server to render interactive user interfaces directly in the host client. We see three main areas where this could apply, and would like to know what you think about this:
Problem 1: Visualizing High-Density Data (The "Visualization" Problem) Some DevTools data is too complex to be useful as raw JSON or text summary.
Goal: "As an AI agent, I want to show the user a visual flame chart of the performance profile I just recorded, rather than describing the function stacks in text."
Goal: "As an AI agent, I want to render the computed styles of an element in a visual box-model layout so the user can instantly see the padding/margin issues."
Problem 2: Complex Interactive Configuration (The "Input" Problem) Setting up specific debugging environments often requires tweaking multiple interdependent settings.
Goal: "As an AI agent, I need to configure network throttling, user agent, and geolocation simultaneously. A simple UI form would be less error-prone than multiple text-based tool calls."
Goal: "As an AI agent, I want to select a specific DOM element for inspection by having the user click on a visual representation or list, rather than guessing CSS selectors."
Problem 3: Live Monitoring (The "Dashboard" Problem) Agents often need to "watch" something while performing actions.
Goal: "As an AI agent, I want to provide a live view of the Network tab's filtered requests while I trigger actions on the page, so the user can see 404s as they happen."
Request for feedback
We are posting this to gauge community interest in adding UI capabilities to the Chrome DevTools MCP server.
Does this capability (Interactive UI for DevTools) seem useful to you? (Please add a π reaction to this issue if you would find this useful!)
Which specific DevTools panels would you most like to see embedded/visualized? (e.g., Network, Elements/Styles, Console, Performance, Application/Storage)
How do you envision the workflow? (Would you prefer the Agent to pop up a UI automatically when it hits a complex task, or would you ask for it explicitly like "Show me the network log"?)
Are there security concerns? (Given that DevTools has deep access to the browser, do you have specific concerns about rendering this data in an MCP App iframe?)
Describe alternatives you've considered
- Generating static screenshots of DevTools (lacks interactivity).
- Outputting raw JSON and hoping the Host application has a native way to render it (lacks standardization).
- Continuing to rely on text descriptions (loses critical visual context).
Additional context
No response