How do I use ExpoSnap?

1. Click on "Install Server". 2. Wait a few minutes for the server to deploy. Once ready, it will show a "Started" state. 3. In the chat, type @ followed by the MCP server name and your instructions, e.g., "@ExpoSnap show me the latest screenshot from the login screen" That's it! The server will respond to your query, and you can continue using it as needed. Here is a step-by-step guide with screenshots.

ExpoSnap by edwarddjss

Q: Which integrations are available for this server?

Enables AI assistants to view and analyze screenshots from React Native/Expo applications for AI-powered mobile UI development.

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

claude mcp add exposnap -- npx -y exposnap

Add to .cursor/mcp.json:

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

Add to .vscode/mcp.json:

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

Settings → Developer → Edit Config:

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

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.