APPLICATION

用AI开发Co-STORM用户界面

在本文中，我们将探索Cursor这一基于人工智能的代码开发工具，并使用它为斯坦福大学的Co-STORM AI研究算法创建一个新的开源用户界面

admin

Mar 22, 2025 • 23 min read

由于像GitHub Copilot这样的工具提供了代码自动完成功能，人工智能现在已经成为软件开发的重要组成部分。最近，这种应用已经从修改现有代码和创建短代码片段扩展到从头生成整个应用程序。

在本文中，我们将探索Cursor这一基于人工智能的代码开发工具，并使用它为斯坦福大学的Co-STORM AI研究算法创建一个新的开源用户界面。我们展示了如何利用人工智能以传统方法所需时间的一小部分快速构建原型代码——本文中的新Co-STORM用户界面应用程序仅用了不到一个小时就完成了——并提出了一些关于如何在这些新的工作流程中获得最佳结果的建议。

1、使用人工智能进行软件开发

尽管围绕生成式人工智能有很多炒作，无论是好是坏，其中一个领域中它被广泛使用的是作为开发软件的工具。我们正在看到工作方式的真实转变。

麦肯锡2023年的一项研究报告称，生成式人工智能工具可以显著加快常见的开发人员任务。在受控实验室环境中，文档编写时间减少了一半，新代码编写时间也大致减半，而重构代码的时间减少了约三分之二，借助AI辅助完成。

对软件开发人员进行的控制实验发现，使用AI代码助手（GitHub Copilot）的开发人员完成编码任务的速度比没有AI的开发人员快55.8%。

IBM研究人员通过调查（669名开发人员）和可用性测试对其内部的AI编码助手（Watsonx Code Assistant）进行了评估。他们发现该工具通常能提供净生产力增长，但并非所有用户都能从中受益平等。这表明效果可能取决于开发者和上下文。

还有许多其他研究表明，过去几年里这种势头一直在增强。

2、工具

GitHub Copilot 对于像生成函数文档、单元测试、查找基础设施配置信息以及创建小段代码等常规任务非常有用。当然，它并不是完美的，必须密切注意生成的代码，但很难找到不经常使用这类工具的开发人员和数据科学家。

虽然GitHub Copilot作为编码助手非常好用，但它无法生成全新的软件应用程序。你不能简单地要求它创建一个应用程序；你需要逐个请求它生成函数并自己将它们连接起来。

具有长上下文窗口的推理模型，例如Open AI的o1，可以很好地完成这项任务。这通常需要将所有代码粘贴到提示中，然后手动将其粘贴回各个文件中。尽管这个过程比从头开始编写代码要快得多，但仍然变得乏味。

对于这种类型的任务，一个很好的解决方案是Cursor。

Cursor 是一个集成在流行的 Visual Studio Code 集成开发环境（IDE）应用程序中的AI代码编辑器。它结合了AI和集成搜索引擎，能够根据聊天输入生成新的应用程序。该IDE具有很好的工作流特性，如对AI建议进行批准和暂存，以及设计良好且直观的用户界面。

3、成本

Cursor 提供了一些免费积分，足以完成本教程，但长期使用需要订阅。

Cursor $20/月

无限次完成
每月500次快速高级请求
无限次慢速高级请求

是否值得这笔费用取决于您使用这些AI工具节省了多少时间。如果它只需花费您几个小时而不是几天来创建一个新的原型，那么这可能是值得的。

还有其他一些AI代码开发工具，我希望在未来的文章中介绍它们。这份列表并不全面，但这里有一些例子：

Codeium —— 适用于VS Code、JetBrains等的免费AI代码补全和聊天。
Tabnine —— 多种IDE的AI驱动自动补全，团队优化。
Amazon CodeWhisperer —— AI辅助代码生成，非常适合AWS项目。
JetBrains AI Assistant —— 集成到JetBrains IDE（PyCharm、WebStorm等）中的AI功能。

4、斯坦福大学Co-STORM协作AI研究算法

