p5.js 中继，单击即可将 AI 聊天内容转移到实时 p5.js 编辑器
一键转移 AI 生成的草图到在线编辑器是核心功能：可拖动的转移按钮出现在代码块和画布上，直接将代码发送到编辑器中。p5.js Relay，由 akichika 创建，是一个为创意编码者和学生设计的 Chrome 插件，连接 Claude、ChatGPT 和 Gemini 输出到网页编辑器。它将单文件 HTML 拆分为多个文件，在需要时插入 p5.js CDN，并支持多种编辑器引擎和主题。
扩展如何将 AI 输出映射到可编辑项目
Relay 将对话代码转换为编辑器准备好的文件，通过自动将单个 HTML 文件拆分为 index.html、style.css 和 sketch.js，并在需要草图时插入 p5.js CDN。该扩展在代码块、画布和工件面板上显示可拖动的传输按钮，因此您可以通过单击将 AI 生成的代码移动到 p5.js Web 编辑器、OpenProcessing 或 CodePen。
在典型浏览器条件下的表现
处理和传输发生在浏览器内部，因此该扩展在不将代码路由到外部服务器的情况下运行。仅本地处理减少了传输任务的网络往返，并在将代码从聊天移动到编辑器时消除了额外的上传步骤。该扩展在基于 Chromium 的浏览器中运行，并在支持的编辑器标签上自动触发，无需配置即可检测活动编辑器。
它对隐私的影响及其限制
Relay 遵循隐私优先的设计；该扩展在本地执行所有处理和传输，并且不将代码发送到外部服务器。此设计限制了在传输过程中草图内容暴露给第三方服务的风险。隐私模型仅涵盖传输步骤；它不会改变 AI 聊天平台在生成代码时自己发送或存储的内容。
它如何融入扩展和编辑器生态系统
Relay 支持常见的浏览器内编辑器和主题，通过与 CodeMirror 5/6、Monaco 和 Ace 协作，并同步 Light、Dark 和 System 主题。该扩展专门针对氛围编码工作流程，减少了在 AI 聊天和实时编辑器之间的手动复制和粘贴，以便与 p5.js 进行创意编码，这与在生成后立即在基于 Web 的编辑器中测试草图的用户相匹配。
清晰的生产力提升，适用于 AI 辅助的创意编码
Relay 是一个专注于创意编码者的工具，帮助将代码从聊天助手转移到实时网页编辑器，提供可预测的一键转移和仅限本地处理，确保在转移过程中的隐私。如果您使用 AI 生成 p5.js 草图，请在聊天页面上启用转移按钮，并将分割项目发送到网页编辑器，以加快迭代测试；期待有针对性的工作流程改进，而不是通用开发环境。
