我带学员用 AI 做了个热点监控工具，太好用了！

先给大家同步一下 AI 进化社 的最新进展：

• 截至目前，AI 知识库已累计更新 80+ 篇原创图文教程 、40+ 节项目实战视频教程，内容持续连载中。
• 当前正重点推进 AI 编程项目实战 板块，第一轮规划内还将上线 1 个全栈应用项目，进行中。
• AI 编程板块完成后，会将依次进入 AI 智能体 、AI 测试 板块更新，其中 AI 测试 内容高度贴合企业真实场景，是目前最具实战价值的核心模块。
• 除按原计划完善 AI 大模型、AI 测试、AI 智能体、AI 应用开发、AI 编程、AI 工具 八大板块外，知识库还会紧跟 AI 前沿趋势，动态穿插更新热门实战玩法，包括 OpenClaw、Agent Skills 开发、MCP、AI 绘图（漫画知识图谱） 等，确保大家学到的内容始终与时俱进、紧贴行业应用。

可能有的人会说，都有AI了，还要学啥AI编程啊？

如今 AI 编程工具越来越普及，即便没有编程基础，普通人也能靠自然语言描述快速生成代码、搭建应用。但同样是用 AI 开发，资深专业程序员和零基础小白做出的产品，在效果、稳定性与质量上依然天差地别。

这也恰恰说明：学习 AI 编程、真正实现项目落地，核心早已不再是 "怎么写代码"。

做教程、学技术，也不该只停留在 "一步步照着做、把功能跑通" 的层面，而要回归问题本质 ------

为什么要做这个项目？它要解决什么真实问题？

面对问题，我们该如何拆解、如何设计方案、如何选择最优路径？

AI 只是实现目标的高效工具，是落地方案的技术手段。

但需求理解、逻辑设计、架构思路、边界判断、问题排查、产品思维，这些最核心的能力，依然需要人先想清楚、想明白。

真正的 AI 编程学习重点，从来不是 "让 AI 帮我写对代码"，而是：

• 清晰定义问题，知道自己到底要解决什么
• 能把复杂需求拆解成可执行、可落地的步骤
• 懂得设计合理方案，判断技术路径是否可行
• 能校验、优化 AI 输出，规避漏洞与缺陷
• 具备工程思维，让应用稳定、健壮、可扩展

在AI编程版块的第一轮迭代内容中，我们会带着大家用Vibe Coding的方式，先做四个项目，其中：

• 2 个个人工具开发。（已完成）
• 1 个AI应用开发。（已完成）
• 1 个全栈应用开发。（进行中）

在前两周，「AI进化社」已经完成了第三个实战项目，也是20个+项目实战中的严格意义上来讲的，第一个AI应用开发。

为了便于更多的粉丝学习，我们选取其中一点，分享给各位看官，本文不会分享太多开发过程细节，更多的是让大家理解做项目前的一些选题思考、以及AI项目开发的能力边界。

如果你当前已经对AI编程理解很透彻，且玩的很溜，可以直接跳过。

一、项目背景

在AI编程版块前面的项目实战教程中，我们已经带着大家用Vibe Coding的方式，开发了2个个人工具应用。

如果你能跟着项目教程，完整动手做完这两个实战项目 ，相信你已经基本掌握了基于 AI 进行编程、从零到一完整开发工具 的全流程，已经能具备独立开发小工具的能力。

还是那句话：无论是传统编程，还是现在的 AI 辅助编程，想要真正提升做项目的能力，从来没有捷径，唯一的诀窍，就是多练、基于自己实际的需求、问题，多做项目，以技术的方式尝试去解决。

但细心的你，应该已经发现了：我们之前做的小工具，本质上还是用 AI 辅助编码，来开发传统应用。

而现在市面上绝大多数新产品、新应用，都已经原生内置了 AI 能力 。那么，真正的问题来了：如何开发一款自带 AI 特性的应用？

其实，基于 AI 编程开发应用，大体可以分为两类：

1. 用 AI 辅助编程，开发传统应用

   借助 AI 提升编码效率、快速实现功能，但应用本身不具备 AI 能力，只是把 AI 当 "超级程序员" 来用。

