MCP Copy Web UI

Downloads complete webpage content with inlined resources for AI analysis of UI/UX inspiration.

javascript

6

GitHub Stars

javascript

Language

6 months ago

First Indexed

2 months ago

Catalog Refreshed

Documentation & install

Readme and setup notes from the catalogue, plus a client-ready config you can copy for your MCP host.

Installation

Add the following to your MCP client configuration file.

Configuration

View docs

{
  "mcpServers": {
    "maoxiaoke-mcp-copy-web-ui": {
      "command": "npx",
      "args": [
        "-y",
        "create-mcp-server@latest"
      ]
    }
  }
}

You can run an MCP Server that downloads complete webpages, inlines all CSS, converts images to data URIs, and makes the full page available for AI analysis. This enables you to extract UI/UX inspiration from any site with fully self-contained HTML content for downstream reasoning.

How to use

Start the MCP server you configured and connect to it with your MCP client. Once the server is running, you can invoke the get_web_inspiration tool from your client workflow to fetch a target URL. The server will return a single, self-contained HTML document with all CSS and resources inlined, ready for AI analysis or further processing. Use this to gather UI/UX ideas from reference sites and compare design patterns, typography, color schemes, and layout approaches.

How to install

Prerequisites you need on your machine before installing and running the MCP server:

Install Node.js 14+ (includes npm)
Ensure you have network access to install MCP server dependencies
Have a terminal or command prompt ready

Install and configure the MCP server using the provided NPX command configuration snippet. Run the exact command below to install the MCP server into your environment.

{
  "mcpServers": {
    "media_processor": {
      "command": "npx",
      "args": [
        "-y",
        "create-mcp-server@latest"
      ]
    }
  }
}

Additional notes

This server focuses on downloading complete webpage content and inlining all resources so AI analysis can operate on a self-contained document. There are no explicit credentials or endpoints required beyond the npm/npx-based command shown above. If you need to customize behavior, you can adjust environment variables or extend the server configuration as needed in your deployment. Always ensure you are running a compatible Node.js version and that you have permission to install and execute npm packages in your environment.

Available tools

get_web_inspiration

Downloads and analyzes a website for UI/UX inspiration. Takes a URL as input and returns the complete HTML with all resources inlined.