expo-assets-mcp

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

---

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)

---

npm install
npm run build

---

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
├── react-logo@2x.png
├── react-logo@3x.png
└── partial-react-logo.png

---

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"]
    }
  }
}

npx @modelcontextprotocol/inspector node dist/index.js

---

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