AI编程初体验 | 我用Windsurf零代码开发一个网页对话和图像理解插件

Cursor爆火之后，唯一能与Cursor匹敌的AI编程工具----新晋AI编程工具Windsurf，它来了！

由估值12.5亿美元的美国初创公司Codeium打造，发布瞬间成为顶流。

将具备协作能力的copilots和独立能力agents相结合，创造出了全新的协作型智能体。

Codeium vs GitHub Copilot

这是目前最智能的 AI 代码生成工具，数据为证。

接下来我们将使用Windsurf开发一个Chrome的浏览器插件，使用智谱AI免费的两个多模态模型API。

最终产品大概是这样的：

支持网页对话和图像理解功能，付费订阅模式未开发。

本次API使用的事智谱AI开放的两款免费API：glm-4-flash和glm-4v-flash。

感谢支持大善人！这里不得不吹一波，实在是太强了！

GLM-4-Flash 兼具“高速度”和“经济性”特点，适用于完成简单垂直、低成本、需要快速响应的任务。

在能力方面，GLM-4-Flash 具备多轮对话、网页浏览、Function Call 和长文本推理（支持最大 128K 上下文）等高级功能，同时支持包括中文、英语、日语、韩语、德语在内的 26 种语言。

· 数据抽取：生物学家使用 GLM-4-Flash 处理分子数据，破解健康密码；

· 数据生成：使用 GLM-4-Flash 生成可以训练其他大模型的数据内容，让 GLM-4-Flash 成为其他领域大模型的 “黄埔军校” ；

· 多轮对话：高校学者正使用 GLM-4-Flash 制作 AI 助教，让每个学生都有学习和校园生活的伙伴；有的开发者还将模型应用于虚拟人对话场景；

· 英语翻译：开发者使用 GLM-4-Flash 构建翻译 APP，帮助小朋友进行英语互动性学习；

· 内容生成：广告公司使用 GLM-4-Flash 做文本润色，帮助编辑和文案快速输出各种类型的文案。

GLM-4V-Flash 模型拥有图像描述生成、图像分类、视觉推理、视觉问答（VQA）以及图像情感分析等高级图像处理功能，并且支持包括中文、英语、日语、韩语、德语在内的26种语言。

也就是说，你可以用它解读图片生成社交媒体文案，根据图片内容创造出引人入胜的文案

也可以识图答题，通过高级的图像识别和物理学知识理解，能够帮助学生构建一个全面且深入的学习框架

也可以进行美容咨询，能够识别图中的皮肤问题，从清洁、保湿、防晒等多个角度提供一系列细致的护肤建议。

还能够进行OCR保险单信息提取，高效地从保险单据中提取关键信息。

还可以根据对图像的内容进行提取并且进行总结，按照规定的格式进行输出。

....还有很多功能。

开发之前，先下载Windsurf，买个会员，淘宝买一个就可以（需要用到claude）

然后创建一个存放代码的文件夹，注意：别带中文和特殊符号。

使用Windsurf打开这个创建的文件夹，

然后确立需求：

• 网页对话：网页总结、内容改写、内容扩写、总结大纲
• 图片理解：目前为基础版，后续增加各种场景的提示词。

我想做一个Chrome的浏览器插件，在侧边栏打开时，有两大模块（左右进行选择）：网页对话和图像理解

网页对话：包含内容总结，内容改写，内容扩写，提炼大纲等四大功能

图像理解：可以通过在线截图和上传图片，解读图片的内容。


网页对话使用智谱AI的glm-4-flash模型，技术文档：https://open.bigmodel.cn/dev/api/normal-model/glm-4

图像理解使用智谱AI的glm-4v-flash模型，技术文档：https://open.bigmodel.cn/dev/api/normal-model/glm-4v



好了，我是一个不懂代码的产品经理，下面请你先和我讨论清楚产品需求，待我确认后再一步步开始。　

经过一轮的对话之后，它会帮我搭好大框架，完善需求点。

通过在Google浏览器的扩展里面加载插件

加载插件

使用glm-4-flash的对话能力

使用glm-4v-flash的图片理解能力

功能调试结束之后，开始写readme

最后提交Chrome应用商店，这个已经在处理了

以上就是基于windsurf，全流程完成一款Chrome浏览器插件，从需求分析到开发完成，再到提交Chrome应用商店审核的全过程。　

AI时代已经来临，没有代码基础也可以从0到1开发一个最基础的插件，你也不妨试试。