{
  "markdown": "# Custom AI View\n\n**See any website the way it looks on a real phone — and let an AI agent see it too.**\n\nA real browser inside pixel-accurate device frames: iPhone, iPad, Android, MacBook.\nShips as a Windows app, a Mac app and a VS Code extension, with an MCP server so your\nAI assistant looks at the same window you do, over the Model Context Protocol.\n\nIf you have ever wanted to *view a site as on mobile*, *preview responsive design on a\nreal device frame*, or *give an AI agent eyes on your own browser window* — that is\nwhat this is.\n\n[ccustom.ai/view](https://ccustom.ai/view) · by [Custom AI](https://ccustom.ai)\n\n![An element picked on the phone, revealed in the code](docs/inspect-element.png)\n\n---\n\n## Why this exists\n\nChrome's device toolbar resizes a viewport. It does not give you a phone, and it does\nnot give an agent anything to look at.\n\nCustom AI View does three things nothing free does together:\n\n- **It photographs the window you are actually looking at** — your login session, your\n  scroll position, your unsaved input — and hands the picture to an AI agent over MCP.\n  Not a re-render in a clean profile: the screen you can see.\n- **It shows sites that refuse to be framed.** A local reverse proxy strips\n  `X-Frame-Options` and CSP, rewrites `@media (hover)` and `env(safe-area-inset-*)`,\n  renames `__Host-` cookies so logins survive, and terminates the self-signed TLS your\n  dev server uses.\n- **It is physically true.** Bodies, screens and corner radii come from published\n  dimensions in millimetres; bezels are derived from body-minus-panel. *Actual size\n  1:1* measures your monitor over EDID and draws the device at life size — hold a real\n  iPhone against the glass and it matches.\n\n## What an agent can do with it\n\n```\ncustom_ai_view_open        open a URL on a given device\ncustom_ai_view_wait        wait for an element, or for loading to finish\ncustom_ai_view_screenshot  the live window — and it says so when it is not\ncustom_ai_view_find        elements by selector or visible text, with real visibility\ncustom_ai_view_click       tap something\ncustom_ai_view_type        type into a field, optionally submitting on Enter\ncustom_ai_view_key         Enter, Escape, Tab, arrows\ncustom_ai_view_scroll      the page, or one scroller inside it\ncustom_ai_view_inspect     markup, computed styles, box, ancestry\ncustom_ai_view_tree        walk the DOM a level at a time\ncustom_ai_view_edit        change the live page; survives reload; revert undoes it\ncustom_ai_view_console     page output *and* the browser's own messages, with ages\ncustom_ai_view_back        go back without losing SPA state\ncustom_ai_view_record      screen recording with no fixed length\ncustom_ai_view_record_clip a clip of fixed length, when the length is known\ncustom_ai_view_collect     screenshot + markup + console + selection, in one folder\ncustom_ai_view_state       what is open now: address, device, viewport, selection\ncustom_ai_view_set_device  change the device without losing the page\ncustom_ai_view_devices     the catalogue, with points, pixels and millimetres\ncustom_ai_view_reload      normal, hard, or clearing the cache first\ncustom_ai_view_edits       every live edit currently in force\ncustom_ai_view_revert      put one of them back, or all of them\ncustom_ai_view_library     what has been captured, filed by site\n```\n\nEvery tool takes a `window` argument, so a phone and an iPad can be driven side by\nside.\n\n## Install\n\n**Windows app** — download `CustomAIView.exe` from\n[Releases](https://github.com/ccustomai/custom-ai-view/releases), run it, and pin it.\nNo dependencies; it needs Chrome or Edge installed. To put the branded shortcut on\nyour desktop: `node scripts/make-launcher.js`.\n\n**Mac app** — download `CustomAIView-macos-arm64.zip` (Apple silicon) or\n`-x64.zip` (Intel) from the same page, unzip it into `/Applications` and open it.\nIt needs Chrome or Edge installed. The bundle is signed ad-hoc rather than notarised,\nso the first launch is right-click → **Open** — or, once:\n\n```\nxattr -dr com.apple.quarantine \"/Applications/Custom AI View.app\"\n```\n\n**VS Code extension** — download the `.vsix` from Releases and\n`code --install-extension custom-ai-view-<version>.vsix`, then reload the window.\n\n**For your AI assistant** — the server speaks MCP over stdio, so any MCP client takes\nthe same block:\n\n```json\n{\n  \"mcpServers\": {\n    \"custom-ai-view\": { \"command\": \"node\", \"args\": [\"<path>/mcp/server.js\"] }\n  }\n}\n```\n\nIn VS Code, **Custom AI View: Show MCP Server Setup** hands you that block with the\npath already filled in. The MCP server starts the app itself if it is not running, so\nan agent never has to ask a human to open something first.\n\n## Build from source\n\n```\nnode scripts/build-exe.js       # dist/CustomAIView(.exe)  (Node SEA, ~82 MB)\nnode scripts/build-mac-app.js   # dist/Custom AI View.app + a zip   (macOS only)\nnode scripts/make-launcher.js   # desktop shortcut with the icon    (Windows only)\nnpm run package                 # the .vsix\n```\n\nThe single executable is a copy of the node binary it was built with, so a Mac build\nneeds a Mac. `.github/workflows/release.yml` builds all three on a tag — Apple\nsilicon, Intel and Windows — and attaches them to the release.\n\n![MacBook Pro 14-inch frame: black glass, the notch cut into the macOS menu bar, and the deck below the lid](docs/macbook.png)\n\nA MacBook lid is one sheet of black glass with a hairline of anodised edge, its chin\nthree times its forehead, and its notch cut **into** the menu bar — where a browser\nwindow never reaches, so it is never a black rectangle over your site.\n\n## What it looks like\n\n![The start page, listing the dev servers found on this machine](docs/start-page.png)\n\nDev servers are not guessed from a list of usual ports. The app asks the operating\nsystem what is listening, then asks each port whether it serves pages — and shows the\nsite's own title and icon. The one on 8899 above is on no list of usual ports.\n\n| | |\n|---|---|\n| ![iPhone 16 Pro frame showing a live site](docs/iphone.png) | ![iPad Pro 11-inch frame showing the same site](docs/ipad.png) |\n| 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 |\n\n## Notable details\n\n- **The home indicator floats over the page**, as on a real phone — nothing is carved\n  out of the viewport. `env(safe-area-inset-bottom)` still reports 34.\n- **A finger, not an arrow.** On phones and tablets the cursor is a 44 px circle: the\n  contact patch a fingertip actually covers, which is what decides whether a control\n  is reachable.\n- **Momentum matches iOS** (0.967 per frame), horizontal strips drag, and text does not\n  select while you swipe.\n- **Captures are filed by site** under *Desktop → Custom AI View*, with `screenshots/`,\n  `recordings/`, `logs/` and `code/`, plus a one-button \"save everything about this\n  page\".\n- **When a page leaves for another app** — `itms-appss://` and friends — the frame says\n  so instead of going white.\n\n## Licence\n\nProprietary. See [LICENSE](LICENSE). You may use it; you may not redistribute it,\nfork it, rebrand it, or present any part of it as your own. \"Custom AI\",\n\"Custom AI View\" and the C mark are trademarks of Custom AI.\n\nFor permission: contact@ccustom.ai\n\n---\n\nRead this in [Russian](README.ru.md) · © 2026 Custom AI · https://ccustom.ai\n",
  "bytes": 7374,
  "sha": "1ddcecc0fbd92e04e8e612a6b92f1e6f00372a9c6199de8136b187ff04426fbe",
  "repo_slug": "ccustomai/custom-ai-view",
  "fonte": "repo",
  "truncated": false,
  "api": "https://agentalog.com/api/listings/mcp_io_github_ccustomai_custom_ai_view_2ef5ecd1/readme"
}