miromiro

miromiro-mcp

MiroMiro のデザイン抽出 API 用 MCP サーバーです。実際のウェブサイトのデザイン（ブランドカラー、フォント、デザイントークン、SVG、画像、Lottie アニメーション、すぐに貼り付けて使えるコンポーネントコード）を AI エージェントに提供し、スクリーンショットから推測するのではなく、実際の値に基づいて構築できるようにします。

Claude（ウェブ、デスクトップ、Claude Code）、ChatGPT、Cursor、Windsurf、Codex、およびあらゆる MCP クライアントで動作します。

Claude Code プラグイン

プラグインとしてインストールすると、ツールに加えて、各ツールを使うタイミングを Claude に教える 5 つのスキルを利用できます。

• elementor-section - 任意のサイトのセクションを WordPress にインポートできる Elementor テンプレートとして作成します
• shopify-section - 任意のサイトのセクションを Shopify テーマセクション（.liquid）として作成します
• clone-section - セクションを Tailwind、HTML+CSS、React、または Vue で作成します
• match-brand - サイトのカラー、フォント、デザイントークンを抽出し、そのスタイルで構築します
• extract-assets - 画像、SVG アイコン、動画、音声、Lottie ファイルを抽出します

claude plugin marketplace add SoraiaBarroso/miromiro-mcp
claude plugin install miromiro@miromiro

このプラグインはリモートサーバーを使用するため、インストールもキーの貼り付けも不要です。初回の使用時に、ワンクリックの MiroMiro サインインが開き、無料アカウント（毎月 300 クレジット、カード不要）を連携します。

OpenClaw やその他のエージェント向けスキル

同じスキルが skills/ にあります。MiroMiro MCP ツールに接続されている場合はそれらを使用し、接続されていない場合は MIROMIRO_API_KEY を使って REST API を呼び出します（無料キー、毎月 300 クレジット：https://miromiro.app/api/onboarding）。

クイックスタート：リモートサーバー（インストール不要）

ホスト型サーバーはこちらです。

https://miromiro.app/mcp

リモート MCP サーバーに対応する任意のクライアントに、この URL を貼り付けてください。初回の使用時に、ワンクリックの MiroMiro サインインが開き、無料アカウント（毎月 300 クレジット、カード不要）を連携します。

• Claude（ウェブまたはデスクトップ）： Settings → Connectors → Add custom connector → URL を貼り付けます。または、ワンクリックインストールを使用します。
• ChatGPT： Settings → Security and login で Developer mode を有効にし、Settings → Plugins → New Plugin で URL を指定します（認証：OAuth）。
• Cursor（リモート）： ~/.cursor/mcp.json に { "mcpServers": { "miromiro": { "url": "https://miromiro.app/mcp" } } } を追加します。
• Claude Code： claude mcp add --transport http miromiro https://miromiro.app/mcp を実行し、セッション内で /mcp を実行してサインインします。
• Codex： ~/.codex/config.toml に [mcp_servers.miromiro] と url = "https://miromiro.app/mcp" を追加し、codex mcp login miromiro を実行します。
• Grok Bot： ボットに「Add a custom MCP server called miromiro at https://miromiro.app/mcp」と尋ねてから、Authorize を押します。
• Muse： Settings → Connectors → Add custom connector → URL を貼り付けます。
• 各エージェントの手順ページ：https://miromiro.app/api/agents/chatgpt（末尾を claude、claude-code、codex、cursor、grok-bot、muse、または openai-dots に置き換えてください）。
• OAuth の代わりに Raw API key を使用： URL に ?access_key=mm_live_... を追加するか、Authorization: Bearer ヘッダーとして送信します。

ローカルサーバー（npm）

環境変数にキーを設定してローカルの stdio プロセスを使いたい場合は、miromiro.app/api/dashboard で無料キーを取得してから、次の手順に進みます。

Cursor（~/.cursor/mcp.json）／Windsurf（Settings → MCP）：

{
  "mcpServers": {
    "miromiro": {
      "command": "npx",
      "args": ["-y", "miromiro-mcp"],
      "env": { "MIROMIRO_API_KEY": "mm_live_your_key" }
    }
  }
}

Claude Code（claude セッション内ではなく、ターミナルで実行）：

claude mcp add miromiro -s user \
  --env MIROMIRO_API_KEY=mm_live_your_key \
  -- npx -y miromiro-mcp

ツール

