NocoBase 内置 AI 员工 Nathan前端工程师在 JS 编辑器中的代码生成、修改与调试实战【免费下载链接】nocobaseNocoBase is an open-source AI no-code platform for building business systems fast. Instead of generating everything from scratch, AI works on top of production-proven infrastructure and a WYSIWYG no-code interface, so you get both speed and reliability.项目地址: https://gitcode.com/GitHub_Trending/no/nocobaseNathan 是 NocoBase 内置的「前端工程师」AI 员工专门服务于JSBlock、JSField、JSItem、JSColumn、JSAction等需要编写 JavaScript 的配置场景帮助开发者根据当前代码上下文生成、修改或解释前端代码。本文以 nathan.md 为主体结合 plugin-ai 的客户端与服务端源码完整讲解 Nathan 的角色定位、使用入口、编辑器内的工作流程、预置任务与底层实现原理读完即可在 NocoBase 的代码编辑器中直接上手使用 Nathan 完成编码、代码审查与报错诊断。角色定位面向前端代码编写与调试的开发员工Nathan 在 NocoBase 内置 AI 员工体系中属于开发员工developer类别其定位是面向前端代码编写和调试场景能够根据当前代码上下文生成、修改或解释 JavaScript 代码。在 内置 AI 员工总览 的列表中Nathan 与数据可视化专家 Dara、本地化工程师 Lina 同属开发类员工与洞察分析师 Viz、数据整理专家 Dex、电子邮件专家 Ellis、翻译助理 Lexi、研究分析师 Vera 等业务类员工形成互补。从服务端实现看Nathan 属于「构建类」AI 员工。在 plugin.ts 中插件通过isBuilderAI()方法将nathan、orin、dara三个用户名划入BUILDER_AI_USERNAMES注释明确指出这类员工拥有强大的能力编码、修改 schema应限制为管理员可用。也就是说Nathan 并不像 Atlas 那样出现在右下角 AI 员工列表里供所有用户随意调用而是作为专属场景员工只在 JS 编辑器中以头像入口的形式出现。补充说明在 NocoBase 的 内置 AI 员工特性文档 中同样强调「部分内置 AI 员工构建类不会出现在右下角的 AI 员工列表中它们有专属工作场景——Dara 只会出现在图表配置页面Nathan 只会出现在 JS 编辑器上。」适用场景哪些配置界面会出现 NathanNathan 的适用场景以「需要编写 JavaScript 的配置场景」为核心包括编写JSBlock、JSField、JSItem、JSColumn、JSAction等代码调整页面交互逻辑或样式根据当前编辑器内容给出修改建议。在 built-in-employee.md 中场景清单进一步扩展为JSBlock、JSField、JSItem、JSColumn、JSAction、Event Flow、Linkage等需要写 JavaScript 的场景。只要代码编辑器右上角出现 Nathan 的头像就可以让他帮你编写或修改编辑器中的代码。这些场景覆盖了 NocoBase 无代码/低代码平台中典型的「以 JS 增强界面」需求场景典型用途JSBlock在页面区块中编写自定义 JavaScript 逻辑JSField字段级别的自定义计算或展示逻辑JSItem列表项/详情项的自定义渲染逻辑JSAction按钮等操作的自定义动作逻辑JSColumn表格列的自定义呈现逻辑Event Flow / Linkage事件流与联动配置中的脚本片段使用入口与前置条件Nathan 的入口位置有两类JS 代码编辑器右上角的 Nathan 头像——这是最主要、最常用的入口其他需要编写 JavaScript 的配置场景——只要编辑器被注册了 Nathan 的接入扩展入口就会自动出现。从源码看这个入口的挂载方式是代码编辑器扩展注册。在 setup.tsx 中setupAICoding()调用CodeEditorExtension.registerRightExtra()注册了名为ai-coding-button的编辑器右侧扩展扩展组件AICodingExtra为每个编辑器实例计算唯一uid由模型 uid、flowKey、currentStep 与编辑器 name 拼接而成并渲染AICodingButton。这就是「凡是被接入的代码编辑器右上角就会出现 Nathan 头像」的实现基础。前置条件要使用 Nathan需要先完成 AI 员工的基础配置。参考 启用 AI 员工 与 LLM 服务配置即配置好 LLM 服务并启用对应员工模型可在会话中按需切换详见 模型设置。若未启用内置员工或未配置 LLMAICodingButton会在找不到 nathan 员工时直接返回null入口头像不会渲染。编辑器内完整工作流程1. 点击 Nathan代码自动作为上下文附加在代码编辑器中点击右上角的 Nathan 头像会打开 AI 员工对话框。关键行为是代码编辑器中的代码会自动附加到输入框中作为应用上下文work context发送给 Nathan。从源码看这一步在 AICodingButton.tsx 的addCodeEditorContext()与handleAvatarClick()中实现const addCodeEditorContext () { setCurrentEditorRefUid(uid); addContextItems({ type: code-editor, uid, title: ${scene}(${language}), content: { scene, language, code: editorRef.read(), // 读取编辑器当前全部代码 }, }); };其中editorRef.read()读取的是编辑器当前的完整代码scene与language用于标注当前场景如 JSBlock、JSField和语言默认javascripttitle形如JSBlock(javascript)。也就是说Nathan 每次看到的并不是一段孤立的代码而是带场景类型与语言标注的完整上下文。2. 输入编码需求并发送打开对话框后输入你的编码需求自然语言描述即可发送给 Nathan 等待他回复。Nathan 会结合附带的代码上下文给出新代码、修改建议或解释说明。3. 一键应用Apply to editorNathan 回复的代码以代码块形式呈现点击回复代码块上的Apply to editor按钮即可将他的代码覆盖到代码编辑器中。这一步是「AI 产出 → 编辑器落地」的关键闭环不需要手动复制粘贴也不需要离开编辑器界面。4. 实时预览Run代码应用后点击代码编辑器的Run按钮可以实时查看效果。结合 NocoBase 的 WYSIWYG所见即所得界面交互逻辑或样式调整的效果会即时呈现便于快速迭代。5. 代码历史记录点击 Nathan 对话框右上角的「命令行」图标可以查看当前会话中你发送过的代码片段和 Nathan 回复过的代码片段方便回溯对比多轮修改。预置任务与自动化诊断除了自由对话Nathan 在代码编辑器中还内置了三类预置任务定义在 AICodingButton.tsx 的taskMap中任务键标题行为generateCodeStart coding开始编码以当前代码为上下文发起编码任务autoSend: falsecodeReviewCode review代码审查附上系统提示词要求「please review the code」logsDiagnosisDiagnose and fix the error诊断并修复错误附带编辑器运行日志要求分析代码与日志并修复问题其中logsDiagnosis实现了错误自动诊断当检测到editorRef.logs中存在level error的日志时errorOccurred变为true该任务的autoSend会被置为true并自动发送同时头像外层会弹出 Tooltip 提示「Oops! Something went wrong. Let me diagnose and fix it.」见 AICodingButton.tsx。也就是说当你在 Run 之后出现报错Nathan 的头像会提示出错点击后他会把报错日志一并作为上下文分析代码与运行日志并给出修复方案。代码审查任务还配有专门的系统提示词见 prompts.ts角色定义为「经验丰富的软件工程师专注于 Code Review」审查维度覆盖逻辑与正确性、可读性与命名、结构与可维护性、性能与效率、错误处理与边界情况、安全与潜在漏洞、框架/语言最佳实践输出格式固定为总体评价Overall Assessment→ 关键问题Key Issues附逐条建议→ 亮点Strengths→ 修复示例Example Fix语气要求专业、清晰、建设性每条建议可落地可直接用于 PR 讨论。源码级解析Nathan 如何与代码编辑器深度集成编辑器注册链路Nathan 与代码编辑器的集成链路可以概括为setupAICoding() 注册 CodeEditorExtension.registerRightExtra(ai-coding-button) ↓ AICodingExtra 为每个编辑器实例计算 uid渲染 AICodingButton ↓ AICodingButton 通过 isEngineer() 过滤 username nathan 的内置员工 ↓ editorRef 绑定setEditorRef(uid, editorRef) 将编辑器引用注册进聊天上下文在 AICodingButton.tsx 中员工筛选逻辑是const isEngineer (aiEmployee: AIEmployee) { return isBuiltIn(aiEmployee) aiEmployee.username nathan; };即必须是内置员工builtIn true且未标记deprecated且用户名为nathan。这是「Nathan 只出现在代码编辑器」的语义在代码层面的具体体现。代码如何变成 AI 的上下文编辑器的代码之所以能自动附加依靠的是workContext机制。AICodingButton构造任务时见 AICodingButton.tsx会生成如下结构{ message: { workContext: [ { type: code-editor, uid, title: ${scene}(${language}), content: { scene, language, code: editorRef.read() }, }, ], }, autoSend: false, }type: code-editor表明这是一份「代码编辑器」类型的上下文Nathan 能够识别该结构并将其中的代码作为当前编辑内容理解。会话中可用的 ctx.ai 能力在 NocoBase 的 RunJS 运行环境中Nathan 所在的 JS 场景还能访问一组 AI 相关运行时 API。注册逻辑见 registerAIEmployeeRunJSFacade.ts该文件通过FlowRunJSContext.define()向运行上下文注入ctx.ai命名空间主要能力包括API说明ctx.ai.uploadFile(file)上传文件作为 AI 员工任务的附件返回PromiseAttachmentctx.ai.triggerTask(options)触发一个 AI 员工任务fire-and-forget不等待结果options支持指定aiEmployee、tasks、chatBoxUid、auto、open等ctx.ai.triggerModelTask(uid, taskIndex)按 Flow 模型的 uid 与 0 起始的任务索引触发任务ctx.ai.tools.register(options)注册一个前端工具当当前 JS 区块被选中作为 AI 上下文时该工具可用permission默认为ASK仅对安全可自动执行的工具使用ALLOW官方示例中triggerTask的用法形如ctx.ai.triggerTask({ aiEmployee: nathan, tasks: [], chatBoxUid: ai-chat-box-uid, open: true })这意味着在启用了 AI 能力的 JS 区块中你甚至可以在代码里主动触发 Nathan 等 AI 员工的任务。权限与管理为什么 Nathan 仅限管理员如前文所述服务端通过isBuilderAI()将nathan划入构建类员工白名单。除此之外在 数据库迁移 20260428175558-update-ai-employee-category.ts 中插件通过迁移将orin、nathan、dara三个内置员工的类别更新为developer开发员工。这与文档中的「类型」列保持一致Nathan 属于开发员工而非面向普通业务用户的通用会话员工。对平台管理员而言这意味着Nathan 的编码、schema 修改等能力被有意收敛到管理员可控范围内避免普通用户通过 AI 直接修改页面配置结构。若要调整可用性请参考 AI 员工权限配置 与 管理员配置。与 AI 员工体系的关联Nathan 是 NocoBase 内置 AI 员工体系的一部分。整个体系的协作方式为默认员工 Atlas团队领导理解用户意图并分派合适的 AI 员工而 Nathan 这类构建类员工则在各自专属场景中出现。因此查看所有内置员工的完整列表参见 内置 AI 员工了解 AI 员工的启用、会话入口与协作方式参见 启用 AI 员工 与 AI 员工协作想为 Nathan 扩展更丰富的技能Skills或工具Tools参见 技能 与 工具涉及 MCP 扩展时参见 MCP。小结Nathan 将「前端工程师」的能力以最轻量的方式嵌入了 NocoBase 的代码编辑器点击头像即带上代码上下文、自然语言下达编码需求、Apply to editor 一键应用、Run 实时预览、出错自动诊断修复、命令行图标回溯代码历史。从源码实现看它由CodeEditorExtension扩展注册、AICodingButton组件驱动、code-editor类型的 workContext 传递代码并由服务端isBuilderAI()限制为管理员可控的构建类员工。这套机制把 AI 能力收敛在「需要写 JavaScript 的配置场景」内既保证了编码体验的流畅也维护了平台配置的安全边界。【免费下载链接】nocobaseNocoBase is an open-source AI no-code platform for building business systems fast. Instead of generating everything from scratch, AI works on top of production-proven infrastructure and a WYSIWYG no-code interface, so you get both speed and reliability.项目地址: https://gitcode.com/GitHub_Trending/no/nocobase创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考