This documentation is available as Markdown for AI agents and LLMs. See the full Markdown index or append .md to any documentation URL.

在 Expo 中使用模型上下文协议(MCP)

编辑页面

一份关于将模型上下文协议集成到 Expo 项目中以增强 AI 模型能力的指南。


模型上下文协议(MCP)是一种标准协议,允许 AI 模型与外部数据源集成,为更精准的响应提供增强的上下文。它使代理等 AI 辅助工具能够更深入地了解你的开发环境,从而更好地协助你处理代码库。

Expo MCP Server 是由 Expo 托管的远程 MCP 服务器,可与 Claude Code、Cursor、VS Code 等常见的 AI 辅助工具集成,使它们能够直接与你的 Expo 项目交互。

介绍 Expo MCP Server:用于准确、具备上下文感知的 AI 响应
介绍 Expo MCP Server:用于准确、具备上下文感知的 AI 响应

增强你用于使用 Expo 构建应用的 AI 辅助工具。

使用 AI 构建移动应用所需的 3 个工具
使用 AI 构建移动应用所需的 3 个工具

观看 AI 代理在使用 Expo 构建移动应用时使用 MCP 服务器。

Expo MCP Server 有什么作用?

Expo MCP Server 会让你的 AI 辅助工具了解 Expo SDK,并允许它们与移动模拟器以及 React Native DevTools 交互。以下是 Expo MCP Server 能增强的一些任务示例:

了解 Expo 开发。 你的 AI 辅助工具可以按需获取最新的官方 Expo 文档,并用它来回复如下提示:

  • "我该如何使用 Expo Router?"
  • "搜索 Expo 文档,了解如何实现深度链接"
  • "阅读 Expo Router 文档页面"
  • "什么是 Expo CNG?"

管理依赖。 Expo MCP Server 会引导你安装我们推荐的包,并使用 npx expo install 来安装已知兼容的版本。

  • "添加带基本 CRUD 操作的 SQLite"
  • "安装 expo-camera 并告诉我如何拍照"
  • "添加 expo-notifications 用于推送通知"

管理构建和工作流。 Expo MCP Server 可以触发并监控 EAS 构建、运行工作流,并从 TestFlight 拉取崩溃数据:

  • "调查我最近一次 iOS EAS 构建为什么失败了"
  • "识别最近失败的工作流中的任何模式"
  • "创建一个运行 Maestro 测试的工作流"
  • "显示我最近的 TestFlight 崩溃"
  • "显示我应用的 TestFlight 反馈"

自动化视觉验证和测试。 多模态 AI 辅助工具可以截取屏幕截图,并与你在模拟器中运行的应用交互。通过将 expo-mcp 包添加到项目依赖中,Expo MCP Server 还包括本地能力。

  • "添加一个蓝色圆形视图并确保它正确渲染"
  • "添加一个按钮并点击它以验证交互是否正常工作"
  • "添加一个计数按钮,点击时递增,并验证状态更新是否正确"

你的 AI 辅助工具可以自主编写代码、截取屏幕截图以验证 UI 是否正确、测试交互,并修复它们发现的问题。

完整的 MCP 能力 表列出了 Expo MCP Server 为 AI 辅助工具提供的工具和提示词。

Prerequisites

3 requirements

1.

Expo 账户

使用 Expo MCP Server 需要一个 Expo 账户。

2.

使用最新 SDK 的 Expo 项目

使用 npx create-expo-app@latest --template default@sdk-57 创建项目,或确保你的 现有项目已安装最新的 expo 软件包。

3.

支持远程 MCP 的 AI 辅助工具

Claude Code、Cursor、VS Code,或任何其他支持远程 MCP 服务器的工具。

安装与设置

1

安装 Expo MCP Server

Expo MCP Server 支持与各种 AI 辅助工具集成。请使用下面的通用设置,或展开你的特定工具以查看详细说明:

  • 服务器类型:Streamable HTTP
  • URLhttps://mcp.expo.dev/mcp
  • 认证:OAuth
Claude Code 设置
Terminal
claude mcp add --transport http expo https://mcp.expo.dev/mcp

安装后,在 Claude Code 会话中运行 /mcp 以进行身份验证。

Cursor 设置

点击以下链接为 Cursor 安装 MCP 服务器:

