expo-assets-mcp

Local MCP server to generate and transform Expo assets. Also includes a CLI script to run it directly from the terminal.

Project structure

src/
├── expo-assets.ts   ← reusable logic (asset definitions, image transformations)
├── index.ts         ← MCP server
└── generate.ts      ← CLI script
dist/                ← compiled output (generated with npm run build)

Installation

npm install
npm run build

Web Generator

A pure JavaScript version of this tool is available directly in the browser! Open index.html or visit https://elber-code.github.io/expo-assets-mcp/ to access a rich GUI that features:

• Interactive Cropper: Perfectly center your icons with a 1:1 aspect ratio.
• Live Icon Previews: See how your icon looks in iOS (squircle) and Android (circle) shapes with transparent or solid backgrounds in real-time.
• Advanced Banners: Generate App Store mockups or promo banners by placing your Expo assets (e.g. Splash, Icon) inside custom resolutions to download individually.
• Custom ZIP Assets: Easily add extra custom-sized assets to the final ZIP.
• Bilingual Interface: Seamlessly switch between English and Spanish (index_es.html).

No backend or server required; everything is processed locally in your browser!

CLI usage

Generates all Expo assets from a source image. Creates a folder next to the image named <image>-assets/.

node dist/generate.js <image-path> [options]

Options:

Examples:

# Transparent background
node dist/generate.js /Users/me/logo.png

# With background color
node dist/generate.js /Users/me/logo.png --bg "#E6F4FE"

Output:

/Users/me/logo-assets/
├── icon.png
├── android-icon-foreground.png
├── android-icon-background.png
├── android-icon-monochrome.png
├── splash-icon.png
├── favicon.png
├── react-logo.png
├── [email protected]
├── [email protected]
└── partial-react-logo.png

MCP usage (Claude Desktop)

Copy claude-config.example.json to claude-config.json, fill in the correct path, then merge it into:

~/Library/Application Support/Claude/claude_desktop_config.json

{
  "mcpServers": {
    "expo-assets-mcp": {
      "command": "node",
      "args": ["/absolute/path/to/expo-assets-mcp/dist/index.js"]
    }
  }
}

Test with MCP Inspector

npx @modelcontextprotocol/inspector node dist/index.js

Available MCP tools

generate_expo_icons

Generates all 10 Expo assets into a single assets/images/ folder.

Proportions:

transform_image

Transforms an image to specific dimensions with optional content proportion and background.

convert_svg

Converts an SVG file to PNG, JPEG, or WebP at the specified dimensions.

Generated assets

Expo handles all platform-specific resizing automatically from these 10 files.

Source image requirements

• Format: PNG
• Minimum size: 1024×1024 px
• Background: transparent (recommended)

Asset table

Special transformations

#### android-icon-monochrome.png — White silhouette Every non-transparent pixel is converted to pure white. Android 13+ uses this for Themed Icons, tinting the silhouette with the system color theme.

pixel (r, g, b, a > 10)  →  (255, 255, 255, a)
pixel (r, g, b, a ≤ 10)  →  unchanged (transparent)

#### partial-react-logo.png — Section crop A section of the source image is cropped without distortion:

• Horizontal: right side (end)
• Vertical: from the top (start)
• The section is scaled proportionally to fit the 518×316 canvas

partial_logo: 0.5 → right half · partial_logo: 0.33 → right third

#### Android adaptive icon — Safe zone

Keep important content within the 66% center (338×338 px on a 512×512 canvas) to avoid being clipped by any Android launcher shape.

┌─────────────────┐  512×512
│                 │
│  ┌───────────┐  │
│  │  safe     │  │  338×338 (66%)
│  │  zone     │  │
│  └───────────┘  │
│                 │
└─────────────────┘

Scripts

npm run build   # compile TypeScript
npm start       # start MCP server
npm run dev     # run with tsx (no compile needed)