[OpenAI] Codex (APP) 保姆级全攻略,海量实战教程, 一文精通

视频版:https://www.bilibili.com/video/BV1Kk9kBAEJv

最近 Codex APP 的能力越来越全面,变成了 Codex 四大产品形态里面最强的一个。Codex 比起 Claude Code ,额度更高,功能更全,上手更快,免费账户也能用,而且不会出现限速、封号、降智等问题,用过的小伙伴们直呼真香。本期视频带来一个 Codex APP 的完整教程,主要分为以下 12 个章节。

[OpenAI] Codex (APP) 保姆级全攻略,海量实战教程, 一文精通

每个章节里面都会穿插一些重要的知识,对 Codex 的全部功能进行细致讲解。好,废话不多说,我们直接开始。

安装

在安装使用 Codex APP 之前,需要进行 3 个准备工作,也就是需要先把 Git 、Nodejs 还有 VSCode 安装一下。在我上期视频《从 0 开始用国内网络跑通一切 AI Agent 》里面,有详细的操作步骤,不熟悉的朋友们可以参考那一期视频。

接下来我们来到 Codex 的官网,Codex 支持 Windows 跟 Mac 两大操作系统。官网会根据你的操作系统,自动提供对应的安装包。本期视频我主要使用 Windows 来进行演示。Windows 跟 Mac 电脑的功能基本是一致的,唯一欠缺的功能是 computer use ,也就是自动操作电脑的能力。等需要演示这部分的时候,我会切换到 Mac 电脑进行演示。

[OpenAI] Codex (APP) 保姆级全攻略,海量实战教程, 一文精通

然后我们一路点击下一步完成安装。接下来我们把 Codex APP 启动起来,选择 ChatGPT 账户完成登录。现在 ChatGPT 的免费账户也能使用 Codex 了,不过额度比较低。第一次进入软件要选一下希望 Codex 为你处理的工作,Codex 会根据你的选择预装一些内置的插件和 skills 。当然进入软件以后,我们还可以按需安装这些插件。然后选择主要的使用场景,是编程还是日常工作,这些都可以后续在设置里面进行修改。接下来点击设置沙盒按钮,完成沙盒的初始化。关于沙盒这部分的内容,我们下一个章节再来介绍。[OpenAI] Codex (APP) 保姆级全攻略,海量实战教程, 一文精通

项目与任务列表

我们点击右上角的按钮显示侧边栏,我们看到 Codex APP 是非常经典的三栏布局:左侧是任务列表,中间是对话窗口,右侧是多功能区域。[OpenAI] Codex (APP) 保姆级全攻略,海量实战教程, 一文精通

我们先创建两个项目文件夹,来展示一下它的基础使用。这里我在桌面新建了两个文件夹,作为两个项目文件夹。然后我们来到 Codex ,点击进入项目工作,使用现有文件夹。我们先选择第一个文件夹,这里我让它做一个 html 单页面的宠物洗护店的网页,开始。在左侧边栏里面增加了一个项目,项目的名称就是文件夹的名称,里面展示了正在运行的任务。[OpenAI] Codex (APP) 保姆级全攻略,海量实战教程, 一文精通

接下来我们点击左上角的新对话按钮。Windows 上的快捷键是 Ctrl+N ,Mac 系统的快捷键是 command+N ,来开启一个新的对话。我们可以选择新对话属于哪个项目。这里我准备开启一个新的项目,把第二个文件夹也添加进来,点击添加新项目,然后选择我们的第二个文件夹。

[OpenAI] Codex (APP) 保姆级全攻略,海量实战教程, 一文精通

这里输入我第二个项目的需求:用 react 框架做一个网页版待办事项的提醒工具,回车开始执行。

在两个项目并行工作的同时,我们还可以开启更多的工作对话。比如这里我想询问 Codex 一个技术问题,我们把鼠标指向第二个项目,点击这个小按钮,在项目里面开启新的对话。

这里我询问 Codex:react 框架是什么,回车。这里看到我们开启了 3 个任务并行执行,有两个任务属于项目一,一个任务属于项目 2 。正在执行的任务上面都有一个转圈的小图标,表示 AI 正在工作。我们耐心等待一会。[OpenAI] Codex (APP) 保姆级全攻略,海量实战教程, 一文精通

