MCPサーバー

サーバーはhttps://www.design-extractor.com/api/mcpにあり、streamable HTTPで通信し、2種類の認証情報を受け付けます。標準のMCP認可フロー（OAuth 2.1）によるアカウントでのログインと、Authorization: Bearer dx_...として送信する個人用のAPIキーです。エージェントはこのサーバーを通じて、公開サイトの抽出を開始し、完了を待ち、完成したDESIGN.mdを読み込み、価格と残高を確認し、過去に抽出したものを一覧できます。結果は他の抽出と同じように抽出履歴にも表示されます。

Claude CodeとCodex向けには、サーバーとapply-designmdスキルをまとめたプラグインもあります。このスキルは、参考サイトの抽出から、トークンをTailwind、CSS変数、トークンファイルに対応付けるまでをエージェントに案内します。ソースとインストール方法はMagentix-Studio/design-extractor-pluginにあります。

claude.ai、Claude Desktop、ChatGPT、Claude Code、Codexはキーなしで接続できます。クライアントがサーバーのURLからログイン方法を見つけ、ブラウザで一度許可すれば、クライアントがトークンを保持して自動で更新します。貼り付けるものも、ローテーションするものもありません。

1. 1

   コネクタの設定でサーバーのURLを追加

   claude.aiとClaude Desktop：「設定」、「コネクタ」、「カスタムコネクタを追加」を開き、https://www.design-extractor.com/api/mcpを貼り付けます。ChatGPT：「設定」、「コネクタ」、「作成」で同じURLを使います。

2. 2

   同意ページで許可

   クライアントがブラウザでDesign Extractorを開きます。まだログインしていなければログインし、エージェントが求める権限を確認して許可します。エージェントが開始した抽出は、他の抽出と同じようにクレジットを消費します。

3. 3

   サイトを指定して頼む

   「stripe.comのデザインを抽出して」で十分です。エージェントはアカウントページの「接続済みのエージェント」に表示され、ワンクリックで接続を解除できます。claude.aiで追加したコネクタはClaude Codeにも自動で表示されるため、一度の許可で両方に使えます。

Claude CodeとCodexも、ターミナルから同じ方法でログインします。キーなしでサーバーを追加し、クライアントに求められたら認証してください。具体的なコマンドはClaude CodeとCodexにあります。

コマンド1つで、現在のプロジェクトにサーバーを登録できます。キーは不要です。すべてのプロジェクトで使うには--scope userを付けてください。

claude mcp add --transport http design-extractor https://www.design-extractor.com/api/mcp

次に/mcpを実行し、design-extractorを選んでAuthenticateを選択します。開いたページでログインして許可すると、Claude Codeがトークンを保持し、自動で更新します。

または、サーバーとapply-designmdスキルを追加するプラグインをインストールします。プラグインのサーバーも同じ方法でログインします。インストール後に/mcpを実行し、プラグインのサーバーを選んで認証してください。

/plugin marketplace add Magentix-Studio/design-extractor-plugin
/plugin install design-extractor@design-extractor

ブラウザを開けないマシンなどで代わりにAPIキーを使う場合は、ヘッダーとして渡し、認証の手順は省略します。

claude mcp add --transport http design-extractor https://www.design-extractor.com/api/mcp \
  --header "Authorization: Bearer dx_..."

/mcpでdesign-extractorが接続済みと表示されることを確認してください。ツール名は、claude mcp addの場合はmcp__design-extractor__extract_designなど、サーバーがプラグインから追加された場合はmcp__plugin_design-extractor_design-extractor__extract_designなどになります。

キーなしでサーバーを追加すると、Codexがすぐにログイン画面を開きます。開いたページでログインして許可します。あとで必要になったらcodex mcp login design-extractorでやり直せます。

codex mcp add design-extractor --url https://www.design-extractor.com/api/mcp

または、同じプラグインをマーケットプレイスからインストールします。Codex CLIでは、/pluginsでマーケットプレイスの項目をインストール、切り替えできるブラウザが開きます。プラグインのサーバーが認証を求めた場合は、codex mcp login design-extractorでログイン画面が開きます。

codex plugin marketplace add Magentix-Studio/design-extractor-plugin
codex plugin add design-extractor@design-extractor

代わりにAPIキーを使う場合は、キーを保持する環境変数の名前を指定し、Codexを起動するシェルでその変数をexportしてください。そうしないと、サーバーは失敗と表示され、ツールは0個になります。

export DESIGN_EXTRACTOR_API_KEY=dx_...

codex mcp add design-extractor --url https://www.design-extractor.com/api/mcp \
  --bearer-token-env-var DESIGN_EXTRACTOR_API_KEY

同じ宣言を~/.codex/config.tomlに手で書くこともできます。キーを直接書き込む場合はhttp_headers = { "Authorization" = "Bearer dx_..." }を使います。

[mcp_servers.design-extractor]
url = "https://www.design-extractor.com/api/mcp"
bearer_token_env_var = "DESIGN_EXTRACTOR_API_KEY"

プロジェクトの.cursor/mcp.json、またはすべてのプロジェクトで使う場合は~/.cursor/mcp.jsonにサーバーを追加します。キーをファイルに書きたくない場合、Cursorではヘッダーの値に${env:DESIGN_EXTRACTOR_API_KEY}も使えます。

{
  "mcpServers": {
    "design-extractor": {
      "url": "https://www.design-extractor.com/api/mcp",
      "headers": {
        "Authorization": "Bearer dx_..."
      }
    }
  }
}

options.mcpServersにtype: "http"とヘッダーを付けてサーバーを渡し、エージェントが権限の確認なしでツールを呼び出せるよう、ワイルドカードでツールを許可します。

import { query } from "@anthropic-ai/claude-agent-sdk";

for await (const message of query({
  prompt: "Extract the design system of https://example.com and summarize its colors",
  options: {
    mcpServers: {
      "design-extractor": {
        type: "http",
        url: "https://www.design-extractor.com/api/mcp",
        headers: {
          Authorization: `Bearer ${process.env.DESIGN_EXTRACTOR_API_KEY}`,
        },
      },
    },
    allowedTools: ["mcp__design-extractor__*"],
  },
})) {
  if (message.type === "result" && message.subtype === "success") {
    console.log(message.result);
  }
}

サーバー経由の抽出の料金は、サイトでの料金とまったく同じです。Liteは1ページを抽出し、Proはサイトの主要ページをサンプリングします。現在の価格はget_pricing（執筆時点でLiteは6クレジット、Proは10クレジット）から、残高はget_creditsから取得できます。残高がモードの料金に足りない場合、extract_designは実行を拒否してその旨を伝えます。料金ページでチャージしてください。

最近抽出したサイトを頼んだ場合は、新しい抽出を開始せずにその抽出を再利用し、クレジットは請求されていないと応答します。他の人だけが抽出したサイトの場合は、通常どおりモードの料金がかかります。まずlist_my_extractionsを実行して、すでにあるものを確認してください。

一部のサイトは、特定の国からの訪問者にしか応答しません。そのために実行が失敗した場合、get_extractionがページを読み込める国を一覧し、エージェントはextract_designにcountryを付けて再試行できます。別の国からの実行には、モードの料金に追加料金がかかります。どちらもget_pricingで確認できます。