About Custom AI View
Custom AI View previews websites inside device-accurate iPhone, iPad, Android, and MacBook frames, with Windows and Mac apps and a VS Code extension. Its MCP server lets AI agents inspect and operate the same browser window as the user.
Key features
- 01Preview sites in device frames
- 02Use a reverse proxy for restricted pages
- 03Render devices at actual size
- 04Find and interact with page elements
- 05Save screenshots and recordings
Use cases
- 01Check a site's mobile layout
- 02Preview responsive designs in device frames
- 03Let an AI agent inspect a logged-in browser page
MCP support
The MCP server connects to MCP clients over stdio and provides tools to open URLs, wait for loading, take screenshots, find elements, and interact with pages.
Configuration
Local server config is the same for every client. Copy it into your client’s MCP config file.
We haven’t collected a package or remote endpoint for this server. Follow the instructions in the project README.
Tools
Local servers expose tools only once running on your machine, and the maintainer has not provided a tool list.
Details
From the project READMECustom 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

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-Optionsand CSP, rewrites@media (hover)andenv(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.

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

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 — 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/andcode/, 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
Comments
New to MCP?
From what the protocol is to installing your first server, these answers cover most first questions.
An open protocol that defines how AI applications connect to external tools and data in a uniform way. Clients talk to the model; MCP servers provide tools, resources and prompt templates. They exchange standard messages, so one server can be reused by many clients.

