前言
Cursor 也推出了 Pro 了。今日前端早读课文章由 @孟健分享，公号：孟健的前端认知授权。
正文从这开始～～
背景
Cursor（https://github.com/getcursor/cursor）是一款专为编程与人工智能而设计的编辑器。
虽然现在还处于早期阶段，但目前 Cursor 可以完成以下几个任务：
写作：使用比 Copilot 更智能的 AI 生成 10-100 行代码；
差异：请求 AI 编辑一段代码块，并只查看建议的更改；
聊天：采用类 ChatGPT 界面，了解当前的文件；
以及更多：请求修复 lint 错误，在悬停时生成测试 / 注释等。
Cursor 背后的公司于 2023 年在旧金山成立，主要开发利用 LLM 从基层建立的 IDE。
创始团队目前 2 位，已获得 OpenAI 的投资：
Aman Sanger，2022 年毕业于麻省理工学院数学与计算机科学专业，Abelian AI 联合创始人
Michael Truell，2022 年毕业于麻省理工学院数学与计算机科学专业。
Cursor 源码架构
Cursor 目前开源的部分是基于 Electron+CodeMirror 搭建的，源码代码质量不高，我甚至都怀疑代码都是用 AI 写的… 拼凑感很强，另外没有一条测试用例。不过从市场角度也能理解，毕竟要快速抓住市场为主，两位 MIT 的高材生也没有太多前端工程经验。
整体的架构可以画一张图来表示：
在 Electron 架构之上主要构建了 6 个模块：
LSP，语言服务，内置了对 TS、Python、C++ 等常见的语言支持
Settings，一系列设置，比如 OpenAI 的 key，开启的语言服务等等
Comment，注释，生成注释用
CodeMirror，一些基于 CodeMirror 的补丁
Chat，核心模块，generation 也在这里面，是与 AI 的交互部分，也是我们本文分析的重点模块
extensions，扩展，比如编辑器相关的扩展，自动补全，等等，目前还没有开放插件能力
特性分析
Cursor 至今的官网和代码仓库都十分的简陋，没有详细的文档介绍。
在它的 Github 主页声称比 Copilot 更智能，但目前只能从作者的 Twitter 上的一个视频来评测它的功能，
这个视频一共执行了五条指令：
Build the `SearchResult component showing file icons, names, and paths
Connect this component to redux
How do I add a keyboard shortcut in electron?
Where in the code are shortcuts and redux reducers to open file search
Make cmd+p with label File Search open file search
目前 Cursor 支持的交互方式有两种，一个是 cmd+k 唤起指令模式，这个指令会调用 AI 进行 generate 直接生成代码，另外一种是 cmd+l 唤起的聊天模式，会返回 markdown 的文本显示在一个浮层上。
在上面的指令中，1、2、5 应该是指令模式，3、4 是聊天模式。
接下来，我们仿照这个视频的环境（它用的是 cursor 源码并且打开了一个 fileSearch 文件），深入探索下这些交互背后发生了什么。
第一条指令，生成代码
基于命令生成代码应该是 AI 的基本操作，这里的逻辑位于源码文件的 features/chat/chatThunks.ts 中：
const thunkFactory = (
actionCreator: ActionCreatorWithoutPayload,
name: string
) =>
createAsyncThunk(
`chat/${name}`,
async (payload: null, { getState, dispatch }) => {
dispatch(actionCreator())
// If message type is chat_edit, then we want to change the message type to chat
if (
(getState() as FullState).chatState.userMessages.at(-1)
?.msgType == 'chat_edit'
) {
dispatch(diffResponse('chat'))
} else {
dispatch(streamResponse({}))
}
}
)当我们输入回车的时候，就会触发 submit 的 action，而这里面的 actionCreator 都是经过 thunkFactory 包裹的，在这里面会看到，最终执行了 streamResponse 。
由于 streamResponse 函数十分冗长，我们截取一下请求部分：
const server = `${API_ROOT}/conversation`
const response = await fetch(server, {
method: 'POST',
headers: {
'Content-Type': 'application/json',
...getBearerTokenHeader(getState),
// Cookie: `repo_path=${state.global.rootPath}`,
},
//credentials: 'include',
body: JSON.stringify(data),
})核心就是向 cursor 的服务器发送了一个 POST 请求，目前 cursor 的后台代码并未开源，所以对这块是黑盒，不过从命名可以看出这个是一个对话接口，后台的实现中肯定也包含了对 AI 的调用。值得注意的是这并不是一个普通的 POST 请求，它返回的是一个 text/event-stream 的 MIME，可能大部分同学并不熟悉，实际上它用于实现服务器向客户端推送实时数据流。它是基于 HTTP 长轮询和服务器发送事件 (SSE) 的一种技术，能够实现服务器与客户端之间的双向通信。
实际上 cursor 的 server 是将信息通过 token 的方式流式返回的，这样也保证了在界面中类似 chatGPT 那样的体验。
我们来看一下这个请求的入参：
编辑器传递给 server 有价值的信息包括：
当前的文件信息，包括文件的所有代码，文件名和路径
交互的类型和指令 message
上下文的 Code（源码中可以看到，是按照 20 行切分的字符串，猜测是提供给模型上下文的，同时避免超过最大 token 的限制）
基于这些信息，生成合适的 prompt，AI 就可以生成代码了。
第二条指令，AI 续写内容
第二条指令与第一条指令不同，是选中了某段文本，然后要求改写，让我们来看看这次发起的请求：
会发现和上次请求的不同之处在于 selection 和 msgType ，分别传入了选中的文本和 edit，这样 server 应该就能更准确地生成相应的 prompt。
在 edit 这个模式下，很容易会触发一个 continue 的请求，这是因为选中的文本，再加上 AI 返回的内容，很容易就会超过模型最大 token 的限制，所以 Cursor 这里还加了一个 continue 接口，用来接上之前不能一次性返回的内容：
可以看到 continue 接口多了一个 botMessages 字段，用来将上一次 AI 返回的信息再次传递过去，而接口应该也是根据这个上下文信息要求 AI 能够续写上之前的内容。
continue 的逻辑在源码中是有一个 interrupted 作为标识的，如果判断是 edit 模式并且因为 token 问题被中断了，就会触发 continue 的逻辑：
lastBotMessage = getLastBotMessage(
(getState() as FullState).chatState
)!
if (
lastBotMessage.type == 'edit' &&
lastBotMessage.interrupted &&
lastBotMessage.hitTokenLimit
) {
await dispatch(continueUntilEnd(lastBotMessage.conversationId))
}第三条指令，聊天模式
这个是 AI 聊天的经典模式，向 AI 问了一个问题，我们看一下请求：
可以看到这次传参非常简单， msgType 变成了 freeform ，就是向 AI 提一个问题，不过这里还是一样，传递了当前文件的上下文和光标上下文。
第四条指令，AI 理解工程
同样是聊天场景，但是这个问题 Cursor 可以从当前的工程中找到答案，会告诉你在当前工程的哪些文件中有相关的实现，这就相比于纯粹的 AI 有了显著的进步，意味着可以联系工程上下文给出解决方案了。
其实它的请求并没有什么特殊的，要实现工程上下文，我猜测 Cursor 在 server 端可能采用的方案：
有自己的索引，根据索引找到问题关键词相关的工程上下文，提供给模型
实际上在源码中也有一点蛛丝马迹，在获取 Symbol 的时候， Cursor 查找了最近的 10 个文件，然后实现了一个自己的相似度计算函数，用来判断内容是否匹配，这个方法是用来寻找 Copilot 的 Snippet，但我估计后台也有类似的处理。
第五条指令，是个迷
第五条指令理论上可以自动让编辑器跳转到对应文件，然后修改代码，但我按照视频里面输入指令并没有触发，不过源码里面确实有对应实现，如果有人能够复现这个步骤欢迎告诉我一下。
小结
本文深入分析了 Cursor 的内部实现，重点关注是怎么结合 AI 做到代码生成和辅助我们写代码的。可惜的是， Cursor 最核心的后台实现并没有开源，这也算是他们目前的商业机密了。不过从客户端的代码中，我们也差不多推敲了一二，大概能猜到它本身的实现思路。
我认为目前 Cursor 的核心优势是在于免费（现在也开始收费了）和理解项目工程的能力，相比来说，它更想快速抢夺市场，但它的劣势在于挑战了 VSCode 整个生态。
按照作者的话说，他们畅享的许多能力都不能基于 VSCode 插件来实现，这点我能够理解，从目前的一些特性来看，比如直接关联工程文件，甚至跳转某个文件直接编辑和 diff 代码，都是非常灵活的交互，但我认为接下来 Cursor 面临的核心问题是：
gpt4 价格不低，虽然有 openAI 的风投，依旧是成本高昂，按照之前有人评测应该没有用 gpt4，不然不可能有这么快的速度，问它会回答 gpt3（目前看起来模型已经是被 finetune 过了，不会再回答是 gpt3）
代码完全是赶鸭子上架，不利于后续的维护，而且相对于 VSCode 整个庞大生态，有太大的差距（我读代码的时候实在无法忍受给作者提交了个优化 PR，目前还没被采纳…）
这些新颖的交互后续也有可能被 VSCode 所借鉴优化，毕竟微软才是最大的投资方，一旦 VSCode 跟上这个能力支持 Copilot X，Cursor 将没有立足之地。
关于本文
作者：@孟健
原文：https://mp.weixin.qq.com/s/MrXFw36NgtePXLpb-2WMVw
这期前端早读课
对你有帮助，帮” 赞 “一下，
期待下一期，帮” 在看” 一下 。