Expo Assets

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:

Flag	Description
--bg "#rrggbb"	Background color. Omit for transparent
--no-overwrite	Skip files that already exist

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.

Parameter	Type	Default	Description
input_image	string	—	Absolute path to the source image
output_dir	string	—	Absolute path to the Expo project's assets/images/ folder
background_color	string	transparent	Background color in hex (e.g. #E6F4FE). Omit for transparent.
overwrite	boolean	true	Overwrite existing files
proportions	object	see table	Content proportion per asset (0.1–1.0)

Proportions:

Key	Asset(s)	Default
icon	icon.png	0.7
android_adaptive	android-icon-foreground/background.png	0.33
android_monochrome	android-icon-monochrome.png	0.33
splash	splash-icon.png	0.5
favicon	favicon.png	0.8
react_logo	react-logo.png + @2x + @3x	0.8
partial_logo	partial-react-logo.png	0.5

---

transform_image

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

Parameter	Type	Default	Description
input_image	string	—	Path to the source image (PNG, JPEG, WebP, TIFF, AVIF)
output_path	string	—	Full output path including filename and extension (e.g. /path/result.webp)
width	number	—	Output canvas width in pixels
height	number	—	Output canvas height in pixels
proportion	number	1	How much of the canvas the content fills (0.1–1.0, 1 = fills everything)
background_color	string	transparent	Canvas background color in hex. Omit for transparent.
format	png|jpeg|webp	png	Output file format
quality	number	95	Compression quality for jpeg/webp only (1 = lowest, 100 = highest)

---

convert_svg

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

Parameter	Type	Default	Description
input_svg	string	—	Absolute path to the source SVG file
output_path	string	—	Full output path including filename and extension
width	number	—	Output width in pixels
height	number	proportional	Output height in pixels. Omit to scale proportionally from width.
format	png|jpeg|webp	png	Output file format
background_color	string	transparent	Background color in hex. Omit for transparent (PNG only).
quality	number	95	Compression quality for jpeg/webp only (1 = lowest, 100 = highest)

---

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

File	Canvas	Background	Transformation	app.json key
icon.png	1024×1024	background_color or transparent	contain, centered, prop 0.7	expo.icon
android-icon-foreground.png	512×512	Always transparent	contain, centered, prop 0.33	android.adaptiveIcon.foregroundImage
android-icon-background.png	512×512	background_color or transparent	contain, centered, prop 0.33	android.adaptiveIcon.backgroundImage
android-icon-monochrome.png	432×432	Always transparent	White silhouette, prop 0.33	android.adaptiveIcon.monochromeImage
splash-icon.png	1024×1024	Always transparent	contain, centered, prop 0.5	expo-splash-screen > image
favicon.png	48×48	Always transparent	contain, centered, prop 0.8	web.favicon
react-logo.png	100×100	Always transparent	contain, centered, prop 0.8	Decorative UI @1x
[email protected]	200×200	Always transparent	contain, centered, prop 0.8	Decorative UI @2x
[email protected]	300×300	Always transparent	contain, centered, prop 0.8	Decorative UI @3x
partial-react-logo.png	518×316	Always transparent	Right-side crop from top, prop 0.5	Decorative UI partial

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)