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

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

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

安装

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

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

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

项目与任务列表

我们点击右上角的按钮显示侧边栏,我们看到 Codex APP 是非常经典的三栏布局:左侧是任务列表,中间是对话窗口,右侧是多功能区域。

我们先创建两个项目文件夹,来展示一下它的基础使用。这里我在桌面新建了两个文件夹,作为两个项目文件夹。然后我们来到 Codex ,点击进入项目工作,使用现有文件夹。我们先选择第一个文件夹,这里我让它做一个 html 单页面的宠物洗护店的网页,开始。在左侧边栏里面增加了一个项目,项目的名称就是文件夹的名称,里面展示了正在运行的任务。

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

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

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

这里我询问 Codex:react 框架是什么,回车。这里看到我们开启了 3 个任务并行执行,有两个任务属于项目一,一个任务属于项目 2 。正在执行的任务上面都有一个转圈的小图标,表示 AI 正在工作。我们耐心等待一会。

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

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

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

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

权限控制与沙箱

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

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

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

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

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

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

所以一般情况下,在权限管理这里,我都推荐开启第二档,也就是自动审查。Codex 还有第三档,完全访问权限。开启了这个以后,Codex 完全无视沙箱的限制,可以在电脑上执行一切的操作。不过我们尝试开启的时候,这里出现了很醒目的风险提示,提示我们要谨慎使用。

上下文

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

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

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

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

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

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

AI 生图

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

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

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

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

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

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

这里我来到地图,我截个图,然后把我们的店用箭头标记上。接下来我们直接 Ctrl+V ,Mac 系统是 Command+V ,把截图粘贴过来,开始。

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

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

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

我们看到 Codex 这里显示已引导对话,然后回复我说味不对,我立即改用 AI 生图,重新生成一张。我们使用 Codex 的 steer 功能,在运行中途成功纠正了模型的运行方向。

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

这里我推荐还是默认选择排队,如果需要引导的话,我们直接点击那个引导按钮,或者按快捷键 Ctrl+回车。我们看到 Codex 为我们重新生成了一张图片,并且把它替换到了网页里面,标注出了我们店的位置,效果非常的棒。

计划模式与内置浏览器

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

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

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

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

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

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

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

在下面也可以实时看到它的修改过程。我们刷新一下页面,这个星星就被修改成了实心的。这样我们就通过 Plan 模式配合 Codex 的内置浏览器,成功完成了项目架构的迁移,还顺手修改了一个小 bug 。

代码管理

Codex APP 并不是传统的 IDE ,它并不提供完整的代码编辑功能。我们可以在右上角点击切换文件树,这里虽然可以查看代码,但是没法直接编辑。我们只能点击某行代码来写批注,并不能直接修改代码。我们可以借助第三方的 IDE 来修改代码。

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

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

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

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

除了使用 VSCode ,在这个下拉列表里面,还可以使用其他的 IDE 来打开项目。如果你的电脑上装过这些 IDE ,就可以在这里关联出来。我们也可以在设置常规设置里面选择默认打开的 IDE 。

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

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

Git 回滚

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

我们先看第一个回滚。这里我新开一个对话,我们打开侧边栏,点击加号,浏览器输入我们项目本地开发的地址,这样进入浏览器。我们还是在这里面进行一些批注。我让 Codex 在这里添加一个期望到店时间的功能,直接点击 Ctrl 加回车发送。Codex 为我们添加了期望到店时间这个字段。

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

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

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

我们看到 Codex 的分叉功能,就是在我点击的这个位置,把对话复制了一份。这样复制出来的新对话,就已经剔除掉了我们刚才想删除的部分了。

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

这样我们就把这次提交的 ID 复制下来了。我们回到 Codex ,先让 AI 把代码回退到这个状态,后面就是我们刚才复制的提交 ID 。

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

Git worktree

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

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

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

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

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

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

我们在两个分支上面进行并行开发,因为它们位于两个不同的文件夹,所以互相之间不会产生干扰。

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

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

标签: none

添加新评论