Custom AI View

Custom AI View

See any website the way it looks on a real phone — and let an AI agent see it too.

A real browser inside pixel-accurate device frames: iPhone, iPad, Android, MacBook. Ships as a Windows app, a Mac app and a VS Code extension, with an MCP server so your AI assistant looks at the same window you do, over the Model Context Protocol.

If you have ever wanted to view a site as on mobile, preview responsive design on a real device frame, or give an AI agent eyes on your own browser window — that is what this is.

ccustom.ai/view · by Custom AI

[An element picked on the phone, revealed in the code]

Why this exists

Chrome's device toolbar resizes a viewport. It does not give you a phone, and it does not give an agent anything to look at.

Custom AI View does three things nothing free does together:

• It photographs the window you are actually looking at — your login session, your scroll position, your unsaved input — and hands the picture to an AI agent over MCP. Not a re-render in a clean profile: the screen you can see.
• It shows sites that refuse to be framed. A local reverse proxy strips X-Frame-Options and CSP, rewrites @media (hover) and env(safe-area-inset-*), renames __Host- cookies so logins survive, and terminates the self-signed TLS your dev server uses.
• It is physically true. Bodies, screens and corner radii come from published dimensions in millimetres; bezels are derived from body-minus-panel. Actual size 1:1 measures your monitor over EDID and draws the device at life size — hold a real iPhone against the glass and it matches.

What an agent can do with it

custom_ai_view_open        open a URL on a given devicecustom_ai_view_wait        wait for an element, or for loading to finishcustom_ai_view_screenshot  the live window — and it says so when it is notcustom_ai_view_find        elements by selector or visible text, with real visibilitycustom_ai_view_click       tap somethingcustom_ai_view_type        type into a field, optionally submitting on Entercustom_ai_view_key         Enter, Escape, Tab, arrowscustom_ai_view_scroll      the page, or one scroller inside itcustom_ai_view_inspect     markup, computed styles, box, ancestrycustom_ai_view_tree        walk the DOM a level at a timecustom_ai_view_edit        change the live page; survives reload; revert undoes itcustom_ai_view_console     page output *and* the browser's own messages, with agescustom_ai_view_back        go back without losing SPA statecustom_ai_view_record      screen recording with no fixed lengthcustom_ai_view_record_clip a clip of fixed length, when the length is knowncustom_ai_view_collect     screenshot + markup + console + selection, in one foldercustom_ai_view_state       what is open now: address, device, viewport, selectioncustom_ai_view_set_device  change the device without losing the pagecustom_ai_view_devices     the catalogue, with points, pixels and millimetrescustom_ai_view_reload      normal, hard, or clearing the cache firstcustom_ai_view_edits       every live edit currently in forcecustom_ai_view_revert      put one of them back, or all of themcustom_ai_view_library     what has been captured, filed by site

Every tool takes a window argument, so a phone and an iPad can be driven side by side.

Install

Windows app — download CustomAIView.exe from Releases, run it, and pin it. No dependencies; it needs Chrome or Edge installed. To put the branded shortcut on your desktop: node scripts/make-launcher.js.

Mac app — download CustomAIView-macos-arm64.zip (Apple silicon) or -x64.zip (Intel) from the same page, unzip it into /Applications and open it. It needs Chrome or Edge installed. The bundle is signed ad-hoc rather than notarised, so the first launch is right-click → Open — or, once:

xattr -dr com.apple.quarantine "/Applications/Custom AI View.app"

VS Code extension — download the .vsix from Releases and code --install-extension custom-ai-view-<version>.vsix, then reload the window.

For your AI assistant — the server speaks MCP over stdio, so any MCP client takes the same block:

{  "mcpServers": {    "custom-ai-view": { "command": "node", "args": ["<path>/mcp/server.js"] }  }}

In VS Code, Custom AI View: Show MCP Server Setup hands you that block with the path already filled in. The MCP server starts the app itself if it is not running, so an agent never has to ask a human to open something first.

Build from source

node scripts/build-exe.js       # dist/CustomAIView(.exe)  (Node SEA, ~82 MB)node scripts/build-mac-app.js   # dist/Custom AI View.app + a zip   (macOS only)node scripts/make-launcher.js   # desktop shortcut with the icon    (Windows only)npm run package                 # the .vsix

The single executable is a copy of the node binary it was built with, so a Mac build needs a Mac. .github/workflows/release.yml builds all three on a tag — Apple silicon, Intel and Windows — and attaches them to the release.

[MacBook Pro 14-inch frame: black glass, the notch cut into the macOS menu bar, and the deck below the lid]

A MacBook lid is one sheet of black glass with a hairline of anodised edge, its chin three times its forehead, and its notch cut into the menu bar — where a browser window never reaches, so it is never a black rectangle over your site.

What it looks like

[The start page, listing the dev servers found on this machine]

Dev servers are not guessed from a list of usual ports. The app asks the operating system what is listening, then asks each port whether it serves pages — and shows the site's own title and icon. The one on 8899 above is on no list of usual ports.

Notable details

• The home indicator floats over the page, as on a real phone — nothing is carved out of the viewport. env(safe-area-inset-bottom) still reports 34.
• A finger, not an arrow. On phones and tablets the cursor is a 44 px circle: the contact patch a fingertip actually covers, which is what decides whether a control is reachable.
• Momentum matches iOS (0.967 per frame), horizontal strips drag, and text does not select while you swipe.
• Captures are filed by site under Desktop → Custom AI View, with screenshots/, recordings/, logs/ and code/, plus a one-button "save everything about this page".
• When a page leaves for another app — itms-appss:// and friends — the frame says so instead of going white.

Licence

Proprietary. See LICENSE. You may use it; you may not redistribute it, fork it, rebrand it, or present any part of it as your own. "Custom AI", "Custom AI View" and the C mark are trademarks of Custom AI.

For permission: [email protected]

Read this in Russian · © 2026 Custom AI · https://ccustom.ai