了解最新 AI 资讯最快速的方式就是关注热门创作者的公众号,及时学习他们实践和总结的文章。
出于理性分析和学习(PS:我也做个梦冲击下前100🤦♂️),想看看我关注的那些热门创作者最近都发布的文章有什么趋势,包括:
- AI创作领域的热点词汇有哪些?
- AI文章主题分布有哪些?
- 创作主题覆盖了哪些AI工具?
- 热门AI工具提及频率如何?
今天文章的核心目标是介绍如何在 Cursor 中打开任督二脉, 使用 MCP 让 AI 助手拥有专业级数据可视化能力。
学会了这一招,只需要提供数据源,任何可视化图表不在话下,分钟级制作一个可视化数据报告页面,帮助大家在商业化决策方向再上一个台阶!
大致思路是:获取我关注的热门创作者公众号的历史文章列表,并基于文章数据进行多维度分析,并生成一个可视化页面。
话不多说,开始一步一步实践,接下来的分享分为三部分:
- 获取数据源,开发 wehcat-mcp 获取公众号历史文章列表
- 分析数据,使用 chart-mcp 生成可视化图表
- 设计网页,使用 edgeone-pages-mcp 部署单页应用
开发 wehcat-mcp
说一下开发这个的 MCP 的背景,核心目标是获取某个公众号的历史文章列表。我调研了两个方案:
- 基于RSS订阅源的方式,找到一个热门开源项目:wewe-rss,核心是采用微信读书的账号体系。开发复杂度较高,稳定性一般,所以放弃。
- 直接使用第三方 API ,找到一家极致了数据的供应商,有免费的测试额度,稳定性不错,所以选择此方案进行开发。
开发语言同样使用 Go,大致分为三步:
- 熟悉接口文档,API 调试通过。
- 在 Cursor 中基于 API 文档进行开发并命令行测试通过。
- 配置 wehcat-mcp,对话验证通过。
严格基于下面优化后的提示词进行开发:
帮我将下面的 Wechat API 封装成 MCP Go 服务,名称:微信助手。符合最佳实践,提供一个工具:根据用户提供的微信公众号名称,获取公众号历史文章列表。
1. 要求符合最佳实践,完善注释和说明
2. 分析需要开放哪些参数给大模型调用,必须开放一个环境变量 key 参数用户自己配置
3. 接口返回是 json,具体看下文档中的返回值示例。
参数说明请仔细参考 api_doc.md 文档中的各个参数定义和返回值。
MCP Stdio Server 编写规范如下:
{{Go MCP Server Demo}}
这里跳过调试/编译/配置等步骤,感兴趣的朋友可以看看我上一期的文章,有需要开发好的 MCP Server 源码的朋友后台回复“微信MCP”即可。
如截图所示,绿色按钮表示加载工具成功!
接下来进入比较轻松的部分,请按照下面精调后的提示词开始执行我安排的任务:
用户提供一批AI公众号创作者列表:
1. 数字生命卡兹克
2. 歸藏的AI工具箱
3. 向阳乔木推荐看
4. AI产品黄叔
请执行下面的任务:
1. **精确获取和存储公众号文章元数据**:
* **输入**:AI公众号创作者的准确名称列表。
* **处理**:
* 针对列表中的每一个创作者名称,请**尝试调用 `mcp_wehcat-mcp_get_wechat_official_account_post_history` 服务**:
* 参数设置:`identifier_type="name"`,`identifier_value`为当前创作者的名称。
* 分页策略:请获取每个公众号最近发布的 **前3页** 文章。
* **错误与跳过逻辑 (创作者级别)**:
* 如果调用 `mcp_wehcat-mcp_get_wechat_official_account_post_history` 服务时发生任何错误(例如:创作者名称无效导致查询失败、接口返回错误码、网络问题等),或该服务明确指示创作者不存在,则应**完整跳过此创作者**。
* 在此情况下,**不应**将此创作者的任何信息(包括错误信息)写入 `aigc_rank_articles.json` 文件。程序应记录内部日志(用于调试),然后直接继续处理列表中的下一个创作者名称。
* 数据提取(仅当成功获取时):从服务成功返回的结果中,务必提取每篇文章的**标题、发文时间、永久文章链接、封面图片的URL、以及微信官方提供的文章描述或摘要**。
* **输出**:
* 将所有**成功获取到文章列表的创作者**的数据,严格按照创作者名称进行分组。
* 所有数据整合后,保存到执行任务的**当前工作目录**下,文件名为 `aigc_rank_articles.json`。
* **JSON文件结构要求**:该文件必须是有效的JSON格式。JSON对象的最外层键为创作者的名称,对应的值是一个包含该创作者所有文章信息的对象列表。每个文章对象应至少包含以下字段:`title` (文章标题), `url` (文章链接), `cover_image_url` (封面图URL), `description` (微信提供的描述/摘要)。
任务执行完成后,数据处理完成,文件保存到了当前目录下。
使用 chart-mcp
基于这个数据可视化 MCP 提供的能力可以直接生成柱状图、折线图、饼图等 15+ 种高质量图表,使用的是 AntV 可视化图表生成框架。
按照官方 README 文档直接在 Cursor 中配置开箱即用。
{
"mcpServers": {
"mcp-server-chart": {
"command": "npx",
"args": [
"-y",
"@antv/mcp-server-chart"
]
}
}
}
如截图显示,保存 mcp.json 配置文件后,回到 MCP 主页面。如果显示绿色按钮,就说明已经加载工具成功!
接下来到了核心的数据分析环节,按照我提供的提示词开始执行任务:
分析热门创作者的文章数据,调用 mcp-server-chart ,请深度分析我提供的数据,生成多个合适的可视化图表,包括但不限于词云,主题分布,AI工具提及频率等核心指标,能够帮我分析这些创作者的话题和内容趋势。
很快一分钟内,得到了5个维度的数据分析图表。
使用 edgeone-pages-mcp
这一步使用预先整理好的网页制作提示词(核心部分来自向阳乔木):
设计一个现代、简约、高端的数据报告页面,使用 Bento Grid 风格布局,将所有关键信息紧凑地呈现在一个屏幕内。
设计要求:
1. 使用 Bento Grid 布局:创建一个由不同大小卡片组成的网格,每个卡片包含特定类别的信息,整体布局要紧凑但不拥挤
2. 卡片设计:所有卡片应有明显圆角(20px 边框半径),白色/浅灰背景,细微的阴影效果,悬停时有轻微上浮动效果
3. 色彩方案:使用简约配色方案,主要为白色/浅灰色背景,搭配渐变色作为强调色(可指定具体颜色,如从浅紫 #C084FC 到深紫 #7E22CE)
4. 排版层次:
- 大号粗体数字/标题:使用渐变色强调关键数据点和主要标题
- 中等大小标题:用于卡片标题,清晰表明内容类别
- 小号文本:用灰色呈现支持性描述文字
5. 视觉元素:
- 使用简单图标表示各项特性
- 进度条或图表展示比较数据
- 网格和卡片布局创造视觉节奏
- 标签以小胶囊形式展示分类信息
6. 响应式设计:页面应能适应不同屏幕尺寸,在移动设备上保持良好的可读性
设计风格参考:
- 整体设计风格类似苹果官网产品规格页面
- 使用大量留白和简洁的视觉元素
- 强调数字和关键特性,减少冗长文字
- 使用渐变色突出重要数据
- 卡片间有适当间距,创造清晰的视觉分隔
由于之前早已经配置到 edgeone-pages-mcp 服务,Cursor 在完成网页制作后,自动化调用了 deploy_html 工具能力,实现了一键部署,效率拉满。
看到这里,所有步骤都已经完成了,数据报告页面部分截图如下,完整版链接(https://mcp.edgeone.site/share/kC4mlu4Grlpqp25VdnwVj):
基于所有文章数据的关键发现:
- AI 设计工具正快速发展,Lovart 作为首个设计智能体代表了从"图像生成器"向"设计执行官"的转变
- 视频生成成本大幅降低,Medeo 等工具使非专业人士能轻松创建专业视频内容
- 语音模型在技术深度上领先,MiniMax 的 Speech-02 在准确度和相似度上取得突破
- AI工具 正在各垂直领域形成专业化 Agent,通过任务拆解和流程优化提升效率
- AI 正重塑创作流程与专业标准,降低创作门槛的同时也对内容质量提出新挑战
最后的思考
有了 chart-mcp ,打通了大模型到多数据源之间的最后一公里,提高做产品和商业决策的效率。
未来只需要提供一份数据源,不管是来自一个文件,还是另外一个 MCP API,复杂的可视化分析在支持 MCP 的 Client 里都可以实现。
基于数据分析的结论又可以连通其他 MCP,比如制作网页,制作分析报告等,这里的想象空间就很大了。
本文提供了关于数据分析一种新的思路,完整的探索路线仅供参考,如果你有不一样的想法,欢迎评论区交流指正。
我是极客杰尼,一个老实憨厚的技术人,专注分享AI编程,AI工具开发,感谢你的阅读!