導覽

MCP

連接 MCP 用戶端

了解如何把 Claude、Cursor、VS Code 或其他 MCP 用戶端連接到 Bannerify,並從對話中生成圖片和 PDF。

Bannerify 在 https://api.bannerify.co/mcp 執行 Model Context Protocol(MCP)伺服器。本頁適合使用 Claude、Cursor 或 VS Code 等 AI 助理,並希望助理使用自己 Bannerify 範本的人。伺服器連接之後,助理可以:

  • 列出你的範本,以及每個範本中可以變更的圖層。
  • 從範本生成圖片或 PDF。
  • 在沒有合適範本時,用形狀組合出一次性的圖片。

開始之前

  • 一個 Bannerify 帳號。範本工具至少需要一個範本;用形狀組合圖片則不需要。
  • 支援透過 HTTP 連線遠端伺服器,並支援 OAuth 登入的 MCP 用戶端。

新增伺服器

伺服器網址是 https://api.bannerify.co/mcp,使用 Streamable HTTP 傳輸。儀表板中的 Agents & MCP 頁面會針對每個用戶端顯示相同的設定步驟,並提供複製網址和指令的按鈕。

Agents & MCP 頁面,列出 Claude、ChatGPT、Codex、Cursor 和 Others,並顯示 Claude 的設定步驟
儀表板中的 Agents & MCP 頁面。

Examples

Open only what you need

Claude Code

新增伺服器,然後在 Claude Code 中開始登入:

claude mcp add --transport http bannerify https://api.bannerify.co/mcp

在 Claude Code 中執行 /mcp,並依照瀏覽器中的步驟操作。

若要與團隊共用這個伺服器,請在專案根目錄放一個 .mcp.json 檔案:

{
  "mcpServers": {
    "bannerify": {
      "type": "http",
      "url": "https://api.bannerify.co/mcp"
    }
  }
}
Claude

Claude 會把遠端伺服器新增為自訂連接器。在網頁版中:

  1. 開啟 Customize > Connectors。
  2. 點選 + Add,再點選 Add custom connector。
  3. 名稱輸入 Bannerify,遠端 MCP 伺服器網址輸入 https://api.bannerify.co/mcp,然後點選 Continue。
  4. 完成畫面上的提示,並點選 Add。

在 Team 或 Enterprise 方案中,需由擁有者先在 Organization settings > Connectors 新增連接器。

Claude 桌面應用程式會從你的 Claude 帳號取得連接器。請不要把伺服器加進 claude_desktop_config.json,這個檔案只適用於本機伺服器。

哪些方案可以新增自訂連接器,請見 Claude 說明文章:自訂連接器。

Cursor

把伺服器加到專案中的 .cursor/mcp.json;若要套用到所有專案,則加到 ~/.cursor/mcp.json:

{
  "mcpServers": {
    "bannerify": {
      "url": "https://api.bannerify.co/mcp"
    }
  }
}

Cursor 支援遠端伺服器的 OAuth 登入。

VS Code

把伺服器加到專案中的 .vscode/mcp.json:

{
  "servers": {
    "bannerify": {
      "type": "http",
      "url": "https://api.bannerify.co/mcp"
    }
  }
}
Codex

新增伺服器,然後登入:

codex mcp add bannerify --url https://api.bannerify.co/mcp
codex mcp login bannerify

第二個指令會在瀏覽器中開啟 Bannerify 的登入頁面。

若是其他用戶端,請輸入相同的網址,並選擇使用 OAuth 登入的 HTTP 傳輸。

登入

用戶端第一次連線時還沒有權杖,所以 Bannerify 會把它導向登入頁面。用戶端會在瀏覽器中開啟該頁面。登入之後,你要選擇用戶端可以使用的工作區。用戶端會保存權杖,並在每個請求中一併傳送。你不需要建立 API 金鑰,也不需要複製權杖。

整個交換過程分為四個步驟:

  1. 用戶端不帶權杖,向 https://api.bannerify.co/mcp 傳送請求。伺服器回應 HTTP 401,以及一個 WWW-Authenticate 標頭,指向位於 https://api.bannerify.co/.well-known/oauth-protected-resource/mcp 的中繼資料。
  2. 中繼資料會指出登入服務,用戶端便會帶你前往該處。
  3. 你登入 Bannerify。同意頁面會顯示用戶端的名稱,以及它把權杖傳送到哪裡。選擇你的 Personal 工作區或某個團隊工作區,然後點選 Allow。
  4. 用戶端取得存取權杖,並在每個請求中以 Authorization: Bearer <token> 傳送。Bannerify 會檢查權杖是否有效、是否未過期,以及是否是為 MCP 網址所簽發。
項目 內容
有效範圍 僅限 https://api.bannerify.co/mcp。為其他網址簽發的權杖會得到 HTTP 401
工作區 你在同意頁面選擇的工作區。若要使用其他工作區,請重新連線並選擇該工作區
無效或過期的權杖 回傳 HTTP 401 和錯誤 invalid_token。用戶端會重新登入
權杖儲存 Bannerify 只會儲存權杖的雜湊值

請求檔案

用平常的方式告訴助理你要什麼:

列出我的 Bannerify 範本,以及每個範本的圖層。
用我的 "Lifecycle email" 範本建立一張 PNG。把 headline 設為 "Welcome back, An",qr 圖層設為 https://example.com/restart。
用我的發票範本,為 Acme Studio 建立一份 PDF。
設計一張 1200 × 630 的橫幅,深色背景,文字是 "Launch week",然後把圖片給我看。
我的 Bannerify 工作區使用哪個方案?

助理會從用 MCP 工具生成檔案中挑選需要的工具、繪製檔案,並把結果顯示給你。

用量與限制

從 MCP 用戶端生成的檔案,與 REST API 和 SDK 計入相同的每月與每日上限,並套用所連接工作區的方案。

工具 是否計為一次生成
create_image, create_pdf, create_image_from_shapes 是
list_templates, get_template, get_project 否

失敗的繪製不會計算。Free 方案的團隊工作區無法生成檔案,新的團隊工作區則從為期 14 天的 Automate 3k 試用開始。MCP 伺服器沒有請求速率限制。各方案的上限請見用量額度與限制。

中斷連線

請從你的 MCP 用戶端移除伺服器,或在 Claude 中移除連接器。用戶端會停止傳送權杖,而權杖在過期後就會失效。

疑難排解

症狀 解決方式
用戶端回報 HTTP 401,或要求你重新登入 權杖不存在或已過期。請從你的用戶端重新登入
瀏覽器沒有開啟登入頁面 請使用支援透過 HTTP 連線遠端 MCP 伺服器,並支援 OAuth 登入的用戶端
Claude 應用程式沒有顯示 Bannerify 請在 Customize > Connectors 中把它新增為自訂連接器,而不是加進 claude_desktop_config.json
助理看不到任何範本 請它執行 get_project。如果顯示的名稱不是放有你範本的工作區,請移除伺服器、重新連線,並選擇有你範本的工作區
範本出現 NOT_FOUND 請助理執行 list_templates,並使用結果中的 ID。這些工具只看得到所連接工作區的範本
USAGE_EXCEEDED 工作區已達到上限。請見用量額度與限制

瞭解更多