2. 用 AI 辅助编程，开发带 AI 原生能力的应用

   不仅用 AI 写代码，还直接对接大模型 API ，让应用拥有理解、生成、推理等 AI 能力，属于真正的AI 原生应用。

接下来，我们就一起来学习一下，如何开发一个带有AI特性的应用，简称AI应用。

1. 选题思考

确定好了方向， 那我们到底要开发一个什么样的AI应用呢？

这个问题，我在着手写教程之前，也犹豫了很久：

• 一方面，要保证实用性、普适性
• 另一方面，还要确保不能太复杂（如果太复杂，后续对接的成本太高了）

最开始，我原本计划带着大家做一个项目 ------《AI 驱动的搜索引擎：打造你的专属智能搜索工具》。

简单来说，就是把 AI 能力接入搜索引擎，实现AI + 搜索的智能问答体验。

但后来我仔细思考后，还是放弃了这个方向。

原因很简单： 这个项目的定位，和现在各大通用大模型自带的网页搜索、联网问答 功能几乎完全重合，很难做出真正的差异化价值。

既然官方已经做得非常成熟，那大家何必再跟着我们从零实现一遍？

我们自己做出来的效果，不仅不一定比官方更好，在实用性、体验、成本上也不占优势。

这样的项目，更像是一次功能模仿，而不是一次真正能提升实战能力、解决实际问题的开发。

所以我最终决定，放弃这个选题。

经过了一番博弈后，最终决定第一个AI应用开发，选定为：「AI热点监控工具」。

2. 为什么做这个项目？

原因很简单：

• 对我而言，实用性极强。

  AI 技术的迭代速度已经快到令人窒息------每天都有新模型发布、新框架开源、新产品上线、新论文刷屏。

  作为一名技术知识博主，我需要第一时间捕捉技术热点、行业动态，尤其是 AI 大模型的最新更新。如何从海量信息中高效捕捉真正有价值的技术动态，是一个越来越现实的问题。

  我不能依赖人工反复搜索、刷页面，而是需要一套工具，自动监控指定内容的变化、发现最新热点，并及时推送通知，让自己始终走在信息最前线。

  市面上不缺信息聚合工具，但大多数要么依赖第三方平台、要么无法定制、要么缺乏智能筛选能力。而作为一个技术人，最好的方式是：自己造一个。

• 对大家来说，普适性、可玩性极高。

  这套工具不局限于热点监控，完全可以迁移到各种场景：

  热门文章监控 、行业趋势监控 、竞品动态监控 、用户舆情监控 、商品价格监控 、质量缺陷监控 等，几乎适用于所有需要 "盯信息、等变化、收提醒" 的职场与个人场景。

更关键的是：

这个工具本身就包含了我们最初计划的 AI 驱动搜索引擎能力------ 同样用到网页搜索、AI 理解与处理。

只不过，我们不是做一个通用聊天式搜索，而是在它之上，落地到更具体、更刚需、更不可替代的真实使用场景，真正做到 "有用、能用、天天用"。

二、项目整体效果

这个项目，相对我们前两个项目，我们采用了一套新的AI技术栈组合来开发：

• 代码编程器，选择：VSCode
• AI编程工具，选择：Github Copilot
• AI大模型套餐，选择：GLM-5 （国产智谱AI旗舰版，编程能力对齐Claude Opus 4.5）

考虑到绝大多数学员，无法连接使用国外大模型如GPT、Claude，因此项目实战会尽可能选用国内大模型，确保大家都能用上。

具体安装配置教程可查阅：「080 AI 工具百宝箱」->「AI 编程工具」->「004-VSCode+GitHub Copilot+GLM安装配置教程」

这里补充一下： 为了让大家能体验并学习掌握到不同的AI编程工具所带来的开发效果，在项目实战版块中，针对不同类型的项目实战，会尽可能的挑择不同的主流AI编程工具搭配不同的技术栈来实现，而不是单一的只学习掌握某一个AI编程工具和某一种技术栈。

1. 能从这个项目中学到什么？

这不是一个简单的数据爬虫项目，而是一个覆盖了数据采集、AI 智能分析、实时通信、前端可视化的全栈实战项目，完成这个专栏后，你将：

