freemcplab / 目錄 / 演練場 / MCP Apps Protocol

← 全部伺服器 ↗ GitHub

● 官方 modelcontextprotocol ⚡ 即開即用

MCP Apps Protocol

Name: MCP Apps Protocol MCP Server
Author: modelcontextprotocol

作者 modelcontextprotocol · modelcontextprotocol/ext-apps

讓 MCP 伺服器能夠發佈互動式 UI 片段的官方擴充——Claude 直接在對話中嵌入你的表單/圖表/選擇器。

MCP Apps 是 MCP 官方認可的擴充，允許伺服器宣告可互動的 UI（表單、圖表、選擇器），由聊天機器人宿主渲染。此儲存庫包含規格、參考 SDK 和範例。

▶ 觀看演示 📦 安裝 💡 使用場景

為什麼要用

核心特性

MCP 嵌入式 UI 規格
參考 SDK（TypeScript）
範例應用程式
宿主實作指引
由 MCP 團隊維護

即時演示

實際使用效果

就緒

安裝

選擇你的客戶端

~/Library/Application Support/Claude/claude_desktop_config.json · Windows: %APPDATA%\Claude\claude_desktop_config.json

{
  "mcpServers": {
    "mcp-apps-protocol": {
      "_doc": "Reference SDK; integrate as a library inside your MCP server or chatbot host."
    }
  }
}

開啟 Claude Desktop → Settings → Developer → Edit Config。儲存後重啟應用。

~/.cursor/mcp.json · .cursor/mcp.json

{
  "mcpServers": {
    "mcp-apps-protocol": {
      "_doc": "Reference SDK; integrate as a library inside your MCP server or chatbot host."
    }
  }
}

Cursor 使用與 Claude Desktop 相同的 mcpServers 格式。專案級設定優先於全域。

VS Code → Cline → MCP Servers → Edit

{
  "mcpServers": {
    "mcp-apps-protocol": {
      "_doc": "Reference SDK; integrate as a library inside your MCP server or chatbot host."
    }
  }
}

點擊 Cline 側欄中的 MCP Servers 圖示，然後選 "Edit Configuration"。

~/.codeium/windsurf/mcp_config.json

{
  "mcpServers": {
    "mcp-apps-protocol": {
      "_doc": "Reference SDK; integrate as a library inside your MCP server or chatbot host."
    }
  }
}

格式與 Claude Desktop 相同。重啟 Windsurf 生效。

~/.continue/config.json

{
  "mcpServers": [
    {
      "name": "mcp-apps-protocol",
      "args": []
    }
  ]
}

Continue 使用伺服器物件陣列，而非映射。

~/.config/zed/settings.json

{
  "context_servers": {
    "mcp-apps-protocol": {
      "command": {
        "args": []
      }
    }
  }
}

加入 context_servers。Zed 儲存後熱重載。

claude mcp add mcp-apps-protocol -- undefined

一行命令搞定。用 claude mcp list 驗證，claude mcp remove 移除。

使用場景

實戰用法： MCP Apps Protocol

為你的 MCP 工具加入表單式確認

👤 開發者 ⏱ ~15 min intermediate

何時使用： 某個工具有破壞性副作用；你希望在執行前取得使用者確認。

步驟

閱讀規格

瀏覽 Apps 規格章節。✓ 已複製

→ 建立心智模型
加入 UI 片段

從工具處理器回傳 App 元件。✓ 已複製

→ 宿主渲染表單
連接提交

提交後，工具以確認的參數重新呼叫。✓ 已複製

→ 更安全的破壞性工具

結果： 你的 MCP 工具可以請求結構化確認。

組合

與其他 MCP 搭配，撬動十倍槓桿

mcp-apps-protocol + fastmcp

使用 fastmcp 作為 MCP 伺服器；Apps 負責互動式部分

結合 mcp-apps-protocol 與 fastmcp：使用 fastmcp 作為 MCP 伺服器；Apps 負責互動式部分✓ 已複製

工具

此 MCP 暴露的能力

工具	輸入參數	何時呼叫	成本
protocol-spec	（詳見文件）	無可呼叫的工具——這是協定擴充	1 次呼叫

成本與限制

運行它的成本

API 配額: 不適用
每次呼叫 Token 數: 0
費用: 免費
提示: 保持 Apps 小巧——它們是行內渲染的

安全

權限、密鑰、影響範圍

憑證儲存： 無

資料出站： 無

故障排查

常見錯誤與修復

宿主未渲染 App

確認宿主支援 Apps 擴充；此功能需手動啟用

替代方案