为了说明一种基于AI的工作流程来创建我们的新应用程序，我们将为斯坦福大学的Co-STORM协作AI研究算法开发一个新的用户界面。Co-STORM允许用户输入研究主题，然后生成一组AI专家，这些专家开始一个研究过程，在其中他们彼此交流并与人类进行更广泛的讨论。经过搜索和综合这些结果后，最终输出是一篇带有丰富引用的研究文章。

我们在之前的一篇博客文章中介绍了它的前身STORM，但Co-STORM是一个有趣的进步，因为它允许人类成为研究小组的一部分，与AI代理一起工作。它也与Open AI和Google目前提供的深度研究工具略有不同，因为我们对AI专家团队有控制权，并且合作方式更强。

研究论文指出，Co-STORM在知识检索和合成方面优于基线方法，无论是在对话痕迹还是报告质量上。在进一步的人类评估中，70%的参与者更喜欢Co-STORM而非搜索引擎，78%的人更倾向于它而非RAG聊天机器人。

学习和信息检索的不同范式比较。Co-STORM使用户能够在LM代理之间观察和参与协作讨论，这些代理有不同的角色。用户可以请求系统根据讨论历史和收集的信息生成一份完整的带引用的报告。（来源）

另一个优势是它是开源的，因此可以使用各种LLM提供商运行算法，并且目前比商业AI深度研究产品更具可配置性。

尽管STORM有一个用户界面，但Co-STORM还没有。所以让我们开始构建一个！

5、设置

要按照本文的步骤操作，你需要进行以下设置……

前往Cursor，如果你还没有账号，请注册一个。设置一个免费试用账户。或者订阅每月20美元的计划
下载并安装 Cursor。我们为本文使用的是0.46.11版本
注册一个免费的 https://serper.dev/ 帐户，并记下API密钥
查看本文的代码仓库：costorm-ui
将.env.example复制到.env，并将步骤3中的API密钥设置为SERPER_API_KEY，同时设置你的OPENAI_API_KEY
打开Cursor并登录
然后选择文件 > 打开文件夹 来选择第4步中检出的代码仓库文件夹
选择终端 > 新建并设置环境（假设你已经安装了 miniconda）：

conda create -n storm python=3.11  
conda activate storm  
pip install -r requirements.txt

6、从一个可运行的代码示例开始

在开发我们的新用户界面应用程序之前，最好有一个完全可运行的示例脚本供AI从中工作。

我们将用于运行Co-STORM的演示脚本可以在Co-STORM代码库中找到这里。

修复一个小的拼写错误后，它可以按如下方式运行……

python run_costorm_gpt.py --output-dir ./results --enable_log_print --retriever serper

注意：你不需要为了这篇文章运行此脚本，但如果你想尝试，请查看文章代码仓库的README 获取配置说明。

输入主题“人道主义响应地名消歧”，算法会生成一组专家和研究，使用的是 Serper 搜索引擎……

主题：人道主义响应地名消歧  
暖启动更新：通过与多个LLM专家聊天来熟悉主题（第1/4步）  
暖启动更新：完成浏览 https://www.acsu.buffalo.edu/~yhu42/papers/ekaw16.pdf  
完成浏览 https://dl.acm.org/doi/10.1145/3582515.3609515  
完成浏览 https://arxiv.org/pdf/2309.02914  
完成浏览 https://mapaction.org/wp-content/uploads/2016/12/mapaction_field_guide_to_humanitarian_mapping.pdf  
完成浏览 https://www.sciencedirect.com/science/article/pii/S2666378320300052  
完成浏览 https://www.researchgate.net/figure/Summary-of-the-discussed-studies-on-extracting-place-names-and-their-spatial-footprints_tbl1_327596463  
暖启动更新：完成浏览 https://mapaction.org/wp-content/uploads/2016/12/mapaction_field_guide_to_humanitarian_mapping.pdf  
完成浏览 https://www.sciencedirect.com/science/article/pii/S2666378320300052  
完成浏览 https://www.researchgate.net/figure/Summary-of-the-discussed-studies-on-extracting-place-names-and-their-spatial-footprints_tbl1_327596463  
完成浏览 https://mapaction.org/accelerating-humanitarian-response-inside-mapactions-automated-data-pipeline/  
完成浏览 https://heigit.org/geoinformation-for-humanitarian-aid/  
  
