AppContext MCP

官方

AppContext 讓你的 AI 編碼代理能即時掌握開發中的視覺資訊，從而修復問題、優化使用者介面，並即時加速開發流程。

造訪 appcontext.dev

你可以用 App Context MCP 做什麼？

  • 擷取 iOS 模擬器螢幕截圖 — 讓你的 AI 使用 capture_simulator_screenshot 查看應用程式的當前畫面，以獲得即時視覺回饋
  • 串流 Metro bundler 日誌 — 讓你的 AI 透過 get_metro_logs 讀取即時的 React Native 建置輸出，無需手動複製貼上即可診斷打包錯誤
  • 擷取網頁瀏覽器螢幕截圖 — 讓你的 AI 使用 capture_web_screenshot 檢查網頁應用程式的渲染 UI，以識別版面或樣式問題
  • 檢索瀏覽器主控台日誌 — 指示你的 AI 使用 get_console_logs 擷取執行時期錯誤與警告，以加速除錯

文件

AppContext - 賦予你的 AI 視覺能力。

AppContext 讓你的 AI 編碼代理能即時洞察你的 iOS 應用程式和網頁應用程式，以便即時修復問題、調整 UI，並加速你的開發流程。減少來回提示，節省不必要的 token 消耗。

平台支援

目前已完整支援 iOS 模擬器和網頁瀏覽器。Android 及更多平台即將推出。

現已可用

  • iOS 模擬器（即時視覺回饋）

  • React Native / Expo（Metro bundler 日誌串流）

  • 網頁應用程式（透過 Chrome DevTools 擷取螢幕截圖與主控台日誌）

即將推出

  • Android 模擬器（Android 的視覺與日誌上下文）

  • 桌面應用程式（Electron 應用程式監控）

  • 實體裝置（在真實硬體上測試）

與你喜愛的工具無縫協作

AppContext 透過模型上下文協定 (MCP) 自動整合 AI 編碼編輯器和開發框架

  • Cursor
  • Claude Code
  • Windsurf
  • Expo

運作方式

在你的選單列中執行。擷取視覺畫面和日誌。將它們提供給你的 AI。

擷取

從 iOS 模擬器和網頁瀏覽器串流即時畫面，以及來自 Metro 和瀏覽器主控台的執行階段日誌。

提供

透過 MCP 在本機發布上下文。可與 Cursor、Claude Code 和 Windsurf 搭配使用。在你的機器上 100% 離線運作。

修復

你的 AI 能看到應用程式的實際狀態。即時修復錯誤並調整 UI。無需解釋，無需猜測。

在你的選單列中安靜運作。自動更新。隨時待命。下載一次，登入一次，即可完成。

簡單的定價

選擇適合你的方案。

月訂閱

按月付款，可隨時取消

$9.99/月

  • 持續上下文串流（即時）
  • 即時 Metro Bundler 日誌
  • 離線授權 token（30 天）
  • 可隨時取消

年訂閱

按年計費，節省 17%

$99/年

  • 持續上下文串流（即時）
  • 即時 Metro Bundler 日誌
  • 離線授權 token（30 天）
  • 相較月訂閱節省 17%

AppContext 安裝

按照以下步驟在你的開發環境中設定 AppContext

  1. 下載與安裝 (macOS 13+)

    簡易安裝流程：
    下載 Mac 版
    1. 點擊「下載 Mac 版」→ 開啟 .dmg 檔案
    2. 將 AppContext 拖曳至你的「應用程式」資料夾
    3. 啟動 AppContext - 它會以圖示形式出現在你的選單列中

  2. 訂閱 AppContext Pro

    AppContext 需要 Pro 訂閱才能擷取即時畫面和日誌。
    • 本網站： 向下捲動至下方定價區塊，以便在登入桌面應用程式時已完成驗證
    • 桌面應用程式： 點擊選單列圖示 →「訂閱 Pro」→ 選擇你的方案
      即時啟用—無需授權金鑰。一旦啟用後即可離線運作，用於本機 LLM 整合，且無程式碼暴露風險。

  3. 使用你的電子郵件登入

    點擊選單列圖示並登入：
    1. 選擇「登入」→ 輸入你的電子郵件
    2. 查看你的電子郵件，點擊魔術連結進行驗證
      如果你已先透過網站訂閱，則你已完成驗證，可以立即開始使用！

  4. 連接到你的 AI 編輯器

    一旦連接，你的 AI 將能看到 iOS 模擬器和網頁瀏覽器的即時畫面，讀取 Metro bundler 和主控台日誌，並不再要求你貼上螢幕截圖或錯誤訊息。

適用於 Claude Code 使用者：

claude mcp add --transport sse appcontext http://localhost:7777/sse

在你的終端機中執行此命令，然後重新啟動 Claude Code 以啟用。

適用於 Cursor 使用者：一鍵安裝

新增至 Cursor

適用於其他平台（Windsurf、Continue 等）

  1. 開啟你的 AI 編輯器的 MCP 設定
  2. 新增一個 MCP 伺服器
  3. 使用此設定：
{
  "appcontext": {
    "url": "http://localhost:7777/sse",
    "type": "sse"
  }
}