My MCP Demo

人类学MCP课程

欢迎！这个存储库是在完成Anthropic官方课程后创建的实验。 模型上下文协议（MCP） 它是使用TypeScript和Next.js实现的，而不是使用Python实现的原始版本。

🚀 这个应用程序是如何工作的

此应用程序演示了MCP协议的使用，该协议允许AI或LLM代理连接到外部服务，例如我们的例子 图尔索 （SQLite数据库）e Gmail （Nodemailer - 发送电子邮件），以及本地资源（标记文件）。

• MCP服务器(backend/src/mcp_server.ts)作为通往外部服务和本地资源的“桥梁”。扫描文件夹中的标记档案 mcp-reference/ 查找资源并将其显示为可读资源。
• MCP客户端(backend/src/mcp_client.ts)连接到服务器，请求资源列表并读取其内容。然后，它将收集到的数据发送到AI模型进行处理。
• 前端(frontend/)使用 Next.js 构建的现代界面，可让您查看数据并与 AI 集成进行交互。

该流遵循MCP标准：客户端通过STDIO作为子进程启动服务器，从而实现安全快速的通信。

🛠️ 如何开始

要在本地启动项目，请按照以下步骤操作：

1.先决条件

确保你有 已安装（推荐版本 20+）。

2. 安装和启动

您需要在两个独立的终端上启动后端和前端。

后端：

cd backend
npm install
npm run dev

前端：

cd frontend
npm install
npm run dev

Frontend 将在 http://localhost:3000后端将可在 http://localhost:8000.

🔑 API 配置（Gemini）

该应用程序使用 AI 谷歌双子座 处理通过MCP恢复的数据。

\[！重要\] 目前，该项目使用模型 免费层级Rate Limits（利率限制） 如果您想使用您的个人 API 密钥来避免限制： 1. 创建文件 .env.local 在文件夹中 backend/. 1. 添加变量 ： GEMINI_API_KEY=la_tua_chiave_qui. 1. 为 Gmail 添加变量： - GMAIL_USER=latuaemail@gmail.com - GMAIL_APP_PASSWORD=xxxx xxxx xxxx xxxx （在Google设置->应用密码中生成）。

离开文件夹 backend e frontend在项目的root中，我创建了一个文件 .env.example 您可以查看项目中使用的环境变量。

📁 项目结构

• backend/包含 MCP（服务器、客户端）核心逻辑和 AI 服务。
• frontend/Next.js 用户界面应用程序。
• .gemini/: ⚠️ 忽略此文件夹包含文件 SKILL.md 在代码开发过程中，作为双子座或其他LLM的指令。
• MCP_Flow.md关于协议通信流的技术文档。
• MCP_CheatSheet.md为从 Python SDK（用于官方课程）过渡到 TypeScript 的用户提供快速指南。

🧪 使用的技术

• 框架: Next.js 16+
• 语言: TypeScript
• 协议: @模型上下文协议/sdk
• 人工智能: 谷歌生成人工智能（Gemini）
• 样式: Tailwind CSS