undraw-mcp

An unofficial Model Context Protocol (MCP) server for searching, previewing, and inserting free SVG illustrations from unDraw.

Overview

This MCP server allows developers to search the unDraw library of open-source illustrations directly from their IDE. It provides tools to search for illustrations by keyword, customize their colors, and insert them into projects.

Features

• Search unDraw illustrations by keyword
• Customize illustration colors with hex values
• Cache illustrations locally for faster access
• Insert SVG illustrations directly into your project files
• VS Code integration via MCP extensions

Quick Start

The easiest way to use undraw-mcp is with npx, which requires no installation:

npx undraw-mcp

This will start the MCP server that can be connected to any MCP-compatible IDE or tool.

You can also install it globally:

npm install -g undraw-mcp

Then run it with:

undraw-mcp

IDE Configuration

To use the unDraw MCP server with your IDE, you can configure it in your MCP configuration file. Here's an example JSON configuration:

{
  "mcpServers": {
    "undraw": {
      "command": "npx",
      "args": [
        "-y",
        "undraw-mcp@latest"
      ]
    }
  }
}

This configuration allows your IDE to automatically download and run the latest version of the unDraw MCP server without requiring a separate installation.

Usage

The server implements the Model Context Protocol and communicates over stdin/stdout using JSON-RPC. It's designed to work with MCP-compatible tools and IDEs like VS Code with the MCP extension.

When started, the server will output a JSON initialization message and then listen for commands on stdin. Responses will be written to stdout.

Tools

The server provides the following tools that can be called via the MCP protocol:

1. search_svgs - Search for SVG illustrations on unDraw by keyword
2. get_svg - Get SVG content by slug from unDraw
3. insert_svg - Insert SVG content to a file on the filesystem
4. list_cached - List cached SVG entries
5. clear_cache - Clear cached SVG entries
6. suggest_keywords - Suggest keywords based on a query
7. list_tools - List all available tools and their descriptions

Configuration

The server can be configured via environment variables, a configuration file, or CLI flags.

Environment Variables

• UNDRAW_BASE_URL - Base URL for unDraw (default: https://undraw.co)
• UNDRAW_CACHE_DIR - Directory to cache illustrations (default: ~/.cache/undraw-mcp)
• UNDRAW_DEFAULT_COLOR - Default color for illustrations (default: #6c63ff)
• UNDRAW_USER_AGENT - User agent for requests (default: undraw-mcp/1.0.0)
• UNDRAW_TIMEOUT - Request timeout in milliseconds (default: 10000)
• UNDRAW_RETRIES - Number of retry attempts (default: 3)
• UNDRAW_MAX_RESULTS - Maximum results per page (default: 20)
• UNDRAW_THROTTLE - Request throttling in milliseconds (default: 100)