MCP Web Tutorial 🚀

MCP Web 教程 🚀

一个用于学习如何构建 MCP（Model Context Protocol）服务的交互式网页教程。这个教育网站提供分步指导，帮助你实现并理解 MCP 服务。

功能 ✨

• 📱 采用移动优先设计理念的现代响应式设计
• 📚 全面的教程内容
• ⚡ 实时代码示例
• 🎨 语法高亮
• 📋 一键复制功能
• 📊 进度跟踪
• 🔍 分步安装指南
• 🌐 交互式界面元素
• 🔄 实时预览
• 🌙 支持深色模式

开始使用 🚀

前置条件 📋

• Node.js（v14 或更高版本）💻
• npm 或 yarn 📦

安装 🛠️

1. 克隆仓库：

git clone https://github.com/opestro/mcp-web.git
cd mcp-web

2. 安装依赖：

npm install

3. 启动服务：

node server.js

4. 在浏览器中访问 http://localhost:3000 🌐

项目结构 📁

mcp-web/
├── views/              # EJS templates
│   ├── layout.ejs      # Main layout template 🏗️
│   ├── index.ejs       # Home page 🏠
│   ├── installation.ejs # Installation guide ⚙️
│   └── tutorial.ejs    # Tutorial content 📚
├── public/             # Static assets 🖼️
│   └── image.png       # Main hero image 🖼️
├── server.js           # Express server 🖥️
└── package.json        # Dependencies 📦

使用的技术 🛠️

• ⚡ Express.js - Web 框架
• 🧩 EJS - 模板引擎
• 💅 TailwindCSS - 样式
• ✨ Prism.js - 代码语法高亮

贡献 🤝

欢迎贡献！请随时提交 Pull Request。

1. Fork 项目 🍴
2. 创建功能分支（git checkout -b feature/amazing-feature）
3. 提交更改（git commit -m 'Add some amazing feature'）
4. 推送到分支（git push origin feature/amazing-feature）
5. 创建 Pull Request 📬

作者 ✍️

Mehdi Harzallah

• 💼 LinkedIn：Mehdi Harzallah
• 🐱 GitHub：@opestro
• 📧 Email：[email protected]

许可证 📄

本项目采用 MIT License 许可，详情请参阅 LICENSE 文件。

致谢 🙏

• 感谢所有参与构建这一教育资源的贡献者 ❤️
• 特别感谢 MCP 社区 🌟

支持 💬

如需支持，你可以：

• 🐞 在 GitHub 上提交 issue
• 💬 通过 WhatsApp 联系：+213 778191078
• 📧 发送邮件至 [email protected]