课程内容受保护，暂不支持复制
工具与资源 / AI 编程工具
AI 工具箱AI 编程工具预计 10 分钟

网页版 ChatGPT 操作本地文件：WebCodex 安装与连接

本节以文字教程为主，按需要选择工具和模板，不必按照固定顺序学习。

这一章你会完成什么阅读下方文字教程，按照步骤完成练习并记录自己的结果。

用到的链接

用途入口
WebCodex 项目GitHub 项目主页
下载桌面版GitHub Releases
项目安装说明中文版安装与连接指南
创建隧道OpenAI Tunnels
创建密钥OpenAI API keys
打开 ChatGPTChatGPT 网页版

第 1 步：下载并安装 WebCodex

打开上面的 GitHub Releases，找到桌面版安装包。不要把源代码压缩包当成安装包下载。

电脑类型选择的安装包
Apple Silicon Mac（M 系列）文件名包含 darwin-arm64，以 .dmg 结尾
Intel Mac文件名包含 darwin-x64，以 .dmg 结尾
Windows x64文件名包含 win32-x64，以 .exe 结尾

下载后按安装界面完成安装，打开 WebCodex Desktop。截图里演示的是 v0.4.1，实际下载时以项目发布页为准。

下载安装包

视频 01:25：在 Assets 中选择对应系统的桌面版安装包。

如果 macOS 提示无法打开，可按项目安装说明，到 系统设置 → 隐私与安全 → 仍要打开 完成首次启动。

完成标志： 能正常进入 WebCodex 主界面。

第 2 步：添加本地工作区

  1. 在 WebCodex 中点击 添加项目。
  2. 选择 在此电脑使用 WebCodex。
  3. 点击 选择文件夹，选择准备好的本地文件夹。
  4. 点击 Open／打开。
  5. 确认显示的项目路径正确，再点击 配置 WebCodex。

添加本地项目

视频 01:36：选择“在此电脑使用 WebCodex”。

确认工作区

视频 01:41：确认要交给 ChatGPT 使用的文件夹，再配置 WebCodex。

这个文件夹就是本次操作的项目目录。第一次可以用空文件夹测试；后续操作已有项目时，选择那个项目实际所在的目录。

完成标志： 工作区已添加，本机运行环境正常启动。若版本提供“查看运行诊断”，确认 Service、Runner、Project 均已就绪，项目路径正确。项目说明

第 3 步：创建 Tunnel，拿到 Tunnel ID

  1. 打开 OpenAI Tunnels。
  2. 点击右上角 Create tunnel。
  3. 填写名称，例如 webcodex，以及描述。
  4. 选择对应的 Organization。
  5. 在 ChatGPT workspaces 中选择你准备用来聊天的工作区。
  6. 点击 Create，回到列表后复制新建隧道的 ID。

创建隧道

视频 02:06：填写隧道信息，注意下方的 ChatGPT workspaces 选项。

这一步最容易漏掉的是工作区。 只创建隧道、没有关联目标 ChatGPT 工作区，可能导致后面在 ChatGPT 中找不到它。创建隧道和使用隧道也需要相应的平台权限。OpenAI 隧道说明

完成标志： 平台中出现新建的 Tunnel，并能复制它的 ID。使用自己的 ID，不要照抄截图。

第 4 步：创建 API Key，填回 WebCodex

  1. 打开 OpenAI API keys。
  2. 点击 Create new secret key。
  3. 输入名称，选择项目和过期时间。
  4. 按项目文档建议，使用 Restricted 权限，并授予 Tunnel 所需的 Read + Use 权限。
  5. 创建后复制密钥，回到 WebCodex。
  6. 点击 打开连接设置，找到 Tunnel 配置区域。
  7. 分别填写 Tunnel ID 和 Tunnel API key，点击 保存配置／保存设置。

创建密钥

视频 02:29：密钥创建窗口。名称、项目和有效期按自己的情况填写；截图中的权限选项不是必须照抄的设置。

填写连接配置

视频 01:48：WebCodex 中分别填写 Tunnel ID 和 Tunnel API key。

不要混淆这两个字段：Tunnel ID 是隧道标识；API Key 是连接隧道使用的密钥。 API Key 只填在本机 WebCodex 配置里，不需要粘贴进 ChatGPT 对话或插件的 Tunnel ID 输入框。

这套流程中，密钥用于隧道连接；它本身不能作为“所有使用都免费”或“无限额度”的依据。

完成标志： 两项配置保存成功，配置检测能识别到 Tunnel ID 和 API Key。

第 5 步：启用安全隧道

  1. 进入 WebCodex 的 连接 页面。
  2. 选择 OpenAI Secure Tunnel。
  3. 点击 启用安全隧道／启动安全隧道。
  4. 等待状态显示 OpenAI Secure Tunnel 已就绪。

隧道已就绪

视频 02:42：本机隧道已就绪，下一步去 ChatGPT 创建连接。

“已就绪”表示本机隧道准备好了。是否真正打通，还需要完成后面的聊天测试。使用期间保持 WebCodex 及本机运行环境运行。

完成标志： 隧道已就绪，没有启动错误。

第 6 步：在 ChatGPT 打开开发者模式

  1. 打开 ChatGPT 网页版，进入 Settings／设置。
  2. 选择 Security and login／安全与登录。
  3. 向下找到 Developer mode／开发者模式。
  4. 打开开关。

打开开发者模式

视频 03:02：Developer mode 开关处于开启状态。

