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

Yeadon：AI 编程最佳实践：Cursor + Coze 工作流打造网页内容提取插件 Yeadon：AI 编程最佳实践：Cursor + Coze 工作流打造网页内容提取插件 Modified November 25, 2024 这样，把内容组合在一起，然后让 cursor 根据下面内容写一个调用 coze 工作流的的服务，我这里用了 python 测试，但是可以直接写成 chrome 插件 这里有两个注意点 我们要声明入参为 article url（在 coze 工作流我是这样写的）,还有要让 cursor 注意中文编码，不然会报错，然后他会创建 cursor 所需的文件，我们只需要点右下角的accept all就行 完成这一切，我们可以用 chrome 加载做好的插件 优化界面 正常不出错的情况下，会生成像箭头所指这样插件按钮，并不能实现悬浮球，所以我们继续向 cursor 请求需求，还有第二页面的创作，都可以通过慢慢和 cursor 唠嗑 coding 出来 比如，我们可以说 Code block Plain Text 我需要在文章的右侧出现一个可以拖动的悬浮球，点击悬浮球出现对文章内容的总结 Code block Plain Text 创建一个第二页面 点击下面的瞧瞧作者后，这个页面有作者的信息以及打赏的二维码。具体UI布局请参考我提供的设计图。关于作者的信息，我希望你帮我建个页面，这样可以直接在插件内显示，而避免让用户跳转到另外的网页。作者信息页面请参考我提供的设计图，要求这个页面还有一个返回按钮，能够返回原来的页面 记得每次更新完代码后都要刷新插件以及网页 接下来，我们可以改进popup的页面，可以参考我的界面进行优化 总结 本教程介绍了主要开发流程，但在实际开发中可能遇到各种细节问题，如图标样式优化、错误处理等、特别是 cursor 的 coding 过程。但是我不在一篇文章内详尽所有可能，经过我的抛砖引玉，你们应该能拓展一点思路，对于文章中不懂得东西可以在网上 get，实践中不断探索和学习，逐步提升开发技能。如果大家对 cursor 的开发或者 coze 的工作流感兴趣，我会继续输出一些文章 代码的地址在这：https://github.com/Yeadon8888/CozeSummarizer 🥇 嗨，我是Yeadon！作为一名人工智能专业的大三学生，正在努力成为AI时代的超级个体 欢迎志同道合的朋友通过微信【vip2022shopee】交流讨论！ 这样，把内容组合在一起，然后让 cursor 根据下面内容写一个调用 coze 工作流的的服务，我这里用了 python 测试，但是可以直接写成 chrome 插件 这里有两个注意点 我们要声明入参为 article url（在 coze 工作流我是这样写的）,还有要让 cursor 注意中文编码，不然会报错，然后他会创建 cursor 所需的文件，我们只需要点右下角的accept all就行 完成这一切，我们可以用 chrome 加载做好的插件 优化界面 正常不出错的情况下，会生成像箭头所指这样插件按钮，并不能实现悬浮球，所以我们继续向 cursor 请求需求，还有第二页面的创作，都可以通过慢慢和 cursor 唠嗑 coding 出来 比如，我们可以说 记得每次更新完代码后都要刷新插件以及网页 接下来，我们可以改进popup的页面，可以参考我的界面进行优化 总结 本教程介绍了主要开发流程，但在实际开发中可能遇到各种细节问题，如图标样式优化、错误处理等、特别是 cursor 的 coding 过程。但是我不在一篇文章内详尽所有可能，经过我的抛砖引玉，你们应该能拓展一点思路，对于文章中不懂得东西可以在网上 get，实践中不断探索和学习，逐步提升开发技能。如果大家对 cursor 的开发或者 coze 的工作流感兴趣，我会继续输出一些文章 代码的地址在这：https://github.com/Yeadon8888/CozeSummarizer 🥇 嗨，我是Yeadon！作为一名人工智能专业的大三学生，正在努力成为AI时代的超级个体 欢迎志同道合的朋友通过微信【vip2022shopee】交流讨论！ 嗨，我是Yeadon！作为一名人工智能专业的大三学生，正在努力成为AI时代的超级个体 欢迎志同道合的朋友通过微信【vip2022shopee】交流讨论！ Cursor + Coze 工作流打造网页内容提取插件 教程 前情摘要 引言 放上偶像雷神的演讲 经常在网页上刷到好文章想保存金句和配图，但找不到好用的工具？ 作为经常阅读技术文章的开发者，我常常想找到一个便捷的工具来提取和保存文章精华。 于是萌生了开发一个浏览器插件的想法，在 AI 的帮助下，这个想法很快变成了现实。 应众多小伙伴的请求，我决定分享这次开发历程。 技术栈介绍 Cursor：AI 驱动的智能编辑器 Cursor 是一款革新性的代码编辑器，它在保留 VS Code 熟悉界面的同时，集成了强大的 AI 功能。他大概长这样，与普通 vscode 编译器差不多，但是多了一个言出法随的 composer 功能，能够自然语言交互写代码修 bug Coze：可视化工作流平台 Coze 工作流是一种通过可视化方式对插件、大模型、代码块、知识库等多种功能进行组合的工具，它能够实现复杂稳定的业务流程编排，适用于处理逻辑复杂且稳定性要求高的任务流。他长这样，通过简单的拖拽关键节点就能完成功能编排 功能需求分析 想要完成如下的文章提炼需要几个功能 1、对当前网页链接的提取 2、LLM 对当前网页内容总结 3、LLM 输出三个变量 主角 文章概括 金句提取 4、通过图片搜索的工具在网上搜搜主角的图片 5、进行排版，就能得到一个漂亮的图文总结卡片 技术架构 本文默认你已经了解基本的 cursor 和 coze 的能力，以及自己动手搓过一些 bot 采用前后端分离架构： • 后端：基于 Coze 工作流构建业务逻辑 • 前端：Chrome 浏览器插件，提供轻量级交互界面 工作流搭建 核心组件配置 工作流的两个重要 部分 插件 大模型 • 工作流总览 • 大模型节点提示词 • 输出节点 markdown 排版（注意markdown里图片的渲染格式） • 注意的细节 输出图片的变量用的是 contentUrl 可视化界面、chrome 插件开发 使用 cursor 开发，最重要的是架构思维，你要懂得如何和 AI 描述你想要的东西，我也是踩了好多坑，一步步慢慢学习，最重要的还是在实践中学习。 coze关键数据 1、获取授权令牌（Token） 2、掌握工作流调用方法 查看 coze 的 api 开发文档，查看执行工作流的实例，这里需要两个关键参数 1、你的令牌密钥，2、工作流开发代码 在这里获取工作流的开发文档 在这里获取个人令牌 在工作流界面获取工作流 id