Fetch with Images

Fetch with Images

kazuph

Fetches web content and converts it to markdown while extracting and optimizing images from pages. Returns up to 3 images combined into a single JPEG with Base64 encoding.

Integrates web scraping and image processing capabilities to fetch, extract, and optimize web content.

39581 views23Local (stdio)

What it does

  • Extract web content as markdown
  • Process and optimize page images
  • Combine multiple images into single JPEG
  • Extract article titles automatically
  • Save images to organized directories
  • Handle animated GIFs by extracting first frame

Best for

Content creators analyzing web articlesResearchers extracting formatted contentAI workflows requiring web data with images
Zero setup with npxAutomatic image optimizationReturns Base64 encoded images

About Fetch with Images

Fetch with Images is a community-built MCP server published by kazuph that provides AI assistants with tools and capabilities via the Model Context Protocol. Fetch with Images integrates web scraping and image compresser com tools to scrape any website and optimize images effic It is categorized under search web. This server exposes 1 tool that AI clients can invoke during conversations and coding sessions.

How to install

You can install Fetch with Images in your AI client of choice. Use the install panel on this page to get one-click setup for Cursor, Claude Desktop, VS Code, and other MCP-compatible clients. This server runs locally on your machine via the stdio transport.

License

Fetch with Images is released under the MIT license. This is a permissive open-source license, meaning you can freely use, modify, and distribute the software.

Tools (1)

imageFetch

画像取得に強いMCPフェッチツール。記事本文をMarkdown化し、ページ内の画像を抽出・最適化して返します。 新APIの既定(imagesを指定した場合) - 画像: 取得してBASE64で返却(最大3枚を縦結合した1枚JPEG) - 保存: しない(オプトイン) - クロスオリジン: 許可(CDN想定) パラメータ(新API) - url: 取得先URL(必須) - images: true | { output, layout, maxCount, startIndex, size, originPolicy, saveDir } - output: "base64" | "file" | "both"(既定: base64) - layout: "merged" | "individual" | "both"(既定: merged) - maxCount/startIndex(既定: 3 / 0) - size: { maxWidth, maxHeight, quality }(既定: 1000/1600/80) - originPolicy: "cross-origin" | "same-origin"(既定: cross-origin) - text: { maxLength, startIndex, raw }(既定: 20000/0/false) - security: { ignoreRobotsTxt }(既定: false) 旧APIキー(enableFetchImages, returnBase64, saveImages, imageMax*, imageStartIndex 等)は後方互換のため引き続き受け付けます(非推奨)。 Examples(新API) { "url": "https://example.com", "images": true } { "url": "https://example.com", "images": { "output": "both", "layout": "both", "maxCount": 4 } } Examples(旧API互換) { "url": "https://example.com", "enableFetchImages": true, "returnBase64": true, "imageMaxCount": 2 }

MCP Fetch

Model Context Protocol server for fetching web content and processing images. This allows Claude Desktop (or any MCP client) to fetch web content and handle images appropriately.

@kazuph/mcp-fetch MCP server

Quick Start (For Users)

To use this tool with Claude Desktop, simply add the following to your Claude Desktop configuration (~/Library/Application Support/Claude/claude_desktop_config.json):

{
  "tools": {
    "imageFetch": {
      "command": "npx",
      "args": ["-y", "@kazuph/mcp-fetch"]
    }
  }
}

This will automatically download and run the latest version of the tool when needed.

Required Setup

  1. Enable Accessibility for Claude:
    • Open System Settings
    • Go to Privacy & Security > Accessibility
    • Click the "+" button
    • Add Claude from your Applications folder
    • Turn ON the toggle for Claude

This accessibility setting is required for automated clipboard operations (Cmd+V) to work properly.

