Custom AI View

Custom AI View

像在真实手机上一样查看任意网站，也让 AI Agent 看见它。

在像素级精准的设备边框中运行真实浏览器：iPhone、iPad、Android、MacBook。 提供 Windows 应用、Mac 应用和 VS Code 扩展，并附带 MCP 服务，让你的 AI 助手通过 Model Context Protocol 查看与你相同的窗口。

如果你一直想要以移动端视图查看网站、在真实设备边框中预览响应式设计，或让 AI Agent 看见你自己的浏览器窗口——这就是你要找的工具。

ccustom.ai/view · 出品方：Custom AI

---

为什么要做这个

Chrome 的设备工具栏只是调整视口大小。它无法提供一部手机，也无法为 Agent 提供可查看的内容。

Custom AI View 将三项免费工具无法兼顾的功能集于一身：

• 拍下你实际正在查看的窗口——你的登录会话、滚动位置、未保存的输入——并通过 MCP 将画面交给 AI Agent。不是在干净的配置文件中重新渲染，而是你眼前的屏幕。
• 显示拒绝嵌入的网站。 本地反向代理会移除 X-Frame-Options 和 CSP，重写 @media (hover) 和 env(safe-area-inset-*)，重命名 __Host- cookie 以保留登录状态，并终止开发服务器使用的自签名 TLS。
• 尺寸真实准确。 机身、屏幕和圆角均依据以毫米为单位的公开尺寸数据；边框尺寸由机身尺寸减去面板尺寸得出。实际尺寸 1:1 会通过 EDID 测量显示器，并按真实尺寸绘制设备——将真实 iPhone 贴在屏幕上，尺寸便会吻合。

Agent 可以用它做什么

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

每个工具都接受 window 参数，因此可以并排操控手机和 iPad。

安装

Windows 应用——从 Releases 下载 CustomAIView.exe，运行并固定它。无需依赖项；需要安装 Chrome 或 Edge。要在桌面上创建带品牌标识的快捷方式：node scripts/make-launcher.js。

Mac 应用——从同一页面下载 CustomAIView-macos-arm64.zip（Apple 芯片）或 -x64.zip（Intel），解压到 /Applications 并打开。需要安装 Chrome 或 Edge。该应用包采用临时签名，而非公证，因此首次启动时需右键点击 → 打开——或者只需运行一次：

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

VS Code 扩展——从 Releases 下载 .vsix，运行 code --install-extension custom-ai-view-<version>.vsix，然后重新加载窗口。

供 AI 助手使用——此服务通过 stdio 使用 MCP 通信，因此任何 MCP 客户端都可以使用相同的配置块：

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

在 VS Code 中，Custom AI View: Show MCP Server Setup 会提供已填入路径的配置块。如果应用尚未运行，MCP 服务会自行启动它，因此 Agent 无需先请求用户打开任何内容。

从源代码构建

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

单个可执行文件是构建时所用 Node 二进制文件的副本，因此 Mac 构建需要在 Mac 上进行。.github/workflows/release.yml 会在打标签时构建全部三种版本——Apple 芯片、Intel 和 Windows——并将其附加到发布版本中。

MacBook 上盖是一整片黑色玻璃，边缘仅有一道纤细的阳极氧化饰条；下巴高度是额头的三倍，刘海则嵌入菜单栏中——浏览器窗口不会延伸到那里，因此刘海不会在你的网站上形成黑色矩形。

外观

开发服务并非根据常见端口列表猜测得出。应用会询问操作系统当前有哪些端口正在监听，然后逐个询问这些端口是否提供网页，并显示网站自身的标题和图标。上图中使用 8899 端口的服务不在任何常见端口列表中。

iPhone 16 Pro — 402 × 874 pt，@3x，67 × 145 mm，安全区域 62/34	iPad Pro 11" (M4) — 相同的引擎、相同的代理、相同的会话

值得注意的细节

• 主屏幕指示条悬浮在页面上方，就像在真实手机上一样——视口不会挖掉任何区域。env(safe-area-inset-bottom) 仍报告 34。
• 用手指，而不是箭头。 在手机和平板电脑上，光标是一个直径 44 px 的圆圈：它模拟指尖实际覆盖的接触面积，这决定了控件是否可触及。
• 滚动惯性与 iOS 一致（每帧 0.967），水平条带可拖动，滑动时不会选中文本。
• 捕获内容按网站归档，位于 Desktop → Custom AI View 下，其中包含 screenshots/、recordings/、logs/ 和 code/，此外还提供一个按钮，可“保存此页面的所有内容”。
• 页面跳转到其他应用时——例如 itms-appss:// 及类似协议——框架会显示提示，而不是变成白屏。

许可证

专有软件。请参阅 LICENSE。你可以使用它；但不得重新分发、派生分支、重新打品牌，或将其任何部分说成是你自己的。“Custom AI”、“Custom AI View” 和 C 标志是 Custom AI 的商标。

如需授权：[email protected]

---

阅读俄语版 · © 2026 Custom AI · https://ccustom.ai