• 掌握多源数据采集技术 --- 学会用 Node.js 对接 12 个主流数据源（搜索引擎、社交媒体、技术社区、RSS 订阅等），处理 HTML 解析、API 调用、反爬策略等真实场景
• 理解 AI 赋能业务的核心模式 --- 将大语言模型深度集成到数据处理管线中，实现内容的真实性验证、相关性评分、热度评估和智能摘要
• 构建完整的前后端架构 --- 基于 Next.js 14 App Router 打造现代化的 Web 应用，包括 SSE 实时推送、深色主题 Glassmorphism UI、多维度数据可视化
• 获得一个真正可用的工具 --- 不是一个 demo，而是一个配置好 API Key 就能每天用的生产级工具。同时我们还封装了一个自包含的 Agent Skill，可以在 Claude Code 等 AI 编程工具中通过自然语言直接调用

通过这个项目，你不仅学会了用AI编程开发一个实用的工具，更掌握了AI编程的完整工作流：需求分析→方案设计 →编码开发 →测试验证 →迭代优化 →Skill能力封装。 这套方法论可以应用到任何 AI 编程项目中。

2. 核心功能

• 多AI供应商支持 - 支持 OpenRouter、DeepSeek、智谱GLM、Kimi、通义千问、Gemini、Claude、自定义模型，同一时间启用一个供应商。
• 多源数据采集 - 覆盖 Bing、Twitter、Google新闻、DuckDuckGo、HackerNews、搜狗、Bilibili、微博、GitHub Trending、HuggingFace Papers、RSS 订阅等
• 关键词驱动搜索 - 自定义关键词，自动构建各平台搜索查询
• AI双维评分 - 相关性评分 + 热度评分，综合判断内容价值
• 智能内容验证 - AI识别真实内容，过滤虚假信息
• 实时进度推送 - SSE 流式传输采集与分析进度
• 应用内通知面板 - AI发现新热点时实时推送到侧边栏通知面板
• 源阈值配置 - 按采集源类型配置不同的过滤阈值
• 一键切换主题 - 支持一键切换深色、浅色主题，适合长时间使用
• Hotspot Monitor Agent Skill - 自包含的 AI 编程工具技能，支持 Claude Code / Cursor 等通过自然语言直接调用热点监控，无需启动后端服务

3. 整体效果速览

仪表盘主页显示效果（可切换主题配色）：

关键词监控页面（可自主增删改、开启、暂停关键词）

热点发现页 （支持搜索、筛选、排序、热点信息卡片上信息丰富，含AI相关性评分 + 热度评分，综合判断内容价值）

热点通知中心

AI 大模型配置（多AI供应商支持 ，支持 OpenRouter、DeepSeek、智谱GLM、Kimi、通义千问、Gemini、Claude、自定义模型）

采集源管理（覆盖 Bing、Twitter、Google新闻、DuckDuckGo、HackerNews、搜狗、Bilibili、微博、GitHub Trending、HuggingFace Papers、RSS 订阅等）

源阈值配置，支持按采集源类型配置不同的过滤阈值

4. 快速开始

1. 克隆项目

git clone https://github.com/xxx/ai-monitor
cd ai-monitor

2. 安装依赖

npm install

3. 初始化数据库

npx prisma db push

4. 启动开发服务器

npm run dev

访问 http://localhost:3000，首次使用请在「系统设置」页面配置 AI API Key。

5. 配置 AI 供应商

• 点击左侧导航「系统设置」
• 选择一个 AI 供应商（推荐 OpenRouter 或 DeepSeek）
• 填写对应的 API Key
• 也可选择自定义模型，填写任意 OpenAI 兼容 API 地址

支持的供应商：

供应商	说明
OpenRouter	统一接入 100+ 模型（GPT-4o、Claude、Gemini 等）
DeepSeek	深度求索（DeepSeek-V3、R1 等）
智谱GLM	智谱 AI（GLM-4 系列）
Kimi	月之暗面大模型
通义千问	阿里云通义千问
Gemini	Google Gemini 系列
Claude	Anthropic Claude 系列
自定义	任意 OpenAI 兼容 API

5. 项目结构