过了一会状态就不一样了。有一个任务上面显示一个绿色标签,表示等待批准;有一个任务上面出现了一个蓝色小点,表示已经执行完毕了;还有一个任务继续转圈。我们来到这个等待批准的任务里面,发现 Codex 需要联网下载 Vite React 项目的模板,正在申请权限。

[OpenAI] Codex (APP) 保姆级全攻略,海量实战教程, 一文精通

我们点击“是”批准,这个任务就继续执行了。又过了一会,三个任务上面都标记了蓝色的小圆点,表示三个任务都执行完毕了。Codex 任务列表非常的简洁美观好用,可以很方便地观察任务状态,可以并行开启多个工作任务,还能高效地从多个任务里面自由地切换。

我们再来看一下左侧边栏任务列表的其他功能。新对话按钮用来开启新的对话,在下面可以选择对应的项目,也可以选择不使用任何的项目,纯粹的闲聊。这种不属于任何项目的对话,都会被收录到任务列表的最下面,也就是对话这一栏里面。

[OpenAI] Codex (APP) 保姆级全攻略,海量实战教程, 一文精通

左侧边栏第二个按钮,快捷键是 Ctrl+G ,Mac 电脑的快捷键是 command+G ,可以搜索近期的对话历史。不过我试了一下,这个功能只能搜索到对话的标题,它无法搜索到对话里面的内容。这里补充一下,每个对话标题都是 AI 根据对话内容自动摘要生成的。我们也可以选择某个对话,双击,对它进行一个重命名。如果我们不再需要某个对话了,可以点击这个归档对话的小按钮确认,然后我们的对话就在左侧边栏消失了。在设置已归档对话里面,可以找到我们删除的对话,点击取消归档就可以把它还原回来。左侧边栏还有两个按钮,插件与自动化,这个等我们在后面的章节再来看。[OpenAI] Codex (APP) 保姆级全攻略,海量实战教程, 一文精通

权限控制与沙箱

接下来我们来看一下中间的对话页面。这里最显眼的功能就是权限控制。

[OpenAI] Codex (APP) 保姆级全攻略,海量实战教程, 一文精通

Codex 的权限控制全部是围绕沙箱来展开的,这点跟 Claude Code 有本质上的不同。Claude Code 的沙箱功能需要手动开启,Claude Code 的沙箱更像是一层可以额外开启的保护,而 Codex 的沙箱,它是整个权限系统运行的地基。

[OpenAI] Codex (APP) 保姆级全攻略,海量实战教程, 一文精通

Codex 会把当前的项目文件夹作为一个沙箱进行管理。在默认权限下面,Codex 具有读取修改沙箱内所有文件的权限。在默认模式下,Codex APP 可以直接修改沙箱内,也就是项目文件夹的所有文件,它并不会一个个地跑来问你。我觉得这点非常的方便,也是符合正常的使用习惯的。当然我们也可以通过设置,改成逐个文件修改都需要审批,这个在视频的后半段高级设置这个我们再来讲。[OpenAI] Codex (APP) 保姆级全攻略,海量实战教程, 一文精通

Codex 的沙箱有两个默认限制。第一点是 Codex 不能修改沙箱外的文件,第二点是 Codex 的沙箱是禁止联网的。这两点硬性限制,它并不是靠模型自觉遵守,而是 Codex 使用操作系统底层功能实现的。不同操作系统的实现机制是不一样的,比如 MacOS 使用的是系统内置的 Seatbelt Sandbox 机制。

Codex 的沙箱功能是前阵爆火的 Harness engineering 概念的一个典型的工程实现,用操作系统级别的机制把 AI 的能力约束在一个可控的范围之内。这也很形象地体现了 Harness 这个词的原始含义,也就是马具。AI 就像一匹能力很强的马,而沙箱权限审批机制这些,就是套在它身上的马具。

