ExpoSnap

<div align="center"> <img src="assets/ExpoSnap_MCP_Logo.png" alt="ExpoSnap" width="240"/>

</div>

ExpoSnap MCP Server

A Model Context Protocol (MCP) server that enables AI assistants to view and analyze screenshots from React Native/Expo applications. Seamlessly integrates with Claude, Cursor, VS Code, and other MCP-compatible editors for AI-powered mobile UI development.

Setup

1. Add MCP server to your IDE

<details> <summary><strong>Claude Code</strong></summary>

claude mcp add exposnap -- npx -y exposnap

</details>

<details> <summary><strong>Cursor</strong></summary>

Add to .cursor/mcp.json:

{
  "mcpServers": {
    "exposnap": {
      "command": "npx",
      "args": ["-y", "exposnap"]
    }
  }
}

</details>

<details> <summary><strong>VS Code</strong></summary>

Add to .vscode/mcp.json:

{
  "servers": {
    "exposnap": {
      "type": "stdio",
      "command": "npx",
      "args": ["-y", "exposnap"]
    }
  }
}

</details>

<details> <summary><strong>Claude Desktop</strong></summary>

Settings → Developer → Edit Config:

{
  "mcpServers": {
    "exposnap": {
      "command": "npx",
      "args": ["-y", "exposnap"]
    }
  }
}

</details>

2. Add to your Expo app

npm install exposnap

3. Configure your React Native app

import { ScreenshotWrapper } from 'exposnap';

export default function App() {
  return (
    <ScreenshotWrapper>
      <YourApp />
    </ScreenshotWrapper>
  );
}

The wrapper automatically discovers your MCP server and provides a draggable camera icon for manual screenshot capture.

Contributing

We welcome contributions! See CONTRIBUTING.md for details.

License

MIT - see LICENSE for details.