AI编程最佳实践CursorCoze工作流打造网页内容提取插件

AI 编程最佳实践：Cursor + Coze 工作流打造网页内容提取插件

前情摘要

1

引言

放上偶像雷神的演讲

经常刷到好文章想保存金句和配图，但找不到好用的工具？

作为经常阅读技术文章的开发者，我常常想找到一个便捷的工具来提取和保存文章精华。

于是萌生了开发一个浏览器插件的想法，在 AI 的帮助下，这个想法很快变成了现实。

应众多小伙伴的请求，我决定分享这次开发历程。

技术栈介绍

Cursor：AI 驱动的智能编辑器

Cursor 是一款革新性的代码编辑器，它在保留 VS Code 熟悉界面的同时，集成了强大的 AI 功能。他大概长这样，与普通 vscode 编译器差不多，但是多了一个言出法随的 composer 功能，能够自然语言交互写代码修 bug

2

Coze：可视化工作流平台

Coze 工作流是一种通过可视化方式对插件、大模型、代码块、知识库等多种功能进行组合的工具，它能够实现复杂稳定的业务流程编排，适用于处理逻辑复杂且稳定性要求高的任务流。他长这样，通过简单的拖拽关键节点就能完成功能编排

2

功能需求分析

想要完成如下的文章提炼需要几个功能

1、对当前网页链接的提取

2、LLM 对当前网页内容总结

3、LLM 输出三个变量 主角 文章概括 金句提取

4、通过图片搜索的工具在网上搜搜主角的图片

5、进行排版，就能得到一个漂亮的图文总结卡片

3

技术架构

本文默认你已经了解基本的 cursor 和 coze 的能力，以及自己动手搓过一些 bot

采用前后端分离架构：

后端：基于 Coze 工作流构建业务逻辑

前端：Chrome 浏览器插件，提供轻量级交互界面

工作流搭建

核心组件配置

工作流的两个重要 部分

插件 大模型

工作流总览

4

大模型节点提示词

5

输出节点 markdown 排版

6

注意的细节 输出图片的变量用的是 contentUrl

7

可视化界面、chrome 插件开发

**使用 cursor 开发，最重要的是架构思维，**你要懂得如何和 AI 描述你想要的东西，我也是踩了好多坑，一步步慢慢学习，最重要的还是再实践中学习。

开发准备

1、获取授权令牌（Token）

2、掌握工作流调用方法

查看 coze 的 api 开发文档，查看执行工作流的实例，这里需要两个关键参数

1、你的令牌代码，2、工作流代码

8

9

在这里获取个人令牌

10

在工作流界面获取工作流 id

image-20241105213613950

这样，把内容组合在一起，然后让 cursor 根据下面内容写一个调用 coze 工作流的的服务，我这里用了 python 测试，但是可以直接写作 chrome 插件，

12

这里有两个注意点 我们要 声明入参为 article_url （在 coze 工作流我是这样写的）,还有要让 cursor 注意中文编码，不然会报错，然后他会创建 cursor 所需的文件，我们只需要点右下角的 accept all 就行

13

完成这一切，我们可以用 chrome 加载做好的插件

14

正常不出错的情况下，会生成箭头箭头所指这样插件按钮，并不能实现悬浮球，所以我们继续向 cursor 问，还有第二页面的创作，都可以通过慢慢和 cursor 唠嗑 coding 出来

15

16