<span style="font-size:16px;">（React/React Native项目适配）</span>

分两大块：一、两种接入MCP服务方式；二、全套配置保证每次提问自动调用MCP工具，口语化、实操向，适配你平时写React/React Native业务场景。

一、Codex接入MCP两种方案（全局所有项目生效/仅当前前端项目生效）

Codex所有MCP配置统一写在config.toml，分全局配置（所有React/RN项目自动加载）、项目专属配置（只当前仓库启用），二选一推荐全局，不用每个项目重复配。

方案1：命令行一键添加MCP（新手最快，自动写入全局配置）

适合文件MCP、代码检索MCP、浏览器Playwright、GitHub、代码RAG等通用MCP服务，不用手写配置文件。

1. 打开电脑终端，执行添加指令，示例接入官方文件操作MCP：

codex mcp add filesystem -- npx -y @modelcontextprotocol/server-filesystem

格式通用模板：

codex mcp add 自定义服务名 -- 启动MCP的命令

1. 添加完成后执行校验，查看已接入全部MCP服务：

codex mcp list

列表里显示状态enabled即接入成功。

1. 完全关闭Codex桌面软件，重新打开，配置才会热加载生效。

方案2：手动编辑config.toml精细配置（推荐，可控自动调用权限）

1）全局MCP配置（所有React/RN项目永久生效）

配置文件路径：

• Windows：C:\Users\你的用户名\.codex\config.toml
• Mac：~/.codex/config.toml

打开文件，在末尾追加MCP服务配置，举两个前端高频MCP示例：

# 1. 文件系统MCP：读写React/RN项目源码、读取组件、批量修改文件
[mcp_servers.filesystem]
command = "npx"
args = ["-y", "@modelcontextprotocol/server-filesystem"]
enabled = true
startup_timeout_sec = 60
tool_timeout_sec = 120

# 2. Playwright浏览器MCP：测试页面、截图、校验RN Web端交互
[mcp_servers.playwright]
command = "npx"
args = ["-y", "@playwright/mcp@latest"]
enabled = true

2）项目专属MCP（仅当前React仓库生效）

在你的React/RN项目根目录新建文件夹.codex，内部创建config.toml，写入同上MCP配置，仅打开这个项目时才加载这套MCP，适合多仓库区分工具权限。

注意：项目文件夹必须标记为「受信任项目」，Codex才会读取本地配置，打开Codex打开项目弹窗勾选信任即可。

验证MCP接入是否成功

打开Codex对话框输入指令：

/mcp

会展示所有已连接、激活的MCP服务，显示active代表服务正常运行。

二、全套配置：确保每一次提问自动调用MCP，不用手动触发

很多人接入MCP后，AI只会偶尔调用工具，需要手动提醒才会读取文件、检索代码，下面4步彻底解决，写React组件、RN页面、重构、查报错时自动启用MCP工具。

步骤1：开启全局MCP自动审批，消除弹窗阻断

默认Codex调用文件、浏览器会弹出审批弹窗，打断自动流程，修改全局config.toml顶层全局安全配置：

# 全局MCP工具自动放行，不用每次手动点允许
default_tools_approval_mode = "auto"
sandbox_mode = "workspace-write"
[features]
# 开启工具自动推理，AI自主判断何时调用MCP
auto_tool_invoke = true
multi_agent = true

• auto：读写文件、查询代码、浏览器操作全部自动放行，无弹窗；
• 如果你有数据安全顾虑，可改为writes：只读文件自动放行，修改文件弹窗确认。

步骤2：添加全局前置规则，强制React/RN场景优先调用MCP

1. 进入Codex桌面右上角「设置-自定义指令/全局规则」；
2. 粘贴固定前置约束（适配你的React/React Native开发）：

当前为React/React Native + TypeScript前端项目，所有开发任务必须优先调用已接入的MCP工具：
1. 读取、检索项目组件、hooks、页面代码，调用filesystem MCP；
2. 页面调试、交互测试、样式校验，调用playwright MCP；
3. 重构、查依赖、定位报错时，自动扫描本地源码，禁止凭空编造代码；
4. 生成代码前，必须通过MCP读取项目现有规范、组件结构，贴合现有项目写法；
禁止跳过MCP工具直接生成代码，缺少项目上下文必须先读取本地文件。

保存，这条规则每次新开对话都会自动加载，AI会主动判断什么时候启用MCP工具。

步骤3：项目专属引导文件，强化仓库MCP调用逻辑（React/RN必配）

在你的前端项目根目录新建.codex/AGENTS.md，写入项目专属强制规则，Codex打开项目会自动读取，优先级高于全局设置：

本仓库技术栈：React + TypeScript / React Native + Expo
所有需求：页面开发、组件封装、hooks编写、样式重构、Bug修复、类型优化，
第一步必须调用filesystem MCP读取现有项目文件、组件、类型定义；
生成代码必须匹配仓库现有目录结构、TS规范，禁止脱离本地代码凭空编写；
需要页面效果验证时，自动调用Playwright MCP运行页面测试交互。

步骤4：搭配Skill联动，双重强化自动调用（你在用的mattpocock-typescript-skills）

你已经接入TS/React专用Skill，两者叠加效果最好：

1. 打开.codex/skills/mattpocock-typescript-skills/SKILL.md；
2. 在文件头部YAML增加强制MCP联动规则：

---
description: React/TS编码专用技能，执行过程中自动调用filesystem MCP读取项目组件、类型文件，生成代码前扫描本地源码
match_keywords:
  - react
  - react native
  - tsx
  - hooks
auto_trigger: true
require_mcp: ["filesystem"]
---

保存重启Codex，只要触发TS/React技能，会强制同步拉起文件MCP读取项目代码，完全不会脱离本地仓库写代码。

三、两种调用模式（全自动+手动兜底）

模式1：全自动调用（配置完成后默认）

正常直接发提问，不需要额外指令，AI自主判断是否启用MCP：

1. 「写一个用户列表React组件」→ 自动读取项目通用Table组件、TS类型；
2. 「修复RN页面样式错位Bug」→ 自动读取页面源码，启动浏览器MCP调试；
3. 「重构项目全部hooks，消除any类型」→ 批量读取本地ts文件批量修改。

模式2：手动强制触发（自动失效兜底）

对话开头输入/mcp强制启用全部工具，再发需求：

/mcp 读取项目Login组件，优化TypeScript类型，适配React Native

四、常见不生效排查方案

1. 修改config.toml、SKILL.md、AGENTS.md后没有完全退出Codex重启：配置不会实时热更新，必须彻底关闭软件重开；
2. 项目未标记「受信任目录」：Codex会屏蔽项目内MCP配置，打开项目弹窗勾选信任；
3. MCP服务启动超时：修改startup_timeout_sec = 60延长启动等待时间；
4. 提问关键词不匹配：补充全局自定义指令，增加react native、tsx、组件等匹配词；
5. 全局auto_tool_invoke = false：关闭自动工具推理，改成true才能自主调用MCP。

五、React/RN开发者优化小技巧

1. 同时接入文件MCP+浏览器MCP，实现「读源码→写代码→自动页面测试」完整闭环；
2. 搭配之前的mattpocock-typescript-skills，MCP读取项目类型规范，Skill约束TS代码质量，双重保障；
3. 企业私有代码库可额外接入Code RAG MCP，自动检索内部业务组件、接口文档。