... 等等  
  
暖启动更新：组织收集的信息（第2/4步）  
暖启动更新：将收集的信息插入知识库（第3/4步）  
13:53:31 - LiteLLM:INFO: utils.py:974 - Wrapper: Completed Call, calling success_handler  
LiteLLM : INFO     : Wrapper: Completed Call, calling success_handler  
13:53:31 - LiteLLM:INFO: utils.py:974 - Wrapper: Completed Call, calling success_handler  
  
... 等等  
  
13:53:36 - LiteLLM:INFO: utils.py:974 - Wrapper: Completed Call, calling success_handler  
LiteLLM : INFO     : Wrapper: Completed Call, calling success_handler  
13:53:37 - LiteLLM:INFO: utils.py:974 - Wrapper: Completed Call, calling success_handler  
LiteLLM : INFO     : Wrapper: Completed Call, calling success_handler  
暖启动更新：综合背景信息讨论语句（第4/4步）  
开始规划下一个专家；检查思维导图；检查系统状态。  
 开始将信息插入思维导图。  
完成将信息插入思维导图。  
**主持人**: 鉴于地理空间数据在人道主义行动中的重要性，我们如何利用历史地理空间数据和事件表示来提高地名消歧的准确性？这种集成是否可以提供更深入的见解和更精确的定位？[1][2]  
  
你的发言：

这个人可以回应并推动研究，例如……

区块链（如以太坊或Hyperledger Fabric）可以托管一个权威的、基于共识的地理空间标识符注册表，创建一个不可变的地名消歧记录。结合去中心化账本的地理消歧，以及离线空间索引。

这现在触发了一条与区块链相关的研究线……

开始规划下一个专家；检查思维导图；检查系统状态。  
回顾对话历史；决定发言意图。  
开始用搜索引擎搜索；浏览收集的信息。  
完成浏览 https://www.gim-international.com/content/article/blockchain-in-geospatial-applications-3  
完成浏览 https://storymaps.arcgis.com/stories/840782e207b94904aa655b1fe9065bf4  
完成浏览 https://isprs-archives.copernicus.org/articles/XLVIII-5-2024/89/2024/isprs-archives-XLVIII-5-2024-89-2024.pdf  
完成浏览 https://ethernodes.org/countries  
  
... 等等  
  
完成浏览 https://www.gim-international.com/content/article/blockchain-in-geospatial-applications-3  
完成浏览 https://storymaps.arcgis.com/stories/840782e207b94904aa655b1fe9065bf4  
完成浏览 https://isprs-archives.copernicus.org/articles/XLVIII-5-2024/89/2024/isprs-archives-XLVIII-5-2024-89-2024.pdf  
完成根据收集的信息生成发言。  
开始润色发言。  
开始将信息插入思维导图。  
13:56:03 - LiteLLM:INFO: utils.py:974 - Wrapper: Completed Call, calling success_handler  
LiteLLM : INFO     : Wrapper: Completed Call, calling success_handler  
完成将信息插入思维导图。

这个演示只进行了一轮对话，但它确认了我们有可工作的Co-STORM代码，生成了一个最终文章./results/report.md。

值得注意的是，Co-Storm还输出了一个包含大量支持信息的文件instance_dump.json，其中包含引用信息，我们将在后面使用。

7、使用AI构建新的用户界面应用程序

为了开始这个过程，我们可以告诉AI我们要实现的目标，提供我们的工作示例代码，以及一些关于算法输出的信息。

我们在右侧的Cursor聊天窗口中输入所有这些内容……

Cursor聊天输入以开始生成我们的应用程序

从这里开始，AI就开始工作了……

此时，我们可以点击“运行命令”按钮继续……

