构建一个 AI 辅助的博客编辑器(有点套娃)

最近,我开始在我的个人网站上写博客,内容主要关于 AI 相关的话题。有人质疑在 2025 年 AI 时代,博客是否仍然重要,我将引用最近在 Hacker News 上的一篇文章,它概述了我认为写博客仍然是个好主意的原因。

目前,我正在探索不同的工具和方式来托管我的博客。在我的开发环境中,AI 工具极大地帮助我提高了效率,并编写了更好的代码。在我的博客编辑环境中,我也希望达到同样的效果。

到目前为止,我尝试过 Google Docs + Gemini、Notion(以及他们的 Notion AI),以及 ChatGPT 和 Claude。我还尝试直接在 Cursor 中编辑 Markdown,使用 Copilot,但它们都有一些局限性。

构建我自己的工具

与其花更多时间寻找更好的工具,我决定尝试创建一个工具来帮助我。我正在寻找:

  1. 一个可以编写 Markdown 的简单编辑器。这样我就可以轻松地将其复制粘贴到不同的平台,如 Notion、Google Docs、WordPress 等。
  2. AI 功能不会取代我作为作者。我不是要自动生成 SEO 垃圾信息,也不是要让 Dead Internet Theory 成为现实。
  3. AI 功能可以提高我的写作速度。呼应上面的一点,我想要 Copilot 功能。在这里,我设想诸如建议和自动研究之类的功能。

这篇博客文章目前就是通过这个工具编写的 —— 目前,我使用 MDXEditor 设置了一个 Markdown 编辑器,以及一个 Next.js 项目。我花了一些时间弄清楚如何设置编辑器,将图像粘贴到编辑器中,我还添加了一个占位符 AI 工具组件,该组件目前没有任何作用:

这使我完成了我的第一个目标:

有点套娃

第一个 AI 功能:查找参考来源

通常,当我写一篇博客文章时,我的脑海中会有一些我想引用的来源。例如,对于这篇博文,有一篇关于写博客文章的 HN 博客文章(是的,我知道,这越来越套娃了),我记得看过。还有一个对 MDXEditor 的引用,我可能应该链接到它。

传统上,我必须做一些研究才能找到这篇文章,然后将链接嵌入到博客中的正确位置。即使这可能只需要几分钟,但它会累积起来。如果我有十几个我想引用的来源,并且每个参考需要 1-5 分钟才能找到,那么找到这些来源可能需要我 10 分钟到 1 小时!

我喜欢这个功能,因为它符合我的目标 #2 和 #3 —— 它根本不会取代我的写作,并且可以提高我的写作速度。

设计功能

从 UX 角度来看,我想要一种简单的方式来使用这个工具。我决定主编辑区域旁边的工具面板应该会很有效。因为我不是设计师,所以我尽量保持简单,然后转向 AI 系统设计 —— 这是我的专长领域。

以下是我将如何设计 AI 组件:

  1. 首先,我将定义数据结构。
    1. 建议的来源主题:根据我的博客内容,我需要生成一个建议的主题或查询列表,以便我进行搜索。例如,到目前为止,这篇博客中的列表可能包括:
      • MDXEditor,或 Markdown 编辑器
      • AI slop
      • ChatGPT
      • Hacker News 上关于写博客的文章
    2. 来源:这些是我的 AI 将在互联网上找到的实际来源。我应该能够找到比我需要的更多的来源,并选择我要插入哪些来源。每个来源应包含一个 URL,一个 "为什么是这个 URL" 描述,以及一个来自上面列表的 来源主题
    3. 参考插入建议:这应该是一个 AI 建议我们插入的建议参考列表。它应该使用上面定义的来源,并建议在博客中插入参考的位置。
      • 目前,我将跳过这一步,手动插入参考。

我喜欢这种设计,因为它将控制权交给作者 —— 不存在幻觉的风险,因为作者可以立即看到来源是什么。我们还可以自动确保 URL 有效。

实现

为了实现这一点,我使用 Zod + Instructor 来定义我的数据结构,使用 Perplexity 来进行研究,并使用 GPT4o 来生成结构化的建议。

经过几个小时的工作和 Cursor 的魔法,我设法让它工作了,结果很好!我找到了我在 Hacker News 上看到的原始博客文章,并获得了关于其他来源的良好建议。Perplexity 在这里做了大部分繁重的工作。

结论

我已经决定我现在处于一个很好的停止点。我对这个工具的结果非常满意,这篇博客文章也是结果的输出。这篇博客文章完全是在工具内部编写的,并且每个参考都是使用工具内的 AI 工具找到的。

我想我会继续努力,并在将来制作第二部分。

未来功能的一些想法包括:

如果您有兴趣试用该工具,请在 X 上联系我。Perplexity API 并不便宜,我不希望通过允许免费访问该工具而导致 Hacker News 崩溃。

干杯。