{"id":37885,"date":"2025-07-09T07:00:00","date_gmt":"2025-07-09T14:00:00","guid":{"rendered":"https:\/\/cloudinary.com\/blog\/?p=37885"},"modified":"2025-07-10T08:29:54","modified_gmt":"2025-07-10T15:29:54","slug":"visual-media-uploads-vs-code-cloudinary-mcp-server","status":"publish","type":"post","link":"https:\/\/cloudinary.com\/blog\/visual-media-uploads-vs-code-cloudinary-mcp-server","title":{"rendered":"Effortless Visual Media Uploads in VS Code With the Cloudinary MCP Server"},"content":{"rendered":"<div class=\"wp-block-cloudinary-markdown \"><p>If you\u2019ve ever uploaded an image for a blog post or static site, you know the drill. Open Cloudinary, drag a file, copy a URL, jump back to your editor, and paste it into your markdown. Doing this manually can break focus fast.<\/p>\n<p>What if, instead, you could stay in <a href=\"https:\/\/code.visualstudio.com\"><strong>VS Code<\/strong><\/a>, type a prompt in <a href=\"https:\/\/marketplace.visualstudio.com\/items?itemName=GitHub.copilot-chat\"><strong>GitHub Copilot Chat<\/strong><\/a>, and have your image uploaded, optimized, and inserted into your post automatically?<\/p>\n<p>This tutorial shows you how to set up <a href=\"https:\/\/cloudinary.com\/documentation\/cloudinary_llm_mcp\"><strong>Cloudinary\u2019s MCP Server<\/strong><\/a> inside VS Code and use it with <strong>GitHub Copilot<\/strong> to:<\/p>\n<ul>\n<li>Upload images from your local project.<\/li>\n<li>Generate transformed formats (WebP, AVIF, JPG).<\/li>\n<li>Insert clean, documented URLs into your markdown.<\/li>\n<\/ul>\n<h2>Use Case: Content-First Developer Workflow<\/h2>\n<p>Let\u2019s say you\u2019re building a markdown-driven blog and want to include optimized images without leaving your IDE. With this setup, you\u2019ll:<\/p>\n<ul>\n<li>Add an image to your project\u2019s <code>\/public\/images<\/code> folder.<\/li>\n<li>Tell Copilot what to do in plain English.<\/li>\n<li>Watch it upload the file to Cloudinary.<\/li>\n<li>Get back multiple image formats with a markdown-ready media report.<\/li>\n<\/ul>\n<p>This flow is perfect for:<\/p>\n<ul>\n<li>Technical writers working in MDX or Markdown.<\/li>\n<li>Static site developers (Next.js, Astro, Hugo).<\/li>\n<li>Teams managing documentation and changelogs.<\/li>\n<\/ul>\n<p>By the end of this tutorial, you\u2019ll have a production-ready system for managing and delivering images fully automated, fully in-editor. Cloudinary provides the media infrastructure, while Copilot provides the intelligence and MCP the context.<\/p>\n<p>Let\u2019s get started!<\/p>\n<h2>Project Setup: A Simple Markdown Blog<\/h2>\n<p>In this section, you\u2019ll scaffold a minimal project folder directly in VS Code, with a markdown file and a directory for image uploads.<\/p>\n<h3>Step 1: Create the Project Directory<\/h3>\n<p>In the VS Code terminal:<\/p>\n<pre class=\"js-syntax-highlighted\"><span><code class=\"hljs shcb-wrap-lines\">mkdir cloudinary-mcp-blog &amp;&amp; cd cloudinary-mcp-blog\n<\/code><\/span><\/pre>\n<h3>Step 2: Add a <code>public\/images<\/code> Folder<\/h3>\n<p>Still in the terminal:<\/p>\n<pre class=\"js-syntax-highlighted\" aria-describedby=\"shcb-language-1\" data-shcb-language-name=\"PHP\" data-shcb-language-slug=\"php\"><span><code class=\"hljs language-php shcb-wrap-lines\">mkdir -p <span class=\"hljs-keyword\">public<\/span>\/images\n<\/code><\/span><small class=\"shcb-language\" id=\"shcb-language-1\"><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<h3>Step 3: Create a markdown blog post<\/h3>\n<p>In the terminal:<\/p>\n<pre class=\"js-syntax-highlighted\" aria-describedby=\"shcb-language-2\" data-shcb-language-name=\"CSS\" data-shcb-language-slug=\"css\"><span><code class=\"hljs language-css shcb-wrap-lines\"><span class=\"hljs-selector-tag\">touch<\/span> <span class=\"hljs-selector-tag\">blog-post<\/span><span class=\"hljs-selector-class\">.md<\/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\">CSS<\/span> <span class=\"shcb-language__paren\">(<\/span><span class=\"shcb-language__slug\">css<\/span><span class=\"shcb-language__paren\">)<\/span><\/small><\/pre>\n<p>Then open <code>blog-post.md<\/code> in the VS Code editor and paste in:<\/p>\n<pre class=\"js-syntax-highlighted\"><code># Welcome to My Blog\n\nThis is a sample post with an image.\n\n![Banner](UPLOAD_IMAGE_URL_HERE)\n<\/code><\/pre>\n<h3>Step 4: Add an Image to the Images Folder<\/h3>\n<p>Drag an image (example: <code>banner.png<\/code>) into the <code>public\/images<\/code> folder using the VS Code file explorer.<\/p>\n<h2>Installing and Configuring the Cloudinary MCP Server<\/h2>\n<p>In this section, we\u2019ll configure the Cloudinary Asset Management MCP server using the Copilot Chat integration in VS Code. This will allow us to run Cloudinary media commands directly from the terminal without leaving the editor.<\/p>\n<h3>Step 1: Open the MCP Server Configuration<\/h3>\n<p>Open the Command Palette:<\/p>\n<pre class=\"js-syntax-highlighted\"><span><code class=\"hljs shcb-wrap-lines\">Cmd + Shift + P (Mac)\n\nCtrl + Shift + P (Windows\/Linux)\n<\/code><\/span><\/pre>\n<p>Type:<\/p>\n<pre class=\"js-syntax-highlighted\" aria-describedby=\"shcb-language-3\" data-shcb-language-name=\"HTTP\" data-shcb-language-slug=\"http\"><span><code class=\"hljs language-http shcb-wrap-lines\"><span class=\"hljs-attribute\">Copilot<\/span>: Open MCP Server Configuration\n<\/code><\/span><small class=\"shcb-language\" id=\"shcb-language-3\"><span class=\"shcb-language__label\">Code language:<\/span> <span class=\"shcb-language__name\">HTTP<\/span> <span class=\"shcb-language__paren\">(<\/span><span class=\"shcb-language__slug\">http<\/span><span class=\"shcb-language__paren\">)<\/span><\/small><\/pre>\n<p>Select it to start the guided server setup.<\/p>\n<p><img decoding=\"async\" src=\"https:\/\/res.cloudinary.com\/hackit-africa\/image\/upload\/v1750968012\/Tutorials\/select.png\" alt=\"\" loading=\"lazy\" class=\"c-transformed-asset\"  width=\"659\" height=\"233\"\/><\/p>\n<h3>Step 2: Choose \u201cCommand (stdio)\u201d<\/h3>\n<p>When prompted, choose:<\/p>\n<pre class=\"js-syntax-highlighted\"><span><code class=\"hljs shcb-wrap-lines\">Command (stdio)\n<\/code><\/span><\/pre>\n<p>This option tells VS Code to run the MCP server locally via the command line.<\/p>\n<p><img decoding=\"async\" src=\"https:\/\/res.cloudinary.com\/hackit-africa\/image\/upload\/v1750967855\/Tutorials\/choose_mcp.png\" alt=\"\" loading=\"lazy\" class=\"c-transformed-asset\"  width=\"646\" height=\"173\"\/><\/p>\n<h3>Step 3: Enter a Server ID<\/h3>\n<p>When prompted to enter the server ID, type:<\/p>\n<pre class=\"js-syntax-highlighted\"><code>cloudinary-asset-mgmt\n<\/code><\/pre>\n<p>This label acts as both the display name and internal identifier for the MCP server.<\/p>\n<p><img decoding=\"async\" src=\"https:\/\/res.cloudinary.com\/hackit-africa\/image\/upload\/v1750968320\/Tutorials\/name_id.png\" alt=\"\" loading=\"lazy\" class=\"c-transformed-asset\"  width=\"616\" height=\"100\"\/><\/p>\n<h3>Step 4: Provide the Command<\/h3>\n<p>When prompted, paste:<\/p>\n<pre class=\"js-syntax-highlighted\"><code>npx --yes --package @cloudinary\/asset-management -- cloudinary mcp\n<\/code><\/pre>\n<p>This tells VS Code to run the Cloudinary MCP CLI using <code>npx<\/code>.<\/p>\n<p><img decoding=\"async\" src=\"https:\/\/res.cloudinary.com\/hackit-africa\/image\/upload\/v1750968320\/Tutorials\/command.png\" alt=\"\" loading=\"lazy\" class=\"c-transformed-asset\"  width=\"627\" height=\"99\"\/><\/p>\n<h3>Step 5: Save to User Settings<\/h3>\n<p>When asked where to save the configuration, choose:<\/p>\n<pre class=\"js-syntax-highlighted\"><code>User Settings\n<\/code><\/pre>\n<p>This stores the server configuration globally in your VS Code <code>settings.json<\/code>.<\/p>\n<p><img decoding=\"async\" src=\"https:\/\/res.cloudinary.com\/hackit-africa\/image\/upload\/v1750968321\/Tutorials\/save.png\" alt=\"\" loading=\"lazy\" class=\"c-transformed-asset\"  width=\"627\" height=\"127\"\/><\/p>\n<h3>Final Configuration<\/h3>\n<p>After saving the MCP server to <strong>User Settings<\/strong>, open your global settings file to add your Cloudinary credentials:<\/p>\n<ol>\n<li>\n<p>Open the Command Palette<\/p>\n<\/li>\n<li>\n<p>Run:<\/p>\n<\/li>\n<\/ol>\n<pre class=\"js-syntax-highlighted\" aria-describedby=\"shcb-language-4\" data-shcb-language-name=\"JavaScript\" data-shcb-language-slug=\"javascript\"><span><code class=\"hljs language-javascript shcb-wrap-lines\">Preferences: Open Settings (<span class=\"hljs-built_in\">JSON<\/span>)\n<\/code><\/span><small class=\"shcb-language\" id=\"shcb-language-4\"><span class=\"shcb-language__label\">Code language:<\/span> <span class=\"shcb-language__name\">JavaScript<\/span> <span class=\"shcb-language__paren\">(<\/span><span class=\"shcb-language__slug\">javascript<\/span><span class=\"shcb-language__paren\">)<\/span><\/small><\/pre>\n<p>Locate the <code>cloudinary-asset-mgmt<\/code> server block and update it as follows:<\/p>\n<pre class=\"js-syntax-highlighted\" aria-describedby=\"shcb-language-5\" data-shcb-language-name=\"JavaScript\" data-shcb-language-slug=\"javascript\"><span><code class=\"hljs language-javascript shcb-wrap-lines\"><span class=\"hljs-string\">\"mcp.servers\"<\/span>: {\n  <span class=\"hljs-string\">\"cloudinary-asset-mgmt\"<\/span>: {\n    <span class=\"hljs-string\">\"type\"<\/span>: <span class=\"hljs-string\">\"stdio\"<\/span>,\n    <span class=\"hljs-string\">\"command\"<\/span>: <span class=\"hljs-string\">\"npx\"<\/span>,\n    <span class=\"hljs-string\">\"args\"<\/span>: &#91;\n      <span class=\"hljs-string\">\"--yes\"<\/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\">\"cloudinary\"<\/span>,\n      <span class=\"hljs-string\">\"mcp\"<\/span>\n    ],\n    <span class=\"hljs-string\">\"env\"<\/span>: {\n      <span class=\"hljs-string\">\"CLOUDINARY_CLOUD_NAME\"<\/span>: <span class=\"hljs-string\">\"your-cloud-name\"<\/span>,\n      <span class=\"hljs-string\">\"CLOUDINARY_API_KEY\"<\/span>: <span class=\"hljs-string\">\"your-api-key\"<\/span>,\n      <span class=\"hljs-string\">\"CLOUDINARY_API_SECRET\"<\/span>: <span class=\"hljs-string\">\"your-api-secret\"<\/span>\n    }\n  }\n}\n<\/code><\/span><small class=\"shcb-language\" id=\"shcb-language-5\"><span class=\"shcb-language__label\">Code language:<\/span> <span class=\"shcb-language__name\">JavaScript<\/span> <span class=\"shcb-language__paren\">(<\/span><span class=\"shcb-language__slug\">javascript<\/span><span class=\"shcb-language__paren\">)<\/span><\/small><\/pre>\n<p>Replace the placeholders with your actual values from the <a href=\"https:\/\/cloudinary.com\/console\">Cloudinary Console<\/a> under <strong>Settings &gt; API Keys<\/strong>.<\/p>\n<p>Once saved, this MCP server will be globally available inside VS Code and ready to use with Copilot Chat or the terminal.<\/p>\n<h2>Using GitHub Copilot to Upload Images and Update Markdown<\/h2>\n<p>Now that the Cloudinary MCP server is set up, we\u2019ll use <strong>GitHub Copilot Chat<\/strong> inside VS Code to automate media uploads and inject the returned image URLs directly into your markdown file.<\/p>\n<h3>Step 1: Open Copilot Chat<\/h3>\n<ol>\n<li>Click the <strong>Copilot icon<\/strong> in the top-right corner of VS Code.<\/li>\n<li>Select <strong>Open Chat<\/strong> from the dropdown.<\/li>\n<li>The Copilot Chat panel will appear at the bottom of your editor.<\/li>\n<\/ol>\n<p><img decoding=\"async\" src=\"https:\/\/res.cloudinary.com\/hackit-africa\/image\/upload\/v1750978138\/Tutorials\/Screenshot_2025-06-27_at_00.25.04.png\" alt=\"\" loading=\"lazy\" class=\"c-transformed-asset\"  width=\"982\" height=\"176\"\/><\/p>\n<h3>Step 2: Attach the Markdown File as Context<\/h3>\n<p>Click the <strong>Add Context<\/strong> button in the chat panel and select:<\/p>\n<pre class=\"js-syntax-highlighted\"><code>blog-post.md\n<\/code><\/pre>\n<p>This allows Copilot to read and modify that file.<\/p>\n<h3>Step 3: Prompt Copilot to Upload and Replace<\/h3>\n<p>In the Copilot Chat input box, type the following:<\/p>\n<pre class=\"js-syntax-highlighted\"><code>Upload public\/images\/banner.png to the mcp_server_test folder in Cloudinary and replace the placeholder image link in blog-post.md with the returned public URL.\n<\/code><\/pre>\n<p>Copilot will:<\/p>\n<ul>\n<li>Use the configured Cloudinary MCP server.<\/li>\n<li>Upload <code>banner.png<\/code> to the <code>mcp_server_test<\/code> folder.<\/li>\n<li>Receive a Cloudinary public URL.<\/li>\n<li>Open <code>blog-post.md<\/code> and replace this placeholder:<\/li>\n<\/ul>\n<pre class=\"js-syntax-highlighted\"><code>![Banner](UPLOAD_IMAGE_URL_HERE)\n<\/code><\/pre>\n<p>With the actual public Cloudinary link:<\/p>\n<pre class=\"js-syntax-highlighted\"><code>![Banner](https:\/\/res.cloudinary.com\/your-cloud-name\/image\/upload\/vXXXXXX\/mcp_server_test\/banner.png)\n<\/code><\/pre>\n<h3>Step 4: What You Should See<\/h3>\n<p>If everything is configured correctly, the following will happen inside VS Code:<\/p>\n<ul>\n<li>The Copilot chat panel will display the executed <code>cloudinary mcp upload<\/code> command.<\/li>\n<li>You\u2019ll see the Cloudinary CLI output showing the public URL.<\/li>\n<li>Copilot will insert the URL into <code>blog-post.md<\/code> automatically.<\/li>\n<li>Your Cloudinary Media Library will show the uploaded image under <code>mcp_server_test\/banner.png<\/code>.<\/li>\n<\/ul>\n<h3>Demo<\/h3>\n<p>Here\u2019s what this entire process looks like in action inside VS Code:<\/p>\n<p><img decoding=\"async\" src=\"https:\/\/res.cloudinary.com\/hackit-africa\/image\/upload\/v1750978220\/Tutorials\/mcp.gif\" alt=\"\" loading=\"lazy\" class=\"c-transformed-asset\"  width=\"800\" height=\"450\"\/><\/p>\n<h2>Chaining Transformations With One Copilot Command<\/h2>\n<p>Instead of uploading and editing manually, you can instruct GitHub Copilot to handle <strong>uploading, transforming, and documenting<\/strong> your image in one step.<\/p>\n<h3>Command<\/h3>\n<p>In Copilot Chat, with <code>blog-post.md<\/code> added as context, type:<\/p>\n<pre class=\"js-syntax-highlighted\"><code>Upload public\/images\/banner.png to the mcp_server_test folder in Cloudinary, generate optimized delivery URLs for WebP, JPG, and AVIF, and append a markdown media report table to the end of blog-post.md.\n<\/code><\/pre>\n<h3>Result<\/h3>\n<p>Copilot will upload the image; apply <code>f_webp<\/code>, <code>f_jpg<\/code>, and <code>f_avif<\/code> transformations; and then insert a media optimization report like this:<\/p>\n<p>This gives you fast, optimized, format-aware media delivery, and clean markdown documentation from a single Copilot instruction.<\/p>\n<h2>Cloudinary, Copilot, and the Future of Contextual Dev Workflows<\/h2>\n<p>The Cloudinary MCP server is a programmable bridge between your local development environment and Cloudinary\u2019s intelligent visual media platform. By integrating directly with VS Code, it gives developers the ability to manage, optimize, and deliver media without leaving the editor.<\/p>\n<p>Paired with GitHub Copilot, the possibilities multiply. You\u2019re not just using AI to write code \u2014 you\u2019re giving it real-world context. With the Cloudinary MCP server installed and configured, Copilot can:<\/p>\n<ul>\n<li>Understand your file system.<\/li>\n<li>Access specific media assets.<\/li>\n<li>Trigger uploads, transformations, and analysis.<\/li>\n<li>Modify project files based on real-time output.<\/li>\n<\/ul>\n<p>This is the power of <strong>MCP servers<\/strong> in VS Code: They let AI agents (like Copilot) operate as if they\u2019re part of your toolchain, not just passengers.<\/p>\n<p>Build image-rich blogs, media dashboards, or developer documentation; this setup enables you to work smarter and ship faster with Cloudinary handling delivery and Copilot handling intent.<\/p>\n<blockquote>\n<p>The future of AI development is building tools that understand your project, interact with your services, and act on your behalf safely and efficiently.<\/p>\n<\/blockquote>\n<p>Cloudinary\u2019s MCP server is one of the first real steps in that direction. <a href=\"https:\/\/cloudinary.com\/contact\">Contact us today<\/a> to learn more.<\/p>\n<\/div>","protected":false},"excerpt":{"rendered":"","protected":false},"author":87,"featured_media":37906,"comment_status":"closed","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"_cloudinary_featured_overwrite":false,"footnotes":""},"categories":[1],"tags":[336,370],"class_list":["post-37885","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-uncategorized","tag-ai","tag-image"],"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>Effortless Visual Media Uploads in VS Code With the Cloudinary MCP Server<\/title>\n<meta name=\"description\" content=\"Automate image uploads, transformations (WebP, AVIF), and markdown directly in VS Code using Cloudinary&#039;s MCP Server and GitHub Copilot Chat for a streamlined content workflow.\" \/>\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-uploads-vs-code-cloudinary-mcp-server\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Effortless Visual Media Uploads in VS Code With the Cloudinary MCP Server\" \/>\n<meta property=\"og:description\" content=\"Automate image uploads, transformations (WebP, AVIF), and markdown directly in VS Code using Cloudinary&#039;s MCP Server and GitHub Copilot Chat for a streamlined content workflow.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/cloudinary.com\/blog\/visual-media-uploads-vs-code-cloudinary-mcp-server\" \/>\n<meta property=\"og:site_name\" content=\"Cloudinary Blog\" \/>\n<meta property=\"article:published_time\" content=\"2025-07-09T14:00:00+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2025-07-10T15:29:54+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/v1752085254\/Cloudinary_MCP_VS_Code-blog\/Cloudinary_MCP_VS_Code-blog-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-uploads-vs-code-cloudinary-mcp-server#article\",\"isPartOf\":{\"@id\":\"https:\/\/cloudinary.com\/blog\/visual-media-uploads-vs-code-cloudinary-mcp-server\"},\"author\":{\"name\":\"melindapham\",\"@id\":\"https:\/\/cloudinary.com\/blog\/#\/schema\/person\/0d5ad601e4c3b5be89245dfb14be42d9\"},\"headline\":\"Effortless Visual Media Uploads in VS Code With the Cloudinary MCP Server\",\"datePublished\":\"2025-07-09T14:00:00+00:00\",\"dateModified\":\"2025-07-10T15:29:54+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/cloudinary.com\/blog\/visual-media-uploads-vs-code-cloudinary-mcp-server\"},\"wordCount\":12,\"publisher\":{\"@id\":\"https:\/\/cloudinary.com\/blog\/#organization\"},\"image\":{\"@id\":\"https:\/\/cloudinary.com\/blog\/visual-media-uploads-vs-code-cloudinary-mcp-server#primaryimage\"},\"thumbnailUrl\":\"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1752085254\/Cloudinary_MCP_VS_Code-blog\/Cloudinary_MCP_VS_Code-blog.jpg?_i=AA\",\"keywords\":[\"AI\",\"Image\"],\"inLanguage\":\"en-US\",\"copyrightYear\":\"2025\",\"copyrightHolder\":{\"@id\":\"https:\/\/cloudinary.com\/#organization\"}},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/cloudinary.com\/blog\/visual-media-uploads-vs-code-cloudinary-mcp-server\",\"url\":\"https:\/\/cloudinary.com\/blog\/visual-media-uploads-vs-code-cloudinary-mcp-server\",\"name\":\"Effortless Visual Media Uploads in VS Code With the Cloudinary MCP Server\",\"isPartOf\":{\"@id\":\"https:\/\/cloudinary.com\/blog\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/cloudinary.com\/blog\/visual-media-uploads-vs-code-cloudinary-mcp-server#primaryimage\"},\"image\":{\"@id\":\"https:\/\/cloudinary.com\/blog\/visual-media-uploads-vs-code-cloudinary-mcp-server#primaryimage\"},\"thumbnailUrl\":\"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1752085254\/Cloudinary_MCP_VS_Code-blog\/Cloudinary_MCP_VS_Code-blog.jpg?_i=AA\",\"datePublished\":\"2025-07-09T14:00:00+00:00\",\"dateModified\":\"2025-07-10T15:29:54+00:00\",\"description\":\"Automate image uploads, transformations (WebP, AVIF), and markdown directly in VS Code using Cloudinary's MCP Server and GitHub Copilot Chat for a streamlined content workflow.\",\"breadcrumb\":{\"@id\":\"https:\/\/cloudinary.com\/blog\/visual-media-uploads-vs-code-cloudinary-mcp-server#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/cloudinary.com\/blog\/visual-media-uploads-vs-code-cloudinary-mcp-server\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/cloudinary.com\/blog\/visual-media-uploads-vs-code-cloudinary-mcp-server#primaryimage\",\"url\":\"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1752085254\/Cloudinary_MCP_VS_Code-blog\/Cloudinary_MCP_VS_Code-blog.jpg?_i=AA\",\"contentUrl\":\"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1752085254\/Cloudinary_MCP_VS_Code-blog\/Cloudinary_MCP_VS_Code-blog.jpg?_i=AA\",\"width\":2000,\"height\":1100},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/cloudinary.com\/blog\/visual-media-uploads-vs-code-cloudinary-mcp-server#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/cloudinary.com\/blog\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Effortless Visual Media Uploads in VS Code With the Cloudinary 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":"Effortless Visual Media Uploads in VS Code With the Cloudinary MCP Server","description":"Automate image uploads, transformations (WebP, AVIF), and markdown directly in VS Code using Cloudinary's MCP Server and GitHub Copilot Chat for a streamlined content workflow.","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-uploads-vs-code-cloudinary-mcp-server","og_locale":"en_US","og_type":"article","og_title":"Effortless Visual Media Uploads in VS Code With the Cloudinary MCP Server","og_description":"Automate image uploads, transformations (WebP, AVIF), and markdown directly in VS Code using Cloudinary's MCP Server and GitHub Copilot Chat for a streamlined content workflow.","og_url":"https:\/\/cloudinary.com\/blog\/visual-media-uploads-vs-code-cloudinary-mcp-server","og_site_name":"Cloudinary Blog","article_published_time":"2025-07-09T14:00:00+00:00","article_modified_time":"2025-07-10T15:29:54+00:00","og_image":[{"width":2000,"height":1100,"url":"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/v1752085254\/Cloudinary_MCP_VS_Code-blog\/Cloudinary_MCP_VS_Code-blog-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-uploads-vs-code-cloudinary-mcp-server#article","isPartOf":{"@id":"https:\/\/cloudinary.com\/blog\/visual-media-uploads-vs-code-cloudinary-mcp-server"},"author":{"name":"melindapham","@id":"https:\/\/cloudinary.com\/blog\/#\/schema\/person\/0d5ad601e4c3b5be89245dfb14be42d9"},"headline":"Effortless Visual Media Uploads in VS Code With the Cloudinary MCP Server","datePublished":"2025-07-09T14:00:00+00:00","dateModified":"2025-07-10T15:29:54+00:00","mainEntityOfPage":{"@id":"https:\/\/cloudinary.com\/blog\/visual-media-uploads-vs-code-cloudinary-mcp-server"},"wordCount":12,"publisher":{"@id":"https:\/\/cloudinary.com\/blog\/#organization"},"image":{"@id":"https:\/\/cloudinary.com\/blog\/visual-media-uploads-vs-code-cloudinary-mcp-server#primaryimage"},"thumbnailUrl":"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1752085254\/Cloudinary_MCP_VS_Code-blog\/Cloudinary_MCP_VS_Code-blog.jpg?_i=AA","keywords":["AI","Image"],"inLanguage":"en-US","copyrightYear":"2025","copyrightHolder":{"@id":"https:\/\/cloudinary.com\/#organization"}},{"@type":"WebPage","@id":"https:\/\/cloudinary.com\/blog\/visual-media-uploads-vs-code-cloudinary-mcp-server","url":"https:\/\/cloudinary.com\/blog\/visual-media-uploads-vs-code-cloudinary-mcp-server","name":"Effortless Visual Media Uploads in VS Code With the Cloudinary MCP Server","isPartOf":{"@id":"https:\/\/cloudinary.com\/blog\/#website"},"primaryImageOfPage":{"@id":"https:\/\/cloudinary.com\/blog\/visual-media-uploads-vs-code-cloudinary-mcp-server#primaryimage"},"image":{"@id":"https:\/\/cloudinary.com\/blog\/visual-media-uploads-vs-code-cloudinary-mcp-server#primaryimage"},"thumbnailUrl":"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1752085254\/Cloudinary_MCP_VS_Code-blog\/Cloudinary_MCP_VS_Code-blog.jpg?_i=AA","datePublished":"2025-07-09T14:00:00+00:00","dateModified":"2025-07-10T15:29:54+00:00","description":"Automate image uploads, transformations (WebP, AVIF), and markdown directly in VS Code using Cloudinary's MCP Server and GitHub Copilot Chat for a streamlined content workflow.","breadcrumb":{"@id":"https:\/\/cloudinary.com\/blog\/visual-media-uploads-vs-code-cloudinary-mcp-server#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/cloudinary.com\/blog\/visual-media-uploads-vs-code-cloudinary-mcp-server"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/cloudinary.com\/blog\/visual-media-uploads-vs-code-cloudinary-mcp-server#primaryimage","url":"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1752085254\/Cloudinary_MCP_VS_Code-blog\/Cloudinary_MCP_VS_Code-blog.jpg?_i=AA","contentUrl":"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1752085254\/Cloudinary_MCP_VS_Code-blog\/Cloudinary_MCP_VS_Code-blog.jpg?_i=AA","width":2000,"height":1100},{"@type":"BreadcrumbList","@id":"https:\/\/cloudinary.com\/blog\/visual-media-uploads-vs-code-cloudinary-mcp-server#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/cloudinary.com\/blog\/"},{"@type":"ListItem","position":2,"name":"Effortless Visual Media Uploads in VS Code With the Cloudinary 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\/v1752085254\/Cloudinary_MCP_VS_Code-blog\/Cloudinary_MCP_VS_Code-blog.jpg?_i=AA","_links":{"self":[{"href":"https:\/\/cloudinary.com\/blog\/wp-json\/wp\/v2\/posts\/37885","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=37885"}],"version-history":[{"count":2,"href":"https:\/\/cloudinary.com\/blog\/wp-json\/wp\/v2\/posts\/37885\/revisions"}],"predecessor-version":[{"id":37887,"href":"https:\/\/cloudinary.com\/blog\/wp-json\/wp\/v2\/posts\/37885\/revisions\/37887"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/cloudinary.com\/blog\/wp-json\/wp\/v2\/media\/37906"}],"wp:attachment":[{"href":"https:\/\/cloudinary.com\/blog\/wp-json\/wp\/v2\/media?parent=37885"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/cloudinary.com\/blog\/wp-json\/wp\/v2\/categories?post=37885"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/cloudinary.com\/blog\/wp-json\/wp\/v2\/tags?post=37885"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}