像 Cursor 一样写博客:一个周末项目
构建一个 AI 辅助的博客编辑器(有点套娃)
最近,我开始在我的个人网站上写博客,内容主要关于 AI 相关的话题。有人质疑在 2025 年 AI 时代,博客是否仍然重要,我将引用最近在 Hacker News 上的一篇文章,它概述了我认为写博客仍然是个好主意的原因。
目前,我正在探索不同的工具和方式来托管我的博客。在我的开发环境中,AI 工具极大地帮助我提高了效率,并编写了更好的代码。在我的博客编辑环境中,我也希望达到同样的效果。
到目前为止,我尝试过 Google Docs + Gemini、Notion(以及他们的 Notion AI),以及 ChatGPT 和 Claude。我还尝试直接在 Cursor 中编辑 Markdown,使用 Copilot,但它们都有一些局限性。
- ChatGPT 和 Claude 倾向于以一种通用的风格写作,抹去了我的个人语气。我不想创造 "AI slop",我只是想更高效地写作。
- Notion AI 也类似,只是感觉效果不太好。
- Cursor 主要针对编码进行了优化,而不是写作。有些东西可以使用,但这绝对是一种 Hack 手段。
构建我自己的工具
与其花更多时间寻找更好的工具,我决定尝试创建一个工具来帮助我。我正在寻找:
- 一个可以编写 Markdown 的简单编辑器。这样我就可以轻松地将其复制粘贴到不同的平台,如 Notion、Google Docs、WordPress 等。
- AI 功能不会取代我作为作者。我不是要自动生成 SEO 垃圾信息,也不是要让 Dead Internet Theory 成为现实。
- AI 功能可以提高我的写作速度。呼应上面的一点,我想要 Copilot 功能。在这里,我设想诸如建议和自动研究之类的功能。
这篇博客文章目前就是通过这个工具编写的 —— 目前,我使用 MDXEditor 设置了一个 Markdown 编辑器,以及一个 Next.js 项目。我花了一些时间弄清楚如何设置编辑器,将图像粘贴到编辑器中,我还添加了一个占位符 AI 工具组件,该组件目前没有任何作用:
这使我完成了我的第一个目标:
- 一个可以编写 Markdown 的简单编辑器。
有点套娃
- 在粘贴上面的图片后,我注意到编辑器开始有点卡顿。这是因为我创建的是 base64 图像字符串,而不是将粘贴的图像上传到我的服务器。为了解决这个问题,我切换到粘贴时上传图像,并将它们存储在 Vercel 的 Blob 存储中。
第一个 AI 功能:查找参考来源
通常,当我写一篇博客文章时,我的脑海中会有一些我想引用的来源。例如,对于这篇博文,有一篇关于写博客文章的 HN 博客文章(是的,我知道,这越来越套娃了),我记得看过。还有一个对 MDXEditor 的引用,我可能应该链接到它。
传统上,我必须做一些研究才能找到这篇文章,然后将链接嵌入到博客中的正确位置。即使这可能只需要几分钟,但它会累积起来。如果我有十几个我想引用的来源,并且每个参考需要 1-5 分钟才能找到,那么找到这些来源可能需要我 10 分钟到 1 小时!
我喜欢这个功能,因为它符合我的目标 #2 和 #3 —— 它根本不会取代我的写作,并且可以提高我的写作速度。
设计功能
从 UX 角度来看,我想要一种简单的方式来使用这个工具。我决定主编辑区域旁边的工具面板应该会很有效。因为我不是设计师,所以我尽量保持简单,然后转向 AI 系统设计 —— 这是我的专长领域。
以下是我将如何设计 AI 组件:
- 首先,我将定义数据结构。
- 建议的来源主题:根据我的博客内容,我需要生成一个建议的主题或查询列表,以便我进行搜索。例如,到目前为止,这篇博客中的列表可能包括:
- MDXEditor,或 Markdown 编辑器
- AI slop
- ChatGPT
- Hacker News 上关于写博客的文章
- 来源:这些是我的 AI 将在互联网上找到的实际来源。我应该能够找到比我需要的更多的来源,并选择我要插入哪些来源。每个来源应包含一个 URL,一个 "为什么是这个 URL" 描述,以及一个来自上面列表的 来源主题。
- 参考插入建议:这应该是一个 AI 建议我们插入的建议参考列表。它应该使用上面定义的来源,并建议在博客中插入参考的位置。
- 目前,我将跳过这一步,手动插入参考。
- 建议的来源主题:根据我的博客内容,我需要生成一个建议的主题或查询列表,以便我进行搜索。例如,到目前为止,这篇博客中的列表可能包括:
我喜欢这种设计,因为它将控制权交给作者 —— 不存在幻觉的风险,因为作者可以立即看到来源是什么。我们还可以自动确保 URL 有效。
实现
为了实现这一点,我使用 Zod + Instructor 来定义我的数据结构,使用 Perplexity 来进行研究,并使用 GPT4o 来生成结构化的建议。
经过几个小时的工作和 Cursor 的魔法,我设法让它工作了,结果很好!我找到了我在 Hacker News 上看到的原始博客文章,并获得了关于其他来源的良好建议。Perplexity 在这里做了大部分繁重的工作。
结论
我已经决定我现在处于一个很好的停止点。我对这个工具的结果非常满意,这篇博客文章也是结果的输出。这篇博客文章完全是在工具内部编写的,并且每个参考都是使用工具内的 AI 工具找到的。
我想我会继续努力,并在将来制作第二部分。
未来功能的一些想法包括:
- 改进 UX
- 添加 "校对" 功能
- 添加自动完成功能
- 突出显示一段文字 -> 开始搜索
- 添加图片 - 图片搜索和/或图像生成
如果您有兴趣试用该工具,请在 X 上联系我。Perplexity API 并不便宜,我不希望通过允许免费访问该工具而导致 Hacker News 崩溃。
干杯。