我们现在有了一个简单的280行的flask应用程序和一个300行的html模板。令人惊讶的是，它使用示例代码将其映射到具有聊天线程和设计元素的Web应用程序上。

那么……它能正常工作吗？

按照AI给的安装包的指示并运行应用程序run app.py，我们现在可以访问网页 http://localhost:5000。

这就是我们的AI生成的应用程序，第一次运行就成功了……

目前还不太美观，但总体来说还不错！

让我们试试输入我们的主题，“人道主义响应地名消歧”……

一分钟左右后，我们开始看到专家团队的对话……

AI专家们正在互相交流，探索主题，最后生成一篇文章输出……

所以，仅仅一次提示后，AI就生成了一个应用程序，第一次运行时没有任何错误。

然而，还有一些问题需要解决……

对话进行时，状态栏保持不变
人类（我！）从未被要求输入，或者至少流程从未等待
最终文章显示引用像[12]，但它们没有链接，也没有参考部分
整体设计可以更好

好吧，让我们通过询问AI来解决这些问题。

但在我们这样做之前，我们需要“接受”AI提出的更改。这是Cursor的一个很棒的功能，可以对拟议的更改进行预览。

在点击每个文件后，AI更改很容易看到，删除的行显示为红色，添加的行显示为绿色。

既然算法已经在AI生成的应用程序中运行，我们通过点击“全部接受”来批准更改……

现在让我们开始做一些改进……

[附注：当我与AI交谈时，我忍不住要礼貌一些😊]

然后AI就开始工作了……

一两分钟后，它调整了代码并创建了一个新的配置选项……

这一切看起来都很清晰合理。在应用程序中启动一个新的运行，并对AI专家的问题作出回应……

我们现在看到它成为了对话的一部分……

最终的文章现在以LLMs为核心主题……

所以，又一次，一个单一的对话提示让AI生成的代码第一次运行就成功了。

这只是个开始……有一个简单的应用程序，但值得注意的是，如果没有人工智能的帮助，创建这样一个新应用程序至少需要花费几个小时，甚至更多时间。

8、改进

现在我们可以接受所有更改并将代码提交到GitHub。

接下来，让我们通过对话的方式逐步改进。为了给你一个大致的了解，这里列出了进一步开发应用程序所使用的提示……

用户界面中的文章没有渲染Markdown，标题显示为“# 标题”而不是较大的正文。请确保渲染Markdown。

另外，引用链接应该在新标签页中打开。

引用列表之间有大量空白，见附图，请减少空白。

此外，状态栏似乎没有更新。我希望看到任何输出都反映在那里。我会注意到在knowledge_storm仓库中可以看到可以传递回调处理程序，见附图。

而且代码已经在打印日志时使用了回调处理程序。你能利用这个功能来更新UI状态吗？

……这起作用了。但是请让状态框闪烁以显示活动。另外，移除之前的大黄色加载框。

移除屏幕底部的大旋转图标。此外，只让状态框每次显示一行最新的事件。

将调用RunnerArgument的所有固定参数迁移到.env文件中，例如max_thread_num。同时在README中记录这些参数。

在最终文章页面顶部添加一个“查看专家讨论”的扩展选项，在展开时显示包含AI和人类讨论气泡的对话窗口。

给应用一个AI风格的favicon，使用Font Awesome。

移除开始研究时输入框上的“开始你的研究”标题，文字太多了。

将占位符“输入你的回复……”更改为“加入对话……”。

最终文章生成的消息看起来有些奇怪，请移除它，确保状态栏有此消息。

最后，段落之间的间距仍然很大。

这一点值得注意。有可能通过请求AI遵循用户体验（UX）的最佳原则来实现这一点。

UI从一个小的输入框开始，然后进入聊天屏幕，这有点不一致。你可以让它更流畅。

另外，审查UI是否符合UX最佳实践，总体上有点杂乱。

需要注意的是，在某些情况下，AI编写的代码会产生错误。在这种例子中，我们可以提供错误信息并要求AI修复，直到达到期望的结果。

9、清理

