先给大家同步一下 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

1. 安装依赖

npm install

1. 初始化数据库

npx prisma db push

1. 启动开发服务器

npm run dev

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

1. 配置 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进化社」一起探讨学习！

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