AI 热点监控工具

作者：程序员鱼皮

本项目为教学项目，提供完整视频教程 + 文字教程 + 简历写法 + 面试题解 + 答疑服务，帮你提升项目能力，给简历增加亮点！

⭐️ 加入项目系列学习：加入编程导航

一、项目介绍

这是一套以 AI 编程实战 为核心的项目教程，基于 Express 5 + React 19 + OpenRouter + Socket.io，用 AI 编程的方式从 0 到 1 开发一个《AI 热点监控工具》，带你亲身体验 AI Vibe Coding 的完整工作流，学会用 AI 快速做出实用的提效工具！

📺 项目介绍视频，快速查看成品效果：https://bilibili.com/video/BV1g8d8B6ENk

输入要监控的关键词，系统自动从 Twitter、Bing、HackerNews、搜狗、B 站等 8+ 个信息源聚合抓取内容，利用 AI 进行真假识别和相关性分析，并通过 WebSocket 实时推送和邮件通知用户。此外，还将热点监控能力封装为 Agent Skills 技能包，让 Cursor、VSCode Copilot、Claude Code 等 AI 编程工具也能直接使用。

为什么做这个项目？

鱼皮作为 AI 编程博主，要利用工具第一时间自动发现最新的热点（比如 AI 大模型的更新），并且及时给我发送通知，让我能够走在吃瓜第一线。

既然如此，不如做一个更通用的工具。

这就是 AI 热点监控工具的起点：让 AI 帮你盯热点，第一时间获取优质信息！

6 大核心能力

1）配置监控关键词，支持激活 / 暂停。

2）AI 自动从 8+ 数据源抓取和分析热点，利用 AI 进行查询扩展、真假识别、相关性分析和智能摘要。

3）多维度筛选和排序，按来源、重要性、时间范围筛选，按热度、相关性、时间排序。

4）全网搜索，输入关键词从多个数据源聚合搜索。

5）实时通知，WebSocket 实时推送 + 邮件通知。

6）Agent Skills 技能包，安装后在 Cursor、VSCode Copilot、Claude Code 中都能直接使用。

二、项目优势

本项目选题新颖，紧跟 AI 编程时代，以 实用工具开发 为导向，区别于增删改查的烂大街项目。项目内容精炼，不到一周就能学完，带你掌握 AI 编程的完整工作流，给你的简历和求职大幅增加竞争力！

技术丰富，覆盖 AI 编程全链路：

从这个项目中你可以学到：

如何用 AI 编程从 0 到 1 开发一个完整的工具？
如何安装和使用 MCP 增强 AI 能力？
如何安装和使用 Agent Skills 提升 AI 编程质量？
如何从多个信息源（Twitter、Bing、HN、B 站等）聚合抓取内容？
如何通过 OpenRouter 接入 AI 大模型，实现智能内容审核？
如何实现查询扩展（Query Expansion），提高信息检索的召回率？
如何基于 Socket.io 实现 WebSocket 实时推送？
如何使用 Aceternity UI 打造炫酷的科技感前端界面？
如何开发标准化的 Agent Skills 技能包，并在多种 AI 工具中验证？
如何在 AI 编程中进行人工确认、版本控制和迭代优化？

鱼皮系列项目优势

鱼皮的原创项目以实战为主，用 全程直播 的方式 从 0 到 1 带做，从需求分析、技术选型、项目设计、项目初始化、Demo 编写、前后端开发实现、项目优化、部署上线等，每个环节我都 从理论到实践 给大家讲的明明白白、每个细节都不放过！

比起看网上的教程学习，鱼皮项目系列的优势：从学知识 => 实践项目 => 复习笔记 => 项目答疑 => 简历写法 => 面试题解的一条龙服务

编程导航已有 20+ 套项目教程！ 每个项目的学习重点不同，几乎全都是前端 + 后端的 全栈项目，也有大量 AI 应用开发项目。

详细请见：https://codefather.cn/course（在该页面右侧有教程推荐和学习建议）

往期项目介绍视频：https://bilibili.com/video/BV1YvmbYbEgS

鱼皮的项目帮很多同学拿到了大厂高薪 Offer：

三、更多介绍

功能模块：

架构设计：

四、快速运行

详细的保姆级教程请参考本地运行指南

前置条件

Node.js ≥ 18（推荐 20 LTS）
一个 OpenRouter API Key（必需，用于 AI 分析）

1. 克隆并安装依赖

git clone https://github.com/liyupi/yupi-hot-monitor.git
cd yupi-hot-monitor

# 后端
cd server
npm install
npx prisma generate
npx prisma db push

# 前端
cd ../client
npm install

2. 配置环境变量

cp server/.env.example server/.env

编辑 server/.env，至少填入 OpenRouter API Key：

OPENROUTER_API_KEY=sk-or-v1-你的key
# Twitter API Key（可选）
TWITTER_API_KEY=你的key

3. 启动服务（两个终端）

# 终端 1：启动后端（端口 3001）
cd server && npm run dev

# 终端 2：启动前端（端口 5173）
cd client && npm run dev

访问 http://localhost:5173 ，输入关键词即可开始监控热点 🔥

服务	地址
前端页面	http://localhost:5173
后端 API	http://localhost:3001
数据库管理	`cd server && npx prisma studio`（可选）

更多细节请查看保姆级本地运行指南。

加入项目学习

编程导航已有 20+ 套项目教程！每个项目的学习重点不同，几乎全都是前端 + 后端的全栈项目，也有大量 AI 应用开发项目。

欢迎加入编程导航，加入后不仅可以全程跟学本项目，往期 20+ 套原创项目教程 也都可以无限回看。还能享受更多原创技术资料、学习和求职指导、上百场面试回放视频，开启你的编程起飞之旅~

🧧 助力新项目学习，给大家发放 限时编程导航优惠券，扫码即可领券加入。加入三天内不满意可全额退款，欢迎加入体验，名额有限，速来学习！

1 天不到 1 块钱，绝对是对自己最值的投资！成为编程导航会员后，可以解锁 20 多套项目的教程和资料，PC 网站和 APP 都可以学习，如图：

Yupi Hot Monitor

README