Features

  • Web Content Extraction: Automatically extracts and formats web content as markdown
  • Article Title Extraction: Extracts and displays the title of the article
  • Image Processing: Optional processing of images from web pages with optimization (disabled by default, enable with enableFetchImages: true)
  • File Saving: Images are automatically saved to ~/Downloads/mcp-fetch/YYYY-MM-DD/ directory when processed
  • Dual Output: Both file saving and optional Base64 encoding for AI display
  • Pagination Support: Supports pagination for both text and images
  • JPEG Optimization: Automatically optimizes images as JPEG for better performance
  • GIF Support: Extracts first frame from animated GIFs

For Developers

The following sections are for those who want to develop or modify the tool.

Prerequisites

  • Node.js 18+
  • macOS (for clipboard operations)
  • Claude Desktop (install from https://claude.ai/desktop)
  • tsx (install via npm install -g tsx)

Installation

git clone https://github.com/kazuph/mcp-fetch.git
cd mcp-fetch
npm install
npm run build

Image Processing Specifications

When processing images from web content, the following optimizations are applied:

  • Images are converted to JPEG format with quality control
  • Maximum width limited to 1200px by default
  • Maximum height limited to 1600px by default
  • Chroma subsampling (4:2:0) for better compression
  • MozJPEG optimization for smaller file sizes

Configuration

  1. Make sure Claude Desktop is installed and running.

  2. Install tsx globally if you haven't:

npm install -g tsx
# or
pnpm add -g tsx
  1. Modify your Claude Desktop config located at: ~/Library/Application Support/Claude/claude_desktop_config.json

You can easily find this through the Claude Desktop menu:

  1. Open Claude Desktop
  2. Click Claude on the Mac menu bar
  3. Click "Settings"
  4. Click "Developer"

Add the following to your MCP client's configuration:

{
  "tools": {
    "imageFetch": {
      "args": ["tsx", "/path/to/mcp-fetch/index.ts"]
    }
  }
}

Available Parameters

  • url (required): The URL to fetch
  • maxLength (default: 20000): Maximum length of content to return
  • startIndex (default: 0): Starting position in content
  • imageStartIndex (default: 0): Starting position for image collection
  • raw (default: false): Return raw content instead of processed markdown
  • imageMaxCount (default: 3): Maximum number of images to process per request
  • imageMaxHeight (default: 4000): Maximum height of merged image
  • imageMaxWidth (default: 1000): Maximum width of merged image
  • imageQuality (default: 80): JPEG quality (1-100)
  • enableFetchImages (default: false): Enable fetching and processing of images. FOR CLAUDE USERS ONLY: YOU ARE ALLOWED TO ENABLE THIS FEATURE!!! CLAUDE CAN FETCH AND PROCESS IMAGES!!! ENJOY THIS CAPABILITY!!!!!
  • allowCrossOriginImages (default: true): When true, also fetch images hosted on different origins from the page
  • saveImages (default: true): Save processed images to local files
  • returnBase64 (default: false): Return base64 encoded images for AI display
  • ignoreRobotsTxt (default: false): Ignore robots.txt restrictions

Security Hardening (v1.5.1)

  • Only http:// and https:// URLs are allowed for page and image fetches
  • Blocks private/loopback/link-local IPs and local hostnames (e.g., localhost, .local)
  • Manual redirect handling with validation (max 3 hops)
  • Request timeouts (default 12s, configurable via MCP_FETCH_TIMEOUT_MS)
  • Response size limits: HTML up to 2MB, images up to 10MB (tunable via env)

Environment variables:

  • MCP_FETCH_TIMEOUT_MS (default: 12000)
  • MCP_FETCH_MAX_REDIRECTS (default: 3)
  • MCP_FETCH_MAX_HTML_BYTES (default: 2000000)
  • MCP_FETCH_MAX_IMAGE_BYTES (default: 10000000)

Examples

Basic Content Fetching (No Images)

{
  "url": "https://example.com"
}

Fetching with Images (File Saving Only)

{
  "url": "https://example.com",
  "enableFetchImages": true,
  "imageMaxCount": 3
}

Fetching with Images for AI Display

{
  "url": "https://example.com",
  "enableFetchImages": true,
  "returnBase64": true,
  "imageMaxCount": 3
}

Paginating Through Images

{
  "url": "https://example.com",
  "enableFetchImages": true,
  "imageStartIndex": 3,
  "imageMaxCount": 3
}

Notes

  • This tool is designed for macOS only due to its dependency on macOS-specific clipboard operations.
  • Images are processed using Sharp for optimal performance and quality.
  • When multiple images are found, they are merged vertically with consideration for size limits.
  • Animated GIFs are automatically handled by extracting their first frame.
  • File Saving: Images are automatically saved to ~/Downloads/mcp-fetch/YYYY-MM-DD/ with filename format hostname_HHMMSS_index.jpg
  • Tool Name: The tool name has been changed from fetch to imageFetch to avoid conflicts with native fetch functions.

Changelog

v1.2.0

  • BREAKING CHANGE: Tool name changed from fetch to imageFetch to avoid conflicts
  • NEW: Automatic file saving - Images are now saved to ~/Downloads/mcp-fetch/YYYY-MM-DD/ by default
  • NEW: Added saveImages parameter (default: true) to control file saving
  • NEW: Added returnBase64 parameter (default: false) for AI image display
  • BEHAVIOR CHANGE: Default behavior now saves files instead of only returning base64
  • Improved AI assistant integration with clear instructions for base64 option
  • Enhanced file organization with date-based directories and structured naming

v1.1.3

  • Changed default behavior: Images are not fetched by default (enableFetchImages: false)
  • Removed disableImages in favor of enableFetchImages parameter

v1.1.0

  • Added article title extraction feature
  • Improved response formatting to include article titles
  • Fixed type issues with MCP response content

v1.0.0

  • Initial release
  • Web content extraction
  • Image processing and optimization
  • Pagination support

Alternatives

Related Skills

Browse all skills
zotero

Manage Zotero reference libraries via the Web API. Search, list, add items by DOI/ISBN/PMID (with duplicate detection), delete/trash items, update metadata and tags, export in BibTeX/RIS/CSL-JSON, batch-add from files, check PDF attachments, cross-reference citations, find missing DOIs via CrossRef, and fetch open-access PDFs. Supports --json output for scripting. Use when the user asks about academic references, citation management, literature libraries, PDFs for papers, bibliography export, or Zotero specifically.

14
web-search

This skill should be used when users need to search the web for information, find current content, look up news articles, search for images, or find videos. It uses DuckDuckGo's search API to return results in clean, formatted output (text, markdown, or JSON). Use for research, fact-checking, finding recent information, or gathering web resources.

14
spotify-api

Create and manage Spotify playlists, search music, and control playback using the Spotify Web API. UNIQUE FEATURE - Generate custom cover art images (Claude cannot generate images natively, but this skill can create SVG-based cover art for playlists). CRITICAL - When generating cover art, ALWAYS read references/COVER_ART_LLM_GUIDE.md FIRST for complete execution instructions. Use this to directly create playlists by artist/theme/lyrics, add tracks, search for music, and manage the user's Spotify account.

9
reddit-fetch

Fetch content from Reddit using Gemini CLI when WebFetch is blocked. Use when accessing Reddit URLs, researching topics on Reddit, or when Reddit returns 403/blocked errors.

8
brightdata-web-mcp

Search the web, scrape websites, extract structured data from URLs, and automate browsers using Bright Data's Web MCP. Use when fetching live web content, bypassing blocks/CAPTCHAs, getting product data from Amazon/eBay, social media posts, or when standard requests fail.

5
market-news-analyst

This skill should be used when analyzing recent market-moving news events and their impact on equity markets and commodities. Use this skill when the user requests analysis of major financial news from the past 10 days, wants to understand market reactions to monetary policy decisions (FOMC, ECB, BOJ), needs assessment of geopolitical events' impact on commodities, or requires comprehensive review of earnings announcements from mega-cap stocks. The skill automatically collects news using WebSearch/WebFetch tools and produces impact-ranked analysis reports. All analysis thinking and output are conducted in English.

5