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 頁面會針對每個用戶端顯示相同的設定步驟,並提供複製網址和指令的按鈕。

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 會把遠端伺服器新增為自訂連接器。在網頁版中:
- 開啟 Customize > Connectors。
- 點選 + Add,再點選 Add custom connector。
- 名稱輸入
Bannerify,遠端 MCP 伺服器網址輸入https://api.bannerify.co/mcp,然後點選 Continue。 - 完成畫面上的提示,並點選 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 金鑰,也不需要複製權杖。
整個交換過程分為四個步驟:
- 用戶端不帶權杖,向
https://api.bannerify.co/mcp傳送請求。伺服器回應 HTTP 401,以及一個WWW-Authenticate標頭,指向位於https://api.bannerify.co/.well-known/oauth-protected-resource/mcp的中繼資料。 - 中繼資料會指出登入服務,用戶端便會帶你前往該處。
- 你登入 Bannerify。同意頁面會顯示用戶端的名稱,以及它把權杖傳送到哪裡。選擇你的 Personal 工作區或某個團隊工作區,然後點選 Allow。
- 用戶端取得存取權杖,並在每個請求中以
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 |
工作區已達到上限。請見用量額度與限制 |