mcpField
M
Mockuuups

Mockuuups

Local
github.com/MockuuupsAI & Agents5Updated 70w ago
Repository

About Mockuuups

Mockuuups is a remote MCP server for designers, marketers, and developers who want to generate device-scene mockups from AI chats or automation tools. It accepts an image or webpage screenshot URL and returns a link to the generated image.

Key features

  1. 01Generate mockups from images or URLs
  2. 02Specify a device, scene, or mockup ID
  3. 03Return a link to the generated image
  4. 04Connect from AI tools and automation

Use cases

  1. 01Place a webpage screenshot in a phone mockup
  2. 02Present a design in a selected scene
  3. 03Automate mockup generation with Make.com or Zapier

MCP support

The remote MCP server exposes the `generate_mockup` tool at `https://mcp.mockuuups.studio/mcp`, accepting an image or screenshot URL and returning a mockup image URL. Older tools can use its SSE endpoint; connection requires a Mockuuups API key.

#mockup#design-tool#automation

Configuration

Local server config is the same for every client. Copy it into your client’s MCP config file.

mcp.json · Universal config
{
  "mcpServers": {
    "mockuuups": {
      "command": "npx",
      "args": [
        "-y",
        "mcp-remote"
      ]
    }
  }
}
Run commandnpx -y mcp-remote

Local servers need a runtime on your machine (e.g. Node.js 18+). Config file locations differ by client; see your client’s docs.

Packages
npmmcp-remote

Tools

No tool list yet

Local servers expose tools only once running on your machine, and the maintainer has not provided a tool list.

Details

From the project README

Mockuuups MCP Server

The Mockuuups MCP Server brings the power of the Model Context Protocol (MCP) to your design workflow, letting you generate stunning mockups instantly—right from your favorite AI chat or automation tool.

Why Mockuuups MCP?

  • No more context switching: Create mockups directly in Claude, ChatGPT, or any MCP-compatible tool.
  • Supercharge your workflow: Automate mockup creation in Make.com, Zapier, and more.
  • For designers, marketers, and developers: Save time, stay in flow, and deliver beautiful visuals faster.

Quick Start

  1. Create a Free Developer Account:
    Sign up at Mockuuups Developer Portal to get your API key (50 free credits).

  2. Connect to Your AI Tool:

    • MCP Endpoint URL: https://mcp.mockuuups.studio/mcp
    • Fallback SSE Endpoint: https://mcp.mockuuups.studio/sse (for older tools)
    • API Key: Paste your key when prompted.

  3. Start Generating Mockups:
    Just ask your AI assistant, e.g.:

    "Take a screenshot of Theverge.com and put it on an iPhone 16 mockup."

Prerequisites

  • A Mockuuups Developer API key (get one here)
  • An MCP-compatible host (Claude, ChatGPT, VS Code, etc.)

Installation

In Claude, ChatGPT, or Other AI Tools
  • Go to "Connect Apps" or "Add Integration" in your tool's settings.
  • Enter:
    • Tool Name: Mockuuups
    • MCP Endpoint URL: https://mcp.mockuuups.studio/mcp
    • API Key: Your Mockuuups API key
In Make.com, Zapier, or Custom Automation

Configuration

  • API Key: Found in your Mockuuups Developer dashboard.
  • Endpoints:
    • MCP: https://mcp.mockuuups.studio/mcp
    • SSE (legacy): https://mcp.mockuuups.studio/sse

Tool Reference

The Mockuuups MCP exposes the following tools:

  • generate_mockup
    Generate a mockup from a URL or image, specifying device, scene, or mockup ID.

    Parameters:

    • image_url or screenshot_url
    • mockup_id (optional)

    Returns:

    • URL to the generated mockup image

Example Prompts

  • "Take this image [your-public-image-url.png] and put it on a phone held by a woman."
  • "Show me how Dribbble.com looks on a television in a living room."
  • "Put a screenshot of new Mockuuups landing on a MacBook Pro on a desk."
  • "Put this design [your-public-image-url.png] into mockup ZvMSqqPA3wFkHM3Y."

Comments

Markdown supported

New to MCP?

From what the protocol is to installing your first server, these answers cover most first questions.

An open protocol that defines how AI applications connect to external tools and data in a uniform way. Clients talk to the model; MCP servers provide tools, resources and prompt templates. They exchange standard messages, so one server can be reused by many clients.