CodeGeex 插件在 Web 端编辑器 (Monaco Editor) 的集成指南-人工智能-PHP中文网

要在web端monaco editor中集成codegeex ai能力，需通过调用其后端api实现智能补全、解释等功能：先确认/v1/completions等接口支持cors；再通过registercommand或completionitemprovider注入交互逻辑；所有请求须经自建后端代理，禁止前端硬编码token，并在ui中标注ai生成内容。

☞☞☞AI 智能聊天, 问答助手, AI 智能搜索, 多模态理解力帮你轻松跨越从0到1的创作门槛☜☜☜

codegeex 插件在 web 端编辑器 (monaco editor) 的集成指南

你想在 Web 端 Monaco Editor 中直接调用 CodeGeeX 的 AI 编程能力，比如光标处智能补全、选中代码一键解释或翻译，但发现官方没提供现成的 Web 集成包，也不清楚如何把插件逻辑注入到浏览器环境中的 Monaco 实例里。

确认 CodeGeeX Web 能力边界

CodeGeeX 官方未发布独立 Web SDK，其核心能力（如代码生成、注释、翻译）全部依赖后端 API 服务。Web 端集成本质是：前端 Monaco Editor 拿到用户选中文本或光标上下文 → 序列化为请求体 → 发起 HTTPS 请求到 CodeGeeX 公共 API 或你自署的 service → 解析响应 → 将结果以编辑操作方式注入 Monaco 编辑器。

这一步必须做：访问 https://codegeex.cn/api/docs 查看当前可用的 OpenAPI 文档版本，重点确认 【/v1/completions】和【/v1/explain】接口是否开放 Web CORS 权限】。若文档未明确标注支持 CORS，直接调用会触发跨域拦截，后续所有步骤无效。

注入 CodeGeeX 交互逻辑到 Monaco

方法一：通过 Monaco 的 command 注册快捷键入口

在 Monaco 初始化完成后，调用 monaco.editor.registerCommand 绑定快捷键，例如 Ctrl+Enter 触发补全：

monaco.editor.registerCommand('codegeex.inlineComplete', async (accessor, ...args) => {
const editor = accessor.get('editor');
const model = editor.getModel();
const selection = editor.getSelection();
const selectedText = model.getValueInRange(selection);
const context = model.getValue() + '\n' + model.getLinesContent()[selection.startLineNumber - 1];
const response = await fetch('https://api.codegeex.cn/v1/completions', {
method: 'POST',
headers: { 'Content-Type': 'application/json', 'Authorization': 'Bearer YOUR_TOKEN' },
body: JSON.stringify({ prompt: context, max_tokens: 128 })
});
const data = await response.json();
if (data.choices?.[0]?.text) {
editor.executeEdits('codegeex', [{ range: selection, text: data.choices[0].text }]);
}
});

方法二：监听 editor.onDidChangeModelContent 动态触发（慎用）

仅当用户停顿输入超过 800ms 时才发起请求，避免高频调用拖慢编辑器。需用 setTimeout + clearTimeout 手动维护防抖 timer，【务必在 editor.dispose() 时清除 timer，否则内存泄漏】。

适配 Monaco 的语言服务协议（LSP）补全机制

第一步：启用 Monaco 内置的 suggest 功能扩展点

调用 monaco.languages.registerCompletionItemProvider 注册一个 language ID（如 'javascript'）的补全提供者。

php获得文件的mime type类

下载

第二步：构造 CompletionList 响应

每次用户输入触发 suggest 时，你的 provider 必须返回一个 CompletionList 对象，其中 items 数组每个元素至少含 label 和 insertText 字段。CodeGeeX 返回的候选文本需经 clean-up 处理：移除首尾空白、截断过长行、转义特殊字符（如 $、{、}），否则 Monaco 渲染异常。

第三步：设置触发条件

在 provider 的 triggerCharacters 字段中加入 '/'、'@'、'.' 等常用触发符，但不要加空格——空格会干扰用户正常输入，且 CodeGeeX 补全通常需明确上下文边界。

第四步：控制补全弹窗位置

Monaco 默认将建议框锚定在光标右侧。若 CodeGeeX 返回的是多行代码块，需在 CompletionItem 中设置 documentation 字段为 markdown 格式，并配置 range 为覆盖整行或更大范围，否则插入后格式错乱。