MCP Integration

What is MCP?

Model Context Protocol (MCP) allows AI and web tools to securely interact with content management systems like Webflow. With our MCP integration, you can compress images and send them directly to your CMS without the need to download and re-upload them manually.

MCP works by establishing a secure connection between Webpifier and your content management system. Once connected, optimized images can be sent directly to your CMS with a single click, saving you time and effort in your content workflow.

How MCP Works

The Model Context Protocol creates a secure bridge between web applications and content management systems:

All API credentials are securely stored in your local browser storage and are never sent to our servers. The communication happens directly between your browser and your CMS, ensuring maximum security and privacy.

Setting Up Webflow MCP

1. Get a Webflow API token from the Webflow API Playground

   Navigate to Account Settings → Integrations tab and generate a new API key with read/write permissions.

2. Find your Site ID from your Webflow dashboard under Site Settings

   In your Webflow Dashboard, select your site and go to Site Settings → General. You'll find your Site ID in the info panel.

3. Optional: Find your Collection ID if you want to upload directly to a specific collection

   Open your Webflow Designer, navigate to the Collections panel, and select the collection you want to upload to. The Collection ID is in the URL: webflow.com/design/[site-name]?collection=[collection-id]

4. Enter these details in the MCP Configuration Panel above and click "Connect"

Setting Up Zapier MCP

1. Create a Zapier account if you don't already have one
2. Create a Webhook Zap with "Webhooks by Zapier" as the trigger

   Select "Catch Hook" as the trigger event and set up the webhook. Zapier will provide you with a unique webhook URL.

3. Configure your destination app and actions

   Choose your destination app (WordPress, Shopify, Contentful, etc.) and select the appropriate action (e.g., "Upload Media" or "Create Asset"). Map the incoming data from the webhook to the fields required by your action.

4. Enter your Webhook URL in the MCP configuration panel above and click "Connect"

Setting Up Custom MCP

If you're running your own MCP server, enter the server URL in the configuration panel. Your server should handle POST requests with image files and respond with a JSON object containing the uploaded image URL.

Custom MCP Server Requirements:

• Must accept POST requests with Content-Type: multipart/form-data
• Should expect a file field named "file" containing the image data
• May receive a "metadata" field containing a JSON string with image information
• Should return a JSON response with at minimum a "success" boolean field
• Should include a URL to the uploaded image (as "url", "imageUrl", "assetUrl", or "fileUrl")

{
  "success": true,
  "url": "https://your-cms.com/assets/compressed-image-12345.webp",
  "id": "asset_12345",
  "metadata": {
    "width": 1200,
    "height": 800,
    "format": "webp",
    "size": 62145
  }
}

Troubleshooting MCP Connections

Security Best Practices

When using MCP to connect to your content systems, follow these security recommendations:

• Create dedicated API keys for Webpifier rather than using your master keys
• Use read-scoped API keys when possible to limit access permissions
• Regularly rotate credentials to enhance security
• Don't configure MCP on public or shared computers
• Clear your browser's local storage after using Webpifier on shared devices