Image & Media Stack for Continue
Configuration
mcpServers:
- name: 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
- name: figma-mcp
command: npx
args:
- -y
- figma-mcp
env:
FIGMA_ACCESS_TOKEN: YOUR_FIGMA_ACCESS_TOKEN
- name: magic-mcp
command: npx
args:
- -y
- @21st-dev/magic
env:
TWENTY_FIRST_API_KEY: YOUR_TWENTY_FIRST_API_KEY
- name: filesystem-mcp
command: npx
args:
- -y
- @modelcontextprotocol/server-filesystem
- /path/to/allowed/directory
- name: browserbase-mcp
command: npx
args:
- -y
- @browserbasehq/mcp-server-browserbase
env:
BROWSERBASE_API_KEY: YOUR_BROWSERBASE_API_KEY
BROWSERBASE_PROJECT_ID: YOUR_BROWSERBASE_PROJECT_IDWhere to save
Paste the config above into:
~/.continue/config.yamlEnvironment Variables
Replace the YOUR_ placeholders with your actual values.
CLOUDINARY_CLOUD_NAMErequiredCloudinary cloud name
Used by: Cloudinary MCP
CLOUDINARY_API_KEYrequiredCloudinary API key
Used by: Cloudinary MCP
CLOUDINARY_API_SECRETrequiredCloudinary API secret
Used by: Cloudinary MCP
FIGMA_ACCESS_TOKENrequiredFigma personal access token
Used by: Figma MCP
TWENTY_FIRST_API_KEYrequired21st.dev API key
Used by: Magic MCP (21st.dev)
BROWSERBASE_API_KEYrequiredBrowserBase API key for authentication
Used by: BrowserBase MCP
BROWSERBASE_PROJECT_IDrequiredBrowserBase project identifier
Used by: BrowserBase MCP
What’s in this stack
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.
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.
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.
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.
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.