如果 Codex 需要修改沙箱外文件,或者需要联网,可以向用户申请权限,这个操作叫做 escalate ,也就是提权操作。在默认情况下,提权操作都是需要人工审核同意的。Codex 为我们提供了第二个档位,也就是自动审查。启动了自动审查以后,Codex 会自动调用一个小模型,对提权操作进行安全性审查。如果发现是低风险的操作,就会直接放行。只有高风险的操作才会触发人工审查,这也是我最推荐的模式。自动审查使得绝大部分操作不需要人工审批,在获取了较高安全性的同时,还极大提升了使用的便利度。[OpenAI] Codex (APP) 保姆级全攻略,海量实战教程, 一文精通

所以一般情况下,在权限管理这里,我都推荐开启第二档,也就是自动审查。Codex 还有第三档,完全访问权限。开启了这个以后,Codex 完全无视沙箱的限制,可以在电脑上执行一切的操作。不过我们尝试开启的时候,这里出现了很醒目的风险提示,提示我们要谨慎使用。[OpenAI] Codex (APP) 保姆级全攻略,海量实战教程, 一文精通

上下文

在权限控制的右边有一个圆圈,展示的是当前上下文使用情况。这里翻译得不太好,准确的翻译应该是上下文使用量信息,显示的是这个对话里的历史对话内容占用了多少模型上下文空间。当上下文超过限制的时候,Codex 会自动对对话历史进行压缩,从而释放出更多的上下文空间。我们也可以输入斜杠,选择压缩选项,手动触发一次上下文压缩。压缩完成以后,Codex 会把之前对话的一些不重要的内容排除掉,可以有效提高 AI 的专注力,并且降低 TOKEN 消耗。[OpenAI] Codex (APP) 保姆级全攻略,海量实战教程, 一文精通

不过在 AI Agent 领域,有一个通用经验是清空好于压缩。因为过多的历史会话,会干扰 AI 的注意力。当我们让 AI 执行完一个任务以后,最好是开一个新的对话,清空上下文。这样有助于 AI 把注意力全部集中到新的任务上面来,从而提高任务的执行效果。

在上下文窗口的右边是模型选择,可以根据任务的复杂程度选择模型的思考强度。下面可以切换模型,这里一般我们就选择最新的模型,比如现在是 GPT-5.5 。

[OpenAI] Codex (APP) 保姆级全攻略,海量实战教程, 一文精通

下面还有一个速度选项,可以选择标准还有快速。在快速模式下,会提升 50% 的 AI 推理速度,但是快速模式会消耗两倍的套餐用量。如果你的任务很急,但是套餐的余量还有很多,可以选择开启。

说到套餐余量,我们可以在左下角的设置剩余额度里面找到你现在的套餐余量。这里有两个限额,分别是 5 小时限额,还有周限额。这两个限额任意一个到达上限,Codex 都不能继续使用了。

[OpenAI] Codex (APP) 保姆级全攻略,海量实战教程, 一文精通

两个限额都有对应的重置时间,时间到了以后,额度会重置成 100%。右边还有一个语音输入功能,可以让我们跟 AI 的交互从打字变成口喷,非常的好玩。

AI 生图

Codex 内置了 AI 画图功能,而且它使用的是当今最强的 AI 生图模型 GPT-Image-2 。这是刚才我让 Codex 为我们生成的宠物洗护的网站,我们看到它已经为我们配了一些图片。这里我看了一下,这些图片其实都是网络上的免费素材。这里有两个配图非常的不合适。首先这里的店内环境展示的都是一些宠物图片,它并不是一个真正的宠物洗护店的环境。第二点是门店信息,这里画的地图也太粗糙简陋了。[OpenAI] Codex (APP) 保姆级全攻略,海量实战教程, 一文精通

我们就针对这两个问题,让 Codex 帮我们来修改一下。我们来到 Codex ,新开一个对话,项目选择宠物洗护店那个。我让 Codex 调用 AI 绘图功能,绘制三个店内环境的轮播图,三个图应该分别展示店内的不同区域。

我们看到 Codex 为我们生成了三张图片,基本都保持了店内装修风格的一致性。

[OpenAI] Codex (APP) 保姆级全攻略,海量实战教程, 一文精通

然后在网页这边也替换成了 3 张图片的轮播图,非常的不错。

接下来我们要改的是门店信息,这里的地图太简陋了。我们回到 Codex ,在宠物店应用这里新开一个对话,输入我的指令:

我们的店在陕西北路 1620 号,就是地图上标记的这个点。你按我发你的位置,用可爱清新的宠物风格的地图把我们的店标记上,然后修改网页里的门店位置信息。

这里我来到地图,我截个图,然后把我们的店用箭头标记上。接下来我们直接 Ctrl+V ,Mac 系统是 Command+V ,把截图粘贴过来,开始。[OpenAI] Codex (APP) 保姆级全攻略,海量实战教程, 一文精通

在 Codex 的执行过程中,我随时跟踪进度。这里我发现了一个问题,就是他画的这个地图是用 SVG 生成的,效果很差。我原本是想让他调用内置的 AI 生图模型来画。借着这个机会,我要介绍 Codex 的一个强大功能。它的英文名叫做 steer ,中文翻译过来是引导。这个词的英文原文的意思是打方向盘。当我们发现 AI 在执行过程中理解错了我们的意思,就不应该让它继续执行了,这时候应该及时接管方向盘,人工进行引导干预。[OpenAI] Codex (APP) 保姆级全攻略,海量实战教程, 一文精通

这里我截个图发送给 Codex 说:你这图不行,应该调用 AI 绘图能力。

在默认模式下,这个新的指令进入了指令队列排队,需要 AI 把上一轮全部执行完,才能执行我们新输入的指令。我们可以点击这里的引导按钮,英文版叫做 steer ,中途接管方向盘,引导干预 AI 的执行。

[OpenAI] Codex (APP) 保姆级全攻略,海量实战教程, 一文精通

我们看到 Codex 这里显示已引导对话,然后回复我说味不对,我立即改用 AI 生图,重新生成一张。我们使用 Codex 的 steer 功能,在运行中途成功纠正了模型的运行方向。[OpenAI] Codex (APP) 保姆级全攻略,海量实战教程, 一文精通

在 Codex 的设置常规设置里面,有一个跟进行为。这里可以设置在执行过程中,我们输入的指令是在后面排队,还是直接进入引导。

[OpenAI] Codex (APP) 保姆级全攻略,海量实战教程, 一文精通

这里我推荐还是默认选择排队,如果需要引导的话,我们直接点击那个引导按钮,或者按快捷键 Ctrl+回车。我们看到 Codex 为我们重新生成了一张图片,并且把它替换到了网页里面,标注出了我们店的位置,效果非常的棒。[OpenAI] Codex (APP) 保姆级全攻略,海量实战教程, 一文精通

计划模式与内置浏览器

在对话窗口这里有一个加号,里面有三个功能。首先是添加照片和文件,我们可以用照片或者文件给 AI 补充上下文信息,或者可以像刚才一样通过复制粘贴,直接把照片或者文件粘贴进对话窗口。下面是插件,目前预装了 4 个插件,分别对应办公三大件( Word,Excel,PPT ),还有浏览器自动化。[OpenAI] Codex (APP) 保姆级全攻略,海量实战教程, 一文精通

我们主要看这里的计划模式。开启了计划以后,Codex 就不会立即上手干活,而是先为我们输出一份完整的工作计划,跟我们进行了确认以后再干活。对于所有的复杂任务,建议都先开启计划模式,确保你能跟 AI 对齐颗粒度,让 AI 能够精准理解我们的意图。

我们在 Codex 里面打开计划模式,输入我们的需求:

把这个项目改造成 next js 框架

在计划模式里面,Codex 会很倾向于使用这种问题卡片的形式跟用户进行沟通。这里他询问我希望使用哪种项目形态,我选择 APP Router 加 TS 。然后样式迁移希望怎么处理,这里我选择改 Tailwind 。迁移完成要不要同时启动本地开发服务器验证,这里我选择构建加启动。Codex 为我们生成了一份完整的计划,我仔细阅读了一遍,没有发现问题。这里我们点击是,实施此计划。[OpenAI] Codex (APP) 保姆级全攻略,海量实战教程, 一文精通

代码编写完成以后,Codex 可以启动它内置的浏览器进行自动化的测试,这样任务就完成了,开发服务器也启动起来了。在右侧的多功能窗口,Codex 自动打开了浏览器。我们可以点击这里的展开面板按钮,看一下项目的完整状态。我们看到这次架构迁移非常的成功,页面上所有的元素都完整地保留了,非常的不错。[OpenAI] Codex (APP) 保姆级全攻略,海量实战教程, 一文精通

