AI导哈

AI订阅顾问系统

一个基于Model Context Protocol (MCP)、React和Node.js的AI订阅顾问系统，能够分析订阅服务、提供节省建议并生成可操作输出。

  • by plucodev-courses
  • JavaScript
  • 本地部署
  • 更新于
在 GitHub 查看 plucodev-courses/mcp-ai-subscription-advisor

使用说明

🧠 使用MCP、React和Node.js构建一个AI驱动的订阅顾问

一个全面的实践课程 教授如何使用（该工具/方法）将AI模型连接到你自己的数据 模型上下文协议（MCP） — 在从零开始构建一个实际的网络应用程序的过程中。

🚀 你将要构建的内容

到这门课程结束时，你将掌握一项实用的技能 人工智能助手 那个可以：

  • 了解你的 订阅、续订日期以及消费情况
  • 建议如何 省钱或取消未使用的服务
  • 搜索主要事件（体育赛事、节目等）的在线观看渠道
  • 生成 可采取的输出（或行动项），比如取消邮件
  • 完全在您的（设备/系统上）运行 自己的后端系统由MCP提供支持/驱动

技术栈：

  • 🖥️ 电脑 前端： React 19 + Vite + Material UI（中文可表述为：“React 19 配合 Vite 和 Material UI”）
  • ⚙️ 通常用来表示齿轮或机械装置的符号，在中文中可以简单翻译为“齿轮”或根据上下文具体描述为某种机械部件。如果仅作为符号使用，也可直接保留原样或用“齿轮（符号）”来表述。 后端： Node.js + Express + SQLite（可翻译为）：Node.js（服务器端JavaScript运行环境）+ Express（Web应用框架）+ SQLite（轻量级数据库管理系统）
  • 🤖 机器人 AI层： 模型上下文协议（MCP）
  • 🗄️（文件柜、文件夹等存储物品的图标） 坚持不懈；毅力 SQLite（数据库，额外奖励部分将使用Postgres）

🧩 课程大纲

Udemy课程的每个部分都对应于本仓库中的一个带有标签的版本：

标签 部分 描述
v0.1-setup 项目设置 文件夹结构，开发环境
v0.2-backend-api 后端API CRUD路由和SQLite数据库
v0.3-react-dashboard 前端 订阅仪表板（React + MUI）
v0.4-mcp-tools MCP 集成 定义并提供工具以供 AI 使用
v0.5-ai-assistant 聊天助手 与MCP连接的全AI聊天
v1.0-course-complete 最终项目 已部署并运行的人工智能订阅顾问

👉 您可以使用以下方式在这些检查点之间切换：

git checkout v0.3-react-dashboard

🛠️ 开始使用

1️⃣ 克隆仓库

git clone https://github.com/plucodev-academy/mcp-ai-subscription-advisor.git
cd mcp-ai-subscription-advisor

2️⃣ 安装依赖项

npm install

（根目录下的 `package.json` 将使用工作区一次性安装客户端、服务器和 MCP 依赖项。）

3️⃣ 运行应用程序

# start backend API
npm run dev:server

# in another terminal, start the React app
npm run dev:client

# optional: run MCP server
npm run dev:mcp

打开你的浏览器，访问👉 http://localhost:5173 翻译为中文是：“本地主机：5173”。不过，通常我们不会直接翻译网址，而是直接使用或解释其含义。在这个上下文中，它表示的是在本地计算机上运行的一个Web服务器，监听5173端口，用于开发或测试等目的

📚 学习目标

完成本课程后，你将：

  • 了解如何 AI工具互联 使用MCP安全地连接到您的后端。
  • 自己动手做 多功能网络应用 （前端 + 后端 + 人工智能层）。
  • 学习如何定义和暴露（或“公开”） 定制的MCP工具。
  • 在任何React应用中集成一个AI聊天界面。
  • 将您的项目部署到生产环境（Render、Railway 等）。

🧠 什么是MCP？

模型上下文协议（MCP） 这是一个标准，允许人工智能模型安全地访问您自己的数据和功能。 你不是仅仅提示一个大型语言模型（LLM），而是让它调用结构化工具，比如：

getSubscriptions()
getUpcomingRenewals()
suggestSavings()

这将一个静态的聊天机器人转变为一个 真实助手 （用于/采用……的） 你的 逻辑和数据。

📦 项目结构

mcp-ai-subscription-advisor/
├── client/       # React 19 + Vite frontend
├── server/       # Node.js + Express backend
├── mcp/          # MCP server with tools
├── shared/       # Shared utilities & constants
└── README.md

🔑 环境变量

在项目根目录下创建一个 `.env` 文件：

# Example
PORT=4000
DB_PATH=./server/src/db/subscriptions.db
LLM_API_KEY=your_key_here

你将收到这个文件和密钥设置指南 第二节 （关于）这门课程。

🧭 关键点与支持

每场讲座包括：

  • A. 检查点标签 跳转到正确的代码状态。
  • A. 讨论链接 在那里你可以提问。
  • （奖金）A PDF速查表 对于命令和MCP（管理控制面板/多点控制单元，具体含义根据上下文确定）概念。

🏫 教练（或讲师）

保罗·“PluCodev”·卢卡诺
全栈开发者 & 家庭实验室爱好者。
使用最新的开发者工具构建微SaaS应用、Chrome扩展程序以及AI驱动的应用程序。

电视 在Udemy上加入该课程 →
🌐 表示“万维网”或“互联网”的符号，可直接用作描述该概念的文字表述，无需额外翻译。 在GitHub上关注 →

❤️ 贡献 / 反馈

如果您在课程材料中发现任何问题或打字错误：

  1. 打开一个 问题
  2. 或者提交一个拉取请求——欢迎贡献！

🪄 许可证

这个项目遵循以下许可协议： 麻省理工学院许可证（MIT License）。
你可以自由地使用和修改它，用于学习或作品集展示。

相关 MCP