Custom AI View

What Custom AI View MCP server does

Custom AI View MCP server connects an AI assistant to a live browser window displayed inside device frames. The available frames include iPhone, iPad, Android, and MacBook layouts, with dimensions based on published device measurements. The agent can work with the page currently open in that window, including its login session, scroll position, and unsaved input.

The application is intended for responsive design review, browser-based debugging, and agent-assisted interaction with websites. It can also show pages that normally resist embedding by using a local reverse proxy. That proxy removes framing restrictions, rewrites selected responsive-environment values, preserves logins by renaming certain cookies, and handles self-signed TLS used by development servers.

How it works

The MCP server uses stdio and controls one or more named windows. Every tool accepts a window argument, allowing separate phone and tablet views to be driven at the same time. The server starts the desktop application if it is not already running, so the MCP client does not need a person to launch it first.

Screenshots come from the visible application window rather than a newly rendered page in a separate browser profile. This lets an agent observe the same page state that is on the developer’s screen. The app also detects listening development-server ports through the operating system, checks whether they serve pages, and displays the sites’ titles and icons.

Setup and configuration

On Windows, download CustomAIView.exe from the project releases and run it. Chrome or Edge must be installed. On macOS, download the Apple silicon or Intel archive, place the application in /Applications, and open it with the documented right-click action on first launch because the bundle is ad-hoc signed. Chrome or Edge is also required there.

The VS Code extension is installed from its release .vsix file with code --install-extension, followed by a window reload. Its “Custom AI View: Show MCP Server Setup” command produces the MCP configuration with the local path filled in.

For another MCP client, register the stdio server with a command of node and an argument pointing to mcp/server.js. The project also provides Node-based scripts for building the Windows executable, macOS application, launcher, and VS Code package.

Tools and capabilities

Custom AI View MCP server provides tools for:

• Opening URLs, waiting for elements or page loading, going back, and reloading normally, forcefully, or with the cache cleared.
• Taking live screenshots, making unrestricted recordings, creating fixed-length clips, and collecting screenshots, markup, console output, and selection data together.
• Finding elements by selector or visible text, clicking, typing, sending keys, and scrolling the page or an individual scroller.
• Inspecting markup, computed styles, boxes, and ancestry; traversing the DOM; and viewing page and browser console messages.
• Editing the live page, listing active edits, and reverting one edit or all edits. Edits survive reloads until reverted.
• Reading window state, changing devices without losing the page, listing device dimensions, and viewing captures organized by site.

Limitations and notes

The software is proprietary. The license permits use but prohibits redistribution, forking, rebranding, or presenting its parts as your own. The macOS package is not notarized. The application requires Chrome or Edge, and the server is documented for stdio MCP configuration.

Device frames model physical dimensions and viewport behavior, but the app’s actual-size mode depends on monitor EDID information. Phone and tablet interaction uses a circular touch-style cursor, and the app models momentum scrolling and safe-area values. External-app destinations such as itms-appss:// are shown as leaving the frame rather than rendered as a normal page.