Bannerify Docs
ドキュメントを検索.../
Discordダッシュボード
ドキュメントAPI リファレンスSDK
ナビゲーション
ドキュメントAPI リファレンスSDK

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 を生成する。
  • 合うテンプレートがないときに、図形から 1 回限りの画像を組み立てる。

始める前に

  • Bannerify のアカウント。テンプレート用のツールには、テンプレートが 1 つ以上必要です。図形から画像を組み立てる場合は、テンプレートは不要です。
  • HTTP 経由のリモートサーバーと OAuth サインインに対応した MCP クライアント。

サーバーを追加する

サーバーの URL は https://api.bannerify.co/mcp で、Streamable HTTP トランスポートを使います。ダッシュボードの Agents & MCP ページには、クライアントごとの同じ設定手順が表示され、URL とコマンドをコピーするボタンもあります。

Claude、ChatGPT、Codex、Cursor、Others と、Claude の設定手順を表示した Agents & MCP ページ
ダッシュボードの 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 は、リモートサーバーをカスタムコネクターとして追加します。Web では、次の手順です。

  1. Customize > Connectors を開きます。
  2. + Add、Add custom connector の順にクリックします。
  3. 名前に Bannerify、リモート MCP サーバーの URL に 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

2 つ目のコマンドで、ブラウザーに Bannerify のサインインページが開きます。

ほかのクライアントでは、同じ URL を入力し、OAuth サインインを使う HTTP トランスポートを選びます。

サインインする

クライアントが初めて接続するときはトークンがないため、Bannerify はサインインページへ誘導します。クライアントがそのページをブラウザーで開きます。サインインすると、クライアントが使えるワークスペースを選びます。クライアントはトークンを保持し、リクエストのたびに送信します。API キーを作成したり、トークンをコピーしたりする必要はありません。

やり取りは、次の 4 つのステップで進みます。

  1. クライアントが、トークンなしで https://api.bannerify.co/mcp にリクエストを送ります。サーバーは HTTP 401 と、https://api.bannerify.co/.well-known/oauth-protected-resource/mcp のメタデータを指す WWW-Authenticate ヘッダーで応答します。
  2. メタデータにはサインインサービスが示されており、クライアントはあなたをそこへ誘導します。
  3. Bannerify にサインインします。同意ページには、クライアントの名前と、トークンの送信先が表示されます。Personal ワークスペースまたはチームワークスペースを選び、Allow をクリックします。
  4. クライアントはアクセストークンを受け取り、リクエストのたびに Authorization: Bearer <token> として送信します。Bannerify は、トークンが有効で、期限が切れておらず、MCP の URL 向けに発行されたものであることを確認します。
項目 内容
有効な範囲 https://api.bannerify.co/mcp のみ。別の URL 向けに発行されたトークンは HTTP 401 になります
ワークスペース 同意ページで選んだワークスペース。別のワークスペースを使うには、もう一度接続して選び直します
無効または期限切れのトークン エラー invalid_token を伴う HTTP 401。クライアントはもう一度サインインします
トークンの保管 Bannerify は、トークンのハッシュだけを保存します

ファイルを頼む

アシスタントには、普通の言葉で頼みます。

Bannerify のテンプレートを、各テンプレートのレイヤーつきで一覧表示してください。
"Lifecycle email" テンプレートから PNG を作成してください。headline は "Welcome back, An"、qr レイヤーは https://example.com/restart に設定します。
請求書テンプレートから、Acme Studio 宛ての PDF を作成してください。
暗い背景に "Launch week" と入れた 1200 × 630 のバナーをデザインして、画像を見せてください。
私の 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 が表示されない claude_desktop_config.json ではなく、Customize > Connectors でカスタムコネクターとして追加します
アシスタントにテンプレートが表示されない get_project を実行するよう頼みます。テンプレートがあるワークスペースとは別の名前が表示される場合は、サーバーを削除し、もう一度接続して、テンプレートのあるワークスペースを選びます
テンプレートで NOT_FOUND が返る アシスタントに list_templates を実行させ、結果の ID を使います。ツールが参照できるのは、接続したワークスペースのテンプレートだけです
USAGE_EXCEEDED ワークスペースが上限に達しました。クォータと制限を参照してください

関連情報