StackMCP

Image & Media Stack for Claude Code

Intermediate5 servers25.2K tokens

Configuration

{
  "mcpServers": {
    "cloudinary-mcp": {
      "command": "npx",
      "args": [
        "-y",
        "@cloudinary/asset-management-mcp"
      ],
      "env": {
        "CLOUDINARY_CLOUD_NAME": "YOUR_CLOUDINARY_CLOUD_NAME",
        "CLOUDINARY_API_KEY": "YOUR_CLOUDINARY_API_KEY",
        "CLOUDINARY_API_SECRET": "YOUR_CLOUDINARY_API_SECRET"
      }
    },
    "figma-mcp": {
      "command": "npx",
      "args": [
        "-y",
        "figma-mcp"
      ],
      "env": {
        "FIGMA_ACCESS_TOKEN": "YOUR_FIGMA_ACCESS_TOKEN"
      }
    },
    "magic-mcp": {
      "command": "npx",
      "args": [
        "-y",
        "@21st-dev/magic"
      ],
      "env": {
        "TWENTY_FIRST_API_KEY": "YOUR_TWENTY_FIRST_API_KEY"
      }
    },
    "filesystem-mcp": {
      "command": "npx",
      "args": [
        "-y",
        "@modelcontextprotocol/server-filesystem",
        "/path/to/allowed/directory"
      ]
    },
    "browserbase-mcp": {
      "command": "npx",
      "args": [
        "-y",
        "@browserbasehq/mcp-server-browserbase"
      ],
      "env": {
        "BROWSERBASE_API_KEY": "YOUR_BROWSERBASE_API_KEY",
        "BROWSERBASE_PROJECT_ID": "YOUR_BROWSERBASE_PROJECT_ID"
      }
    }
  }
}

CLI Commands

Alternatively, add each server via the Claude Code CLI:

claude mcp add cloudinary-mcp -e CLOUDINARY_CLOUD_NAME=YOUR_CLOUDINARY_CLOUD_NAME -e CLOUDINARY_API_KEY=YOUR_CLOUDINARY_API_KEY -e CLOUDINARY_API_SECRET=YOUR_CLOUDINARY_API_SECRET -- npx -y @cloudinary/asset-management-mcp
claude mcp add figma-mcp -e FIGMA_ACCESS_TOKEN=YOUR_FIGMA_ACCESS_TOKEN -- npx -y figma-mcp
claude mcp add magic-mcp -e TWENTY_FIRST_API_KEY=YOUR_TWENTY_FIRST_API_KEY -- npx -y @21st-dev/magic
claude mcp add filesystem-mcp -- npx -y @modelcontextprotocol/server-filesystem /path/to/allowed/directory
claude mcp add browserbase-mcp -e BROWSERBASE_API_KEY=YOUR_BROWSERBASE_API_KEY -e BROWSERBASE_PROJECT_ID=YOUR_BROWSERBASE_PROJECT_ID -- npx -y @browserbasehq/mcp-server-browserbase

Where to save

Paste the config above into:

~/.claude.json

Environment Variables

Replace the YOUR_ placeholders with your actual values.

CLOUDINARY_CLOUD_NAMErequired

Cloudinary cloud name

Used by: Cloudinary MCP

CLOUDINARY_API_KEYrequired

Cloudinary API key

Used by: Cloudinary MCP

CLOUDINARY_API_SECRETrequired

Cloudinary API secret

Used by: Cloudinary MCP

FIGMA_ACCESS_TOKENrequired

Figma personal access token

Used by: Figma MCP

TWENTY_FIRST_API_KEYrequired

21st.dev API key

Used by: Magic MCP (21st.dev)

BROWSERBASE_API_KEYrequired

BrowserBase API key for authentication

Used by: BrowserBase MCP

BROWSERBASE_PROJECT_IDrequired

BrowserBase project identifier

Used by: BrowserBase MCP

What’s in this stack

Cloudinary MCP14 tools

Upload, transform, search, and manage images and videos on Cloudinary with asset management, folder operations, and usage metrics.

Upload, transform, and deliver images and videos with automatic optimization, format conversion, and responsive breakpoints.

Figma MCP8 tools

Access Figma designs, extract design tokens, inspect layers, and bridge the gap between design and code from your AI editor.

Extract design tokens, export assets, and inspect layouts directly from Figma files to bridge the gap between design and development.

Magic MCP (21st.dev)4 tools

Generate professional React and Tailwind UI components using 21st.dev's component library and AI builder from your editor.

Generate and edit images with AI — create thumbnails, banners, and visual content programmatically from text descriptions.

Filesystem MCP11 tools

Read, write, search, and manage files on your local filesystem with secure directory-scoped access for your AI editor.

Read, write, and organize media files locally for batch processing, format conversion, and asset pipeline management.

BrowserBase MCP12 tools

Automate cloud browsers with BrowserBase and Stagehand to navigate pages, extract content, take screenshots, and interact with web elements.

Capture screenshots, render web pages to images, and automate visual content extraction from any website at scale.

Other editors

CursorVS CodeWindsurfClaude DesktopContinue