项目简介

ExpoSnap 是一个基于 Model Context Protocol (MCP) 构建的服务器，旨在简化 Expo 应用的调试和开发流程。它允许您直接通过 AI 助手（如 Claude）的指令或应用内的按钮，实时捕捉 Expo 应用的屏幕截图，并将这些截图无缝地传输给 AI 助手进行分析。无需手动截图、保存和上传，极大提升了开发效率。

主要功能点

AI 驱动的屏幕截图： 在与 AI 助手的对话中直接发出指令，例如“截取登录界面的图”，即可自动捕捉并发送当前应用的屏幕截图。
应用内截图按钮： 在您的 Expo 应用中集成一个可配置的截图按钮，方便随时手动触发截图。
自动化截图管理： 服务器会自动存储和管理最新截图，并可按需列出历史截图记录。
上下文数据访问： 通过 MCP 协议，AI 助手可以直接访问服务器上存储的截图资源，进行图像识别、UI 改进建议等高级分析。
简单易用的集成： 提供易于配置的客户端 SDK 和服务器启动脚本，快速集成到您的 Expo 项目和 AI 开发环境中。

安装步骤

环境准备： 确保您的开发环境已安装 Node.js 20+。您的电脑和运行 Expo 应用的设备（模拟器或真机）必须在同一个 Wi-Fi 网络下。
添加到您的 Expo 应用： 在您的 Expo 项目根目录中，运行以下命令安装截图依赖：
```
npm install react-native-view-shot
```
启动 ExpoSnap MCP 服务器： 在您的电脑终端中，运行以下命令启动 ExpoSnap 服务器：
```
npx exposnap
```
服务器启动后，会显示类似 '[ExpoSnap] Server ready on port 54263' 的信息，并可能生成一个二维码。

配置您的 React Native 应用： 在您的 Expo 应用的根组件（通常是 'App.tsx'）中，使用 'ScreenshotWrapper' 组件包裹您的主应用内容：

import { ScreenshotWrapper } from 'exposnap/ScreenshotWrapper';

export default function App() {
  return (
    <ScreenshotWrapper>
      <YourApp /> {/* 您的主应用组件 */}
    </ScreenshotWrapper>
  );
}

'ScreenshotWrapper' 会尝试自动发现本地网络中的 ExpoSnap 服务器。如果自动发现失败，您可以手动指定服务器 URL（例如 'serverUrl="http://您的电脑IP:54263"'）。

服务器配置（MCP客户端）

要将 ExpoSnap MCP 服务器连接到您的 AI 助手（如 Claude Code, Cursor, VS Code 等），您需要根据您所使用的客户端，在其配置中添加 ExpoSnap 服务器。以下是关键的配置信息：

服务器名称 (Server Name)： 'exposnap'
- 这是您的 AI 助手用于识别和调用 ExpoSnap 服务器的名称。
连接类型 (Type)： 'stdio'
- 表示通过标准输入输出流进行通信，这是 MCP 协议支持的一种连接方式。
命令 (Command)： 'npx'
- 在终端中用于执行 Node.js 包的命令。
参数 (Arguments)： '["exposnap", "--mcp-only"]'
- 这些参数会传递给 'npx' 命令。'exposnap' 是要运行的包名，'--mcp-only' 参数指示 ExpoSnap 服务器以静默模式运行，避免在终端输出二维码，这通常是 AI 客户端连接时所需的模式。

根据您使用的 AI 客户端，将这些信息添加到其 MCP 配置中。例如，对于 '.cursor/mcp.json' 或 '.vscode/mcp.json'，您需要将其整合到 'mcpServers' 或 'servers' 对象中。完成配置后，请重启您的 AI 助手以加载服务器。

基本使用方法

通过 AI 助手指令： 在您的 AI 助手对话框中，可以直接输入指令来触发截图和分析，例如：
- "Take a screenshot of the login screen" (截取登录界面的截图)
- "What's wrong with this screen?" (这个屏幕有什么问题？)
- "How can I improve this layout?" (我如何改进这个布局？)
通过应用内按钮： 在您的 Expo 应用中，点击 'ScreenshotWrapper' 提供的相机按钮，即可立即捕捉屏幕截图并发送给服务器。
故障排除： 如果应用内的相机按钮显示红色，表示 ExpoSnap 服务器不可达。请检查：服务器是否正在运行 ('npx exposnap')，设备是否在同一 WiFi 网络，以及防火墙设置。如果按钮显示黄色，表示正在搜索服务器，请稍候。

关键词

项目简介

主要功能点

安装步骤

服务器配置（MCP客户端）

基本使用方法

信息