mcpField
I
img-src-io

img-src-io

Local
github.com/img-src-ioFiles & Storage0Updated 24w ago

About img-src-io

img-src-io is an MCP server for managing account images through AI assistants. It supports uploads, search, metadata lookup, and CDN URLs with optional transformations.

Key features

  1. 01Upload images from files, URLs, or Base64
  2. 02List images by folder and search them
  3. 03Inspect image metadata and delete images
  4. 04Generate CDN URLs with optional transformations
  5. 05Read image resources and use prompt templates

Use cases

  1. 01Upload an image and create a shareable CDN URL
  2. 02Find images within a folder
  3. 03Check account usage and settings

MCP support

The server provides MCP clients with image-management tools, image metadata resources, and prompts for common workflows.

Configuration

Local server config is the same for every client. Copy it into your client’s MCP config file.

mcp.json · Universal config
{
"mcpServers": {
"img-src-io": {
"command": "npx",
"args": [
"-y",
"@img-src/mcp-server"
],
"env": {
"IMG_SRC_API_KEY": "<IMG_SRC_API_KEY>"
}
}
}
}
Run commandnpx -y @img-src/mcp-server
Environment variables to set
IMG_SRC_API_KEYSecretYour img-src.io API key

Local servers need a runtime on your machine (e.g. Node.js 18+). Config file locations differ by client; see your client’s docs.

Packages
npm@img-src/mcp-server0.2.5

Tools

8

Saved tool list · updated 2w ago

ParameterTypeRequiredDescription
urlstringNoURL of image to download and upload (for web images)
datastringNoBase64-encoded image data. AVOID: causes context length issues. Use file_path instead.
mimeTypestringNoMIME type (required only when using data, e.g., image/png)
file_pathstringNoPREFERRED: Absolute path to local image file (e.g., /Users/name/photo.png). Use this instead of base64 data.
target_pathstringNoOptional: Folder path to store the image (e.g., 'photos/2024'). Filename is determined from source.

Details

From the project README

img-src MCP Server

Model Context Protocol (MCP) server for img-src.io image hosting API.

This server enables AI assistants like Claude to interact with your img-src.io account - uploading, searching, listing, and managing images directly through natural language.

Installation

pnpm add -g @img-src/mcp-server

Or run directly with pnpm dlx:

pnpm dlx @img-src/mcp-server

Configuration

