RecraftをClaude・Cursor・VS CodeとMCPでつなぐ手順（その1）：公式のMCPサーバーの設定、9つのツール、渡るデータ、うまくいかないときの確認点

この記事は、公式の資料を2026年10月25日に読んでまとめたものです。この記事は、実際に使って確かめた記録ではありません。

先に結論

• この記事（その1）はMCPです。 公式が用意している連携は、MCPサーバー、REST API、Claude Code向けスキル、AI向けの文書（agents.mdなど）、5つの拡張機能で、API以下はその2（08）にあります。モバイルアプリは05と06を参照してください。
• AIエージェントに画像を作らせたいなら、MCPが入口の1つです。 ツールは9つあり、生成、スタイルの作成、ベクター化、背景の除去と置換、2種類の拡大、ユーザー情報の取得です。
• MCPで呼べるのは、上の9つのツールです。 公式のMCPのページは、Studioの外部モデル（OpenAI、Googleなど）やフレームでの部分生成を呼べるとは書いていません。外部モデルは「Studioだけで、APIでは使えない」と公式が書いている（03）一方、MCPについての記載は見つかりませんでした。
• 請求が別です。 MCPは購読のクレジット、APIはAPI units（08）。
• ChatGPTは、MCPのページに設定例がありませんでした。 載っているクライアントは上の5つです。
• 外し方は、Recraft側のページに記載が見つかりませんでした。 取り消しは、クライアント側（Claudeなど）の機能と、Recraftのアカウントの両方を、各公式で確かめてください。

前提：用語をそろえる

• MCP（Model Context Protocol）：AIエージェントを外部の道具につなぐ規格です。道具側がMCPサーバー、AI側がMCPクライアントです。
• Streamable HTTP：MCPサーバーに、ネット経由で接続する方式の1つです。公式のMCPは、この方式と書かれています。
• OAuth 2.0：パスワードを渡さずに、「このアプリにアカウントの利用を許す」と承認する仕組みです。最初の接続のとき、Recraftの画面に移って承認します。
• コネクター（Connectors）：Claudeのアプリで、外部のサービスをつなぐ設定の呼び名です。
• mcp-remote：標準入出力（stdio）でしか話せないMCPクライアントを、ネットのMCPサーバーにつなぐ変換用の道具です。公式は npx で使う形を載せています。npx はNode.jsに付く道具なので、Node.jsが要ると読めますが、公式のページに入れ方の説明は見つかりませんでした。
• スキル（Claude Code）：Claude Codeに手順書を覚えさせる仕組みです。置き場所はフォルダーです。
• agents.md：公式が公開する、APIの全体を1ページにまとめた文書です。AIに読ませる用です。
• API units：APIの前払い残高の単位です。購読のクレジットとは別です。

連携の一覧（その1とその2の全体）

下の表のうち、MCPの行がこの記事、API以下は08で扱います。

連携1：MCP × Claudeのアプリ（Web・デスクトップ）

公式の「MCP server」のページの内容です。

設定する画面

1. Claudeのアプリ（Webかデスクトップ）で、Settings → Connectors を開きます。
2. カスタムコネクターを追加します。名前に Recraft、URLに https://mcp.recraft.ai/mcp を入れます。
3. 公式のページには、ワンクリックのリンクもある、と書かれています（リンク先の動きは確かめていません）。
4. 最初の接続のとき、Recraftの承認の画面（OAuth）に移ります。Recraftのアカウントでサインインして、承認します。
5. 会話の入力欄の「Search and tools」のメニューで、コネクターを有効にします。

期待される結果：会話の中で、Claudeが画像の生成などのツールを使えるようになります。

Claudeのアプリ側の画面の表記は、アプリの更新で変わります。手元の画面と照らしてください。有料プランが要るか、組織の管理者が許可するかなどのClaude側の条件は、Recraftの資料の範囲外です。

この記事の例（会話での頼み方）

Recraftで、ミント色の丸いロゴの案を、SVGで2つ作ってください。

何が起きるか（公式の記載から読める範囲）：Claudeが generate_image のツールを呼び、プロンプト、スタイル、サイズ、モデル、枚数がRecraftに渡ります。結果はURLで返り、一部のクライアントでは画像がそのまま表示されません。「クライアントによっては、画像のインライン表示の大きさに上限がある。小さい size を試すか、返ってきたURLを直接開く」と公式のトラブルシューティングにあります。

渡るデータ

権限

読んだ範囲で、スコープ（許可の範囲）の指定方法や、読み取り専用にする設定は見つかりませんでした。ツールは9つです（下の一覧）。操作ごとにクレジットが引かれます（費用は04と公式の「Credits」のページ）。

外し方

Recraft側の取り消し手順は、読んだページに記載が見つかりませんでした。Claude側でコネクターを外す手順は、Anthropicの資料で確かめてください。この記事では、読んでいません。

連携2：MCP × Claude Code

設定する

ターミナルで、次を実行します（公式の例の写し）。

claude mcp add --transport http recraft https://mcp.recraft.ai/mcp

その後、Claude Codeのセッションの中で /mcp を実行して、認証します。公式は「/mcp で、サーバーが接続され、認証済みかを確かめる」とも書いています。

Claude Codeのウェブ版

公式は、ウェブ版では画像のダウンロードが失敗することがあるので、環境の許可ドメインに img.recraft.ai を足す、と書いています。手順は、環境の編集画面の「Network access」を「Custom」にして、「Allowed domains」に img.recraft.ai を1行で足す、という書き方です。「Also include default list of common package managers」のチェックで、既定の一覧を併せて許可することもできる、と書かれています（任意）。

この記事の例（Claude Codeへの頼み方）

Recraftのツールで、シンプルな封筒のアイコンをSVGで作って、./assets/ に保存して。