如果对某个部分不满意,我们可以点击这里的批注按钮,然后选中一个元素,在这里可以添加评论。比如这里我说为什么这个星星是空心的,然后在下面点击发送,让 AI 帮我们修改一下。

[OpenAI] Codex (APP) 保姆级全攻略,海量实战教程, 一文精通

在下面也可以实时看到它的修改过程。我们刷新一下页面,这个星星就被修改成了实心的。这样我们就通过 Plan 模式配合 Codex 的内置浏览器,成功完成了项目架构的迁移,还顺手修改了一个小 bug 。[OpenAI] Codex (APP) 保姆级全攻略,海量实战教程, 一文精通

代码管理

Codex APP 并不是传统的 IDE ,它并不提供完整的代码编辑功能。我们可以在右上角点击切换文件树,这里虽然可以查看代码,但是没法直接编辑。我们只能点击某行代码来写批注,并不能直接修改代码。我们可以借助第三方的 IDE 来修改代码。[OpenAI] Codex (APP) 保姆级全攻略,海量实战教程, 一文精通

在进行代码管理之前,我们需要先把项目初始化成一个 git 工程。这里我们新开启一个对话,输入提示词:

把项目初始化成一个 git 工程,注意排除掉不需要的文件。

Codex 先为我们创建了 .gitignore 文件,把一些不需要提交的内容排除出去。Codex 帮我们把项目初始化成了 Git 仓库。

初始化成 Git 仓库以后,右上角又多了很多按钮。这里有一个 VSCode 按钮,我们点击一下,我们就可以快捷地使用 VSCode 来查看和修改代码。

[OpenAI] Codex (APP) 保姆级全攻略,海量实战教程, 一文精通

除了使用 VSCode ,在这个下拉列表里面,还可以使用其他的 IDE 来打开项目。如果你的电脑上装过这些 IDE ,就可以在这里关联出来。我们也可以在设置常规设置里面选择默认打开的 IDE 。[OpenAI] Codex (APP) 保姆级全攻略,海量实战教程, 一文精通

我还可以要求 AI 把代码帮我提交到 Github 上面。Codex 需要我先在 Github 上面为它创建一个仓库。这里我来到 Github ,点击这个 new 按钮,仓库的名字还叫 pet_care ,点击创建。

[OpenAI] Codex (APP) 保姆级全攻略,海量实战教程, 一文精通

创建出来以后把这个地址复制一下,我们回到 Codex 扔给他,成功帮我们把代码推送到了 Github 上面。我们点击这个链接,看到我们的代码已经备份到了 GitHub 的网站上面。我们可以使用对话的方式进行一切 Git 与 Github 操作,这都属于编程的基础知识,本期视频我就不展开讲了。[OpenAI] Codex (APP) 保姆级全攻略,海量实战教程, 一文精通

Git 回滚

本期视频我主要讲两个进阶技巧。第一个是使用 Git 对开发过程进行回滚,第二个技巧是 Git WorkTree 。

我们先看第一个回滚。这里我新开一个对话,我们打开侧边栏,点击加号,浏览器输入我们项目本地开发的地址,这样进入浏览器。我们还是在这里面进行一些批注。我让 Codex 在这里添加一个期望到店时间的功能,直接点击 Ctrl 加回车发送。Codex 为我们添加了期望到店时间这个字段。[OpenAI] Codex (APP) 保姆级全攻略,海量实战教程, 一文精通

当 AI 完成一个功能的开发以后,我们就使用 Git 把它备份保存一下。这里点击提交,

[OpenAI] Codex (APP) 保姆级全攻略,海量实战教程, 一文精通

填写一个提交消息,点击继续。这样最新的代码改动就以 Git 的方式保存下来了。接下来我让 AI 把期望到店时间放到联系人的上面,开始。Codex 为我们完成了修改,我们还是从内置的浏览器看一下效果。这个字段跑到了最上面,不过这么一改,我觉得更难看了,我后悔了。我觉得还是把它放到原来的位置比较好。这里我想做的是把这一次的对话,包括这一次的代码改动,全部回滚掉,最好是当做无事发生。

