VS Code extension (video tutorial)

Overview

The Cloudinary VS Code extension brings media asset management directly into your integrated development environment. Browse, search, upload, and reference your Cloudinary assets without ever leaving your coding workflow.

This tutorial walks you through installation, configuration, and key features of the extension, showing you how to streamline your media management within VS Code.

Video tutorial

Tutorial contents

This tutorial presents the following topics. Click a timestamp to jump to that part of the video.

Introduction

0:00	The extension brings your Media Library, upload tools, Cloudinary documentation, and AI integrations into VS Code based IDEs, including Cursor, Windsurf, and Antigravity.

Connecting your Cloudinary account

0:22	The welcome guide opens the first time you use the extension. Get API Keys opens the API Keys page in the Cloudinary Console, and Open Config File opens environments.json, where you replace the cloud name and the two placeholder credential values. Keep the JSON structure and save, and the extension validates the credentials and shows the connected cloud in the status bar.

Home dashboard

1:03	Open Dashboard takes you to the home screen, which gathers the extension's main tools: library search, uploads, Docs AI, and the integrations that set up AI coding assistants.

Browsing, searching, and copying asset URLs

1:18	Browse Library lists the folders and assets in your product environment. Narrow the list by asset type, change the order from newest to oldest, or search by part of the public ID. An asset's right-click menu copies its public ID, secure delivery URL, or an optimized URL with automatic format and quality.

Previewing an asset

1:45	Select an asset to open a preview. Alongside the larger image or video view you can check dimensions and file size, review tags and metadata, and choose between the original and optimized delivery URLs. Each value has its own copy button.

Uploading assets

2:07	Upload assets to Cloudinary without leaving the editor. The upload panel takes a destination folder and, when needed, an upload preset, with advanced options for a custom public ID and tags. Browse for local files or hold Shift while dragging them into VS Code, and the panel tracks each upload. Switch to the Remote URL tab to upload directly from an address.

Asking Docs AI

2:39	Ask questions about Cloudinary products, APIs, and SDKs, such as how to upload an asset or build an image transformation. Type your question in the Ask Cloudinary AI field and Docs AI answers from the Cloudinary documentation, linking to the relevant pages. You can ask follow-up questions, start a new chat, or reopen earlier conversations from the history menu.

Configuring AI tools and MCP servers

3:06	Configure AI Tools adds Cloudinary skills and MCP server configuration to supported AI coding assistants, either for a single project or globally.

Switching environments

3:16	If you work with multiple product environments, switch between them with the Switch Environment button on the home screen, or by clicking your cloud name at the bottom right of the status bar.

Keep learning

If you like this, you might also like...

 

 

Check out the Cloudinary Academy for free self-paced Cloudinary courses on a variety of developer or DAM topics, or register for formal instructor-led courses, either virtual or on-site.