brainable commited on
Commit
a64540a
·
verified ·
1 Parent(s): e637ad0

Add 2 files

Browse files
Files changed (2) hide show
  1. README.md +7 -5
  2. index.html +736 -19
README.md CHANGED
@@ -1,10 +1,12 @@
1
  ---
2
- title: Se2
3
- emoji: 💻
4
- colorFrom: indigo
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: se2
3
+ emoji: 🐳
4
+ colorFrom: purple
5
+ colorTo: pink
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,736 @@
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>Agent Builder | MCP Store</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
+ <link href="https://fonts.googleapis.com/css2?family=Roboto+Mono:wght@400;500&family=Inter:wght@400;500;600;700&display=swap" rel="stylesheet">
10
+ <script>
11
+ tailwind.config = {
12
+ theme: {
13
+ extend: {
14
+ colors: {
15
+ primary: '#00ff9d',
16
+ secondary: '#00b4ff',
17
+ dark: '#0a0a0a',
18
+ darker: '#050505',
19
+ light: '#f0f0f0',
20
+ gray: {
21
+ 800: '#1e1e1e',
22
+ 700: '#2d2d2d',
23
+ 600: '#3a3a3a',
24
+ }
25
+ },
26
+ fontFamily: {
27
+ sans: ['Inter', 'sans-serif'],
28
+ mono: ['Roboto Mono', 'monospace'],
29
+ },
30
+ animation: {
31
+ 'pulse-slow': 'pulse 3s cubic-bezier(0.4, 0, 0.6, 1) infinite',
32
+ 'blink': 'blink 1s step-end infinite',
33
+ },
34
+ keyframes: {
35
+ blink: {
36
+ '0%, 100%': { opacity: '1' },
37
+ '50%': { opacity: '0' },
38
+ }
39
+ }
40
+ }
41
+ }
42
+ }
43
+ </script>
44
+ <style>
45
+ .terminal-input::before {
46
+ content: '> ';
47
+ color: #00ff9d;
48
+ }
49
+ .code-block {
50
+ position: relative;
51
+ }
52
+ .code-block::before {
53
+ content: '';
54
+ position: absolute;
55
+ top: 0;
56
+ left: 0;
57
+ width: 4px;
58
+ height: 100%;
59
+ background: linear-gradient(to bottom, #00ff9d, #00b4ff);
60
+ }
61
+ .glow-effect {
62
+ box-shadow: 0 0 10px rgba(0, 255, 157, 0.5);
63
+ }
64
+ .glow-effect:hover {
65
+ box-shadow: 0 0 15px rgba(0, 255, 157, 0.7);
66
+ }
67
+ .sidebar-item:hover {
68
+ background: linear-gradient(90deg, rgba(0, 255, 157, 0.1) 0%, rgba(0, 255, 157, 0) 100%);
69
+ border-left: 2px solid #00ff9d;
70
+ }
71
+ .sidebar-item.active {
72
+ background: linear-gradient(90deg, rgba(0, 255, 157, 0.2) 0%, rgba(0, 255, 157, 0) 100%);
73
+ border-left: 2px solid #00ff9d;
74
+ }
75
+ .tab-item {
76
+ position: relative;
77
+ }
78
+ .tab-item.active::after {
79
+ content: '';
80
+ position: absolute;
81
+ bottom: 0;
82
+ left: 0;
83
+ width: 100%;
84
+ height: 2px;
85
+ background-color: #00ff9d;
86
+ }
87
+ .mcp-card:hover {
88
+ transform: translateY(-2px);
89
+ box-shadow: 0 10px 20px rgba(0, 0, 0, 0.3);
90
+ }
91
+ .config-section {
92
+ border-left: 1px solid #2d2d2d;
93
+ }
94
+ .config-section:first-child {
95
+ border-left: none;
96
+ }
97
+ .category-chip {
98
+ transition: all 0.2s ease;
99
+ }
100
+ .category-chip.active {
101
+ background-color: rgba(0, 255, 157, 0.1);
102
+ border-color: #00ff9d;
103
+ color: #00ff9d;
104
+ }
105
+ .mcp-detail-modal {
106
+ backdrop-filter: blur(5px);
107
+ }
108
+ .product-logo {
109
+ width: 36px;
110
+ height: 36px;
111
+ object-fit: contain;
112
+ border-radius: 6px;
113
+ background: white;
114
+ padding: 4px;
115
+ }
116
+ </style>
117
+ </head>
118
+ <body class="bg-dark text-light font-sans flex h-screen overflow-hidden">
119
+ <!-- Sidebar -->
120
+ <div class="w-64 bg-darker border-r border-gray-800 flex flex-col">
121
+ <div class="p-4 border-b border-gray-800 flex items-center">
122
+ <div class="w-8 h-8 rounded-full bg-primary flex items-center justify-center mr-3">
123
+ <i class="fas fa-robot text-dark"></i>
124
+ </div>
125
+ <h1 class="text-xl font-bold">
126
+ <span class="text-primary">Agent</span>Builder
127
+ </h1>
128
+ </div>
129
+
130
+ <div class="p-4 border-b border-gray-800">
131
+ <button class="w-full bg-primary hover:bg-opacity-90 text-dark font-semibold py-2 px-4 rounded-md flex items-center justify-center transition-all">
132
+ <i class="fas fa-plus mr-2"></i> New Agent
133
+ </button>
134
+ </div>
135
+
136
+ <nav class="flex-1 overflow-y-auto">
137
+ <div class="p-2">
138
+ <h3 class="text-xs uppercase text-gray-500 font-mono tracking-wider mb-2 px-3">Navigation</h3>
139
+ <a href="#" class="sidebar-item flex items-center py-2 px-3 rounded-md mb-1 transition-all">
140
+ <i class="fas fa-sliders-h mr-3 text-gray-400"></i>
141
+ <span>Agent Builder</span>
142
+ </a>
143
+ <a href="#" class="sidebar-item active flex items-center py-2 px-3 rounded-md mb-1 transition-all">
144
+ <i class="fas fa-store mr-3 text-secondary"></i>
145
+ <span>MCP Store</span>
146
+ </a>
147
+ <a href="#" class="sidebar-item flex items-center py-2 px-3 rounded-md mb-1 transition-all">
148
+ <i class="fas fa-boxes mr-3 text-gray-400"></i>
149
+ <span>My Agents</span>
150
+ </a>
151
+ </div>
152
+
153
+ <div class="p-2 mt-4">
154
+ <h3 class="text-xs uppercase text-gray-500 font-mono tracking-wider mb-2 px-3">Recent Agents</h3>
155
+ <a href="#" class="sidebar-item flex items-center py-2 px-3 rounded-md mb-1 transition-all">
156
+ <div class="w-2 h-2 rounded-full bg-primary mr-3"></div>
157
+ <span>Customer Support Bot</span>
158
+ </a>
159
+ <a href="#" class="sidebar-item flex items-center py-2 px-3 rounded-md mb-1 transition-all">
160
+ <div class="w-2 h-2 rounded-full bg-secondary mr-3"></div>
161
+ <span>Data Analyzer</span>
162
+ </a>
163
+ <a href="#" class="sidebar-item flex items-center py-2 px-3 rounded-md mb-1 transition-all">
164
+ <div class="w-2 h-2 rounded-full bg-gray-500 mr-3"></div>
165
+ <span>Content Generator</span>
166
+ </a>
167
+ </div>
168
+ </nav>
169
+
170
+ <div class="p-4 border-t border-gray-800">
171
+ <div class="flex items-center">
172
+ <div class="w-8 h-8 rounded-full bg-gray-700 flex items-center justify-center mr-3">
173
+ <i class="fas fa-user text-gray-400"></i>
174
+ </div>
175
+ <div>
176
+ <div class="text-sm font-medium">John Doe</div>
177
+ <div class="text-xs text-gray-500">Admin</div>
178
+ </div>
179
+ </div>
180
+ </div>
181
+ </div>
182
+
183
+ <!-- Main Content - MCP Store -->
184
+ <div class="flex-1 flex flex-col overflow-hidden">
185
+ <!-- Top Bar -->
186
+ <div class="bg-darker border-b border-gray-800 p-4 flex items-center justify-between">
187
+ <div class="flex items-center">
188
+ <h2 class="text-xl font-bold">
189
+ <i class="fas fa-store mr-2 text-secondary"></i>
190
+ <span>MCP</span> Store
191
+ </h2>
192
+ <div class="ml-4 text-sm bg-gray-800 text-gray-400 px-2 py-1 rounded font-mono">
193
+ <span class="text-primary">128</span> MCPs available
194
+ </div>
195
+ </div>
196
+
197
+ <div class="flex items-center">
198
+ <div class="relative mr-4">
199
+ <input type="text" placeholder="Search MCPs..." class="bg-gray-800 border border-gray-700 rounded-md pl-10 pr-4 py-2 text-sm focus:outline-none focus:ring-1 focus:ring-primary focus:border-transparent w-64">
200
+ <i class="fas fa-search absolute left-3 top-3 text-gray-500"></i>
201
+ </div>
202
+ <button class="bg-gray-800 hover:bg-gray-700 text-light px-4 py-2 rounded-md text-sm font-medium transition-all mr-2">
203
+ <i class="fas fa-filter mr-2"></i> Filters
204
+ </button>
205
+ <button class="bg-primary hover:bg-opacity-90 text-dark px-4 py-2 rounded-md text-sm font-medium transition-all">
206
+ <i class="fas fa-upload mr-2"></i> Submit MCP
207
+ </button>
208
+ </div>
209
+ </div>
210
+
211
+ <!-- Content Area -->
212
+ <div class="flex-1 overflow-auto p-6">
213
+ <div class="max-w-7xl mx-auto">
214
+ <!-- Categories -->
215
+ <div class="mb-6 overflow-x-auto">
216
+ <div class="flex space-x-2 pb-2">
217
+ <button class="category-chip active px-4 py-2 rounded-full border border-gray-700 text-sm whitespace-nowrap">
218
+ All Categories
219
+ </button>
220
+ <button class="category-chip px-4 py-2 rounded-full border border-gray-700 text-sm whitespace-nowrap">
221
+ <i class="fas fa-headset mr-2"></i> Customer Support
222
+ </button>
223
+ <button class="category-chip px-4 py-2 rounded-full border border-gray-700 text-sm whitespace-nowrap">
224
+ <i class="fas fa-database mr-2"></i> Data Processing
225
+ </button>
226
+ <button class="category-chip px-4 py-2 rounded-full border border-gray-700 text-sm whitespace-nowrap">
227
+ <i class="fas fa-tasks mr-2"></i> Productivity
228
+ </button>
229
+ <button class="category-chip px-4 py-2 rounded-full border border-gray-700 text-sm whitespace-nowrap">
230
+ <i class="fas fa-chart-line mr-2"></i> Analytics
231
+ </button>
232
+ <button class="category-chip px-4 py-2 rounded-full border border-gray-700 text-sm whitespace-nowrap">
233
+ <i class="fas fa-globe mr-2"></i> Web Services
234
+ </button>
235
+ <button class="category-chip px-4 py-2 rounded-full border border-gray-700 text-sm whitespace-nowrap">
236
+ <i class="fas fa-cogs mr-2"></i> Integrations
237
+ </button>
238
+ </div>
239
+ </div>
240
+
241
+ <!-- Featured MCPs -->
242
+ <div class="mb-8">
243
+ <h3 class="text-lg font-semibold mb-4 flex items-center">
244
+ <i class="fas fa-star mr-2 text-yellow-500"></i> Featured MCPs
245
+ </h3>
246
+ <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
247
+ <!-- Featured MCP Card -->
248
+ <div class="mcp-card bg-gray-800 border border-gray-700 rounded-lg overflow-hidden transition-all duration-300 hover:shadow-lg relative">
249
+ <div class="absolute top-3 right-3 bg-yellow-600 text-white text-xs px-2 py-1 rounded flex items-center">
250
+ <i class="fas fa-crown mr-1"></i> Featured
251
+ </div>
252
+ <div class="p-4">
253
+ <div class="flex items-start justify-between mb-3">
254
+ <div class="flex items-center">
255
+ <img src="https://upload.wikimedia.org/wikipedia/commons/7/7a/Zendesk_logo.png" alt="Zendesk" class="product-logo mr-3">
256
+ <div>
257
+ <h4 class="font-medium">Zendesk MCP</h4>
258
+ <div class="text-xs text-gray-500 mt-1">v2.1.4 by <span class="text-primary">Zendesk</span></div>
259
+ </div>
260
+ </div>
261
+ <span class="bg-gray-700 text-primary text-xs px-2 py-1 rounded">Popular</span>
262
+ </div>
263
+ <p class="text-sm text-gray-400 mb-4">Full integration with Zendesk Support, Talk, and Guide. Create, update, and search tickets with AI-powered suggestions.</p>
264
+ <div class="flex items-center justify-between">
265
+ <div class="flex items-center text-xs text-gray-500">
266
+ <i class="fas fa-download mr-1"></i> 1.8K
267
+ <i class="fas fa-star ml-3 mr-1 text-yellow-500"></i> 4.9
268
+ </div>
269
+ <button class="text-xs bg-primary hover:bg-opacity-90 text-dark px-3 py-1 rounded transition-all">
270
+ Add to Agent
271
+ </button>
272
+ </div>
273
+ </div>
274
+ </div>
275
+
276
+ <!-- Featured MCP Card -->
277
+ <div class="mcp-card bg-gray-800 border border-gray-700 rounded-lg overflow-hidden transition-all duration-300 hover:shadow-lg relative">
278
+ <div class="absolute top-3 right-3 bg-yellow-600 text-white text-xs px-2 py-1 rounded flex items-center">
279
+ <i class="fas fa-crown mr-1"></i> Featured
280
+ </div>
281
+ <div class="p-4">
282
+ <div class="flex items-start justify-between mb-3">
283
+ <div class="flex items-center">
284
+ <img src="https://upload.wikimedia.org/wikipedia/commons/8/8d/DuckDuckGo_logo.svg" alt="DuckDuckGo" class="product-logo mr-3">
285
+ <div>
286
+ <h4 class="font-medium">DuckDuckGo MCP</h4>
287
+ <div class="text-xs text-gray-500 mt-1">v1.5.2 by <span class="text-primary">DuckDuckGo</span></div>
288
+ </div>
289
+ </div>
290
+ <span class="bg-gray-700 text-primary text-xs px-2 py-1 rounded">Verified</span>
291
+ </div>
292
+ <p class="text-sm text-gray-400 mb-4">Privacy-focused search integration with instant answers, private search results, and zero tracking.</p>
293
+ <div class="flex items-center justify-between">
294
+ <div class="flex items-center text-xs text-gray-500">
295
+ <i class="fas fa-download mr-1"></i> 1.2K
296
+ <i class="fas fa-star ml-3 mr-1 text-yellow-500"></i> 4.7
297
+ </div>
298
+ <button class="text-xs bg-primary hover:bg-opacity-90 text-dark px-3 py-1 rounded transition-all">
299
+ Add to Agent
300
+ </button>
301
+ </div>
302
+ </div>
303
+ </div>
304
+
305
+ <!-- Featured MCP Card -->
306
+ <div class="mcp-card bg-gray-800 border border-gray-700 rounded-lg overflow-hidden transition-all duration-300 hover:shadow-lg relative">
307
+ <div class="absolute top-3 right-3 bg-yellow-600 text-white text-xs px-2 py-1 rounded flex items-center">
308
+ <i class="fas fa-crown mr-1"></i> Featured
309
+ </div>
310
+ <div class="p-4">
311
+ <div class="flex items-start justify-between mb-3">
312
+ <div class="flex items-center">
313
+ <img src="https://upload.wikimedia.org/wikipedia/commons/8/8b/HubSpot_Logo.svg" alt="HubSpot" class="product-logo mr-3">
314
+ <div>
315
+ <h4 class="font-medium">HubSpot MCP</h4>
316
+ <div class="text-xs text-gray-500 mt-1">v3.0.1 by <span class="text-primary">HubSpot</span></div>
317
+ </div>
318
+ </div>
319
+ <span class="bg-gray-700 text-primary text-xs px-2 py-1 rounded">New</span>
320
+ </div>
321
+ <p class="text-sm text-gray-400 mb-4">Complete CRM integration with contacts, companies, deals, and marketing automation workflows.</p>
322
+ <div class="flex items-center justify-between">
323
+ <div class="flex items-center text-xs text-gray-500">
324
+ <i class="fas fa-download mr-1"></i> 923
325
+ <i class="fas fa-star ml-3 mr-1 text-yellow-500"></i> 4.8
326
+ </div>
327
+ <button class="text-xs bg-primary hover:bg-opacity-90 text-dark px-3 py-1 rounded transition-all">
328
+ Add to Agent
329
+ </button>
330
+ </div>
331
+ </div>
332
+ </div>
333
+ </div>
334
+ </div>
335
+
336
+ <!-- All MCPs -->
337
+ <div>
338
+ <div class="flex items-center justify-between mb-4">
339
+ <h3 class="text-lg font-semibold flex items-center">
340
+ <i class="fas fa-boxes mr-2 text-gray-400"></i> All MCPs
341
+ </h3>
342
+ <div class="flex items-center text-sm text-gray-500">
343
+ <span class="mr-2">Sort by:</span>
344
+ <select class="bg-gray-800 border border-gray-700 rounded-md px-3 py-1 text-sm focus:outline-none focus:ring-1 focus:ring-primary focus:border-transparent">
345
+ <option>Most Popular</option>
346
+ <option>Highest Rated</option>
347
+ <option>Newest</option>
348
+ <option>Recently Updated</option>
349
+ </select>
350
+ </div>
351
+ </div>
352
+
353
+ <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
354
+ <!-- MCP Card -->
355
+ <div class="mcp-card bg-gray-800 border border-gray-700 rounded-lg overflow-hidden transition-all duration-300 hover:shadow-lg">
356
+ <div class="p-4">
357
+ <div class="flex items-start justify-between mb-3">
358
+ <div class="flex items-center">
359
+ <img src="https://upload.wikimedia.org/wikipedia/commons/4/4a/Amazon_AWS_logo.svg" alt="AWS" class="product-logo mr-3">
360
+ <div>
361
+ <h4 class="font-medium">AWS MCP</h4>
362
+ <div class="text-xs text-gray-500 mt-1">v2.3.0 by <span class="text-primary">Amazon</span></div>
363
+ </div>
364
+ </div>
365
+ </div>
366
+ <p class="text-sm text-gray-400 mb-4">Access AWS services including EC2, S3, Lambda, and more with secure IAM role integration.</p>
367
+ <div class="flex items-center justify-between">
368
+ <div class="flex items-center text-xs text-gray-500">
369
+ <i class="fas fa-download mr-1"></i> 1.5K
370
+ <i class="fas fa-star ml-3 mr-1 text-yellow-500"></i> 4.6
371
+ </div>
372
+ <button class="text-xs bg-primary hover:bg-opacity-90 text-dark px-3 py-1 rounded transition-all">
373
+ Add to Agent
374
+ </button>
375
+ </div>
376
+ </div>
377
+ </div>
378
+
379
+ <!-- MCP Card -->
380
+ <div class="mcp-card bg-gray-800 border border-gray-700 rounded-lg overflow-hidden transition-all duration-300 hover:shadow-lg">
381
+ <div class="p-4">
382
+ <div class="flex items-start justify-between mb-3">
383
+ <div class="flex items-center">
384
+ <img src="https://upload.wikimedia.org/wikipedia/commons/7/7b/Salesforce.com_logo.svg" alt="Salesforce" class="product-logo mr-3">
385
+ <div>
386
+ <h4 class="font-medium">Salesforce MCP</h4>
387
+ <div class="text-xs text-gray-500 mt-1">v3.2.1 by <span class="text-primary">Salesforce</span></div>
388
+ </div>
389
+ </div>
390
+ <span class="bg-gray-700 text-primary text-xs px-2 py-1 rounded">New</span>
391
+ </div>
392
+ <p class="text-sm text-gray-400 mb-4">Full CRM integration with accounts, contacts, opportunities, and custom objects.</p>
393
+ <div class="flex items-center justify-between">
394
+ <div class="flex items-center text-xs text-gray-500">
395
+ <i class="fas fa-download mr-1"></i> 1.1K
396
+ <i class="fas fa-star ml-3 mr-1 text-yellow-500"></i> 4.7
397
+ </div>
398
+ <button class="text-xs bg-primary hover:bg-opacity-90 text-dark px-3 py-1 rounded transition-all">
399
+ Add to Agent
400
+ </button>
401
+ </div>
402
+ </div>
403
+ </div>
404
+
405
+ <!-- MCP Card -->
406
+ <div class="mcp-card bg-gray-800 border border-gray-700 rounded-lg overflow-hidden transition-all duration-300 hover:shadow-lg">
407
+ <div class="p-4">
408
+ <div class="flex items-start justify-between mb-3">
409
+ <div class="flex items-center">
410
+ <img src="https://upload.wikimedia.org/wikipedia/commons/4/44/Microsoft_logo.svg" alt="Microsoft" class="product-logo mr-3">
411
+ <div>
412
+ <h4 class="font-medium">Microsoft 365 MCP</h4>
413
+ <div class="text-xs text-gray-500 mt-1">v2.0.5 by <span class="text-primary">Microsoft</span></div>
414
+ </div>
415
+ </div>
416
+ </div>
417
+ <p class="text-sm text-gray-400 mb-4">Integrate with Outlook, Teams, SharePoint, and other Microsoft 365 services.</p>
418
+ <div class="flex items-center justify-between">
419
+ <div class="flex items-center text-xs text-gray-500">
420
+ <i class="fas fa-download mr-1"></i> 892
421
+ <i class="fas fa-star ml-3 mr-1 text-yellow-500"></i> 4.5
422
+ </div>
423
+ <button class="text-xs bg-primary hover:bg-opacity-90 text-dark px-3 py-1 rounded transition-all">
424
+ Add to Agent
425
+ </button>
426
+ </div>
427
+ </div>
428
+ </div>
429
+
430
+ <!-- MCP Card -->
431
+ <div class="mcp-card bg-gray-800 border border-gray-700 rounded-lg overflow-hidden transition-all duration-300 hover:shadow-lg">
432
+ <div class="p-4">
433
+ <div class="flex items-start justify-between mb-3">
434
+ <div class="flex items-center">
435
+ <img src="https://upload.wikimedia.org/wikipedia/commons/e/e9/Notion-logo.svg" alt="Notion" class="product-logo mr-3">
436
+ <div>
437
+ <h4 class="font-medium">Notion MCP</h4>
438
+ <div class="text-xs text-gray-500 mt-1">v1.8.3 by <span class="text-primary">Notion</span></div>
439
+ </div>
440
+ </div>
441
+ </div>
442
+ <p class="text-sm text-gray-400 mb-4">Read and write to Notion databases, pages, and blocks with advanced query capabilities.</p>
443
+ <div class="flex items-center justify-between">
444
+ <div class="flex items-center text-xs text-gray-500">
445
+ <i class="fas fa-download mr-1"></i> 1.2K
446
+ <i class="fas fa-star ml-3 mr-1 text-yellow-500"></i> 4.8
447
+ </div>
448
+ <button class="text-xs bg-primary hover:bg-opacity-90 text-dark px-3 py-1 rounded transition-all">
449
+ Add to Agent
450
+ </button>
451
+ </div>
452
+ </div>
453
+ </div>
454
+
455
+ <!-- MCP Card -->
456
+ <div class="mcp-card bg-gray-800 border border-gray-700 rounded-lg overflow-hidden transition-all duration-300 hover:shadow-lg">
457
+ <div class="p-4">
458
+ <div class="flex items-start justify-between mb-3">
459
+ <div class="flex items-center">
460
+ <img src="https://upload.wikimedia.org/wikipedia/commons/7/7e/Gmail_icon_%282020%29.svg" alt="Gmail" class="product-logo mr-3">
461
+ <div>
462
+ <h4 class="font-medium">Gmail MCP</h4>
463
+ <div class="text-xs text-gray-500 mt-1">v1.4.2 by <span class="text-primary">Google</span></div>
464
+ </div>
465
+ </div>
466
+ </div>
467
+ <p class="text-sm text-gray-400 mb-4">Send, receive, and manage emails with Gmail API integration and smart categorization.</p>
468
+ <div class="flex items-center justify-between">
469
+ <div class="flex items-center text-xs text-gray-500">
470
+ <i class="fas fa-download mr-1"></i> 1.3K
471
+ <i class="fas fa-star ml-3 mr-1 text-yellow-500"></i> 4.7
472
+ </div>
473
+ <button class="text-xs bg-primary hover:bg-opacity-90 text-dark px-3 py-1 rounded transition-all">
474
+ Add to Agent
475
+ </button>
476
+ </div>
477
+ </div>
478
+ </div>
479
+
480
+ <!-- MCP Card -->
481
+ <div class="mcp-card bg-gray-800 border border-gray-700 rounded-lg overflow-hidden transition-all duration-300 hover:shadow-lg">
482
+ <div class="p-4">
483
+ <div class="flex items-start justify-between mb-3">
484
+ <div class="flex items-center">
485
+ <img src="https://upload.wikimedia.org/wikipedia/commons/4/45/Stripe_logo%2C_revised_2016.svg" alt="Stripe" class="product-logo mr-3">
486
+ <div>
487
+ <h4 class="font-medium">Stripe MCP</h4>
488
+ <div class="text-xs text-gray-500 mt-1">v2.1.0 by <span class="text-primary">Stripe</span></div>
489
+ </div>
490
+ </div>
491
+ <span class="bg-gray-700 text-primary text-xs px-2 py-1 rounded">Verified</span>
492
+ </div>
493
+ <p class="text-sm text-gray-400 mb-4">Process payments, manage subscriptions, and handle refunds through Stripe's API.</p>
494
+ <div class="flex items-center justify-between">
495
+ <div class="flex items-center text-xs text-gray-500">
496
+ <i class="fas fa-download mr-1"></i> 987
497
+ <i class="fas fa-star ml-3 mr-1 text-yellow-500"></i> 4.9
498
+ </div>
499
+ <button class="text-xs bg-primary hover:bg-opacity-90 text-dark px-3 py-1 rounded transition-all">
500
+ Add to Agent
501
+ </button>
502
+ </div>
503
+ </div>
504
+ </div>
505
+ </div>
506
+
507
+ <!-- Pagination -->
508
+ <div class="mt-8 flex justify-between items-center">
509
+ <div class="text-sm text-gray-500">
510
+ Showing 1-9 of 128 MCPs
511
+ </div>
512
+ <div class="flex space-x-2">
513
+ <button class="px-4 py-2 bg-gray-800 border border-gray-700 rounded text-sm flex items-center disabled:opacity-50" disabled>
514
+ <i class="fas fa-chevron-left mr-2"></i> Previous
515
+ </button>
516
+ <button class="px-4 py-2 bg-gray-800 border border-gray-700 rounded text-sm flex items-center">
517
+ Next <i class="fas fa-chevron-right ml-2"></i>
518
+ </button>
519
+ </div>
520
+ </div>
521
+ </div>
522
+ </div>
523
+ </div>
524
+ </div>
525
+
526
+ <!-- MCP Detail Modal (Hidden by default) -->
527
+ <div id="mcp-detail-modal" class="fixed inset-0 bg-black bg-opacity-70 flex items-center justify-center z-50 hidden mcp-detail-modal">
528
+ <div class="bg-darker border border-gray-800 rounded-lg w-full max-w-4xl max-h-[90vh] overflow-hidden">
529
+ <div class="p-4 border-b border-gray-800 flex items-center justify-between">
530
+ <div class="flex items-center">
531
+ <img src="https://upload.wikimedia.org/wikipedia/commons/7/7a/Zendesk_logo.png" alt="Zendesk" class="product-logo mr-3">
532
+ <h3 class="text-xl font-bold">Zendesk MCP</h3>
533
+ </div>
534
+ <button id="close-mcp-detail" class="text-gray-500 hover:text-light">
535
+ <i class="fas fa-times"></i>
536
+ </button>
537
+ </div>
538
+
539
+ <div class="overflow-y-auto p-6" style="max-height: calc(90vh - 120px)">
540
+ <div class="grid grid-cols-1 lg:grid-cols-3 gap-6 mb-6">
541
+ <div class="lg:col-span-2">
542
+ <div class="mb-6">
543
+ <h4 class="text-lg font-semibold mb-2">Description</h4>
544
+ <p class="text-gray-400">
545
+ The Zendesk MCP provides complete integration with Zendesk's customer service platform including Support, Talk, and Guide products.
546
+ It allows your AI agent to create, update, and search tickets with AI-powered suggestions for responses and categorization.
547
+ The MCP supports attachments, custom fields, and real-time updates.
548
+ </p>
549
+ </div>
550
+
551
+ <div class="mb-6">
552
+ <h4 class="text-lg font-semibold mb-2">Features</h4>
553
+ <ul class="list-disc list-inside text-gray-400 space-y-2">
554
+ <li>Create and manage support tickets with all field types</li>
555
+ <li>Search tickets with advanced filtering and sorting</li>
556
+ <li>AI-powered response suggestions based on ticket content</li>
557
+ <li>Handle attachments and inline images</li>
558
+ <li>Support for Zendesk Talk (voice) and Chat</li>
559
+ <li>Access Help Center articles and community posts</li>
560
+ <li>Real-time webhook notifications for ticket updates</li>
561
+ <li>Support for custom ticket forms and fields</li>
562
+ </ul>
563
+ </div>
564
+
565
+ <div>
566
+ <h4 class="text-lg font-semibold mb-2">Configuration</h4>
567
+ <div class="bg-gray-800 rounded-md p-4 border border-gray-700">
568
+ <div class="mb-4">
569
+ <label class="block text-sm font-medium text-gray-400 mb-1">Zendesk Subdomain</label>
570
+ <div class="flex">
571
+ <input type="text" placeholder="yourdomain" class="flex-1 bg-gray-700 border border-gray-600 rounded-l-md px-3 py-2 text-sm focus:outline-none focus:ring-1 focus:ring-primary focus:border-transparent">
572
+ <div class="bg-gray-600 px-3 py-2 text-sm border-t border-r border-b border-gray-600 rounded-r-md">.zendesk.com</div>
573
+ </div>
574
+ </div>
575
+
576
+ <div class="mb-4">
577
+ <label class="block text-sm font-medium text-gray-400 mb-1">Authentication Method</label>
578
+ <select class="w-full bg-gray-700 border border-gray-600 rounded-md px-3 py-2 text-sm focus:outline-none focus:ring-1 focus:ring-primary focus:border-transparent">
579
+ <option>API Token</option>
580
+ <option>OAuth 2.0</option>
581
+ <option>Basic Auth</option>
582
+ </select>
583
+ </div>
584
+
585
+ <div class="flex items-center justify-between">
586
+ <div class="flex items-center">
587
+ <input type="checkbox" id="enable-voice" class="mr-2" checked>
588
+ <label for="enable-voice" class="text-sm text-gray-400">Enable Zendesk Talk</label>
589
+ </div>
590
+ <div class="flex items-center">
591
+ <input type="checkbox" id="enable-guide" class="mr-2" checked>
592
+ <label for="enable-guide" class="text-sm text-gray-400">Enable Help Center</label>
593
+ </div>
594
+ </div>
595
+ </div>
596
+ </div>
597
+ </div>
598
+
599
+ <div>
600
+ <div class="bg-gray-800 rounded-md p-4 border border-gray-700 mb-6">
601
+ <div class="flex items-center justify-between mb-4">
602
+ <div>
603
+ <div class="text-sm text-gray-500">Version</div>
604
+ <div class="font-medium">v2.1.4</div>
605
+ </div>
606
+ <div>
607
+ <div class="text-sm text-gray-500">Publisher</div>
608
+ <div class="font-medium text-primary">Zendesk</div>
609
+ </div>
610
+ </div>
611
+
612
+ <div class="flex items-center justify-between mb-4">
613
+ <div>
614
+ <div class="text-sm text-gray-500">Downloads</div>
615
+ <div class="font-medium">1,845</div>
616
+ </div>
617
+ <div>
618
+ <div class="text-sm text-gray-500">Rating</div>
619
+ <div class="font-medium flex items-center">
620
+ <i class="fas fa-star text-yellow-500 mr-1"></i> 4.9
621
+ </div>
622
+ </div>
623
+ </div>
624
+
625
+ <div class="mb-4">
626
+ <div class="text-sm text-gray-500 mb-2">Categories</div>
627
+ <div class="flex flex-wrap gap-2">
628
+ <span class="px-2 py-1 bg-gray-700 text-xs rounded">Customer Support</span>
629
+ <span class="px-2 py-1 bg-gray-700 text-xs rounded">Ticketing</span>
630
+ <span class="px-2 py-1 bg-gray-700 text-xs rounded">CRM</span>
631
+ </div>
632
+ </div>
633
+
634
+ <div class="mb-4">
635
+ <div class="text-sm text-gray-500 mb-2">Compatibility</div>
636
+ <div class="flex items-center text-sm">
637
+ <i class="fas fa-check-circle text-green-500 mr-2"></i>
638
+ <span>Works with all major AI providers</span>
639
+ </div>
640
+ </div>
641
+
642
+ <button class="w-full bg-primary hover:bg-opacity-90 text-dark font-medium py-2 px-4 rounded-md flex items-center justify-center transition-all mb-3">
643
+ <i class="fas fa-plus mr-2"></i> Add to Agent
644
+ </button>
645
+
646
+ <button class="w-full bg-gray-700 hover:bg-gray-600 text-light font-medium py-2 px-4 rounded-md flex items-center justify-center transition-all">
647
+ <i class="fas fa-bookmark mr-2"></i> Save for Later
648
+ </button>
649
+ </div>
650
+
651
+ <div class="bg-gray-800 rounded-md p-4 border border-gray-700">
652
+ <h4 class="text-lg font-semibold mb-3">Recent Updates</h4>
653
+ <div class="space-y-4">
654
+ <div>
655
+ <div class="text-sm text-primary mb-1">v2.1.4 - June 2023</div>
656
+ <p class="text-xs text-gray-400">Added support for ticket forms and custom fields. Improved error handling for API limits.</p>
657
+ </div>
658
+ <div>
659
+ <div class="text-sm text-primary mb-1">v2.0.0 - March 2023</div>
660
+ <p class="text-xs text-gray-400">Complete rewrite with new API and support for Zendesk Talk and Guide integration.</p>
661
+ </div>
662
+ </div>
663
+ </div>
664
+ </div>
665
+ </div>
666
+
667
+ <div class="border-t border-gray-800 pt-6">
668
+ <h4 class="text-lg font-semibold mb-4">Similar MCPs</h4>
669
+ <div class="grid grid-cols-1 md:grid-cols-3 gap-4">
670
+ <div class="bg-gray-800 p-3 rounded-md border border-gray-700 hover:border-primary transition-colors cursor-pointer">
671
+ <div class="flex items-center mb-2">
672
+ <img src="https://upload.wikimedia.org/wikipedia/commons/8/8b/Freshworks_logo.svg" alt="Freshdesk" class="product-logo mr-2">
673
+ <span class="font-medium">Freshdesk MCP</span>
674
+ </div>
675
+ <p class="text-xs text-gray-400">Alternative customer support ticketing system with similar features.</p>
676
+ </div>
677
+ <div class="bg-gray-800 p-3 rounded-md border border-gray-700 hover:border-primary transition-colors cursor-pointer">
678
+ <div class="flex items-center mb-2">
679
+ <img src="https://upload.wikimedia.org/wikipedia/commons/7/7b/Salesforce.com_logo.svg" alt="Service Cloud" class="product-logo mr-2">
680
+ <span class="font-medium">Service Cloud MCP</span>
681
+ </div>
682
+ <p class="text-xs text-gray-400">Enterprise-grade customer service platform from Salesforce.</p>
683
+ </div>
684
+ <div class="bg-gray-800 p-3 rounded-md border border-gray-700 hover:border-primary transition-colors cursor-pointer">
685
+ <div class="flex items-center mb-2">
686
+ <img src="https://upload.wikimedia.org/wikipedia/commons/7/7e/Intercom_logo.svg" alt="Intercom" class="product-logo mr-2">
687
+ <span class="font-medium">Intercom MCP</span>
688
+ </div>
689
+ <p class="text-xs text-gray-400">Conversational support platform with messaging-first approach.</p>
690
+ </div>
691
+ </div>
692
+ </div>
693
+ </div>
694
+ </div>
695
+ </div>
696
+
697
+ <script>
698
+ // Category chip selection
699
+ const categoryChips = document.querySelectorAll('.category-chip');
700
+ categoryChips.forEach(chip => {
701
+ chip.addEventListener('click', function() {
702
+ categoryChips.forEach(c => c.classList.remove('active'));
703
+ this.classList.add('active');
704
+ });
705
+ });
706
+
707
+ // MCP detail modal
708
+ const mcpCards = document.querySelectorAll('.mcp-card');
709
+ mcpCards.forEach(card => {
710
+ card.addEventListener('click', function() {
711
+ document.getElementById('mcp-detail-modal').classList.remove('hidden');
712
+ });
713
+ });
714
+
715
+ document.getElementById('close-mcp-detail').addEventListener('click', function() {
716
+ document.getElementById('mcp-detail-modal').classList.add('hidden');
717
+ });
718
+
719
+ // Close modal when clicking outside
720
+ document.getElementById('mcp-detail-modal').addEventListener('click', function(e) {
721
+ if (e.target === this) {
722
+ this.classList.add('hidden');
723
+ }
724
+ });
725
+
726
+ // Sidebar navigation
727
+ const sidebarItems = document.querySelectorAll('.sidebar-item');
728
+ sidebarItems.forEach(item => {
729
+ item.addEventListener('click', function() {
730
+ sidebarItems.forEach(i => i.classList.remove('active'));
731
+ this.classList.add('active');
732
+ });
733
+ });
734
+ </script>
735
+ <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=brainable/se2" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body>
736
+ </html>