![](https://developer.qcloudimg.com/http-save/yehe-6490225/54bcc801143d13f489418ed3222c55c4.png)

先给大家同步一下 **[AI 进化社](https://mp.weixin.qq.com/s/Wcla09Xr_1SGKDCBBnwT3w)** 的最新进展：

- 截至目前，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进化社](https://mp.weixin.qq.com/s/Wcla09Xr_1SGKDCBBnwT3w)」已经完成了第三个实战项目，也是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 编程项目中。

![](https://developer.qcloudimg.com/http-save/yehe-6490225/81f719b7cfb35a4cf6fd75964a01aa6a.png)



### 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. 整体效果速览

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

![](https://developer.qcloudimg.com/http-save/yehe-6490225/a527c32c079f7689925beaf65a84ed85.png)

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

![](https://developer.qcloudimg.com/http-save/yehe-6490225/91b8810fe0500a1bbb8029984a9e2c83.png)

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

![](https://developer.qcloudimg.com/http-save/yehe-6490225/c2d47f2a075b19696c42b2e76322fe6f.png)

热点通知中心

![](https://developer.qcloudimg.com/http-save/yehe-6490225/7fdf404fcbbe816bf9eca5e6a42d5fe8.png)

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

![](https://developer.qcloudimg.com/http-save/yehe-6490225/b3a018d0b9cd92cc68ce08504fffe10e.png)

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

![](https://developer.qcloudimg.com/http-save/yehe-6490225/12f6a0b46aae7510c554083bb1ae83fa.png)



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

![](https://developer.qcloudimg.com/http-save/yehe-6490225/42c5be6571bd71bc61218f2aef53ab1a.png)



### 4. 快速开始

1. 克隆项目

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

2. 安装依赖

```bash
npm install
```

3. 初始化数据库

```bash
npx prisma db push
```

4. 启动开发服务器

```bash
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. 项目结构

```markdown
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进化社](https://mp.weixin.qq.com/s/Wcla09Xr_1SGKDCBBnwT3w)**」一起探讨学习！

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

















截至目前，AI 知识库已累计更新 80+ 篇原创图文教程、40+ 节项目实战视频教程，内容持续连载中。

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

人工智能

编程语言

职业发展

AI进化社推出AI热点监控工具实战项目，涵盖多源数据采集、AI智能分析、实时通信等全栈技术。通过Next.js14+Node.js+大模型API组合，打造可定制的生产级监控系统。项目聚焦AI编程核心能力：需求分析、方案设计、AI集成及工程落地，帮助开发者掌握AI时代必备的实战技能。

数据可视化

数据库

服务器

流数据

智能体

路由

2026采购季 | AI焕新·智启新局

tencentdb-catalog

4核4G3M云服务器 新用户低至38元/年！

文章

问答

视频

教程

学习中心

腾讯云实验室

直播

竞赛

腾讯云代码分析专区

腾讯iOA零信任安全管理系统专区

腾讯云架构师技术同盟交流圈

腾讯云数据库专区

腾讯云智能顾问专区

腾讯云原生专区

腾讯混元专区

腾讯云TCE专区

腾讯云Lighthouse专区

腾讯云HAI专区

腾讯云Edgeone专区

腾讯云存储专区

腾讯云智能专区

腾讯轻联专区 

腾讯云开发专区

TAPD专区

腾讯轻量云游戏服专区

腾讯云最具价值专家

腾讯云架构师技术同盟

腾讯云创作之星

腾讯云开发者先锋

腾讯云代码助手

云原生构建

TAPD 敏捷项目管理

Cloud Studio

SDK中心

API中心

命令行工具

涵盖代码开发、场景应用、自动测试全流程，助你从零构建专属AI助手

一站式MCP教程库，解锁AI应用新玩法

聚焦“写作效率、视觉美观与运行性能”三方面进行全面升级，为您提供更高效、稳定的创作环境

社区富文本&Markdown编辑器全新改版上线，欢迎大家体验!

诚挚邀请您参与本次调研，分享您的真实使用感受与建议。您的反馈至关重要，感谢您的支持与参与！

社区新版编辑器体验调研

我带学员用 AI 做了个热点监控工具，太好用了！-腾讯云开发者社区-腾讯云

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

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

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