ツール	返される内容	クレジット
extract_code	ライブページのセクションを、貼り付けてすぐ使えるコンポーネント（Tailwind、HTML+CSS、JSX、Vue）またはインポート可能なElementorテンプレート／Shopifyセクションとして返し、使用するトークンも含みます。実際のUIを再構築するには、まずこちらをお使いください	25
extract_brand	名前付きの色の役割（プライマリ／アクセント／背景／テキスト）、カラーパレット、役割ごとに分類したフォント、ロゴ、ソーシャルプロフィール、0～1の信頼度スコア、および色の取得元（宣言されたトークンか推定か）を説明するsignals	10
extract_design_tokens	使用回数を含む完全なトークンシステム。貼り付けてすぐ使える出力にはformat: cssまたはtailwind、W3C Design Tokensファイル（Style Dictionary／Figma変数）にはdtcgを指定します	10
extract_fonts	サイトが読み込むすべてのフォントファイルとフォントファミリー。ウェイト、形式、ファイルURLも含みます	5
extract_videos	動画ファイル、og:video、プレーヤーの埋め込み（YouTube、Vimeo、Wistia、Loom）をソース別に分類して返します。動画ファイルへの直接URLの場合は単一の結果を返し、YouTube／Vimeo／TikTok／Dailymotion／Loomの動画URLの場合はフェッチせずにプレーヤーの埋め込みを返します	1
extract_audio	オーディオファイル、og:audio、ポッドキャストのエンクロージャーをソース別に分類して返します。オーディオファイルへの直接URLの場合は単一の結果を返します	1
extract_lottie	ページ内で宣言されたLottieアニメーションのJSONファイル	3
extract_svgs	インラインSVGコード（サニタイズ済みで、貼り付けてすぐ使えます）と外部SVGファイルのURL	1
extract_assets	ページ上のすべての画像URLをソース別に分類し、代替テキストとともに返します。画像ファイルへの直接URLの場合は単一の結果を返します	1

すべてのツールは読み取り専用で、再試行しても安全です。24時間以内の同一の呼び出しはキャッシュから無料で提供され、失敗した呼び出しに料金は発生しません。

ページ内のパーツを名前で指定する

extract_codeではsectionを指定できます。指定できる値はhero、header、footer、pricing、features、testimonials、faq、ctaです。これにより、エージェントが見られないページのCSSセレクターを推測する必要がなくなります。すべての結果には、後続の呼び出しに使えるセレクター付きで、そのページのほかのsectionsも一覧表示されます。セレクターやセクションに一致するものがない場合は、行き止まりの404ではなく、ページに存在する内容を示すnoteとともにヒーローセクションを返します。

すべてのextract_codeの結果には、返されたコードをレンダリングして表示するページのpreviewUrlが含まれます。エージェントがコードを変更した場合でも、ライブサイトと比較できます。また、コードを指定した形式（.jsx、.vue、.html、.elementor.json、.liquid）のファイルとしてそのまま返すdownloadUrlと、これまでに抽出したそのページのすべてのセクションを順番に組み立てたpagePreviewUrlも含まれます。エージェントには、コードを再生成するのではなく、返されたコードをベースに構築するよう指示されています。レンダリング結果が同じである限り、可能な範囲で使いやすく改善します（わかりやすい名前、propsを使った再利用可能なコンポーネント、冗長なラッパーや重複したクラスを省いた短いコード、独自のテーマトークンなど）。そのうえで、整ったコードをそのまま渡し、実際のレイアウトやスタイルを決して打ち直しません。2 KBを超えるインラインSVG（ロゴの一覧やイラスト）は、クラス、サイズ、色を維持する<img>の背後にある、永続的にホストされた.svgファイルとして返されます。これにより、エージェントがそのまま使えるサイズにコードを抑えられます（astro.buildのヒーローは73 KBから14 KBになります）。完全に自己完結したコードには、inline_svg: trueを渡してください。

プロンプト（スラッシュコマンド）

サーバーは3つのMCPプロンプトを公開し、クライアントは最初の呼び出し前にそれらを表示します。Claude Codeでは/mcp__miromiro__clone_section、/mcp__miromiro__brand_kit、/mcp__miromiro__design_tokens、VS Codeでは/miromiro.<name>、Cursorではプロンプトメニューから利用できます。

プロンプト	引数	内容
clone_section	url、section?、framework?	ライブサイトのセクションを、実際の値を反映した貼り付けてすぐ使えるコードとして再構築し、ほかのセクションも一覧表示します
brand_kit	url	ブランドカラー、フォント、ロゴ、ソーシャルプロフィールについて、宣言されたものか推定されたものかも含めて説明します
design_tokens	url、format?	完全なトークンシステムをCSS、Tailwind、DTCG、JSONのいずれかで返し、簡単な概要も付けます

出力サイズの制御（リモートサーバー）

大きなページでチャットのコンテキストがあふれないよう、リモートの結果はデフォルトでトリミングされ、トリミングされたレスポンスには削除された内容が正確に記載されます。呼び出しごとに指定できる任意の引数を2つ使うと、制限を緩和できます。