ai-monitor/
├── app/                          # Next.js App Router
│   ├── api/                      # API 路由
│   │   ├── api-keys/             # AI 供应商配置管理
│   │   ├── keywords/             # 关键词 CRUD
│   │   ├── monitor/              # 监控触发（stream + trigger）
│   │   ├── notifications/        # 通知管理
│   │   ├── sources/              # 数据源管理
│   │   ├── topics/               # 热点查询
│   │   └── settings/             # 系统设置
│   ├── hot/                      # 热点发现页
│   ├── keywords/                 # 关键词管理页
│   ├── notifications/            # 通知中心页
│   ├── settings/                 # 系统设置页
│   └── page.tsx                  # 仪表盘
├── components/                   # React 组件
│   ├── ui/                       # 基础 UI 组件
│   ├── navbar.tsx                # 侧边栏导航
│   ├── notification-panel.tsx    # 应用内通知面板
│   ├── dashboard-*.tsx           # 仪表盘相关组件
│   ├── keyword-actions.tsx       # 关键词操作组件
│   ├── api-key-settings.tsx      # AI 供应商设置组件
│   ├── source-manager.tsx        # 数据源管理组件
│   ├── monitor-provider.tsx      # 监控状态 Context
│   └── threshold-settings.tsx    # 阈值配置组件
├── lib/                          # 核心逻辑
│   ├── ai.ts                     # AI 分析服务（多供应商支持）
│   ├── ai-providers.ts           # AI 供应商定义与配置
│   ├── monitor.ts                # 数据采集服务
│   ├── monitor-state.ts          # 监控状态管理（SSE 单例）
│   ├── source-thresholds.ts      # 采集源阈值过滤
│   ├── sources.ts                # 默认数据源定义
│   ├── prisma.ts                 # 数据库连接
│   └── utils.ts                  # 工具函数
├── skills/                       # Agent Skills（可独立使用）
│   └── hotspot-monitor/          # 热点监控技能
│       ├── SKILL.md              # 技能定义（自然语言触发规则）
│       ├── src/
│       │   ├── index.ts          # 主入口（scan/deep/source/trending）
│       │   ├── sources.ts        # 12 个数据源采集（纯函数，无 Server 依赖）
│       │   ├── ai.ts             # AI 评分分析（OpenAI 兼容 API）
│       │   ├── config.ts         # 配置管理（环境变量）
│       │   └── types.ts          # 类型定义
│       └── package.json          # 独立依赖
└── prisma/
    └── schema.prisma             # 数据库模型定义

三、 写在最后

这个项目的价值不在于代码本身，而在于它展示了一种思路：用 AI 的能力去处理 AI 的信息。

AI 从来不是用来替代思考，而是用来放大思考。很多人以为 AI 编程就是 "说句话出代码"，却忽略了真正决定产品价值的，永远是你想解决什么问题、你怎么设计方案、你如何判断好坏。

技术的价值永远在于解决问题，而 AI 编程的终极目标，是让我们把精力聚焦在 "该解决什么问题" 上，而非 "该怎么写代码"。

我做「AI 热点监控工具」这个项目，初衷很简单：不教大家做华而不实的 Demo，而是带着大家从真实需求出发，把 AI 当成解决问题的 "超级搭档"，而不是只会写代码的 "工具人"。从需求拆解、技术选型、架构设计，到 AI 集成、部署上线、能力封装，这套完整的工程思维，才是 AI 时代最值钱的本事。

在我看来，未来的开发者，拼的不是谁代码敲得快，而是谁更会定义问题、更会指挥 AI、更能把想法落地成可用的产品。与其沉迷各种 AI 工具，不如沉下心做一个能真正解决问题的项目 ------ 当你能用 AI 把一个真实需求跑通、跑稳、跑上线，你就已经超越了绝大多数只会 "玩一玩" 的人。

毕竟，真正能让你立于 AI 时代的，从来不是会用多少工具，而是能靠技术解决多少实际问题。

这也是我做 AI 进化社一直坚持的理念：不教花哨玩法，只教能落地、能赚钱、能提升竞争力的真本事。

💡 更多、更详细、全面的AI测试、AI编程、AI技能进阶系统化实战教程，欢迎加入：「狂师. AI进化社」一起探讨学习！

准备好了吗？让我们开始吧。