mcp-mockuuups

Mockuuups Studio 用の MCP サーバー — 約 5,300 のデバイスおよびプリントモックアップを検索し、スクリーンショットや自分の画像をレンダリングできます。

1 つのデザイン — WTDIB ベルリンシティガイド — を 1 回の撮影から 4 つのモックアップにレンダリングした例です。部屋はそのままで、デバイスだけが変わります。ツール呼び出しは 2 回、画像ホスティングは一切不要です。

これが存在する理由

Mockuuups は、https://github.com/Mockuuups/mockuuups-mcp でホスト型 MCP サーバーを提供しています（エンドポイントは https://mcp.mockuuups.studio/mcp）。このサーバーは generate_mockup という単一のツールを公開しており、あらかじめ把握しているモックアップ ID と、公開 URL でホスト済みの画像が必要です。

このサーバーは代わりに基盤となる REST API をラップし、ホスト型サーバーを実際に使いづらくしていた 2 つのギャップを解消します：

• 検索できる。 アップストリームのカタログエンドポイントは検索パラメータを一切受け付けません — q、type、family、tag は黙って無視され、すべてのリクエストが同じフィルタリングなしのページを返します。カタログ全体を一度取得してローカルで検索するため、「机の上のタブレット」や「ポスター」で実際に何かが見つかります。

• アップロードできる。 Mockuuups は URL からのみレンダリングします。このサーバーに生の画像バイトを渡すと、レンダラーが取得できるように短時間有効な推測不能なリンクの下にステージングするため、ローカルのデザインにバケットも CDN もホスティングも不要です。

ローカルに保持している画像のレンダリング

Mockuuups は URL からのみレンダリングします。image_base64 を渡すと、このサーバーがバイトを短時間有効な推測不能なリンクの下にステージングし、レンダラーに取得させ、期限切れにします — バケットも CDN もホスティングアカウントも不要です。

上の iPad レンダリングは、ディスクからアップロードされ、フレーム付き A3 ポスターにレンダリングされたものです。

Related MCP server: Store Screenshot Generator MCP

ツール

1 つのデザインを複数のデバイスにレンダリング

一緒に撮影されたシーンはタグを共有するため、デバイス間で一貫した見た目を得るには、1 つを検索してからそのタグでフィルタリングします：

search_mockups(query="ipad", tag="update-august-2024-meeting-room")
create_mockups(
    mockup_ids=["Zkn1GMTfiAFX5ZOn", "Zkn2DsTfiAFX5ZPD", "Zkn15MTfiAFX5ZO_"],
    screenshot_url="https://wtdib.cdit-works.de/",
)

設定

.env.example を参照してください。重要なのは次の 2 つです：

• MOCKUUUPS_API_KEY — mockuuups.studio/developers から取得する開発者キー。

• PUBLIC_BASE_URL — このサーバーの公開オリジン。アップロードにはこれが必要です。Mockuuups のレンダラーがステージングされた画像をパブリックインターネット経由で取得するためです。スクリーンショットと画像 URL のレンダリングはこれなしで動作します。

知っておくべきプラン制限

API はクレジット単位で課金されます：レンダリング 1 回 = 1 クレジット、ウェブサイトのスクリーンショットで +1、ハイレゾで +1。課金されるのは成功したレンダリングのみです。

次の 2 つの動作は、知らないと痛い目に遭います：

• size を省略するとハイレゾ扱いになり、それがないプランでは feature-not-available でハードフェイルします。このサーバーは常に size を明示的に送信し、MOCKUUUPS_MAX_SIZE（デフォルト 1000、Trial の上限）で上限を設定します。アカウントに hires 機能がある場合は引き上げてください。

• cdn-temporary があるプランでは、配信リンクは約 24 時間で期限切れになります。 保存する価値のあるものはダウンロードしてください。account_status がこれを報告します。

開発

uv sync
uv run pytest
uv run mcp-mockuuups          # stdio
TRANSPORT=http uv run mcp-mockuuups   # streamable-http on /mcp

ライセンス

MIT