• response_format: 'concise' | 'detailed' - ひとことで指定できる設定です。concise はチャット回答のリストを10件に制限し、detailed はツールが取得した内容をすべて返します
• limit（最大200） - 項目数の上限を引き上げます。「SVGを20個ではなく80個ください」のように指定できます
• full_output: true - インラインSVGのマークアップ全体など、長い文字列を完全な形で取得します

生成されたコードはトリミングされません。結果は、Claude Code、Claude Desktop、Cursorのツール結果の上限内に収まるよう、およそ20kトークン（extract_code は25kトークン）で打ち切られます。truncation_note には、何トークンがカットされたかと、元に戻すために指定する引数が記載されます。

REST APIとこのローカルのnpmサーバーは、常にトリミングせずにすべてを返すため、limit と full_output はリモートサーバーにのみ適用されます。どちらのサーバーのすべてのツールでも、 render: true を指定できます（実際のブラウザーを強制使用し、すべてのプランで毎回5クレジットを消費します。通常は不要です。サーバーがJavaScriptのみで描画されるページや拒否されたページを自動でブラウザーで再実行するためです。「注意事項」を参照）。さらに、両方で共通して使える引数が2つあります。

• fresh: true - 24時間のキャッシュを無視し、ライブページを再抽出します（通常どおり課金されます）。サイトが変更された直後に使います
• screenshot: true（render: true が必要） - 結果に screenshot フィールドが追加されます。このフィールドには、ページを1440x900でキャプチャした公開URLが含まれ、7日間有効です。追加のクレジットは不要です。抽出結果を確認できるよう、ユーザーに表示してください。ページ全体の高さを取得するには、true の代わりに 'full' を渡します。

例

「stripe.comの料金セクションをReactで再構築して」

エージェントはURLを指定して extract_code を呼び出し、セクションの実際のマークアップ、色、フォント、間隔を取得して、推測ではなく実際の値を使って調整します。

抽出ではデフォルトでページのライトテーマのスタイルが返されるため、ダークテーマだと知っているサイトも、別途指定しない限りライトテーマで返されます。

「linear.appの料金カードを、ダークテーマで再構築して」

エージェントは theme: "dark" を渡します。ページの prefers-color-scheme: dark ルールとカスタムプロパティがコンポーネントに反映されます。各結果には、実際に取得されたテーマを示す theme フィールドも含まれます。JavaScriptのクラス切り替えでテーマを変更するサイトでは、この方法でテーマを選択できません。その場合は、ページのデフォルトテーマと、その旨を示すヒントが返されます。

「linear.appのスタイルでダッシュボードを作って」

エージェントは extract_brand と extract_design_tokens を呼び出し、Linearの実際の色、フォント、間隔のスケールを取得して、それに合わせて構築します。

「apple.comではどのフォントが使われていますか？」

エージェントは extract_fonts を呼び出し、各ファミリーのフォントファイルURLとウェイトをすべて返します。

注意事項

• extract_code は常に実際のブラウザーでページを読み込み、表示されている内容を読み取ります（すべてのプランで、追加クレジット不要）。そのため、render: true は不要です。他のツールは静的 HTML を読み込み、完全な CSS カスケードを解決します。その結果が JavaScript アプリのシェルだった場合、スタイルがスクリプトによって挿入されている場合、またはサイトから拒否された場合（401、403、406、あるいはタイムアウト。公開ページであっても、運営者はデータセンターの IP を拒否することがよくあります）、サーバーはすべてのプランで追加費用なしに、実際のブラウザーで自動的に呼び出しを再実行します。その結果には usage.autoRender（ユーザーに読み上げる文）が含まれます。
• ブラウザーを強制するには render: true を渡します（どのプランでも＋5 クレジット）。スクロール時にしか読み込まれない画像、動画、Lottie を取得する場合や、自動処理後も結果が不十分な場合に使用してください。ブラウザーも拒否されたことを示す 403 が返された場合、そのサイトからは抽出できません。extract_design_tokens では、render: true はブラウザーの使用を許可するだけです。まず通常の読み取りが実行され、ブラウザーが実際に必要だった場合にのみ 5 クレジットが請求されます。
• すべての結果には、今月の残りクレジットを示す usage が含まれます。アカウントにクレジットパック（有効期限のない一度限りのクレジット。購入先は https://miromiro.app/api/pricing）がある場合、`usage.packCredits` はパックの残高を示します。パックのクレジットは月間クレジットの後に使用されるため、パックを保有している無料アカウントは、300 クレジットを使い切った後も引き続き利用できます。
• 抽出元のサイトを尊重してください。アセットを商用利用する前に、サイトの利用規約を確認してください。

リンク

API ドキュメント · プレイグラウンド（アカウント不要） · 料金 · 変更履歴 · 接続ページ

MIT © MiroMiro