安装 MCP 服务器
VS Code 设置
  1. 打开命令面板(Cmd ⌘ + Shift + PCtrl + Shift + P
  2. 运行 MCP: Add Server
  3. 选择 HTTP
  4. 输入服务器详细信息:
    • URLhttps://mcp.expo.dev/mcp
    • Name:expo
Codex 设置
Terminal
codex mcp add expo --url https://mcp.expo.dev/mcp

上面的命令会将 MCP 服务器添加到你的 Codex 配置文件中,并提示你使用 Expo 账户进行身份验证。

2

使用 Expo 进行身份验证

安装 MCP 服务器后,你需要进行身份验证。

出现提示时,请在浏览器中使用你的 Expo 账户登录。服务器会自动生成访问令牌。

3

设置本地能力(推荐)

为了获得完整的 MCP 体验,并使用从你的 iOS 模拟器截图、打开 DevTools 和自动化功能等高级特性,请设置本地 Expo 开发服务器:

Terminal
cd /path/to/your-project

# 安装 expo-mcp 包
npx expo install expo-mcp --dev

# 确保你已使用与用于# 通过 MCP 服务器进行身份验证的相同账户登录 Expo CLI
npx expo whoami || npx expo login

# 启动带有 MCP 能力的开发服务器
EXPO_UNSTABLE_MCP_SERVER=1 npx expo start

服务器能力与本地能力

Expo MCP Server 根据你的设置提供两种类型的能力:

服务器能力

仅通过远程 MCP 服务器连接即可使用服务器能力,无需设置本地开发服务器。

本地能力

本地能力需要运行本地 Expo 开发服务器,并提供可与本地开发环境交互的高级功能:

  • 自动化工具:截取屏幕截图、点击视图、按 testID 查找元素
  • 开发工具:打开 React Native DevTools
  • 项目分析:生成 expo-router 站点地图

这些能力可实现更复杂的工作流,例如自动化测试、视觉验证以及更深入的项目检查。要使用本地能力,你需要按照上面的 设置本地能力(推荐) 部分进行操作。

可用的 MCP 能力

工具

ToolDescriptionExample promptAvailability
add_libraryAdd an Expo library to the project using expo install and attach usage instructions when available."add sqlite and basic CRUD to the app"Server
read_documentationFetch a single Expo documentation page and return its content as markdown. Returns up to ~5000 tokens per call. Use offset to paginate through long pages."read the Expo Router docs page"Server
search_documentationSearch the official Expo documentation and return page URLs ranked by relevance for a user query. Use read_documentation to fetch the full content of specific pages, starting from the top."search documentation for CNG"Server (requires an EAS paid plan)
learnLearn Expo how-to for a specific topic and remember it for future conversations. Use this to teach the assistant about specific Expo features or workflows."learn how to use expo-router"Server
workflow_createCreates a new EAS workflow YAML file for Expo projects or fetches workflow syntax documentation. Use this when users want to create CI/CD workflows in .eas/workflows/ or need to learn EAS workflow syntax. After creating, use workflow_validate to validate the file."create a CI/CD workflow for building and deploying"Server
workflow_infoFetches detailed information about a specific EAS workflow run by ID. Use this to check the status, job results, errors, and artifacts of a workflow run. If workflow has multiple jobs, draw them in a diagram to show the dependencies between jobs."get the status of the latest workflow run"Server
workflow_listLists recent EAS workflow runs for a project. Provide either appId (from app.json "extra.eas.projectId") OR appFullName (e.g., "@owner/my-app")."list the recent workflow runs"Server
workflow_logsFetches logs for a specific job in an EAS workflow run. Call without sectionIndex or phase to get a summary of log sections (phase names and line ranges); then call again with sectionIndex or phase to fetch that section."show me the logs for the build job in the workflow"Server
workflow_runTriggers an EAS workflow run from a git reference. Provide either appId (from app.json "extra.eas.projectId") OR appFullName (e.g., "@owner/my-app"). The workflow file must exist at the specified git reference."run the build-and-deploy workflow"Server
workflow_cancelCancels a running EAS workflow. Use workflow_info to get the workflow run ID."cancel the running workflow"Server
workflow_validateValidates EAS workflow YAML syntax and configuration. Use this after creating a workflow to ensure it is valid. Provide either appId (from app.json "extra.eas.projectId") OR appFullName (e.g., "@owner/my-app")."validate my workflow file"Server
build_listLists EAS builds for a project. Provide either appId (from app.json "extra.eas.projectId") OR appFullName (e.g., "@owner/my-app"). Use this to see recent builds, their status, and available artifacts."list the recent builds for this project"Server
build_infoFetches the status and detailed information about a specific EAS build by ID. Use this to check build status, errors, artifacts, and other details."get the status of my latest iOS build"Server
build_logsFetches the logs for a specific EAS build. The build must be completed (finished or errored) to have logs available."show me the logs for the failed build"Server
build_submitSubmits an EAS build to the app store (Google Play Store for Android, App Store for iOS). The build must be a finished build with the appropriate distribution type. Provide either appId (from app.json "extra.eas.projectId") OR appFullName (e.g., "@owner/my-app")."submit the latest build to the App Store"Server
build_runTriggers a new EAS build using a build profile from eas.json. Requires a GitHub repository to be connected to the project. Provide either appId (from app.json "extra.eas.projectId") OR appFullName (e.g., "@owner/my-app")."run a production build for iOS"Server
build_cancelCancels an EAS build that is queued or in progress. Use build_info to check the current status first."cancel the build that is currently in progress"Server
testflight_crashesFetch TestFlight crash data. Without crashId, lists recent crashes. With crashId, returns the full crash log with stack trace."show me recent TestFlight crashes"Server
testflight_feedbackFetch screenshot feedback from TestFlight. Returns feedback metadata including device info, user comments, and screenshot URLs."show TestFlight feedback for my app"Server
appstore_reviewsFetch public App Store customer reviews for an app (rating, title, body, reviewer, territory). For TestFlight beta feedback use testflight_feedback instead.""Server
appstore_reply_reviewPost or edit the public developer response to an App Store customer review. This is a write action: the response is visible to everyone on the App Store, and Apple publishes it after a short review. App Store Connect allows a single response per review, so any existing response is replaced.""Server
appstore_delete_review_responseDelete the public developer response on an App Store customer review. This is a write action: it removes the response from the App Store. No-op-safe — if the review has no response, it reports that nothing was deleted.""Server
playstore_crashesFetch crash and ANR data from Google Play (Android Vitals). Without issueId, lists recent crash/ANR issues. With issueId, returns the full error report with stack trace.""Server
playstore_reviewsFetch user reviews from Google Play. Returns review metadata including author, star rating, device info, and comment text. Note: Google Play only exposes production reviews with text from approximately the last week.""Server
playstore_reply_reviewPost a public developer reply to a Google Play user review, or edit the existing reply. This is a write action: the reply is visible to users on the store listing. Each review has a single developer reply, so replying again replaces it. Reply text is limited to 350 characters.""Server
expo_router_sitemapList all routes (the sitemap) of the current Expo Router project. Use this when you are working with Expo Router and need to know which routes or screens exist in the app."check the expo-router-sitemap output"Local (requires expo-router library)
open_devtoolsOpen React Native DevTools for the running app to debug JavaScript, inspect the component tree, and view console output. Requires a running dev server (Metro) for the project."open devtools"Local
collect_app_logsCollect logs over a short time window from the native device (Android logcat / iOS syslog) and/or the JavaScript console. Use this to debug runtime errors, crashes, or unexpected behavior in a running app."collect app logs from the iOS simulator"Local
automation_tapTap on the running app at the given screen coordinates (x, y) or on the view with the given React Native testID. Provide either both x and y, or testID. Prefer testID when available, as it is resilient to layout changes."tap the screen at x=12, y=22"Local
automation_take_screenshotTake a screenshot of the running app — the full screen, or a specific view if a React Native testID is provided. Use this to visually verify the current UI state."take a screenshot and verify the blue circle view"Local
automation_find_viewFind a view by its React Native testID and return its properties (position, size, and visibility). Use this to verify a view rendered correctly, or to obtain coordinates before calling automation_tap."dump properties for testID 'button-123'"Local

提示词

如果你的 AI 辅助工具支持 MCP 提示词,你可能会看到额外的菜单选项,例如 Claude Code 中的斜杠命令

PromptDescriptionAvailability
expo_router_sitemapQuery the all routes of the current expo-router project using expo-router-sitemap.Local

限制

当前实现有以下限制:

  • 仅支持一次连接一个开发服务器
  • 本地能力的 iOS 支持仅限于模拟器(尚不支持实体设备)
  • 本地能力的 iOS 支持仅在 macOS 主机上可用。

数据隐私

Expo 不会使用发送到 Expo MCP Server 的数据来训练 AI 模型。Expo MCP Server 本身不会运行 AI 模型。它会为你连接的 AI 辅助工具提供 MCP 工具和提示词,例如 Claude Code、Cursor 或 VS Code。

对于服务器能力,Expo MCP Server 可能会访问完成所请求工具调用所需的 Expo 账户和项目数据,例如构建、工作流、文档或 TestFlight 相关数据。结果会通过 MCP 连接返回给你的 AI 辅助工具。

对于本地能力,你开发机器上的数据会通过 Expo MCP Server 进行代理,并返回给你的 AI 辅助工具。例如,当 AI 辅助工具请求截取模拟器截图时,数据流如下:

  1. 本地 Expo 开发服务器从你的模拟器中捕获截图。
  2. 截图发送到 Expo MCP Server。
  3. Expo MCP Server 将截图返回给你的本地 MCP 客户端或 AI 辅助工具。

Expo MCP Server 会将数据返回给你连接的 MCP 客户端,例如 Claude Code、Cursor、VS Code 或 Codex。之后,客户端及其模型提供方可能会应用各自的数据保留、零数据保留(ZDR)和训练策略。在为处理敏感数据的项目启用 MCP 访问之前,请先审查这些策略,包括 HIPAA、SOC 2 或其他受监管工作负载。

其他资源

模型上下文协议文档

进一步了解 MCP 规范和协议细节。