Environment Variables
VariableRequiredDescription
IMG_SRC_API_KEYYesYour img-src.io API key (starts with imgsrc_)
IMG_SRC_API_URLNoAPI base URL (default: https://api.img-src.io)
Getting an API Key
  1. Log in to img-src.io
  2. Go to Settings > API Keys
  3. Create a new API key
  4. Copy the key (it starts with imgsrc_)

Usage with Claude Desktop

Add to your Claude Desktop configuration (~/Library/Application Support/Claude/claude_desktop_config.json on macOS):

{
  "mcpServers": {
    "img-src": {
      "command": "npx",
      "args": ["@img-src/mcp-server"],
      "env": {
        "IMG_SRC_API_KEY": "imgsrc_your_api_key_here"
      }
    }
  }
}

Usage with Claude Code

Add to your project's .mcp.json (project-scoped) or ~/.claude/mcp.json (global):

{
  "mcpServers": {
    "img-src": {
      "command": "npx",
      "args": ["@img-src/mcp-server"],
      "env": {
        "IMG_SRC_API_KEY": "imgsrc_your_api_key_here"
      }
    }
  }
}

Or add it via the CLI:

claude mcp add img-src -- npx @img-src/mcp-server

Then set the API key in your environment or .env file:

export IMG_SRC_API_KEY=imgsrc_your_api_key_here

Usage with Cursor

  1. Open Cursor Settings (Cmd+, on macOS / Ctrl+, on Windows/Linux)

  2. Navigate to Features > MCP Servers

  3. Click "Add new MCP server"

  4. Enter the following configuration:

    • Name: img-src
    • Type: command
    • Command: npx @img-src/mcp-server
  5. Add the environment variable IMG_SRC_API_KEY with your API key.

Alternatively, create or edit .cursor/mcp.json in your project root:

{
  "mcpServers": {
    "img-src": {
      "command": "npx",
      "args": ["@img-src/mcp-server"],
      "env": {
        "IMG_SRC_API_KEY": "imgsrc_your_api_key_here"
      }
    }
  }
}

Usage with VS Code (GitHub Copilot)

Create .vscode/mcp.json in your workspace:

{
  "servers": {
    "img-src": {
      "type": "stdio",
      "command": "npx",
      "args": ["@img-src/mcp-server"],
      "env": {
        "IMG_SRC_API_KEY": "imgsrc_your_api_key_here"
      }
    }
  }
}

Or add via CLI:

code --add-mcp '{"name":"img-src","command":"npx","args":["@img-src/mcp-server"],"env":{"IMG_SRC_API_KEY":"imgsrc_your_api_key_here"}}'

Note: VS Code uses "servers" (not "mcpServers") and requires "type": "stdio".

Usage with Windsurf

Add to ~/.codeium/windsurf/mcp_config.json:

{
  "mcpServers": {
    "img-src": {
      "command": "npx",
      "args": ["@img-src/mcp-server"],
      "env": {
        "IMG_SRC_API_KEY": "imgsrc_your_api_key_here"
      }
    }
  }
}

Usage with Cline

Open the Cline extension in VS Code, click the MCP Servers icon > Configure MCP Servers, then add:

{
  "mcpServers": {
    "img-src": {
      "command": "npx",
      "args": ["@img-src/mcp-server"],
      "env": {
        "IMG_SRC_API_KEY": "imgsrc_your_api_key_here"
      }
    }
  }
}

Usage with Zed

Add to your Zed settings (~/.config/zed/settings.json):

{
  "context_servers": {
    "img-src": {
      "command": "npx",
      "args": ["@img-src/mcp-server"],
      "env": {
        "IMG_SRC_API_KEY": "imgsrc_your_api_key_here"
      }
    }
  }
}

Note: Zed uses "context_servers" as the key, embedded within the main settings.json.

Usage with JetBrains IDEs

In IntelliJ IDEA, WebStorm, PyCharm, or other JetBrains IDEs:

  1. Go to Settings > Tools > AI Assistant > Model Context Protocol (MCP)
  2. Click + (Add) and paste:
{
  "mcpServers": {
    "img-src": {
      "command": "npx",
      "args": ["@img-src/mcp-server"],
      "env": {
        "IMG_SRC_API_KEY": "imgsrc_your_api_key_here"
      }
    }
  }
}

Available Tools

upload_image

Upload an image from a local file, URL, or base64 data to your img-src.io account.

Upload ~/Photos/sunset.jpg to img-src as photos/vacation/sunset.jpg

Parameters:

  • file_path (optional): Local file path to upload (recommended for large files)
  • url (optional): URL of the image to upload
  • data (optional): Base64-encoded image data
  • mimeType (optional): MIME type of the image (required when using data)
  • target_path (optional): Target path for organizing the image

Note: One of file_path, url, or data must be provided.

list_images

List images in your account, optionally within a specific folder.

List my img-src images in the photos/vacation folder

Parameters:

  • folder (optional): Folder path to list
  • limit (optional): Max items to return (default: 50)
  • offset (optional): Items to skip for pagination
search_images

Search for images by filename or path.

Search for img-src images containing "beach"

Parameters:

  • query (required): Search query
  • limit (optional): Max results (default: 20)
  • offset (optional): Results to skip
get_image

Get detailed metadata for a specific image.

Get details for my img-src image at photos/vacation/sunset.jpg

Parameters:

  • id (required): Image ID (UUID) or filepath
delete_image

Permanently delete an image.

Delete my img-src image at photos/old/unused.jpg

Parameters:

  • id (required): Image ID (UUID) or filepath to delete
get_usage

View your current usage statistics.

Show my img-src usage stats
get_settings

Get your account settings and configuration.

What are my img-src account settings?
get_cdn_url

Generate a CDN URL with optional image transformations.

Generate an img-src CDN URL for john/photos/beach.jpg resized to 800x600

Parameters:

  • username (required): Image owner's username
  • filepath (required): Image path
  • width (optional): Resize width
  • height (optional): Resize height
  • fit (optional): cover, contain, fill, scale-down
  • quality (optional): 1-100 (default: 80)
  • format (optional): webp, avif, jpeg, png, jxl

Resources

The MCP server exposes your images as resources that Claude can access directly:

  • URI format: imgsrc://images/{imageId}
  • Content: JSON metadata including dimensions, formats, and CDN URLs

Claude can list and read these resources to understand what images you have and their properties.

Prompts

Pre-built prompts for common workflows:

upload-and-share

Upload an image and get shareable CDN URLs.

  • Arguments: imageUrl (required), width (optional)
check-usage

Check account usage and storage status.

  • No arguments required
find-images

Search for images by keyword.

  • Arguments: query (required)

Example Conversations

Upload and share an image

User: Upload ~/Photos/sunset.jpg to img-src and give me a resized URL

Claude: I'll upload that image and generate a CDN URL for you.

[Uses upload_image tool]

Image uploaded successfully! Here's a resized CDN URL: https://img-src.io/i/yourname/sunset.webp?w=1200&q=85

Search and organize

User: Find all my beach photos

Claude: [Uses search_images with query "beach"]

Found 5 beach photos:

  1. photos/vacation/beach-sunset.jpg
  2. photos/summer/beach-party.png ...
Check usage

User: How much storage am I using?

Claude: [Uses get_usage tool]

Your img-src.io usage:

  • Storage: 245 MB / 500 MB (49%)
  • Uploads: 67 / 100 this month
  • Bandwidth: 1.2 GB / 1 GB (120% - consider upgrading!)

Development

# Install dependencies
pnpm install

# Build
pnpm build

# Run locally
IMG_SRC_API_KEY=imgsrc_xxx pnpm start

# Type check
pnpm type-check

# Run tests
pnpm test

License

MIT

Comments

Markdown supported

New to MCP?

From what the protocol is to installing your first server, these answers cover most first questions.

An open protocol that defines how AI applications connect to external tools and data in a uniform way. Clients talk to the model; MCP servers provide tools, resources and prompt templates. They exchange standard messages, so one server can be reused by many clients.