mcp-mockuuups

MCP-сервер для Mockuuups Studio — поиск по ~5 300 мокапам устройств и печатной продукции, а затем рендер скриншота или собственного изображения в них.

Один дизайн — WTDIB — путеводитель по Берлину — отрендерен в четыре мокапа из одной фотосессии, так что комната остаётся на месте, а устройство меняется. Два вызова инструментов, никакого хостинга изображений.

Почему это существует

Mockuuups предоставляют собственный размещённый MCP-сервер по адресу https://mcp.mockuuups.studio/mcp. Он предоставляет единственный инструмент generate_mockup, которому нужен идентификатор мокапа, который вы уже знаете, и изображение, которое вы уже разместили где-то публично.

Этот сервер вместо этого оборачивает базовый REST API и закрывает два недостатка, которые делали размещённый сервер неудобным на практике:

• Вы можете искать. Конечная точка каталога вышестоящего API вообще не принимает параметры поиска — q, type, family и tag молча игнорируются, и каждый запрос возвращает одну и ту же нефильтрованную страницу. Весь каталог загружается один раз и ищется локально, так что «планшет на столе» или «постер» действительно что-то находят.

• Вы можете загружать. Mockuuups рендерит только по URL. Передайте этому серверу сырые байты изображения, и он разместит их по короткоживущей непредсказуемой ссылке для загрузки рендерером, так что локальному дизайну не нужен бакет, CDN или хостинг.

Рендеринг изображения, которое у вас локально

Mockuuups рендерит только по URL. Передайте image_base64 — этот сервер разместит байты по короткоживущей непредсказуемой ссылке, позволит рендереру забрать их и даст ссылке истечь — без бакета, CDN и хостинг-аккаунта.

Рендер iPad выше, загруженный с диска и отрендеренный в рамку для постера A3.

Related MCP server: Store Screenshot Generator MCP

Инструменты

Рендеринг одного дизайна на разных устройствах

Сцены, снятые вместе, имеют общий тег, поэтому способ получить единый вид на разных устройствах — найти один мокап, затем отфильтровать по его тегу:

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. Два важных:

• MOCKUUUPS_API_KEY — ключ разработчика с mockuuups.studio/developers.

• PUBLIC_BASE_URL — публичный адрес этого сервера. Он нужен для загрузок, потому что рендерер Mockuuups забирает размещённое изображение обратно через публичный интернет. Рендеры скриншотов и изображений по URL работают без него.

Ограничения плана, о которых стоит знать

API списывает кредиты: один рендер = 1 кредит, +1 за скриншот сайта, +1 за высокое разрешение. Списываются только успешные рендеры.

Два аспекта вас укусят, если вы о них не знаете:

• Отсутствие size означает высокое разрешение, что жёстко завершается ошибкой feature-not-available на любом плане без этой опции. Этот сервер всегда отправляет size явно, ограниченный MOCKUUUPS_MAX_SIZE (по умолчанию 1000, потолок для пробного плана). Повышайте его, когда у аккаунта есть функция 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