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课程的每个部分都对应于本仓库中的一个带有标签的版本：

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

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上加入该课程 →\ 🌐 表示“万维网”或“互联网”的符号，可直接用作描述该概念的文字表述，无需额外翻译。 ****

______________________________________________________________________

❤️ 贡献 / 反馈

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

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

______________________________________________________________________

🪄 许可证

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