模型上下文协议演示

一个展示如何使用模型上下文协议(MCP)连接外部服务和本地资源的应用程序,支持通过AI模型处理数据。

  • by Dev-EndLess
  • TypeScript
  • 本地部署
  • 更新于
在 GitHub 查看 Dev-EndLess/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.先决条件

确保你有 Node.js 已安装(推荐版本 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/.
  2. 添加变量 : GEMINI_API_KEY=la_tua_chiave_qui.
  3. 为 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 的用户提供快速指南。

🧪 使用的技术