Custom AI View

Custom AI View

実際のスマートフォンで見えるとおりに、あらゆるウェブサイトを表示できます。AI エージェントにも見せられます。

ピクセル単位で正確なデバイスフレームの中に、本物のブラウザーを表示します。iPhone、iPad、Android、MacBookに対応しています。 Windowsアプリ、Macアプリ、VS Code拡張機能として提供され、MCP サーバーを使えば、Model Context Protocol経由でAI アシスタントがあなたと同じウィンドウを確認できます。

サイトをモバイル表示で確認したい、実際のデバイスフレームでレスポンシブデザインをプレビューしたい、あるいはAI エージェントに自分のブラウザーウィンドウを見せたいと思ったことがあるなら、これがそのためのツールです。

ccustom.ai/view · Custom AI 提供

---

これを作った理由

Chromeのデバイスツールバーはビューポートのサイズを変更します。スマートフォンを表示するわけではなく、エージェントに見せるものもありません。

Custom AI Viewは、無料のツールでは一緒に実現できない3つの機能を提供します。

• 実際に表示しているウィンドウを撮影します — ログイン中のセッション、スクロール位置、未保存の入力内容を含めて、MCP経由でAI エージェントに画像を渡します。クリーンなプロファイルで再レンダリングした画面ではなく、あなたが見ている画面そのものです。
• フレーム表示を拒むサイトも表示できます。 ローカルのリバースプロキシがX-Frame-OptionsとCSPを取り除き、@media (hover)とenv(safe-area-inset-*)を書き換え、ログイン状態が維持されるように__Host- Cookieの名前を変更し、開発サーバーが使用する自己署名TLSを終端します。
• 実寸に忠実です。 本体、画面、角の半径には、公開されているミリメートル単位の寸法を使用し、ベゼルは本体とパネルの差から算出します。実寸1:1ではEDIDを使ってモニターを測定し、デバイスを実物大で表示します。実際のiPhoneを画面に当てると、ぴったり一致します。

エージェントができること

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 サーバーはアプリが起動していなければ自動で起動するため、エージェントが何かを開くよう人に頼む必要はありません。

ソースからビルドする

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の3種類すべてをビルドし、リリースに添付します。

MacBookの蓋は、黒いガラス板に陽極酸化処理された縁が細く走り、下側のベゼルは上側の3倍の幅があります。ノッチはメニューバーに切り込まれています。ブラウザーウィンドウが届かない場所なので、サイトの上に黒い長方形が重なることはありません。

表示例

開発サーバーは、一般的なポートのリストから推測されるわけではありません。アプリはオペレーティングシステムにリッスン中のポートを問い合わせ、次に各ポートにページを配信しているかどうかを確認し、サイト独自のタイトルとアイコンを表示します。上の 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