[OpenAI] Codex (APP) 保姆级全攻略,海量实战教程, 一文精通

这里我们先借助 Codex 的分叉功能,英文是 fork 。我们先把对话回滚掉。我们找到上一次对话结尾的位置,点击这个分叉按钮,选择派生到本地。

[OpenAI] Codex (APP) 保姆级全攻略,海量实战教程, 一文精通

我们看到 Codex 的分叉功能,就是在我点击的这个位置,把对话复制了一份。这样复制出来的新对话,就已经剔除掉了我们刚才想删除的部分了。[OpenAI] Codex (APP) 保姆级全攻略,海量实战教程, 一文精通

不过分叉功能只能回退对话历史,它不能同步回退代码。所以这里我们要做的是把代码一同回退掉。我们可以在 VSCode 里面点击这个 source control 按钮,查看所有的 Git 提交。这里我需要把代码回退到生成期望到店时间的这个状态上。我们点击右键,点击这个 copy commit hash ,

[OpenAI] Codex (APP) 保姆级全攻略,海量实战教程, 一文精通

这样我们就把这次提交的 ID 复制下来了。我们回到 Codex ,先让 AI 把代码回退到这个状态,后面就是我们刚才复制的提交 ID 。[OpenAI] Codex (APP) 保姆级全攻略,海量实战教程, 一文精通

我们看到代码回退成功了,在浏览器里可以看到这个期望到店时间又变回了原来的位置。这样我们就使用了 Codex 的对话分岔功能,加上 Git 操作,成功地把这一次不需要的改动,从代码层面和对话历史层面进行了完全的回滚。

Git worktree

接下来我们来看下一个功能,就是 Git worktree 。WorkTree 这个名字听起来比较唬人,其实它本质上就是用 git 创建一个新的分支,然后把这个新分支的代码完整地复制到一个新的文件夹里面。这个新文件夹就是一个 WorkTree 。主文件夹和分支文件夹可以并行工作,我们可以在两个文件夹里面各自修改代码,互相不干扰。我们可以基于主干创建多个分支,它们在底层通过 git 关联在一起。分支文件夹的改动,随时都能轻松合并回主干。

[OpenAI] Codex (APP) 保姆级全攻略,海量实战教程, 一文精通

找到我们的项目,右键创建永久工作树。这里起个名字,我想让第一个工作树专注优化客户评价这个部分,我给它加个后缀叫 customer rating 。Codex 把整个项目复制到了一个单独的文件夹里面,它跟主干已经不是同一个文件夹了。我们在分支里面做的操作不会影响到主干。这里我们再建一个工作树,第二个工作树主要用来负责优化下面的门店信息,还有这里的地图。我们给第二个树也起个名字。这样我们就拥有了两个工作树分支,它们都位于不同的文件夹下面,所以它们之间的并行工作不会影响到主干。

[OpenAI] Codex (APP) 保姆级全攻略,海量实战教程, 一文精通

这里我们来测试一下。我们先打开第一个分支新对话,输入我们的需求:

优化一下客户评价部分,多写几个评价,做一个动画轮播效果,

开始。然后我们来到第二个分支,创建一个新的对话:

优化一下门店信息部分,让门店信息跟地图上下排列,不要左右排列,把地图展示全。

我们在两个分支上面进行并行开发,因为它们位于两个不同的文件夹,所以互相之间不会产生干扰。[OpenAI] Codex (APP) 保姆级全攻略,海量实战教程, 一文精通

两个分支在各自的文件夹里面都开发完毕了。接下来我们可以把它合并回主干。里直接输入合并回主干,两个分支都一样的操作,合并回主干。

[OpenAI] Codex (APP) 保姆级全攻略,海量实战教程, 一文精通

两个分支都成功合并进了主干。我们在浏览器这边可以看到,客户评价已经优化过了,门店信息也从左右排布变成了上下排布,地图展示得更全了。这样我们使用 Git worktree 功能,高效并行开发了两个任务。当我们的分支使用完毕,我们可以直接右键移除,把两个临时的分支移除掉,然后回到主干继续工作。