我们现在有了一个正在运行的应用程序——大约用了30分钟！ 但是这个过程有些零散，随着每个提示逐渐增加层。这与人类软件开发并不太不同，需要关注确保整个应用程序有意义，并且重构是开发过程中的常规部分。此外，AI可能以人类不满意或不符合特定标准的方式实现了某些内容。

以下是目前的代码示例：app.py

我见过比这更糟糕的人类代码，包括我自己写的。😊

话虽如此，让我们用一些提示来清理一下……

更新代码库，确保任何Python都符合PEP 8标准，并且所有函数都有详尽的文档字符串。

它运行了以下内容……

这里是更新后的代码：app.py

我们现在看到了格式良好的函数；它甚至整理了README。我们可以（并且应该！）对代码库进行linting和Black处理，但在初步审查中，这段代码没有什么严重的问题。

10、安全审查

这篇文章旨在生成一个原型，但任何实时Web应用都应该考虑安全性。为了良好的实践，让我们提示进行代码审查……

检查代码是否存在安全漏洞并解决它们

以下是它发现并修复的内容……

这是一个相当全面的变更集。

人类安全专家是否还能找到更多的漏洞？很可能。

与普通数据科学家在原型Web应用中考虑的保护相比，这是否提高了多个数量级的保护？绝对地。

在以上所有内容之后，你可以在这里找到完整的可运行代码：app.py。

11、借助AI的软件生成技巧

有几个关键点可以使这个过程更加有效……

始终尝试提供一个工作示例代码。正如我们在本文中所做的那样，AI代码生成的成功率更高，当它有一个工作版本作为起点时。
技术性地引导AI。最好的结果发生在你对设计和编码模式有很好的理解时。与其说“做一件事”，不如说“用框架X做一件事，并小心避免情况Y”。
注意AI是如何解决问题的。很诱人的是接受每一个变化，但就像人类一样，并非所有解决方案都是最优的。如果已经走上了难以引导AI恢复的路径，准备抛弃工作。
尽量不要在一个输入中请求太多不同的任务。专注于每次对话输入一个任务会有更好的结果。
如果AI没有解决问题，请提供反馈。浏览器控制台产生的错误消息或服务器错误通常能为AI提供足够的内容来解决。拍摄用户界面的截图来支持后续提示也可能成功。
经常保存代码的工作版本。尽管Cursor对更改管理得很好，但经常将工作版本提交到GitHub是个好主意。这可以防止AI偏离轨道并在事情出错时不得不丢弃太多步骤。
有时，你可能需要使用推理模型。Cursor有时会在非常复杂的问题上困惑，无论在Cursor中进行多少提示和调试都无法解决问题。在这种情况下，有时通过将所有文本文件合并成一个文件并将其与任务提示一起粘贴到像OpenAI的o1这样的模型中会有所帮助。一个技巧是不要尝试将代码粘贴回Cursor（o1可能会悄悄删除代码），而是将o1的修复摘要作为Cursor提示的一部分粘贴。注意：Cursor也直接集成了o1，但OpenAI API的成本对于这个模型来说可能很高。
如果AI有点卡住，要求它调整代码以生成调试输出并粘贴到下一个提示中。这有时会很有帮助。
进行最终的安全性和编码标准审查。也许对于原型来说不那么重要，但如果代码将在生产环境中使用，则应仔细审查。AI可以帮助完成这项工作，但最后的检查应该是人类（至少目前是这样）。
有时，任务和/或代码只是太复杂了。最近的进步提供了许多令人惊叹的工具，但它们还不是完美的。在许多项目中，总会有一个时刻，某个任务变得太难处理，人类需要进入代码。通常，这会产生更好的提示，但在某些情况下意味着人类需要实际编写一些代码。

我预计在未来一年内，随着使用AI进行代码开发的进步，上述列表会发生变化，但即使现在，使用Cursor创建快速原型也可以节省大量时间和精力。

原文链接：Using AI to Develop a User Interface for the Co-STORM AI Research Algorithm

汇智网翻译整理，转载请标明出处