Image & Media Stack
Process, transform, and manage visual assets with cloud-based media pipelines, design integration, and AI-powered generation.
Token Budget
Moderate token usage. You will have good room for prompts but watch if adding more servers.
Config
Paste in ~/.claude.json
{
"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"
}
},
"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"
}
},
"filesystem-mcp": {
"command": "npx",
"args": [
"-y",
"@modelcontextprotocol/server-filesystem",
"/path/to/allowed/directory"
]
},
"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"
}
}
}
}Included Servers
Cloudinary MCP
Cloudinary
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 MCP
Community
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)
21st.dev
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 MCP
Anthropic
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 MCP
BrowserBase
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.
Recommended Skills
Skills that pair with the servers in this stack. Learn more
For Figma MCP
Official Figma skill to translate designs into production-ready code with pixel-perfect accuracy. Follows a 7-step structured workflow.
npx skillsadd figma/mcp-server-guide/implement-designStructured workflow for Figma-to-code with 1:1 visual fidelity. Uses Figma MCP for design context, screenshots, and assets.
npx skillsadd openai/skills/figma-implement-designFrontend development expertise for React, Next.js, TypeScript. Pairs with Figma MCP to turn designs into production components.