How to use Mockuuups API via MCP?

This guide provides technical instructions for connecting the Mockuuups API to any AI tool that supports the Model Context Protocol (MCP).


Prerequisites

  • You must have a Mockuuups Developer account.
  • You will need your unique API Key from the Mockuuups Developer Portal.

Endpoints

We provide two endpoints for MCP integration. We recommend using the primary MCP Endpoint first.


  • Primary MCP Endpoint (Recommended)
    • This is the modern, streamable HTTP endpoint.
    • URL: https://mcp.mockuuups.studio/mcp
  • Fallback SSE Endpoint (Deprecated)
    • Use this endpoint only if your tool does not yet support the primary streamable HTTP endpoint.
    • URL: https://mcp.mockuuups.studio/sse

Setup Instructions

  1. Get Your API Key:
    • Navigate to the Mockuuups Developer Portal.
    • Sign up for a free account or log in.
    • Copy your API Key from your account dashboard.
  2. Connect to Your AI Tool:
    • In your AI tool's settings, locate the option to "Connect Apps," "Add Integration," or "Add Tool."
    • Configure the new tool with the following details:
      • Tool Name: Mockuuups (or another memorable name)
      • MCP Endpoint URL: https://mcp.mockuuups.studio/mcp
      • (If the above endpoint fails, use the fallback: https://mcp.mockuuups.studio/sse )
    • Save the tool configuration
  3. Authenticate:
    • After saving the tool, you will be prompted to provide an API key.
    • Paste your Mockuuups API Key into the field to complete the authentication.

The connection is now active.


Usage Examples

You can now generate mockups by providing simple text prompts to your AI tool.


Basic Prompts:

  • To generate a mockup from a URL:
Take a screenshot of Theverge.com and put it on an iPhone 16 mockup.
  • To generate a mockup from an image URL:
Take this image `[your-public-image-url.png]` and put it on a phone held by a woman.

Specific Mockup ID:

You can specify an exact mockup by using its ID, which is found in the mockup's description on the Mockuuups Studio website.


  • To use a specific mockup ID:
Put this design `[your-public-image-url.png]` into mockup `ZvMSqqPA3wFkHM3Y`.

Still need help? Contact Us