如果没有这个选项，先确认当前账号或工作区是否支持，以及管理员是否允许。仅修改本地 WebCodex 设置，不能让网页端出现未开放的入口。

第 7 步：添加 WebCodex 插件

  1. 回到 ChatGPT，进入左侧 Plugins。
  2. 点击右上角的 ＋，创建插件。
  3. Name 输入 WebCodex，描述按需填写。
  4. Connection 选择 Tunnel。
  5. 在 Available tunnels 中选择刚创建的隧道；如果界面支持手动输入，也可以填写自己的 Tunnel ID。
  6. Authentication 选择 No Auth；其他版本可能写作 None 或 No authentication。
  7. 阅读界面说明，确认后勾选继续，点击 Create。
  8. 创建后若详情页出现 Connect／连接，点击完成连接。

创建WebCodex插件

视频 03:17：选择 Tunnel 和 No Auth 后创建插件。

这里的 No Auth 是视频所用 WebCodex Tunnel 配置的做法，不代表任意远程服务都应该关闭认证。WebCodex 连接说明

完成标志： ChatGPT 中出现 WebCodex 插件，可以在新对话里选用。

第 8 步：先测试能否读取本地文件

  1. 新建一个 ChatGPT 对话。
  2. 输入 @，选择 WebCodex。
  3. 发送下面这段提示词。
请通过 WebCodex 列出可用项目，找到我刚添加的工作区，
列出它的顶层文件和文件夹。如果目录为空，请如实告诉我。

选择WebCodex

视频 03:34：输入 @ 后，在列表里选择 WebCodex。

首次调用时会出现授权提示。查看它准备执行的操作，再选择 Allow once（本次允许）；视频演示的是 Always allow（始终允许），按自己的使用需求选择即可。

工具调用授权

视频 03:42：首次调用的权限确认界面。

读取结果

视频 03:47：ChatGPT 返回工作区为空；演示使用的是新建文件夹，因此这是正常结果。

完成标志： ChatGPT 确实调用了 WebCodex，并返回与你本地文件夹一致的结果。只回复“我可以帮你”，或让你手动上传文件，还不能算测试成功。

第 9 步：测试写文件，再让它开发项目

读取成功后，可以先做一个小测试。下面是补充的验证提示词，方便确认文件真的写到了电脑里：

请在刚才的工作区中新建 webcodex-test.txt，内容为：
网页版 ChatGPT 已连接到本地工作区。
如果同名文件已经存在，请不要覆盖，改用一个新文件名。
创建后重新读取这个文件，并告诉我它的完整路径和内容。

到本地文件夹检查文件是否存在、内容是否正确。测试通过后，就可以开始正式任务。

视频里的例子是开发一个成都美食地图网站，可以这样描述：

请在当前工作区开发一个成都美食地图网站，包含美食地点展示、
分类筛选和地点详情。把代码直接保存到工作区，完成后告诉我
生成了哪些文件，以及如何在本地打开或启动。

开发网站

视频 04:01：发送网站需求，让 ChatGPT 通过 WebCodex 执行。

等它完成后，根据返回的文件路径或启动方式查看结果。如果项目需要启动服务，也可以继续说：

请检查这个项目的启动方式，运行必要的启动命令，
并告诉我浏览器应该访问哪个本地地址。

网站效果

视频 04:10：演示项目在浏览器中的实际页面。生成效果与耗时会随任务变化。

完成标志： 文件确实保存在本地，网页能够按返回的方式打开或运行。

第 10 步：设置登录时启动（可选）

如果准备经常使用，进入 WebCodex → 设置 → 后台与启动，勾选 登录时启动 WebCodex。

后台启动设置

视频 04:24：打开登录时启动选项。

它会让应用在系统登录后后台启动。下次使用前，仍要确认项目和隧道状态正常。关闭主窗口与退出应用不同；真正退出 WebCodex 后，本机工具连接就无法继续工作。项目说明

常见问题：卡在哪一步，就检查哪里

遇到的情况优先检查
ChatGPT 没有 Developer mode 或添加插件入口当前账号、工作区策略及管理员授权
Available tunnels 列表里没有刚创建的隧道Tunnel 是否关联当前 ChatGPT 工作区；是否有隧道 Read + Use 权限
WebCodex 无法启动安全隧道ID 和 Key 是否保存成功、Key 是否过期、网络是否可达
需要代理才能连接WebCodex 设置中的 OpenAI Tunnel 网络；使用自己实际的代理地址和端口，保存后重启隧道
显示已就绪，ChatGPT 却读不到文件插件选择的 Tunnel 是否正确，本机项目是否 Ready，再做一次真实读取
出现 project_not_loaded回到项目页确认目录，点击重新加载项目
返回的文件不对检查选中的工作区路径，多个项目时在提示词中明确指定项目
重启电脑后无法使用确认 WebCodex 已运行、本机项目已加载、隧道已启动

最后检查这三项

  • ChatGPT 能列出你选择的本地工作区文件。
  • ChatGPT 能在该工作区创建文件，并重新读取内容。
  • 你能在电脑上找到生成的文件，或打开生成的网站。

三项都通过，就可以把日常的文件处理、代码修改和本地项目开发交给这条工作流了。

素材来源：配套视频《WebCodex.mp4》，时长约 4 分 45 秒。本文按演示流程整理，并参考了 WebCodex 安装指南、OpenAI Secure MCP Tunnel 与 ChatGPT 插件连接说明。整理日期：2026-09-20。

进群提问扫码加入会员答疑群。