Skip to content

Repository files navigation

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 device
custom_ai_view_wait        wait for an element, or for loading to finish
custom_ai_view_screenshot  the live window — and it says so when it is not
custom_ai_view_find        elements by selector or visible text, with real visibility
custom_ai_view_click       tap something
custom_ai_view_type        type into a field, optionally submitting on Enter
custom_ai_view_key         Enter, Escape, Tab, arrows
custom_ai_view_scroll      the page, or one scroller inside it
custom_ai_view_inspect     markup, computed styles, box, ancestry
custom_ai_view_tree        walk the DOM a level at a time
custom_ai_view_edit        change the live page; survives reload; revert undoes it
custom_ai_view_console     page output *and* the browser's own messages, with ages
custom_ai_view_back        go back without losing SPA state
custom_ai_view_record      screen recording with no fixed length
custom_ai_view_record_clip a clip of fixed length, when the length is known
custom_ai_view_collect     screenshot + markup + console + selection, in one folder
custom_ai_view_state       what is open now: address, device, viewport, selection
custom_ai_view_set_device  change the device without losing the page
custom_ai_view_devices     the catalogue, with points, pixels and millimetres
custom_ai_view_reload      normal, hard, or clearing the cache first
custom_ai_view_edits       every live edit currently in force
custom_ai_view_revert      put one of them back, or all of them
custom_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.

iPhone 16 Pro frame showing a live site iPad Pro 11-inch frame showing the same site
iPhone 16 Pro — 402 × 874 pt, @3x, 67 × 145 mm, safe area 62/34 iPad Pro 11" (M4) — the same engine, the same proxy, the same session

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 appitms-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: contact@ccustom.ai


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

About

Mobile preview for developers and AI agents. See any website the way it looks on a real iPhone, iPad, Android phone or MacBook — and let an AI agent see and drive that same window over MCP. Responsive testing with device frames measured in millimetres. Windows and macOS apps, VS Code extension, MCP server.

Topics

Resources

Stars

1 star

Watchers

0 watching

Forks

Releases

Packages

Contributors

Languages