Custom AI View
See any site as it looks on a real iPhone, iPad or MacBook — and drive that window over MCP.
Open source Open in the app JSON README (API)
About
See any site as it looks on a real iPhone, iPad or MacBook — and drive that window over MCP.
Details
- Kind
- MCP servers
- Topic
- No topic detected
- Publisher
- ccustomai
- Origin
- official
- Category
- ferramentas
- Transport
- local
- Version
- 1.14.0
- Stars
- 1
- Last push
- 2026-08-30T12:54:26Z
- Repository state
- ativo
- Language
- JavaScript
- License
- NOASSERTION
- Added
- 2026-08-29 23:00:12
- Updated
- 2026-08-29 23:00:12
- Origin id
io.github.ccustomai/custom-ai-view
README
# 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](https://ccustom.ai/view) · by [Custom AI](https://ccustom.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-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](https://github.com/ccustomai/custom-ai-view/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:
```json
{
"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/` 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](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](README.ru.md) · © 2026 Custom AI · https://ccustom.ai