模型上下文协议（MCP）-M组网站
一个关于模型上下文协议的综合教育网站，包括交互式教程和工作代码示例。
小组成员： Bibika Ghimire、Mateusz Nowak、Muhammad Sohaib、Michael McCabe、Summer Rhoda
📚 项目结构
mcp-website/
├── src/ # React website source
│ ├── pages/ # Main pages
│ │ ├── Welcome.jsx # Landing page
│ │ ├── Home.jsx # MCP overview
│ │ ├── Presentation.jsx # Our presentation
│ │ ├── Tutorial.jsx # Step-by-step tutorial
│ │ └── CodeExplanation.jsx # Code deep dive
│ ├── components/ # Reusable components
│ └── styles/ # Global styles
├── tutorial-code/ # Working tutorial code
│ └── mcp-server/ # MCP server example
└── dist/ # Build output (generated)🚀 快速开始
先决条件
- Node.js v18或更高版本
- npm或纱线
安装
# Install dependencies
npm install
# Run development server
npm run dev
# Build for production
npm run build
# Preview production build
npm run preview📖 网站内容
1.欢迎页面
- MCP简介
- 快速导航
- 团队信息
2.首页-MCP概述
- 什么是MCP及其创建原因
- 架构和组件
- 实际应用
- 主要特点
3.介绍
- 我们完整的小组演示
- 主题细分
- 关键要点
4.教程(⭐ 主要特点）
一个60分钟的综合教程，教授如何构建支持MCP的任务管理器：
- 先决条件和设置 （10分钟）
- 创建MCP服务器 （20分钟）
- 使用Claude Desktop进行测试 （10分钟）
- 构建React前端 （15分钟）
- 集成模式 （10分钟）
- 测试和部署 （5分钟）
5.代码说明
- 详细的架构分解
- 关键代码模式
- 数据流程图
- 最佳实践
🎓 教程代码
这 /tutorial-code 目录包含一个完整的、可工作的MCP服务器示例：
cd tutorial-code/mcp-server
npm install
npm start看 教程自述 了解详细的使用说明。
🌐 部署到GitHub页面
第一步：更新vite.config.js
确保 base URL与您的存储库名称匹配：
export default defineConfig({
base: '/your-repo-name/', // Change this!
})步骤2：部署
# Build the site
npm run build
# Deploy to GitHub Pages
npm run deploy步骤3：配置GitHub页面
- 转到GitHub上的存储库
- 导航至 设置>页面
- 在“来源”下，选择 gh页面 分支
- 点击 保存
您的网站将在以下网址提供： https://yourusername.github.io/your-repo-name/
🎨 特性
- ✅ 完全响应式设计
- ✅ 带有渐变色调的深色主题
- ✅ 具有复制功能的语法突出显示的代码块
- ✅ 交互式导航
- ✅ 使用工作代码的综合教程
- ✅ 真实的MCP服务器示例
- ✅ 干净、专业的用户界面
📝 评估标准覆盖范围
演示文稿（50%）
- ✅ 结构良好，有渐进的例子
- ✅ 强烈的视觉元素
- ✅ MCP概念的清晰解释
- ✅ 真实世界的用例
在线信息（20%）
- ✅ 格式良好的文档
- ✅ 权威参考来源
- ✅ 有用的视觉效果和图表
- ✅ 内容全面
辅导实验说明（30%）
- ✅ 平台设置说明
- ✅ 分步指南（60分钟）
- ✅ 易于遵循的结构
- ✅ 用于有意义应用程序的工作代码
- ✅ 原创性高
🔧 技术栈
- 框架： React 18+Vite
- 路由： React路由器v6
- 语法高亮显示： 反应语法高亮显示
- 造型： 使用CSS变量自定义CSS
- 部署： GitHub页面
- MCP-SDK： @模型上下文协议/sdk
📚 资源
👥 贡献者
- Bibika Ghimire -研究与分析
- 马泰乌斯·诺瓦克 -用例和企业
- 穆罕默德·索哈伊布 -架构和服务器
- 迈克尔·麦凯布 -文件
- 夏日罗达 -引言与概述
📄 许可证
该项目是为了教育目的而创建的，是华盛顿大学COMP10020互联网技术课程的一部分。
🎯 分级量规对齐
该项目旨在 A2/A3级 通过提供：
- 卓越的演示质量
- 学科知识深度 - 出色的视觉和口头演示 - 优秀的响应材料
- 杰出的在线信息
- 格式良好且详细 - 权威参考来源 - 有用的视觉效果和表格 - 包含“备忘单”
- 优秀教程
- 原创性高 - 完整的设置说明 - 一步一步易于遵循的指南 - 有意义的工作申请
______________________________________________________________________
课程： COMP10020互联网技术\ 机构： 西苏格兰大学\ 学年： 2025-26