渡るもの：MCPの引数がRecraftに行きます。Recraftからは、画像のURLなどが返ります。ファイルとして保存するのは、Claude Code側の動作です。保存先、保存の可否、権限の確認は、Claude Codeの設定に従います。この記事では、読んでいません。

外し方

Recraft側の記載は見つかりませんでした。Claude Code側の設定の外し方は、Claude Codeの資料で確かめてください。

連携3：MCP × Claude Desktop

Claude Desktopの設定ファイル claude_desktop_config.json に、次を足します（公式の例の写し）。

{
  "mcpServers": {
    "recraft": {
      "command": "npx",
      "args": [
        "-y",
        "mcp-remote",
        "https://mcp.recraft.ai/mcp"
      ]
    }
  }
}

公式は、初めて使うとき、ブラウザーの窓が開いてOAuthが行われる、と書いています。ファイルの場所は、公式のページに書かれていません（Claude Desktop側の資料で確かめてください）。

注意点：すでに mcpServers が書かれているファイルには、recraft の項目を、既存の項目の隣に足します。JSONの書式（カンマ、括弧）が崩れると、読み込めなくなります。

連携4：MCP × Cursor

~/.cursor/mcp.json に、次を足します（公式の例の写し）。

{
  "mcpServers": {
    "recraft": {
      "url": "https://mcp.recraft.ai/mcp"
    }
  }
}

認証は、最初の接続でOAuthです。Cursorの画面の操作は、公式のRecraftのページには、これ以上書かれていません。

連携5：MCP × Visual Studio Code

.vscode/mcp.json（そのプロジェクトだけ）か、ユーザー設定に、次を足します（公式の例の写し）。

{
  "servers": {
    "recraft": {
      "type": "http",
      "url": "https://mcp.recraft.ai/mcp"
    }
  }
}

Cursorとは、トップの項目名が違います（Cursorは mcpServers、VS Codeは servers）。公式の例がそうなっているので、そのまま分けて書いています。

連携6：MCP × そのほかのクライアント

• Streamable HTTPが使えるクライアントは、URL https://mcp.recraft.ai/mcp を設定します。
• 標準入出力（stdio）の命令だけを受け付けるクライアントは、次のコマンドを使います（公式の例の写し）。

npx -y mcp-remote https://mcp.recraft.ai/mcp

• ChatGPTは、Recraftの公式のMCPのページに設定の例が載っていません。「載っていない」ことと「使えない」ことは別で、使えるかどうかは、記載が見つかりませんでした。

MCPのツールの一覧

公式の「MCP Tools」のページの内容です。パラメーターは「名前だけ」が載っていて、型、許される値、既定値、返り値、上限は載っていません（公式のAPIのページを見るよう案内されています）。

モデルとスタイルの組み合わせ（公式の記載）：

• model を受けるツール（generate_image、image_to_image、replace_background）は、V2、V3、V4、V4.1の世代のモデルで使えます。
• スタイルは、V4とV4.1のモデル（Pro、Utility、Vectorの変種と、専用の「V4 Styles」を含む）で、style_id と custom_style_id の項目から使えます。
• 名前が _vector で終わるモデルはSVGで出ます。ラスターのモデルはPNG、WEBP、JPGで出ます。ラスターのスタイルはラスターのモデルと、ベクターのスタイルはベクターのモデルと組み合わせます。
• create_style で作った custom_style_id は、作ったときのモデルと基本のスタイルに結びつきます。同じモデルで使い回します。

請求：MCPのサーバーはRecraftのWebと同じ価格で、購読のクレジットから引かれます。クレジットの費用は公式の「Credits」のページ（04）にあります。

この記事の案：MCPで、順に頼む流れ

下は、上のツールを順につないだ、この記事の案です。動作は確かめていません。

AIがどのツールを選ぶか、引数に何を入れるかは、クライアントの動作で、Recraftの資料には書かれていません。

MCPがうまくいかないときの確認点

公式の「Getting started」のトラブルシューティングの内容です。最後の行（Claude Codeのウェブ版）だけは、「MCP server」のページの記載です。

気をつけること

• 手順は「公式の手順を順に並べたもの」です。「この記事の例」「この記事の案」と書いたものは、公式の記載に合わせてこの記事で組んだもので、動作は確かめていません。画面の表記は変わるので、手元の画面と照らして読んでください。
• この記事は、実際に使って確かめた記録ではありません。公式の資料を読んだ範囲です。
• 設定ファイルの例は、公式ページを要約の形で取得した内容の写しです。書く前に、公式の原文と見比べてください。システムの設定ファイルを書き換える操作は、元のファイルを控えてから行ってください。
• 連携の外し方は、読んだページに記載が見つかりませんでした。
• MCPのツールのパラメーターの型、許される値、返り値、上限は、MCPのページに載っていません。API側のページを見るよう案内されています。
• トークンやOAuthの承認は、Recraftのアカウントの利用を、そのクライアントに任せることです。信頼できるクライアントだけに許可し、不要になったら、各クライアントの側で外してください。外し方はそれぞれの資料で確かめてください。
• 「Developer Terms」（APIとMCPの規約。利用規約がそう書いています）の本文は、読んでいません。商用で使う前に、原文を読んでください。この記事は法律の助言ではありません。
• 価格や上限の数字は、2026年10月25日に公式ページで読んだものです。変わることがあります。

出典

• MCP Getting started（Recraft Docs、確認日 2026-10-25）
• MCP server（Recraft Docs、確認日 2026-10-25）
• MCP Tools（Recraft Docs、確認日 2026-10-25）
• Use with AI tools（Recraft API Docs、確認日 2026-10-25）
• Documentation index（Recraft Docs、確認日 2026-10-25）