如何在自己的 AI 助教里加入几何画板和 AI 作图？

很多 AI 助教已经能解释几何题却仍然卡在一个关键环节它会说“作一条辅助线”但不能在用户眼前真正作出这条线。通用图片生成也不是完整答案。它可以画出“像几何图”的图却很难保证点在线上、两线垂直、圆经过指定点更无法让用户继续拖动和修改。一个可落地的 AI 几何体验需要三层能力AI 理解用户的题目和修改意图几何引擎执行结构化构造编辑器让用户检查、调整、保存和导出。大角几何 SDK 的编辑器 AI 对话把这三层连接在同一个界面里。一、用户体验应该是什么样学生在 AI 助教中输入画一个三角形 ABCD 是 BC 的中点连接 AD并把 AD 标成蓝色。理想流程不是返回一段作图步骤也不是给出一张静态图片而是画板里创建三角形 ABC构造 BC 的中点 D连接 AD 并设置样式用户可以拖动 A、B、C 检查关系用户继续说“再作过 D 的垂线”AI 在当前内容上修改最终内容被保存到用户的题目或教案中。这才是 AI 助教中的“几何作图能力”而不是一次性的配图生成。二、整体架构AI 对话采用宿主托管的桥接流程用户输入 ↓ 内嵌大角几何编辑器 ↓ aiRequest 你的 Web 页面 ↓ 你的业务后端用户鉴权、额度与日志 ↓ 大角几何内嵌模式 AI 生图接口 ↓ SSE 流 你的 Web 页面 ↓ consumeStream 编辑器更新对话和几何内容这套设计的重要之处是服务端 token 不进入浏览器用户权限和套餐仍由你的系统控制。三、在编辑器中开启 AI 面板npminstalldajiaoai/algeo-sdk2创建编辑器时显示 AI 面板import{createEditor}fromdajiaoai/algeo-sdk;consteditorawaitcreateEditor(container,{auth:{appId:YOUR_APP_ID},ui:{navbar:true,toolboxPanel:true,aiChatPanel:true,},});四、监听请求并交给自己的后端用户在内嵌面板中发送消息时编辑器触发aiRequesteditor.on(aiRequest,async({payload,signal}){constresponseawaitfetch(/api/algeo-ai/chat,{method:POST,headers:{Content-Type:application/json},body:JSON.stringify(payload),signal,});if(!response.ok||!response.body){thrownewError(AI 几何服务调用失败);}awaiteditor.ai.consumeStream({stream:response.body,signal,});});通常不需要在前端手动解析或重组payload。把它发送给宿主后端由后端原样转发即可。signal用于取消请求。用户停止生成或离开页面时应让取消信号沿请求链路传递避免后端继续执行无用任务。五、后端只做业务控制和安全转发以下是简化后的 Node.js 伪代码实际实现要按项目使用的 Web 框架调整app.post(/api/algeo-ai/chat,async(req,res){awaitassertSignedIn(req.user);awaitassertUserHasQuota(req.user);constupstreamawaitfetch(https://api.dajiaoai.com/api/v1/embedded/ai/run,{method:POST,headers:{Content-Type:application/json,Authorization:Bearer${process.env.DAJIAOAI_API_TOKEN},},body:JSON.stringify(req.body),signal:req.signal,},);// 将上游状态和 SSE 响应流透传给前端proxyStream(upstream,res);});这里有三条安全底线appId可以出现在前端服务端 token 不可以。后端必须根据当前登录态判断用户不接受前端自报的用户身份。额度、套餐、频率限制和审计日志应在转发前执行。六、把题目或图片预填进 AI 对话可以设置 AI 草稿。比如用户在题库中点击“用 AI 画图”宿主可以把当前题目和图片预先放入输入框awaiteditor.ai.setDraft({text:请根据当前题目生成几何图${question.stem},images:question.imageUrls,openPanel:true,focus:true,});七、AI 生成后为什么仍需要人工编辑几何内容的“正确”和“适合使用”不是一回事。AI 可能完成了正确构造但教学人员仍需要判断辅助线是否太多标签是否遮挡颜色是否符合讲义风格是否需要拆成多个画板图形是否突出当前知识点。内嵌编辑器让 AI 和人工共享同一份结构化内容。AI 负责快速起稿人负责教学判断和最终确认。八、保存、审核和复用生成完成后可以通过编辑器保存事件或document.getContent()获取完整内容将其和业务对象关联AI 生成草稿 ↓ 用户人工修改 ↓ 保存到题目 / 教案 / 用户项目 ↓ 审核与版本记录 ↓ 发布互动内容或导出图片不要只保存最终 PNG。图片适合展示结构化内容才支持继续修改、拖动和生成不同版本。九、产品设计中的三个边界不要让 AI 输出直接自动发布尤其是题库和教案场景应保留人工检查和审核状态。不要把 AI 作图等同于自动解题SDK 和 AI 接口提供构造与编辑能力。完整解题还涉及条件理解、证明、答案判定和教学解释。不要把密钥控制交给前端浏览器只负责产生请求和消费流。业务鉴权、额度和服务端凭证必须留在后端。常见问题可以不显示 AI 面板只用自己的聊天框吗可以根据产品架构使用 REPL 或其他开放能力控制画板。本文介绍的是 SDK 当前提供的内嵌 AI 对话流程它能减少对话状态和几何编辑器之间的割裂。AI 能读取当前画板继续修改吗编辑器 AI 对话围绕当前内容和对话上下文工作适合连续生成和修改。具体上下文由 SDK 与后端协议处理普通接入不需要手工拼接全部字段。能否限制学生使用 AI可以在 UI 中隐藏 AI 面板并在宿主后端根据角色、套餐和场景拒绝请求。前后端都应控制但后端权限判断是最终依据。结语AI 助教补齐几何能力关键不是多接一个图片模型而是给 AI 一个可执行、可检查、可继续编辑的几何环境。当自然语言、几何引擎和宿主业务系统连接起来AI 才能从“解释要怎么画”前进到“真正画出来并让用户继续完成工作”。下一步查看 编辑器 AI 对话文档先用一个简单三角形构造验证请求、流式返回和保存链路。