https://github.com/opestro/mcp-web-101
An interactive web tutorial for learning how to build MCP (Model Context Protocol) servers. This educational website provides step-by-step guidance for implementing and understanding MCP servers.
https://github.com/opestro/mcp-web-101
ai ia llm mcp mcp-server
Last synced: 2 months ago
JSON representation
An interactive web tutorial for learning how to build MCP (Model Context Protocol) servers. This educational website provides step-by-step guidance for implementing and understanding MCP servers.
- Host: GitHub
- URL: https://github.com/opestro/mcp-web-101
- Owner: opestro
- Created: 2025-04-02T16:54:31.000Z (7 months ago)
- Default Branch: main
- Last Pushed: 2025-04-02T17:55:16.000Z (7 months ago)
- Last Synced: 2025-04-30T00:03:26.742Z (6 months ago)
- Topics: ai, ia, llm, mcp, mcp-server
- Language: EJS
- Homepage: https://mcp.cscclub.space/
- Size: 101 KB
- Stars: 2
- Watchers: 2
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
- awesome-mcp-servers - **mcp-web-101** - An interactive web tutorial for learning how to build MCP (Model Context Protocol) servers. This educational website provides step-by-step guidance for implementing and understanding MCP servers. `ejs` `ai` `ia` `llm` `mcp` `git clone https://github.com/opestro/mcp-web-101` (🤖 AI/ML)
- awesome-mcp-servers - **mcp-web-101** - An interactive web tutorial for learning how to build MCP (Model Context Protocol) servers. This educational website provides step-by-step guidance for implementing and understanding MCP servers. `ejs` `ai` `ia` `llm` `mcp` `git clone https://github.com/opestro/mcp-web-101` (AI/ML)
README
# MCP Web Tutorial 🚀
An interactive web tutorial for learning how to build MCP (Model Context Protocol) servers. This educational website provides step-by-step guidance for implementing and understanding MCP servers.
## Features ✨
- 📱 Modern, responsive design with mobile-first approach
- 📚 Comprehensive tutorial content
- ⚡ Real-time code examples
- 🎨 Syntax highlighting
- 📋 Copy-to-clipboard functionality
- 📊 Progress tracking
- 🔍 Step-by-step installation guide
- 🌐 Interactive UI elements
- 🔄 Live previews
- 🌙 Dark mode support
## Getting Started 🚀
### Prerequisites 📋
- Node.js (v14 or higher) 💻
- npm or yarn 📦
### Installation 🛠️
1. Clone the repository:
```bash
git clone https://github.com/opestro/mcp-web.git
cd mcp-web
```
2. Install dependencies:
```bash
npm install
```
3. Start the server:
```bash
node server.js
```
4. Visit `http://localhost:3000` in your browser 🌐
## Project Structure 📁
```
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 📦
```
## Technologies Used 🛠️
- ⚡ Express.js - Web framework
- 🧩 EJS - Templating engine
- 💅 TailwindCSS - Styling
- ✨ Prism.js - Code syntax highlighting
## Contributing 🤝
Contributions are welcome! Please feel free to submit a Pull Request.
1. Fork the project 🍴
2. Create your feature branch (`git checkout -b feature/amazing-feature`)
3. Commit your changes (`git commit -m 'Add some amazing feature'`)
4. Push to the branch (`git push origin feature/amazing-feature`)
5. Open a Pull Request 📬
## Author ✍️
**Mehdi Harzallah**
- 💼 LinkedIn: [Mehdi Harzallah](https://linkedin.com/in/mehdi-harzallah)
- 🐱 GitHub: [@opestro](https://github.com/opestro)
- 📧 Email: mahdiharzallah21@gmail.com
## License 📄
This project is licensed under the MIT License - see the [LICENSE](LICENSE) file for details.
## Acknowledgments 🙏
- Thanks to all contributors who helped in building this educational resource ❤️
- Special thanks to the MCP community 🌟
## Support 💬
For support, you can:
- 🐞 Open an issue on GitHub
- 💬 Contact via WhatsApp: +213 778191078
- 📧 Send an email to mahdiharzallah21@gmail.com