From be01f74beaa3e510aa4f7f52c03a0dab907e693e Mon Sep 17 00:00:00 2001 From: Rizel Scarlett Date: Sun, 6 Jul 2025 11:55:18 -0400 Subject: [PATCH 1/6] Docs: Cloudinary MCP tutorial --- .../mcp/cloudinary-asset-management-mcp.md | 328 ++++++++++++++++++ 1 file changed, 328 insertions(+) create mode 100644 documentation/docs/mcp/cloudinary-asset-management-mcp.md diff --git a/documentation/docs/mcp/cloudinary-asset-management-mcp.md b/documentation/docs/mcp/cloudinary-asset-management-mcp.md new file mode 100644 index 000000000000..8cce21e10725 --- /dev/null +++ b/documentation/docs/mcp/cloudinary-asset-management-mcp.md @@ -0,0 +1,328 @@ +--- +title: Cloudinary Asset Management Extension +description: Add Cloudinary Asset Management MCP Server as a Goose Extension for Media Processing +--- + +import Tabs from '@theme/Tabs'; +import TabItem from '@theme/TabItem'; + +This tutorial covers how to add the [Cloudinary Asset Management MCP Server](https://github.com/cloudinary-community/cloudinary-mcp) as a Goose extension for powerful media processing, transformation, and management capabilities. + +:::tip TLDR + + + + [Launch the installer](goose://extension?cmd=npx&arg=-y&arg=@cloudinary/mcp-server&id=cloudinary&name=Cloudinary%20Asset%20Management&description=Powerful%20media%20processing%20and%20transformation&env=CLOUDINARY_URL%3DCloudinary%20URL) + + + **Command** + ```sh + npx -y @cloudinary/mcp-server + ``` + + + **Environment Variable** + ``` + CLOUDINARY_URL: + ``` +::: + +## Configuration + +:::info +Note that you'll need [Node.js](https://nodejs.org/) installed on your system to run this command, as it uses `npx`. You'll also need a [Cloudinary account](https://cloudinary.com/users/register/free) - the free tier includes generous limits for experimentation. +::: + + + + 1. [Launch the installer](goose://extension?cmd=npx&arg=-y&arg=@cloudinary/mcp-server&id=cloudinary&name=Cloudinary%20Asset%20Management&description=Powerful%20media%20processing%20and%20transformation&env=CLOUDINARY_URL%3DCloudinary%20URL) + 2. Press `Yes` to confirm the installation + 3. Obtain your [CLOUDINARY_URL](https://console.cloudinary.com/settings/api-keys) from your Cloudinary dashboard and paste it in + 4. Click `Save Configuration` + 5. Scroll to the top and click `Exit` from the upper left corner + + + 1. Run the `configure` command: + ```sh + goose configure + ``` + + 2. Choose to add a `Command-line Extension` + ```sh + ┌ goose-configure + │ + ◇ What would you like to configure? + │ Add Extension (Connect to a new extension) + │ + ◆ What type of extension would you like to add? + │ ○ Built-in Extension + // highlight-start + │ ● Command-line Extension (Run a local command or script) + // highlight-end + │ ○ Remote Extension + └ + ``` + + 3. Give your extension a name + ```sh + ┌ goose-configure + │ + ◇ What would you like to configure? + │ Add Extension (Connect to a new extension) + │ + ◇ What type of extension would you like to add? + │ Command-line Extension + │ + // highlight-start + ◆ What would you like to call this extension? + │ cloudinary + // highlight-end + └ + ``` + + 4. Enter the command + ```sh + ┌ goose-configure + │ + ◇ What would you like to configure? + │ Add Extension (Connect to a new extension) + │ + ◇ What type of extension would you like to add? + │ Command-line Extension + │ + ◇ What would you like to call this extension? + │ cloudinary + │ + // highlight-start + ◆ What command should be run? + │ npx -y @cloudinary/mcp-server + // highlight-end + └ + ``` + + 5. Enter the number of seconds Goose should wait for actions to complete before timing out. Default is 300s + ```sh + ┌ goose-configure + │ + ◇ What would you like to configure? + │ Add Extension (Connect to a new extension) + │ + ◇ What type of extension would you like to add? + │ Command-line Extension + │ + ◇ What would you like to call this extension? + │ cloudinary + │ + ◇ What command should be run? + │ npx -y @cloudinary/mcp-server + │ + // highlight-start + ◆ Please set the timeout for this tool (in secs): + │ 300 + // highlight-end + └ + ``` + + 6. Choose to add a description. If you select "Yes" here, you will be prompted to enter a description for the extension. + ```sh + ┌ goose-configure + │ + ◇ What would you like to configure? + │ Add Extension (Connect to a new extension) + │ + ◇ What type of extension would you like to add? + │ Command-line Extension + │ + ◇ What would you like to call this extension? + │ cloudinary + │ + ◇ What command should be run? + │ npx -y @cloudinary/mcp-server + │ + ◆ Please set the timeout for this tool (in secs): + │ 300 + │ + // highlight-start + ◇ Would you like to add a description? + │ No + // highlight-end + │ + └ + ``` + + 7. Obtain your [Cloudinary URL](https://console.cloudinary.com/settings/api-keys) from your dashboard and paste it in. + + ```sh + ┌ goose-configure + │ + ◇ What would you like to configure? + │ Add Extension (Connect to a new extension) + │ + ◇ What type of extension would you like to add? + │ Command-line Extension + │ + ◇ What would you like to call this extension? + │ cloudinary + │ + ◇ What command should be run? + │ npx -y @cloudinary/mcp-server + │ + ◇ Please set the timeout for this tool (in secs): + │ 300 + │ + ◇ Would you like to add a description? + │ No + │ + // highlight-start + ◆ Would you like to add environment variables? + │ Yes + │ + ◇ Environment variable name: + │ CLOUDINARY_URL + │ + ◇ Environment variable value: + │ cloudinary://api_key:api_secret@cloud_name + │ + ◇ Add another environment variable? + │ No + // highlight-end + └ Added cloudinary extension + ``` + + + + +## Example Usage + +Let's use the Cloudinary extension to find and transform product images with advanced visual effects. In this example, we'll demonstrate how Goose can help you: + +1. Search for specific images in your media library +2. Apply complex transformations including background removal +3. Add text overlays with precise positioning +4. Create professional product imagery + +:::info LLM +Anthropic's Claude 3.5 Sonnet was used for this task. +::: + + + + 1. Open a new session in Goose Desktop + + + + 1. Open a terminal and start a new Goose session: + + ```sh + goose session + ``` + + + + +### Goose Prompt +``` +1. find shoe images in my Cloudinary samples that have 'shoe' in the filename or public ID. +2. Let's transform the first result and only extract just the shoes +3. Add a white text overlay that says I love shoes. Make sure it's above the shoes +4. Add a background to the image. It should be black +``` + +### Goose Output +``` +I'll help you find shoe images in your Cloudinary samples and apply the transformations you've requested. Let me start by searching for images with 'shoe' in the filename or public ID. + +─── list-images | cloudinaryassetmanagement ────────────────────────── +maxResults: 50 +prefix: samples +type: upload + +Perfect! I found the shoe images in your Cloudinary samples. I can see: + +1. **`samples/shoe`** - A single shoe image (publicId: `samples/shoe`) +2. **`samples/ecommerce/shoes`** - A pair of shoes (publicId: `samples/ecommerce/shoes`) + +Let me use the first result (`samples/shoe`) as requested and apply all the transformations you want: + +1. Extract just the shoes (using background removal) +2. Add white text overlay "I love shoes" above the shoes +3. Add a black background + +Here's the transformed image URL with all your requested modifications: + +``` +https://res.cloudinary.com/dd8qwbjtv/image/upload/e_background_removal/b_black/l_text:Arial_60:I%20love%20shoes,co_white,g_north,y_50/samples/shoe +``` + +Let me break down what each transformation does: + +- `e_background_removal` - Removes the background and extracts just the shoe +- `b_black` - Adds a black background to replace the removed background +- `l_text:Arial_60:I%20love%20shoes,co_white,g_north,y_50` - Adds white text overlay: + - `Arial_60` - Arial font, size 60 + - `I%20love%20shoes` - The text (URL encoded) + - `co_white` - White color + - `g_north` - Positioned at the top (north) + - `y_50` - 50 pixels offset from the top + +Here are the images we found with "shoe" in the filename/public ID: + +1. **First result (used for transformation)**: `samples/shoe` + - Original: https://res.cloudinary.com/dd8qwbjtv/image/upload/v1708364167/samples/shoe.jpg + - **Transformed**: https://res.cloudinary.com/dd8qwbjtv/image/upload/e_background_removal/b_black/l_text:Arial_60:I%20love%20shoes,co_white,g_north,y_50/samples/shoe + +2. **Second result**: `samples/ecommerce/shoes` + - Original: https://res.cloudinary.com/dd8qwbjtv/image/upload/v1708364144/samples/ecommerce/shoes.png + +The transformed image now has: +✅ Just the shoes extracted (background removed) +✅ White text "I love shoes" positioned above the shoes +✅ Black background applied + +You can click on the transformed URL to see the final result! +``` + +### Key Features Demonstrated + +This example showcases several powerful Cloudinary capabilities: + +**Asset Discovery** +- Search through media libraries using filename and public ID patterns +- Filter by folders and asset types +- Access comprehensive asset metadata + +**Advanced Transformations** +- **AI-powered background removal** - Automatically isolate subjects from backgrounds +- **Dynamic text overlays** - Add customizable text with precise positioning, fonts, and colors +- **Background replacement** - Apply solid colors or gradient backgrounds +- **Chained transformations** - Combine multiple effects in a single URL + +**Professional Results** +- Generate production-ready images programmatically +- Maintain image quality through optimized processing +- Create consistent branding across asset libraries + +### Transformation Syntax + +The Cloudinary transformation URL follows this pattern: +``` +https://res.cloudinary.com/{cloud_name}/image/upload/{transformations}/{public_id} +``` + +Common transformations include: +- `e_background_removal` - AI background removal +- `b_black` - Black background +- `l_text:font_size:text,color,gravity,offset` - Text overlays +- `w_400,h_300,c_fill` - Resize and crop +- `q_auto,f_auto` - Automatic quality and format optimization + +### Use Cases + +The Cloudinary extension is perfect for: +- **E-commerce product imagery** - Remove backgrounds, add branding, standardize formats +- **Social media content** - Create consistent branded visuals at scale +- **Marketing materials** - Generate variations of images for different campaigns +- **Content management** - Organize and transform media assets programmatically +- **Web optimization** - Automatically optimize images for different devices and browsers + +With Goose and Cloudinary, you can automate complex image processing workflows that would typically require specialized design software or manual editing. From 8ba0d2533fc5ab154a7ab3242a984471014b4329 Mon Sep 17 00:00:00 2001 From: Rizel Scarlett Date: Sun, 6 Jul 2025 15:31:58 -0400 Subject: [PATCH 2/6] update url --- documentation/docs/mcp/cloudinary-asset-management-mcp.md | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/documentation/docs/mcp/cloudinary-asset-management-mcp.md b/documentation/docs/mcp/cloudinary-asset-management-mcp.md index 8cce21e10725..54aac9c61949 100644 --- a/documentation/docs/mcp/cloudinary-asset-management-mcp.md +++ b/documentation/docs/mcp/cloudinary-asset-management-mcp.md @@ -6,7 +6,7 @@ description: Add Cloudinary Asset Management MCP Server as a Goose Extension for import Tabs from '@theme/Tabs'; import TabItem from '@theme/TabItem'; -This tutorial covers how to add the [Cloudinary Asset Management MCP Server](https://github.com/cloudinary-community/cloudinary-mcp) as a Goose extension for powerful media processing, transformation, and management capabilities. +This tutorial covers how to add the [Cloudinary Asset Management MCP Server](https://github.com/cloudinary-community/cloudinary-mcp) as a Goose extension for managing, processing, and transforming media. :::tip TLDR @@ -17,13 +17,13 @@ This tutorial covers how to add the [Cloudinary Asset Management MCP Server](htt **Command** ```sh - npx -y @cloudinary/mcp-server + npx -y --package @cloudinary/asset-management -- mcp start ``` **Environment Variable** ``` - CLOUDINARY_URL: + CLOUDINARY_URL: cloudinary://:@ ``` ::: From 414d6b271fe4212ac7b5df444ebd192bac5fbe98 Mon Sep 17 00:00:00 2001 From: Rizel Scarlett Date: Sun, 6 Jul 2025 15:50:42 -0400 Subject: [PATCH 3/6] url edits --- .../mcp/cloudinary-asset-management-mcp.md | 61 +++---------------- 1 file changed, 9 insertions(+), 52 deletions(-) diff --git a/documentation/docs/mcp/cloudinary-asset-management-mcp.md b/documentation/docs/mcp/cloudinary-asset-management-mcp.md index 54aac9c61949..7d65f736b8c4 100644 --- a/documentation/docs/mcp/cloudinary-asset-management-mcp.md +++ b/documentation/docs/mcp/cloudinary-asset-management-mcp.md @@ -6,7 +6,7 @@ description: Add Cloudinary Asset Management MCP Server as a Goose Extension for import Tabs from '@theme/Tabs'; import TabItem from '@theme/TabItem'; -This tutorial covers how to add the [Cloudinary Asset Management MCP Server](https://github.com/cloudinary-community/cloudinary-mcp) as a Goose extension for managing, processing, and transforming media. +This tutorial covers how to add the [Cloudinary Asset Management MCP Server](https://github.com/cloudinary-community/cloudinary-mcp) as a Goose extension to automate complex image processing workflows that would typically require specialized design software or manual editing. :::tip TLDR @@ -23,14 +23,14 @@ This tutorial covers how to add the [Cloudinary Asset Management MCP Server](htt **Environment Variable** ``` - CLOUDINARY_URL: cloudinary://:@ + CLOUDINARY_URL: cloudinary://:@ ``` ::: ## Configuration :::info -Note that you'll need [Node.js](https://nodejs.org/) installed on your system to run this command, as it uses `npx`. You'll also need a [Cloudinary account](https://cloudinary.com/users/register/free) - the free tier includes generous limits for experimentation. +Note that you'll need [Node.js](https://nodejs.org/) installed on your system to run this command, as it uses `npx`. You'll also need a [Cloudinary account](https://cloudinary.com/users/register/free). ::: @@ -95,7 +95,7 @@ Note that you'll need [Node.js](https://nodejs.org/) installed on your system to │ // highlight-start ◆ What command should be run? - │ npx -y @cloudinary/mcp-server + │ npx -y --package @cloudinary/asset-management -- mcp start // highlight-end └ ``` @@ -114,7 +114,7 @@ Note that you'll need [Node.js](https://nodejs.org/) installed on your system to │ cloudinary │ ◇ What command should be run? - │ npx -y @cloudinary/mcp-server + │ npx -y --package @cloudinary/asset-management -- mcp start │ // highlight-start ◆ Please set the timeout for this tool (in secs): @@ -137,7 +137,7 @@ Note that you'll need [Node.js](https://nodejs.org/) installed on your system to │ cloudinary │ ◇ What command should be run? - │ npx -y @cloudinary/mcp-server + │ npx -y --package @cloudinary/asset-management -- mcp start │ ◆ Please set the timeout for this tool (in secs): │ 300 @@ -165,7 +165,7 @@ Note that you'll need [Node.js](https://nodejs.org/) installed on your system to │ cloudinary │ ◇ What command should be run? - │ npx -y @cloudinary/mcp-server + │ npx -y --package @cloudinary/asset-management -- mcp start │ ◇ Please set the timeout for this tool (in secs): │ 300 @@ -181,7 +181,7 @@ Note that you'll need [Node.js](https://nodejs.org/) installed on your system to │ CLOUDINARY_URL │ ◇ Environment variable value: - │ cloudinary://api_key:api_secret@cloud_name + │ cloudinary://:@ │ ◇ Add another environment variable? │ No @@ -202,7 +202,7 @@ Let's use the Cloudinary extension to find and transform product images with adv 4. Create professional product imagery :::info LLM -Anthropic's Claude 3.5 Sonnet was used for this task. +Anthropic's Claude 4 Sonnet was used for this task. ::: @@ -282,47 +282,4 @@ The transformed image now has: You can click on the transformed URL to see the final result! ``` -### Key Features Demonstrated -This example showcases several powerful Cloudinary capabilities: - -**Asset Discovery** -- Search through media libraries using filename and public ID patterns -- Filter by folders and asset types -- Access comprehensive asset metadata - -**Advanced Transformations** -- **AI-powered background removal** - Automatically isolate subjects from backgrounds -- **Dynamic text overlays** - Add customizable text with precise positioning, fonts, and colors -- **Background replacement** - Apply solid colors or gradient backgrounds -- **Chained transformations** - Combine multiple effects in a single URL - -**Professional Results** -- Generate production-ready images programmatically -- Maintain image quality through optimized processing -- Create consistent branding across asset libraries - -### Transformation Syntax - -The Cloudinary transformation URL follows this pattern: -``` -https://res.cloudinary.com/{cloud_name}/image/upload/{transformations}/{public_id} -``` - -Common transformations include: -- `e_background_removal` - AI background removal -- `b_black` - Black background -- `l_text:font_size:text,color,gravity,offset` - Text overlays -- `w_400,h_300,c_fill` - Resize and crop -- `q_auto,f_auto` - Automatic quality and format optimization - -### Use Cases - -The Cloudinary extension is perfect for: -- **E-commerce product imagery** - Remove backgrounds, add branding, standardize formats -- **Social media content** - Create consistent branded visuals at scale -- **Marketing materials** - Generate variations of images for different campaigns -- **Content management** - Organize and transform media assets programmatically -- **Web optimization** - Automatically optimize images for different devices and browsers - -With Goose and Cloudinary, you can automate complex image processing workflows that would typically require specialized design software or manual editing. From 8b61874424c5992520fd69cc94b623547cab631f Mon Sep 17 00:00:00 2001 From: Rizel Scarlett Date: Sun, 6 Jul 2025 16:15:14 -0400 Subject: [PATCH 4/6] fix description --- .../mcp/cloudinary-asset-management-mcp.md | 23 ++++--------------- 1 file changed, 4 insertions(+), 19 deletions(-) diff --git a/documentation/docs/mcp/cloudinary-asset-management-mcp.md b/documentation/docs/mcp/cloudinary-asset-management-mcp.md index 7d65f736b8c4..453eb23f7d77 100644 --- a/documentation/docs/mcp/cloudinary-asset-management-mcp.md +++ b/documentation/docs/mcp/cloudinary-asset-management-mcp.md @@ -1,6 +1,6 @@ --- title: Cloudinary Asset Management Extension -description: Add Cloudinary Asset Management MCP Server as a Goose Extension for Media Processing +description: Add Cloudinary Asset Management MCP Server as a Goose Extension --- import Tabs from '@theme/Tabs'; @@ -12,7 +12,7 @@ This tutorial covers how to add the [Cloudinary Asset Management MCP Server](htt - [Launch the installer](goose://extension?cmd=npx&arg=-y&arg=@cloudinary/mcp-server&id=cloudinary&name=Cloudinary%20Asset%20Management&description=Powerful%20media%20processing%20and%20transformation&env=CLOUDINARY_URL%3DCloudinary%20URL) + [Launch the installer](goose://extension?cmd=npx&arg=-y&arg=--package&arg=@cloudinary/asset-management&arg=--&arg=mcp&arg=start&id=cloudinary&name=Cloudinary%20Asset%20Management&description=Powerful%20media%20processing%20and%20transformation&env=CLOUDINARY_URL%3DCloudinary%20URL) **Command** @@ -35,7 +35,7 @@ Note that you'll need [Node.js](https://nodejs.org/) installed on your system to - 1. [Launch the installer](goose://extension?cmd=npx&arg=-y&arg=@cloudinary/mcp-server&id=cloudinary&name=Cloudinary%20Asset%20Management&description=Powerful%20media%20processing%20and%20transformation&env=CLOUDINARY_URL%3DCloudinary%20URL) + 1. [Launch the installer](goose://extension?cmd=npx&arg=-y&arg=--package&arg=@cloudinary/asset-management&arg=--&arg=mcp&arg=start&id=cloudinary&name=Cloudinary%20Asset%20Management&description=Powerful%20media%20processing%20and%20transformation&env=CLOUDINARY_URL%3DCloudinary%20URL) 2. Press `Yes` to confirm the installation 3. Obtain your [CLOUDINARY_URL](https://console.cloudinary.com/settings/api-keys) from your Cloudinary dashboard and paste it in 4. Click `Save Configuration` @@ -202,24 +202,9 @@ Let's use the Cloudinary extension to find and transform product images with adv 4. Create professional product imagery :::info LLM -Anthropic's Claude 4 Sonnet was used for this task. +Anthropic's Claude 3.5 Sonnet was used for this task. ::: - - - 1. Open a new session in Goose Desktop - - - - 1. Open a terminal and start a new Goose session: - - ```sh - goose session - ``` - - - - ### Goose Prompt ``` 1. find shoe images in my Cloudinary samples that have 'shoe' in the filename or public ID. From 78b3564eda607b293de97825d509e75b83a66866 Mon Sep 17 00:00:00 2001 From: Rizel Scarlett Date: Sun, 6 Jul 2025 16:17:45 -0400 Subject: [PATCH 5/6] update model used --- documentation/docs/mcp/cloudinary-asset-management-mcp.md | 4 +--- 1 file changed, 1 insertion(+), 3 deletions(-) diff --git a/documentation/docs/mcp/cloudinary-asset-management-mcp.md b/documentation/docs/mcp/cloudinary-asset-management-mcp.md index 453eb23f7d77..b7be8cdf687b 100644 --- a/documentation/docs/mcp/cloudinary-asset-management-mcp.md +++ b/documentation/docs/mcp/cloudinary-asset-management-mcp.md @@ -202,7 +202,7 @@ Let's use the Cloudinary extension to find and transform product images with adv 4. Create professional product imagery :::info LLM -Anthropic's Claude 3.5 Sonnet was used for this task. +Anthropic's Claude 4 Sonnet was used for this task. ::: ### Goose Prompt @@ -235,9 +235,7 @@ Let me use the first result (`samples/shoe`) as requested and apply all the tran Here's the transformed image URL with all your requested modifications: -``` https://res.cloudinary.com/dd8qwbjtv/image/upload/e_background_removal/b_black/l_text:Arial_60:I%20love%20shoes,co_white,g_north,y_50/samples/shoe -``` Let me break down what each transformation does: From 3365284cf11b49955bc4d45d4800eba50e95c635 Mon Sep 17 00:00:00 2001 From: Rizel Scarlett Date: Sun, 6 Jul 2025 16:46:41 -0400 Subject: [PATCH 6/6] remove the last number --- documentation/docs/mcp/cloudinary-asset-management-mcp.md | 1 - 1 file changed, 1 deletion(-) diff --git a/documentation/docs/mcp/cloudinary-asset-management-mcp.md b/documentation/docs/mcp/cloudinary-asset-management-mcp.md index b7be8cdf687b..84fecda8679f 100644 --- a/documentation/docs/mcp/cloudinary-asset-management-mcp.md +++ b/documentation/docs/mcp/cloudinary-asset-management-mcp.md @@ -199,7 +199,6 @@ Let's use the Cloudinary extension to find and transform product images with adv 1. Search for specific images in your media library 2. Apply complex transformations including background removal 3. Add text overlays with precise positioning -4. Create professional product imagery :::info LLM Anthropic's Claude 4 Sonnet was used for this task.