{"id":38186,"date":"2025-08-14T07:00:00","date_gmt":"2025-08-14T14:00:00","guid":{"rendered":"https:\/\/cloudinary.com\/blog\/?p=38186"},"modified":"2025-08-14T10:19:05","modified_gmt":"2025-08-14T17:19:05","slug":"visual-media-search-ui-windsurf-cascade-cloudinarys-mcp-server","status":"publish","type":"post","link":"https:\/\/cloudinary.com\/blog\/visual-media-search-ui-windsurf-cascade-cloudinarys-mcp-server","title":{"rendered":"Visual Media Search UI With Windsurf Cascade and Cloudinary\u2019s MCP Server"},"content":{"rendered":"<div class=\"wp-block-cloudinary-markdown \"><p>Modern development is becoming a conversation. Instead of just writing code, we can now instruct powerful AI agents to perform complex tasks for us. This new paradigm, however, requires a standardized way for our tools to communicate.<\/p>\n<p>AI-native code editors like Windsurf are at the forefront of this shift, integrating AI agents like <strong>Windsurf\u2019s Cascade<\/strong> directly into the development environment. For these agents to interact with external services, they need a secure and standard protocol. This is where the <a href=\"https:\/\/modelcontextprotocol.io\/docs\/getting-started\/intro\"><strong>Model Context Protocol (MCP)<\/strong><\/a> comes in. As detailed in the <a href=\"https:\/\/docs.windsurf.com\/windsurf\/cascade\/mcp\">official Windsurf documentation<\/a>, MCP allows agents to securely access external tools. Cloudinary provides a powerful suite of these tools, known as <a href=\"https:\/\/cloudinary.com\/documentation\/cloudinary_llm_mcp\"><strong>Cloudinary MCP servers<\/strong><\/a>, which expose features like asset management and AI analysis directly to your editor\u2019s AI assistant.<\/p>\n<h2>A Smarter Workflow for Documentation<\/h2>\n<p>This new capability allows us to solve a common developer pain point: the slow, manual process of leaving the editor to find, transform, and embed media assets while writing documentation. In this tutorial, we will demonstrate a \u201cSmart Documentation Assistant\u201d workflow. We\u2019ll show you how to use a single, natural-language prompt in Windsurf to automate the entire process: finding a local image, uploading it to Cloudinary, applying transformations, and replacing a placeholder in our Markdown file with the final, optimized URL \u2014 all in one seamless operation.<\/p>\n<h3>Step 1: Configuring Your AI\u2019s Toolkit<\/h3>\n<p>Before our AI assistant can perform any tasks, we need to give it the right tools. This is done by configuring <strong>Cloudinary\u2019s MCP servers<\/strong> within Windsurf. These servers act as a bridge, allowing the AI to securely access and command Cloudinary\u2019s powerful features.<\/p>\n<h4>The Full Suite of Cloudinary MCP Servers<\/h4>\n<p>Cloudinary provides a comprehensive set of MCP servers to cover the entire visual media lifecycle. While it\u2019s a good practice to install all of them for general use, it\u2019s important to understand what each one does.<\/p>\n<ul>\n<li>\n<p><strong>Asset Management.<\/strong> Upload, manage, search, and organize all your visual media assets.<\/p>\n<\/li>\n<li>\n<p><strong>Environment Config.<\/strong> Manage upload presets, named transformations, and webhooks.<\/p>\n<\/li>\n<li>\n<p><strong>Structured Metadata.<\/strong> Define and manage custom metadata fields for your assets.<\/p>\n<\/li>\n<li>\n<p><strong>Analysis.<\/strong> Leverage AI for auto-tagging, moderation, and visual analysis.<\/p>\n<\/li>\n<li>\n<p><strong>Cloudinary\u2019s MediaFlows.<\/strong> Create and manage complex media automation workflows.<\/p>\n<\/li>\n<\/ul>\n<p>For our specific \u201cSmart Documentation Assistant\u201d workflow, we only need to enable two of these: <strong>Asset Management<\/strong> to handle the file upload and replacement, and <strong>Analysis<\/strong> to perform the AI-powered visual search.<\/p>\n<h4>Installation and Configuration<\/h4>\n<p>Make sure you have <strong>Node.js<\/strong> (v18 or later) and <strong>npm<\/strong> installed on your system before proceeding.<\/p>\n<ol>\n<li>\n<p>Find and open your Windsurf MCP configuration file (e.g., <code>~\/.cursor\/mcp.json<\/code>).<\/p>\n<\/li>\n<li>\n<p>Add the following JSON block to the <code>mcpServers<\/code> object. This includes the configurations for the two servers we need.<\/p>\n<\/li>\n<\/ol>\n<pre class=\"js-syntax-highlighted\" aria-describedby=\"shcb-language-1\" data-shcb-language-name=\"JSON \/ JSON with Comments\" data-shcb-language-slug=\"json\"><span><code class=\"hljs language-json shcb-wrap-lines\">{\n  <span class=\"hljs-attr\">\"mcpServers\"<\/span>: {\n    <span class=\"hljs-attr\">\"cloudinary-asset-mgmt\"<\/span>: {\n      <span class=\"hljs-attr\">\"command\"<\/span>: <span class=\"hljs-string\">\"npx\"<\/span>,\n      <span class=\"hljs-attr\">\"args\"<\/span>: &#91;\n        <span class=\"hljs-string\">\"-y\"<\/span>,\n        <span class=\"hljs-string\">\"--package\"<\/span>,\n        <span class=\"hljs-string\">\"@cloudinary\/asset-management\"<\/span>,\n        <span class=\"hljs-string\">\"--\"<\/span>,\n        <span class=\"hljs-string\">\"mcp\"<\/span>,\n        <span class=\"hljs-string\">\"start\"<\/span>\n      ],\n      <span class=\"hljs-attr\">\"env\"<\/span>: {\n        <span class=\"hljs-attr\">\"CLOUDINARY_CLOUD_NAME\"<\/span>: <span class=\"hljs-string\">\"your_cloud_name\"<\/span>,\n        <span class=\"hljs-attr\">\"CLOUDINARY_API_KEY\"<\/span>: <span class=\"hljs-string\">\"your_api_key\"<\/span>,\n        <span class=\"hljs-attr\">\"CLOUDINARY_API_SECRET\"<\/span>: <span class=\"hljs-string\">\"your_api_secret\"<\/span>\n      }\n    },\n    <span class=\"hljs-attr\">\"cloudinary-analysis\"<\/span>: {\n      <span class=\"hljs-attr\">\"command\"<\/span>: <span class=\"hljs-string\">\"npx\"<\/span>,\n      <span class=\"hljs-attr\">\"args\"<\/span>: &#91;<span class=\"hljs-string\">\"-y\"<\/span>, <span class=\"hljs-string\">\"--package\"<\/span>, <span class=\"hljs-string\">\"@cloudinary\/analysis\"<\/span>, <span class=\"hljs-string\">\"--\"<\/span>, <span class=\"hljs-string\">\"mcp\"<\/span>, <span class=\"hljs-string\">\"start\"<\/span>],\n      <span class=\"hljs-attr\">\"env\"<\/span>: {\n        <span class=\"hljs-attr\">\"CLOUDINARY_CLOUD_NAME\"<\/span>: <span class=\"hljs-string\">\"your_cloud_name\"<\/span>,\n        <span class=\"hljs-attr\">\"CLOUDINARY_API_KEY\"<\/span>: <span class=\"hljs-string\">\"your_api_key\"<\/span>,\n        <span class=\"hljs-attr\">\"CLOUDINARY_API_SECRET\"<\/span>: <span class=\"hljs-string\">\"your_api_secret\"<\/span>\n      }\n    }\n  }\n}\n\n<\/code><\/span><small class=\"shcb-language\" id=\"shcb-language-1\"><span class=\"shcb-language__label\">Code language:<\/span> <span class=\"shcb-language__name\">JSON \/ JSON with Comments<\/span> <span class=\"shcb-language__paren\">(<\/span><span class=\"shcb-language__slug\">json<\/span><span class=\"shcb-language__paren\">)<\/span><\/small><\/pre>\n<ol start=\"3\">\n<li>\n<strong>Crucially<\/strong>, replace the placeholder values (<code>your_cloud_name<\/code>, <code>your_api_key<\/code>, <code>your_api_secret<\/code>) with your actual credentials from your <a href=\"https:\/\/www.google.com\/search?q=https:\/\/cloudinary.com\/console\/settings\/api_keys\">Cloudinary Dashboard<\/a>.<\/li>\n<\/ol>\n<p>After saving the configuration file and refreshing or restarting Windsurf, you should see the new servers enabled in your editor\u2019s MCP management panel. It will provide a list of all the powerful tools now available to your AI assistant, as shown below.<\/p>\n<p><img decoding=\"async\" src=\"https:\/\/res.cloudinary.com\/hackit-africa\/image\/upload\/v1753469641\/windsurf\/docs.png\" alt=\"\" loading=\"lazy\" class=\"c-transformed-asset\"  width=\"1917\" height=\"1080\"\/><\/p>\n<h3>Step 2: The Scenario: Writing Documentation in Windsurf<\/h3>\n<p>With our tools configured, let\u2019s set the stage for our workflow. To follow along, you can clone the repository for this project, which contains the sample <code>docs.md<\/code> and <code>hydra.png<\/code> files we\u2019ll be working with.<\/p>\n<pre class=\"js-syntax-highlighted\" aria-describedby=\"shcb-language-2\" data-shcb-language-name=\"PHP\" data-shcb-language-slug=\"php\"><span><code class=\"hljs language-php shcb-wrap-lines\">git  <span class=\"hljs-keyword\">clone<\/span>  https:<span class=\"hljs-comment\">\/\/github.com\/musebe\/cloudinary--windsurf-visual-search-demo<\/span>\n<\/code><\/span><small class=\"shcb-language\" id=\"shcb-language-2\"><span class=\"shcb-language__label\">Code language:<\/span> <span class=\"shcb-language__name\">PHP<\/span> <span class=\"shcb-language__paren\">(<\/span><span class=\"shcb-language__slug\">php<\/span><span class=\"shcb-language__paren\">)<\/span><\/small><\/pre>\n<p>Imagine you are a developer with this project open in your Windsurf editor. Your task is to update the project\u2019s documentation.<\/p>\n<p>You have a <code>docs.md<\/code> file open. The file contains a mix of text, code blocks, and an image placeholder for a crucial architectural diagram. Currently, the placeholder points to a local image file on your machine, <code>hydra.png<\/code>.<\/p>\n<h4>Example from <code>docs.md<\/code>:<\/h4>\n<pre class=\"js-syntax-highlighted\" aria-describedby=\"shcb-language-3\" data-shcb-language-name=\"PHP\" data-shcb-language-slug=\"php\"><span><code class=\"hljs language-php shcb-wrap-lines\"><span class=\"hljs-comment\"># Project Hydra: System Architecture<\/span>\n...\n<span class=\"hljs-comment\">### Architectural Diagram<\/span>\n!&#91;Architectural Diagram showing data flow](.\/hydra.png)\n...\n<\/code><\/span><small class=\"shcb-language\" id=\"shcb-language-3\"><span class=\"shcb-language__label\">Code language:<\/span> <span class=\"shcb-language__name\">PHP<\/span> <span class=\"shcb-language__paren\">(<\/span><span class=\"shcb-language__slug\">php<\/span><span class=\"shcb-language__paren\">)<\/span><\/small><\/pre>\n<p>The goal is to replace this local, temporary image with a permanent, optimized version hosted on Cloudinary. The traditional process would involve several manual steps, but our goal is to achieve this with a single, conversational command to our AI assistant. We want to tell it to:<\/p>\n<ol>\n<li>\n<p><strong>Upload<\/strong> the local <code>hydra.png<\/code> file.<\/p>\n<\/li>\n<li>\n<p><strong>Organize<\/strong> it by placing it in a specific folder named <code>project-hydra-diagrams<\/code>.<\/p>\n<\/li>\n<li>\n<p><strong>Optimize<\/strong> it by applying a transformation to resize it to a width of 800 pixels.<\/p>\n<\/li>\n<li>\n<p><strong>Update<\/strong> the <code>docs.md<\/code> file by replacing the local path with the new, transformed Cloudinary URL.<\/p>\n<\/li>\n<\/ol>\n<h3>Step 3: The Prompt: From Intent to Action<\/h3>\n<p>Now we get to the core of this workflow. Instead of performing a series of small, manual tasks, we can encapsulate our entire intent into a single, powerful, natural-language prompt. This is where the AI agent in Windsurf truly shines, acting as a junior developer that can understand and execute a complex sequence of commands.<\/p>\n<p>We will give our AI assistant the following prompt. This command clearly outlines every step we want it to perform, from finding the local file to modifying our source code.<\/p>\n<pre class=\"js-syntax-highlighted\"><code>Upload the local image `hydra.png` to a new folder named `project-hydra-diagrams` in my Cloudinary account.\n\nAfter it's uploaded, generate a URL for the image with the following transformations:\n- Resized to a width of 800 pixels\n\nFinally, open the `docs.md` file and replace the local image path `.\/hydra.png` with the new transformed image URL.\n\n<\/code><\/pre>\n<p>This prompt is effective because it\u2019s structured like a set of instructions you would give to a human colleague. It defines the <strong>source<\/strong> (<code>hydra.png<\/code>), the <strong>destination<\/strong> (<code>project-hydra-diagrams<\/code> folder), the desired <strong>transformations<\/strong> (<code>width of 800 pixels<\/code>), and the final <strong>action<\/strong> (replace the path in <code>docs.md<\/code>). The AI agent can now parse this intent and create a plan to execute it using the tools we provided.<\/p>\n<h3>Step 4: The Outcome: Watching the AI Work<\/h3>\n<p>After you provide the prompt to Windsurf, the AI agent gets to work. This is where you can see the true power of the MCP integration. The agent doesn\u2019t just give you a final answer; it shows its entire thought process, breaking down your complex request into a logical, transparent plan.<\/p>\n<p>Let\u2019s analyze the AI\u2019s response, which mirrors the process shown in the screenshots.<\/p>\n<h4>Planning<\/h4>\n<p>First, the AI confirms its understanding of your request and creates a step-by-step plan. It will typically outline the exact actions it intends to take, such as:<\/p>\n<ol>\n<li>\n<p>Add a note about the user\u2019s request to upload <code>hydra.png<\/code>.<\/p>\n<\/li>\n<li>\n<p>Set the current goal to uploading the image to Cloudinary.<\/p>\n<\/li>\n<li>\n<p>Proceed to update the plan now.<\/p>\n<\/li>\n<\/ol>\n<p>This planning phase is crucial because it allows you to verify that the AI has correctly interpreted your intent before it makes any changes.<\/p>\n<h4>Execution<\/h4>\n<p>Next, the AI executes the first part of its plan. It uses the tools available from the <code>@cloudinary\/asset-management<\/code> MCP server to perform the upload. You\u2019ll see it call the <code>upload-asset<\/code> tool, providing the necessary arguments like the local file path and the destination folder. Once the upload is complete, it will display the successful API response from Cloudinary, including details like the new <code>public_id<\/code> and the asset\u2019s dimensions.<\/p>\n<h4>Generation and Proposed Edit<\/h4>\n<p>With the image successfully uploaded, the AI moves to the next steps of its plan. It generates the new, transformed Cloudinary URL according to your specifications (e.g., with a width of 800 pixels).<\/p>\n<p>Finally, it presents a <strong>Proposed Edit<\/strong>. This is one of the most powerful features of the workflow. The AI shows you a \u201cdiff\u201d view, a clear, color-coded comparison of the original line in your <code>docs.md<\/code> file and the new line it wants to insert. This gives you complete control and confidence in the changes being made to your code.<\/p>\n<h3>Step 5: Applying the Changes and Final Result<\/h3>\n<p>After the AI has successfully executed its plan and presented the proposed changes, the workflow is complete. The developer has been guided through a complex, multi-step process without ever leaving their editor or writing a single line of API code.<\/p>\n<p>The final, simple step is to accept the AI\u2019s work. With a single click on the \u201cApply\u201d button, the AI\u2019s proposed change is committed, and the <code>docs.md<\/code> file is instantly updated with the correct, optimized, and transformed image URL from Cloudinary. The local placeholder is gone, replaced by a production-ready asset link.<\/p>\n<p>The final result is a seamless, conversational workflow that feels less like programming and more like collaborating with a skilled assistant.<\/p>\n<p><strong>The final result should look like this:<\/strong><\/p>\n<iframe loading=\"lazy\" src=\"https:\/\/player.cloudinary.com\/embed\/?cloud_name=hackit-africa&#038;public_id=windsurf%2Fdemo&#038;profile=cld-default\" width=\"640\" height=\"360\" style=\"height: auto; width: 100%; aspect-ratio: 640 \/ 360;\" allow=\"autoplay; fullscreen; encrypted-media; picture-in-picture\" allowfullscreen frameborder=\"0\" ><\/iframe>\n<h2>Conclusion: The Future is Conversational<\/h2>\n<p>We\u2019ve successfully automated a complex, multi-step developer workflow using only natural language. What once required leaving the editor, navigating a web UI, and manually updating code can now be accomplished with a single, conversational prompt.<\/p>\n<p>This is the future of AI-assisted development. By composing powerful, specialized tools like Cloudinary\u2019s MCP servers and integrating them into AI-native editors like Windsurf, we\u2019re changing the developer experience. The workflow is no longer a series of manual tasks and context switches, but a seamless conversation between the developer and their AI assistant. This not only boosts productivity but also allows developers to stay focused on what they do best: solving problems and building great software.<\/p>\n<p><a href=\"https:\/\/cloudinary.com\/users\/register_free\">Contact us today<\/a> to learn more.<\/p>\n<\/div>","protected":false},"excerpt":{"rendered":"","protected":false},"author":87,"featured_media":38187,"comment_status":"closed","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"_cloudinary_featured_overwrite":false,"footnotes":""},"categories":[1],"tags":[336],"class_list":["post-38186","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-uncategorized","tag-ai"],"acf":[],"yoast_head":"<!-- This site is optimized with the Yoast SEO Premium plugin v25.6 (Yoast SEO v26.9) - https:\/\/yoast.com\/product\/yoast-seo-premium-wordpress\/ -->\n<title>AI-Powered Media Workflows: Windsurf, Cascade, and Cloudinary&#039;s MCP Servers<\/title>\n<meta name=\"description\" content=\"Learn how to automate complex visual media tasks using natural language prompts. Integrate Cloudinary&#039;s MCP servers with the Windsurf editor to upload, transform, and embed images, all with a single command.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/cloudinary.com\/blog\/visual-media-search-ui-windsurf-cascade-cloudinarys-mcp-server\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Visual Media Search UI With Windsurf Cascade and Cloudinary\u2019s MCP Server\" \/>\n<meta property=\"og:description\" content=\"Learn how to automate complex visual media tasks using natural language prompts. Integrate Cloudinary&#039;s MCP servers with the Windsurf editor to upload, transform, and embed images, all with a single command.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/cloudinary.com\/blog\/visual-media-search-ui-windsurf-cascade-cloudinarys-mcp-server\" \/>\n<meta property=\"og:site_name\" content=\"Cloudinary Blog\" \/>\n<meta property=\"article:published_time\" content=\"2025-08-14T14:00:00+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2025-08-14T17:19:05+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1754677110\/Blog_Visual_Media_Search_UI_with_Windsurf_Cloudinary_MCP_Server\/Blog_Visual_Media_Search_UI_with_Windsurf_Cloudinary_MCP_Server.jpg?_i=AA\" \/>\n\t<meta property=\"og:image:width\" content=\"2000\" \/>\n\t<meta property=\"og:image:height\" content=\"1100\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/jpeg\" \/>\n<meta name=\"author\" content=\"melindapham\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"NewsArticle\",\"@id\":\"https:\/\/cloudinary.com\/blog\/visual-media-search-ui-windsurf-cascade-cloudinarys-mcp-server#article\",\"isPartOf\":{\"@id\":\"https:\/\/cloudinary.com\/blog\/visual-media-search-ui-windsurf-cascade-cloudinarys-mcp-server\"},\"author\":{\"name\":\"melindapham\",\"@id\":\"https:\/\/cloudinary.com\/blog\/#\/schema\/person\/0d5ad601e4c3b5be89245dfb14be42d9\"},\"headline\":\"Visual Media Search UI With Windsurf Cascade and Cloudinary\u2019s MCP Server\",\"datePublished\":\"2025-08-14T14:00:00+00:00\",\"dateModified\":\"2025-08-14T17:19:05+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/cloudinary.com\/blog\/visual-media-search-ui-windsurf-cascade-cloudinarys-mcp-server\"},\"wordCount\":12,\"publisher\":{\"@id\":\"https:\/\/cloudinary.com\/blog\/#organization\"},\"image\":{\"@id\":\"https:\/\/cloudinary.com\/blog\/visual-media-search-ui-windsurf-cascade-cloudinarys-mcp-server#primaryimage\"},\"thumbnailUrl\":\"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1754677110\/Blog_Visual_Media_Search_UI_with_Windsurf_Cloudinary_MCP_Server\/Blog_Visual_Media_Search_UI_with_Windsurf_Cloudinary_MCP_Server.jpg?_i=AA\",\"keywords\":[\"AI\"],\"inLanguage\":\"en-US\",\"copyrightYear\":\"2025\",\"copyrightHolder\":{\"@id\":\"https:\/\/cloudinary.com\/#organization\"}},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/cloudinary.com\/blog\/visual-media-search-ui-windsurf-cascade-cloudinarys-mcp-server\",\"url\":\"https:\/\/cloudinary.com\/blog\/visual-media-search-ui-windsurf-cascade-cloudinarys-mcp-server\",\"name\":\"AI-Powered Media Workflows: Windsurf, Cascade, and Cloudinary's MCP Servers\",\"isPartOf\":{\"@id\":\"https:\/\/cloudinary.com\/blog\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/cloudinary.com\/blog\/visual-media-search-ui-windsurf-cascade-cloudinarys-mcp-server#primaryimage\"},\"image\":{\"@id\":\"https:\/\/cloudinary.com\/blog\/visual-media-search-ui-windsurf-cascade-cloudinarys-mcp-server#primaryimage\"},\"thumbnailUrl\":\"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1754677110\/Blog_Visual_Media_Search_UI_with_Windsurf_Cloudinary_MCP_Server\/Blog_Visual_Media_Search_UI_with_Windsurf_Cloudinary_MCP_Server.jpg?_i=AA\",\"datePublished\":\"2025-08-14T14:00:00+00:00\",\"dateModified\":\"2025-08-14T17:19:05+00:00\",\"description\":\"Learn how to automate complex visual media tasks using natural language prompts. Integrate Cloudinary's MCP servers with the Windsurf editor to upload, transform, and embed images, all with a single command.\",\"breadcrumb\":{\"@id\":\"https:\/\/cloudinary.com\/blog\/visual-media-search-ui-windsurf-cascade-cloudinarys-mcp-server#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/cloudinary.com\/blog\/visual-media-search-ui-windsurf-cascade-cloudinarys-mcp-server\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/cloudinary.com\/blog\/visual-media-search-ui-windsurf-cascade-cloudinarys-mcp-server#primaryimage\",\"url\":\"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1754677110\/Blog_Visual_Media_Search_UI_with_Windsurf_Cloudinary_MCP_Server\/Blog_Visual_Media_Search_UI_with_Windsurf_Cloudinary_MCP_Server.jpg?_i=AA\",\"contentUrl\":\"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1754677110\/Blog_Visual_Media_Search_UI_with_Windsurf_Cloudinary_MCP_Server\/Blog_Visual_Media_Search_UI_with_Windsurf_Cloudinary_MCP_Server.jpg?_i=AA\",\"width\":2000,\"height\":1100},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/cloudinary.com\/blog\/visual-media-search-ui-windsurf-cascade-cloudinarys-mcp-server#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/cloudinary.com\/blog\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Visual Media Search UI With Windsurf Cascade and Cloudinary\u2019s MCP Server\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/cloudinary.com\/blog\/#website\",\"url\":\"https:\/\/cloudinary.com\/blog\/\",\"name\":\"Cloudinary Blog\",\"description\":\"\",\"publisher\":{\"@id\":\"https:\/\/cloudinary.com\/blog\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/cloudinary.com\/blog\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Organization\",\"@id\":\"https:\/\/cloudinary.com\/blog\/#organization\",\"name\":\"Cloudinary Blog\",\"url\":\"https:\/\/cloudinary.com\/blog\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/cloudinary.com\/blog\/#\/schema\/logo\/image\/\",\"url\":\"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1649718331\/Web_Assets\/blog\/cloudinary_logo_for_white_bg_1937437aa7_19374666c7_193742f877\/cloudinary_logo_for_white_bg_1937437aa7_19374666c7_193742f877.png?_i=AA\",\"contentUrl\":\"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1649718331\/Web_Assets\/blog\/cloudinary_logo_for_white_bg_1937437aa7_19374666c7_193742f877\/cloudinary_logo_for_white_bg_1937437aa7_19374666c7_193742f877.png?_i=AA\",\"width\":312,\"height\":60,\"caption\":\"Cloudinary Blog\"},\"image\":{\"@id\":\"https:\/\/cloudinary.com\/blog\/#\/schema\/logo\/image\/\"}},{\"@type\":\"Person\",\"@id\":\"https:\/\/cloudinary.com\/blog\/#\/schema\/person\/0d5ad601e4c3b5be89245dfb14be42d9\",\"name\":\"melindapham\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/cloudinary.com\/blog\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/e6f989fa97fe94be61596259d8629c3df65aec4c7da5c0000f90d810f313d4f4?s=96&d=mm&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/e6f989fa97fe94be61596259d8629c3df65aec4c7da5c0000f90d810f313d4f4?s=96&d=mm&r=g\",\"caption\":\"melindapham\"}}]}<\/script>\n<!-- \/ Yoast SEO Premium plugin. -->","yoast_head_json":{"title":"AI-Powered Media Workflows: Windsurf, Cascade, and Cloudinary's MCP Servers","description":"Learn how to automate complex visual media tasks using natural language prompts. Integrate Cloudinary's MCP servers with the Windsurf editor to upload, transform, and embed images, all with a single command.","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/cloudinary.com\/blog\/visual-media-search-ui-windsurf-cascade-cloudinarys-mcp-server","og_locale":"en_US","og_type":"article","og_title":"Visual Media Search UI With Windsurf Cascade and Cloudinary\u2019s MCP Server","og_description":"Learn how to automate complex visual media tasks using natural language prompts. Integrate Cloudinary's MCP servers with the Windsurf editor to upload, transform, and embed images, all with a single command.","og_url":"https:\/\/cloudinary.com\/blog\/visual-media-search-ui-windsurf-cascade-cloudinarys-mcp-server","og_site_name":"Cloudinary Blog","article_published_time":"2025-08-14T14:00:00+00:00","article_modified_time":"2025-08-14T17:19:05+00:00","og_image":[{"width":2000,"height":1100,"url":"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1754677110\/Blog_Visual_Media_Search_UI_with_Windsurf_Cloudinary_MCP_Server\/Blog_Visual_Media_Search_UI_with_Windsurf_Cloudinary_MCP_Server.jpg?_i=AA","type":"image\/jpeg"}],"author":"melindapham","twitter_card":"summary_large_image","schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"NewsArticle","@id":"https:\/\/cloudinary.com\/blog\/visual-media-search-ui-windsurf-cascade-cloudinarys-mcp-server#article","isPartOf":{"@id":"https:\/\/cloudinary.com\/blog\/visual-media-search-ui-windsurf-cascade-cloudinarys-mcp-server"},"author":{"name":"melindapham","@id":"https:\/\/cloudinary.com\/blog\/#\/schema\/person\/0d5ad601e4c3b5be89245dfb14be42d9"},"headline":"Visual Media Search UI With Windsurf Cascade and Cloudinary\u2019s MCP Server","datePublished":"2025-08-14T14:00:00+00:00","dateModified":"2025-08-14T17:19:05+00:00","mainEntityOfPage":{"@id":"https:\/\/cloudinary.com\/blog\/visual-media-search-ui-windsurf-cascade-cloudinarys-mcp-server"},"wordCount":12,"publisher":{"@id":"https:\/\/cloudinary.com\/blog\/#organization"},"image":{"@id":"https:\/\/cloudinary.com\/blog\/visual-media-search-ui-windsurf-cascade-cloudinarys-mcp-server#primaryimage"},"thumbnailUrl":"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1754677110\/Blog_Visual_Media_Search_UI_with_Windsurf_Cloudinary_MCP_Server\/Blog_Visual_Media_Search_UI_with_Windsurf_Cloudinary_MCP_Server.jpg?_i=AA","keywords":["AI"],"inLanguage":"en-US","copyrightYear":"2025","copyrightHolder":{"@id":"https:\/\/cloudinary.com\/#organization"}},{"@type":"WebPage","@id":"https:\/\/cloudinary.com\/blog\/visual-media-search-ui-windsurf-cascade-cloudinarys-mcp-server","url":"https:\/\/cloudinary.com\/blog\/visual-media-search-ui-windsurf-cascade-cloudinarys-mcp-server","name":"AI-Powered Media Workflows: Windsurf, Cascade, and Cloudinary's MCP Servers","isPartOf":{"@id":"https:\/\/cloudinary.com\/blog\/#website"},"primaryImageOfPage":{"@id":"https:\/\/cloudinary.com\/blog\/visual-media-search-ui-windsurf-cascade-cloudinarys-mcp-server#primaryimage"},"image":{"@id":"https:\/\/cloudinary.com\/blog\/visual-media-search-ui-windsurf-cascade-cloudinarys-mcp-server#primaryimage"},"thumbnailUrl":"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1754677110\/Blog_Visual_Media_Search_UI_with_Windsurf_Cloudinary_MCP_Server\/Blog_Visual_Media_Search_UI_with_Windsurf_Cloudinary_MCP_Server.jpg?_i=AA","datePublished":"2025-08-14T14:00:00+00:00","dateModified":"2025-08-14T17:19:05+00:00","description":"Learn how to automate complex visual media tasks using natural language prompts. Integrate Cloudinary's MCP servers with the Windsurf editor to upload, transform, and embed images, all with a single command.","breadcrumb":{"@id":"https:\/\/cloudinary.com\/blog\/visual-media-search-ui-windsurf-cascade-cloudinarys-mcp-server#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/cloudinary.com\/blog\/visual-media-search-ui-windsurf-cascade-cloudinarys-mcp-server"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/cloudinary.com\/blog\/visual-media-search-ui-windsurf-cascade-cloudinarys-mcp-server#primaryimage","url":"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1754677110\/Blog_Visual_Media_Search_UI_with_Windsurf_Cloudinary_MCP_Server\/Blog_Visual_Media_Search_UI_with_Windsurf_Cloudinary_MCP_Server.jpg?_i=AA","contentUrl":"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1754677110\/Blog_Visual_Media_Search_UI_with_Windsurf_Cloudinary_MCP_Server\/Blog_Visual_Media_Search_UI_with_Windsurf_Cloudinary_MCP_Server.jpg?_i=AA","width":2000,"height":1100},{"@type":"BreadcrumbList","@id":"https:\/\/cloudinary.com\/blog\/visual-media-search-ui-windsurf-cascade-cloudinarys-mcp-server#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/cloudinary.com\/blog\/"},{"@type":"ListItem","position":2,"name":"Visual Media Search UI With Windsurf Cascade and Cloudinary\u2019s MCP Server"}]},{"@type":"WebSite","@id":"https:\/\/cloudinary.com\/blog\/#website","url":"https:\/\/cloudinary.com\/blog\/","name":"Cloudinary Blog","description":"","publisher":{"@id":"https:\/\/cloudinary.com\/blog\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/cloudinary.com\/blog\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/cloudinary.com\/blog\/#organization","name":"Cloudinary Blog","url":"https:\/\/cloudinary.com\/blog\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/cloudinary.com\/blog\/#\/schema\/logo\/image\/","url":"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1649718331\/Web_Assets\/blog\/cloudinary_logo_for_white_bg_1937437aa7_19374666c7_193742f877\/cloudinary_logo_for_white_bg_1937437aa7_19374666c7_193742f877.png?_i=AA","contentUrl":"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1649718331\/Web_Assets\/blog\/cloudinary_logo_for_white_bg_1937437aa7_19374666c7_193742f877\/cloudinary_logo_for_white_bg_1937437aa7_19374666c7_193742f877.png?_i=AA","width":312,"height":60,"caption":"Cloudinary Blog"},"image":{"@id":"https:\/\/cloudinary.com\/blog\/#\/schema\/logo\/image\/"}},{"@type":"Person","@id":"https:\/\/cloudinary.com\/blog\/#\/schema\/person\/0d5ad601e4c3b5be89245dfb14be42d9","name":"melindapham","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/cloudinary.com\/blog\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/e6f989fa97fe94be61596259d8629c3df65aec4c7da5c0000f90d810f313d4f4?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/e6f989fa97fe94be61596259d8629c3df65aec4c7da5c0000f90d810f313d4f4?s=96&d=mm&r=g","caption":"melindapham"}}]}},"jetpack_featured_media_url":"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1754677110\/Blog_Visual_Media_Search_UI_with_Windsurf_Cloudinary_MCP_Server\/Blog_Visual_Media_Search_UI_with_Windsurf_Cloudinary_MCP_Server.jpg?_i=AA","_links":{"self":[{"href":"https:\/\/cloudinary.com\/blog\/wp-json\/wp\/v2\/posts\/38186","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/cloudinary.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/cloudinary.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/cloudinary.com\/blog\/wp-json\/wp\/v2\/users\/87"}],"replies":[{"embeddable":true,"href":"https:\/\/cloudinary.com\/blog\/wp-json\/wp\/v2\/comments?post=38186"}],"version-history":[{"count":3,"href":"https:\/\/cloudinary.com\/blog\/wp-json\/wp\/v2\/posts\/38186\/revisions"}],"predecessor-version":[{"id":38190,"href":"https:\/\/cloudinary.com\/blog\/wp-json\/wp\/v2\/posts\/38186\/revisions\/38190"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/cloudinary.com\/blog\/wp-json\/wp\/v2\/media\/38187"}],"wp:attachment":[{"href":"https:\/\/cloudinary.com\/blog\/wp-json\/wp\/v2\/media?parent=38186"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/cloudinary.com\/blog\/wp-json\/wp\/v2\/categories?post=38186"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/cloudinary.com\/blog\/wp-json\/wp\/v2\/tags?post=38186"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}