Hugging Face's logo

Spaces:
hongpingzhang
/
mcp-server-hub-ai
Running

App Files Community
3
hongpingzhang commited on
Commit
0ed8b6b
·
verified ·
1 Parent(s): a85ac96

Add 2 files

Browse files
Files changed (2) hide show
  1. README.md +6 -4
  2. index.html +262 -19
README.md CHANGED
@@ -1,10 +1,12 @@
1
  ---
2
- title: Mcp Server Hub Ai
3
- emoji: 🐢
4
  colorFrom: green
5
- colorTo: green
6
  sdk: static
7
  pinned: false
 
 
8
  ---
9
 
10
- Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference
 
1
  ---
2
+ title: mcp-server-hub-ai
3
+ emoji: 🐳
4
  colorFrom: green
5
+ colorTo: yellow
6
  sdk: static
7
  pinned: false
8
+ tags:
9
+ - deepsite
10
  ---
11
 
12
+ Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference
index.html CHANGED
@@ -1,19 +1,262 @@
1
- <!doctype html>
2
- <html>
3
- <head>
4
- <meta charset="utf-8" />
5
- <meta name="viewport" content="width=device-width" />
6
- <title>My static Space</title>
7
- <link rel="stylesheet" href="style.css" />
8
- </head>
9
- <body>
10
- <div class="card">
11
- <h1>Welcome to your static Space!</h1>
12
- <p>You can modify this app directly by editing <i>index.html</i> in the Files and versions tab.</p>
13
- <p>
14
- Also don't forget to check the
15
- <a href="https://huggingface.co/docs/hub/spaces" target="_blank">Spaces documentation</a>.
16
- </p>
17
- </div>
18
- </body>
19
- </html>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
+ <!DOCTYPE html>
2
+ <html lang="en">
3
+ <head>
4
+ <meta charset="UTF-8">
5
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
+ <title>MCP Server Hub</title>
7
+ <script src="https://cdn.tailwindcss.com"></script>
8
+ <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
9
+ <style>
10
+ @import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap');
11
+
12
+ body {
13
+ font-family: 'Inter', sans-serif;
14
+ background-color: #f8fafc;
15
+ }
16
+
17
+ .gradient-bg {
18
+ background: linear-gradient(135deg, #3b82f6 0%, #1d4ed8 100%);
19
+ }
20
+
21
+ .card-hover:hover {
22
+ transform: translateY(-5px);
23
+ box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
24
+ }
25
+
26
+ .glow {
27
+ box-shadow: 0 0 15px rgba(59, 130, 246, 0.3);
28
+ }
29
+ </style>
30
+ </head>
31
+ <body>
32
+ <!-- Header -->
33
+ <header class="gradient-bg text-white">
34
+ <div class="container mx-auto px-6 py-16">
35
+ <div class="flex justify-between items-center">
36
+ <div class="flex items-center space-x-4">
37
+ <div class="w-10 h-10 bg-white rounded-lg flex items-center justify-center">
38
+ <i class="fas fa-server text-blue-600 text-xl"></i>
39
+ </div>
40
+ <h1 class="text-3xl font-bold">MCP Server Hub</h1>
41
+ </div>
42
+ <div>
43
+ <a href="https://gitmcp.io/" class="bg-white text-blue-600 px-6 py-2 rounded-lg font-medium hover:bg-blue-50 transition duration-300">
44
+ GitMCP.io
45
+ </a>
46
+ </div>
47
+ </div>
48
+
49
+ <div class="mt-16 max-w-2xl">
50
+ <h2 class="text-4xl font-bold mb-4">Your Gateway to MCP Servers</h2>
51
+ <p class="text-lg opacity-90">Discover the best resources, tools, and communities for the Model Context Protocol ecosystem.</p>
52
+ </div>
53
+ </div>
54
+ </header>
55
+
56
+ <!-- Main Content -->
57
+ <main class="container mx-auto px-6 py-12">
58
+ <!-- Featured Section -->
59
+ <section class="mb-16">
60
+ <div class="bg-white rounded-xl p-8 shadow-lg glow">
61
+ <div class="flex flex-col md:flex-row items-center">
62
+ <div class="md:w-1/2 mb-6 md:mb-0">
63
+ <h3 class="text-2xl font-bold text-gray-800 mb-4">Integrated with GitMCP</h3>
64
+ <p class="text-gray-600 mb-6">Direct access to the official MCP repository management platform with seamless integration.</p>
65
+ <a href="https://gitmcp.io/" class="inline-block bg-blue-600 text-white px-6 py-3 rounded-lg font-medium hover:bg-blue-700 transition duration-300">
66
+ Visit GitMCP.io <i class="fas fa-external-link-alt ml-2"></i>
67
+ </a>
68
+ </div>
69
+ <div class="md:w-1/2">
70
+ <div class="bg-gray-100 rounded-lg p-4 h-64 flex items-center justify-center">
71
+ <i class="fas fa-code-branch text-6xl text-blue-500 opacity-50"></i>
72
+ </div>
73
+ </div>
74
+ </div>
75
+ </div>
76
+ </section>
77
+
78
+ <!-- Server Resources Grid -->
79
+ <section>
80
+ <h2 class="text-3xl font-bold text-gray-800 mb-8">MCP Server Resources</h2>
81
+ <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
82
+ <!-- Card 1 -->
83
+ <a href="https://github.com/modelcontextprotocol/servers" target="_blank" class="bg-white rounded-xl p-6 shadow-md transition duration-300 card-hover">
84
+ <div class="flex items-center mb-4">
85
+ <div class="w-12 h-12 bg-blue-100 rounded-lg flex items-center justify-center mr-4">
86
+ <i class="fab fa-github text-blue-600 text-xl"></i>
87
+ </div>
88
+ <h3 class="text-xl font-semibold text-gray-800">Official MCP Servers</h3>
89
+ </div>
90
+ <p class="text-gray-600">The official repository for MCP server implementations and documentation.</p>
91
+ </a>
92
+
93
+ <!-- Card 2 -->
94
+ <a href="https://github.com/punkpeye/awesome-mcp-servers" target="_blank" class="bg-white rounded-xl p-6 shadow-md transition duration-300 card-hover">
95
+ <div class="flex items-center mb-4">
96
+ <div class="w-12 h-12 bg-blue-100 rounded-lg flex items-center justify-center mr-4">
97
+ <i class="fas fa-star text-blue-600 text-xl"></i>
98
+ </div>
99
+ <h3 class="text-xl font-semibold text-gray-800">Awesome MCP Servers</h3>
100
+ </div>
101
+ <p class="text-gray-600">A curated list of awesome MCP servers, tools, and resources.</p>
102
+ </a>
103
+
104
+ <!-- Card 3 -->
105
+ <a href="https://smithery.ai/" target="_blank" class="bg-white rounded-xl p-6 shadow-md transition duration-300 card-hover">
106
+ <div class="flex items-center mb-4">
107
+ <div class="w-12 h-12 bg-blue-100 rounded-lg flex items-center justify-center mr-4">
108
+ <i class="fas fa-hammer text-blue-600 text-xl"></i>
109
+ </div>
110
+ <h3 class="text-xl font-semibold text-gray-800">Smithery.ai</h3>
111
+ </div>
112
+ <p class="text-gray-600">Tools and services for building and deploying MCP servers.</p>
113
+ </a>
114
+
115
+ <!-- Card 4 -->
116
+ <a href="https://www.pulsemcp.com/" target="_blank" class="bg-white rounded-xl p-6 shadow-md transition duration-300 card-hover">
117
+ <div class="flex items-center mb-4">
118
+ <div class="w-12 h-12 bg-blue-100 rounded-lg flex items-center justify-center mr-4">
119
+ <i class="fas fa-heartbeat text-blue-600 text-xl"></i>
120
+ </div>
121
+ <h3 class="text-xl font-semibold text-gray-800">PulseMCP</h3>
122
+ </div>
123
+ <p class="text-gray-600">Monitoring and analytics for MCP server performance.</p>
124
+ </a>
125
+
126
+ <!-- Card 5 -->
127
+ <a href="https://mcp.so/" target="_blank" class="bg-white rounded-xl p-6 shadow-md transition duration-300 card-hover">
128
+ <div class="flex items-center mb-4">
129
+ <div class="w-12 h-12 bg-blue-100 rounded-lg flex items-center justify-center mr-4">
130
+ <i class="fas fa-bolt text-blue-600 text-xl"></i>
131
+ </div>
132
+ <h3 class="text-xl font-semibold text-gray-800">MCP.so</h3>
133
+ </div>
134
+ <p class="text-gray-600">Fast and reliable MCP server hosting solutions.</p>
135
+ </a>
136
+
137
+ <!-- Card 6 -->
138
+ <a href="https://cursor.directory/mcp" target="_blank" class="bg-white rounded-xl p-6 shadow-md transition duration-300 card-hover">
139
+ <div class="flex items-center mb-4">
140
+ <div class="w-12 h-12 bg-blue-100 rounded-lg flex items-center justify-center mr-4">
141
+ <i class="fas fa-search text-blue-600 text-xl"></i>
142
+ </div>
143
+ <h3 class="text-xl font-semibold text-gray-800">Cursor Directory</h3>
144
+ </div>
145
+ <p class="text-gray-600">Discover and explore MCP servers in the ecosystem.</p>
146
+ </a>
147
+
148
+ <!-- Card 7 -->
149
+ <a href="https://glama.ai/mcp/servers" target="_blank" class="bg-white rounded-xl p-6 shadow-md transition duration-300 card-hover">
150
+ <div class="flex items-center mb-4">
151
+ <div class="w-12 h-12 bg-blue-100 rounded-lg flex items-center justify-center mr-4">
152
+ <i class="fas fa-robot text-blue-600 text-xl"></i>
153
+ </div>
154
+ <h3 class="text-xl font-semibold text-gray-800">Glama.ai</h3>
155
+ </div>
156
+ <p class="text-gray-600">AI-powered tools for MCP server management.</p>
157
+ </a>
158
+
159
+ <!-- Card 8 -->
160
+ <a href="https://portkey.ai/" target="_blank" class="bg-white rounded-xl p-6 shadow-md transition duration-300 card-hover">
161
+ <div class="flex items-center mb-4">
162
+ <div class="w-12 h-12 bg-blue-100 rounded-lg flex items-center justify-center mr-4">
163
+ <i class="fas fa-key text-blue-600 text-xl"></i>
164
+ </div>
165
+ <h3 class="text-xl font-semibold text-gray-800">Portkey.ai</h3>
166
+ </div>
167
+ <p class="text-gray-600">Authentication and security for MCP servers.</p>
168
+ </a>
169
+
170
+ <!-- Card 9 -->
171
+ <a href="https://cline.bot/mcp-marketplace" target="_blank" class="bg-white rounded-xl p-6 shadow-md transition duration-300 card-hover">
172
+ <div class="flex items-center mb-4">
173
+ <div class="w-12 h-12 bg-blue-100 rounded-lg flex items-center justify-center mr-4">
174
+ <i class="fas fa-store text-blue-600 text-xl"></i>
175
+ </div>
176
+ <h3 class="text-xl font-semibold text-gray-800">MCP Marketplace</h3>
177
+ </div>
178
+ <p class="text-gray-600">Find and purchase MCP server plugins and extensions.</p>
179
+ </a>
180
+
181
+ <!-- Card 10 -->
182
+ <a href="https://github.com/fl-nk/fleur" target="_blank" class="bg-white rounded-xl p-6 shadow-md transition duration-300 card-hover">
183
+ <div class="flex items-center mb-4">
184
+ <div class="w-12 h-12 bg-blue-100 rounded-lg flex items-center justify-center mr-4">
185
+ <i class="fas fa-leaf text-blue-600 text-xl"></i>
186
+ </div>
187
+ <h3 class="text-xl font-semibold text-gray-800">Fleur</h3>
188
+ </div>
189
+ <p class="text-gray-600">Lightweight framework for building MCP servers.</p>
190
+ </a>
191
+
192
+ <!-- Card 11 -->
193
+ <a href="https://cherry-ai.com" target="_blank" class="bg-white rounded-xl p-6 shadow-md transition duration-300 card-hover">
194
+ <div class="flex items-center mb-4">
195
+ <div class="w-12 h-12 bg-blue-100 rounded-lg flex items-center justify-center mr-4">
196
+ <i class="fas fa-cherry text-blue-600 text-xl"></i>
197
+ </div>
198
+ <h3 class="text-xl font-semibold text-gray-800">Cherry AI</h3>
199
+ </div>
200
+ <p class="text-gray-600">AI services compatible with MCP protocol.</p>
201
+ </a>
202
+
203
+ <!-- Card 12 -->
204
+ <a href="https://www.reddit.com/r/mcp/" target="_blank" class="bg-white rounded-xl p-6 shadow-md transition duration-300 card-hover">
205
+ <div class="flex items-center mb-4">
206
+ <div class="w-12 h-12 bg-blue-100 rounded-lg flex items-center justify-center mr-4">
207
+ <i class="fab fa-reddit text-blue-600 text-xl"></i>
208
+ </div>
209
+ <h3 class="text-xl font-semibold text-gray-800">MCP Subreddit</h3>
210
+ </div>
211
+ <p class="text-gray-600">Community discussions about MCP servers and development.</p>
212
+ </a>
213
+ </div>
214
+ </section>
215
+ </main>
216
+
217
+ <!-- Footer -->
218
+ <footer class="bg-gray-900 text-white py-12">
219
+ <div class="container mx-auto px-6">
220
+ <div class="flex flex-col md:flex-row justify-between items-center">
221
+ <div class="mb-6 md:mb-0">
222
+ <div class="flex items-center space-x-2">
223
+ <div class="w-8 h-8 bg-blue-600 rounded-lg flex items-center justify-center">
224
+ <i class="fas fa-server text-white"></i>
225
+ </div>
226
+ <span class="text-xl font-bold">MCP Server Hub</span>
227
+ </div>
228
+ <p class="text-gray-400 mt-2">Connecting the MCP ecosystem</p>
229
+ </div>
230
+ <div class="flex space-x-6">
231
+ <a href="#" class="text-gray-400 hover:text-white transition duration-300">
232
+ <i class="fab fa-twitter text-xl"></i>
233
+ </a>
234
+ <a href="#" class="text-gray-400 hover:text-white transition duration-300">
235
+ <i class="fab fa-github text-xl"></i>
236
+ </a>
237
+ <a href="#" class="text-gray-400 hover:text-white transition duration-300">
238
+ <i class="fab fa-discord text-xl"></i>
239
+ </a>
240
+ </div>
241
+ </div>
242
+ <div class="border-t border-gray-800 mt-8 pt-8 text-center text-gray-400">
243
+ <p>© 2023 MCP Server Hub. All links are property of their respective owners.</p>
244
+ </div>
245
+ </div>
246
+ </footer>
247
+
248
+ <script>
249
+ // Simple animation on page load
250
+ document.addEventListener('DOMContentLoaded', function() {
251
+ const cards = document.querySelectorAll('.card-hover');
252
+
253
+ cards.forEach((card, index) => {
254
+ setTimeout(() => {
255
+ card.style.opacity = '1';
256
+ card.style.transform = 'translateY(0)';
257
+ }, 100 * index);
258
+ });
259
+ });
260
+ </script>
261
+ <p style="border-radius: 8px; text-align: center; font-size: 12px; color: #fff; margin-top: 16px;position: fixed; left: 8px; bottom: 8px; z-index: 10; background: rgba(0, 0, 0, 0.8); padding: 4px 8px;">Made with <img src="https://enzostvs-deepsite.hf.space/logo.svg" alt="DeepSite Logo" style="width: 16px; height: 16px; vertical-align: middle;display:inline-block;margin-right:3px;filter:brightness(0) invert(1);"><a href="https://enzostvs-deepsite.hf.space" style="color: #fff;text-decoration: underline;" target="_blank" >DeepSite</a> - 🧬 <a href="https://enzostvs-deepsite.hf.space?remix=hongpingzhang/mcp-server-hub-ai" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body>
262
+ </html>