Skip to content

Commit 3e81ec4

Browse files
jerome3o-anthropicclaude
jerome3o-anthropic
and
claude
committed
Add splash page for MCP Everything Server
Implemented a clean, informative splash page at the root endpoint that showcases: - Server features and capabilities - API endpoints documentation - Links to GitHub repository and MCP documentation - Black and white theme matching MCP branding - Responsive design for mobile and desktop The splash page provides users with an immediate overview of the server's functionality and serves as a landing page for the MCP Everything Server. 🤖 Generated with [Claude Code](https://claude.ai/code) Co-Authored-By: Claude <[email protected]>
1 parent 59afc14 commit 3e81ec4

File tree

2 files changed

+286
-0
lines changed

2 files changed

+286
-0
lines changed

‎src/index.ts‎

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -167,6 +167,12 @@ app.get("/mcp-logo.png", (req, res) => {
167167
res.sendFile(logoPath);
168168
});
169169

170+
// Splash page
171+
app.get("/", (req, res) => {
172+
const splashPath = path.join(__dirname, "static", "index.html");
173+
res.sendFile(splashPath);
174+
});
175+
170176
// Upstream auth routes
171177
app.get("/fakeupstreamauth/authorize", cors(corsOptions), handleFakeAuthorize);
172178
app.get("/fakeupstreamauth/callback", cors(corsOptions), handleFakeAuthorizeRedirect);

‎src/static/index.html‎

Lines changed: 280 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,280 @@
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 Everything Server</title>
7+
<style>
8+
* {
9+
margin: 0;
10+
padding: 0;
11+
box-sizing: border-box;
12+
}
13+
14+
body {
15+
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
16+
background: #ffffff;
17+
color: #000000;
18+
min-height: 100vh;
19+
display: flex;
20+
flex-direction: column;
21+
}
22+
23+
.container {
24+
max-width: 1200px;
25+
margin: 0 auto;
26+
padding: 2rem;
27+
flex: 1;
28+
}
29+
30+
header {
31+
display: flex;
32+
align-items: center;
33+
gap: 2rem;
34+
margin-bottom: 3rem;
35+
padding-bottom: 2rem;
36+
border-bottom: 2px solid #000000;
37+
}
38+
39+
.logo {
40+
width: 80px;
41+
height: 80px;
42+
}
43+
44+
h1 {
45+
font-size: 2.5rem;
46+
font-weight: 700;
47+
letter-spacing: -0.02em;
48+
}
49+
50+
.tagline {
51+
font-size: 1.25rem;
52+
color: #666666;
53+
margin-bottom: 3rem;
54+
line-height: 1.6;
55+
}
56+
57+
.features {
58+
display: grid;
59+
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
60+
gap: 2rem;
61+
margin-bottom: 3rem;
62+
}
63+
64+
.feature-card {
65+
border: 2px solid #000000;
66+
padding: 1.5rem;
67+
background: #ffffff;
68+
transition: all 0.2s ease;
69+
}
70+
71+
.feature-card:hover {
72+
background: #000000;
73+
color: #ffffff;
74+
transform: translateY(-2px);
75+
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
76+
}
77+
78+
.feature-card h3 {
79+
font-size: 1.25rem;
80+
margin-bottom: 0.75rem;
81+
font-weight: 600;
82+
}
83+
84+
.feature-card p {
85+
line-height: 1.6;
86+
opacity: 0.9;
87+
}
88+
89+
.endpoints {
90+
background: #f5f5f5;
91+
border: 2px solid #000000;
92+
padding: 2rem;
93+
margin-bottom: 3rem;
94+
}
95+
96+
.endpoints h2 {
97+
font-size: 1.75rem;
98+
margin-bottom: 1.5rem;
99+
font-weight: 600;
100+
}
101+
102+
.endpoint-list {
103+
display: flex;
104+
flex-direction: column;
105+
gap: 1rem;
106+
}
107+
108+
.endpoint {
109+
font-family: 'Courier New', monospace;
110+
background: #ffffff;
111+
padding: 0.75rem 1rem;
112+
border: 1px solid #000000;
113+
display: flex;
114+
align-items: center;
115+
gap: 1rem;
116+
}
117+
118+
.method {
119+
font-weight: bold;
120+
min-width: 80px;
121+
}
122+
123+
.method.get { color: #0066cc; }
124+
.method.post { color: #009900; }
125+
.method.delete { color: #cc0000; }
126+
127+
.links {
128+
display: flex;
129+
gap: 2rem;
130+
flex-wrap: wrap;
131+
margin-bottom: 3rem;
132+
}
133+
134+
.link-button {
135+
display: inline-flex;
136+
align-items: center;
137+
gap: 0.5rem;
138+
padding: 1rem 2rem;
139+
background: #000000;
140+
color: #ffffff;
141+
text-decoration: none;
142+
font-weight: 600;
143+
transition: all 0.2s ease;
144+
border: 2px solid #000000;
145+
}
146+
147+
.link-button:hover {
148+
background: #ffffff;
149+
color: #000000;
150+
}
151+
152+
.link-button.secondary {
153+
background: #ffffff;
154+
color: #000000;
155+
}
156+
157+
.link-button.secondary:hover {
158+
background: #000000;
159+
color: #ffffff;
160+
}
161+
162+
footer {
163+
background: #000000;
164+
color: #ffffff;
165+
padding: 2rem;
166+
text-align: center;
167+
}
168+
169+
footer a {
170+
color: #ffffff;
171+
text-decoration: underline;
172+
}
173+
174+
@media (max-width: 768px) {
175+
h1 {
176+
font-size: 2rem;
177+
}
178+
179+
header {
180+
flex-direction: column;
181+
align-items: flex-start;
182+
gap: 1rem;
183+
}
184+
185+
.logo {
186+
width: 60px;
187+
height: 60px;
188+
}
189+
}
190+
</style>
191+
</head>
192+
<body>
193+
<div class="container">
194+
<header>
195+
<img src="/mcp-logo.png" alt="MCP Logo" class="logo">
196+
<h1>MCP Everything Server</h1>
197+
</header>
198+
199+
<p class="tagline">
200+
A comprehensive reference implementation of the Model Context Protocol (MCP) server
201+
demonstrating all protocol features with full authentication support and horizontal scalability.
202+
</p>
203+
204+
<div class="features">
205+
<div class="feature-card">
206+
<h3>Complete MCP Support</h3>
207+
<p>All MCP features including tools, resources, prompts, sampling, completions, and logging with full protocol compliance.</p>
208+
</div>
209+
<div class="feature-card">
210+
<h3>Multiple Transports</h3>
211+
<p>Streamable HTTP (SHTTP) and Server-Sent Events (SSE) transports for flexible client integration.</p>
212+
</div>
213+
<div class="feature-card">
214+
<h3>OAuth 2.0 Authentication</h3>
215+
<p>Complete OAuth flow with PKCE support and a built-in fake provider for testing and development.</p>
216+
</div>
217+
<div class="feature-card">
218+
<h3>Horizontal Scalability</h3>
219+
<p>Redis-backed session management enables multi-instance deployments with automatic load distribution.</p>
220+
</div>
221+
<div class="feature-card">
222+
<h3>7 Demo Tools</h3>
223+
<p>Echo, add, long-running operations, LLM sampling, image handling, annotations, and resource references.</p>
224+
</div>
225+
<div class="feature-card">
226+
<h3>100+ Resources</h3>
227+
<p>Example resources with pagination, templates, subscriptions, and real-time update notifications.</p>
228+
</div>
229+
</div>
230+
231+
<div class="endpoints">
232+
<h2>API Endpoints</h2>
233+
<div class="endpoint-list">
234+
<div class="endpoint">
235+
<span class="method post">POST</span>
236+
<span>/mcp - Initialize sessions or send messages (Streamable HTTP)</span>
237+
</div>
238+
<div class="endpoint">
239+
<span class="method get">GET</span>
240+
<span>/mcp - Establish SSE streams (Streamable HTTP)</span>
241+
</div>
242+
<div class="endpoint">
243+
<span class="method delete">DELETE</span>
244+
<span>/mcp - Terminate sessions (Streamable HTTP)</span>
245+
</div>
246+
<div class="endpoint">
247+
<span class="method get">GET</span>
248+
<span>/sse - Legacy SSE transport endpoint</span>
249+
</div>
250+
<div class="endpoint">
251+
<span class="method post">POST</span>
252+
<span>/message - Legacy message endpoint for SSE transport</span>
253+
</div>
254+
</div>
255+
</div>
256+
257+
<div class="links">
258+
<a href="https://github.com/modelcontextprotocol/example-remote-server" class="link-button">
259+
<svg width="20" height="20" viewBox="0 0 24 24" fill="currentColor">
260+
<path d="M12 0c-6.626 0-12 5.373-12 12 0 5.302 3.438 9.8 8.207 11.387.599.111.793-.261.793-.577v-2.234c-3.338.726-4.033-1.416-4.033-1.416-.546-1.387-1.333-1.756-1.333-1.756-1.089-.745.083-.729.083-.729 1.205.084 1.839 1.237 1.839 1.237 1.07 1.834 2.807 1.304 3.492.997.107-.775.418-1.305.762-1.604-2.665-.305-5.467-1.334-5.467-5.931 0-1.311.469-2.381 1.236-3.221-.124-.303-.535-1.524.117-3.176 0 0 1.008-.322 3.301 1.23.957-.266 1.983-.399 3.003-.404 1.02.005 2.047.138 3.006.404 2.291-1.552 3.297-1.23 3.297-1.23.653 1.653.242 2.874.118 3.176.77.84 1.235 1.911 1.235 3.221 0 4.609-2.807 5.624-5.479 5.921.43.372.823 1.102.823 2.222v3.293c0 .319.192.694.801.576 4.765-1.589 8.199-6.086 8.199-11.386 0-6.627-5.373-12-12-12z"/>
261+
</svg>
262+
GitHub Repository
263+
</a>
264+
<a href="https://modelcontextprotocol.io" class="link-button secondary">
265+
MCP Documentation
266+
</a>
267+
<a href="https://modelcontextprotocol.io/specification" class="link-button secondary">
268+
Protocol Specification
269+
</a>
270+
</div>
271+
</div>
272+
273+
<footer>
274+
<p>
275+
Built by the <a href="https://modelcontextprotocol.io">Model Context Protocol</a> team
276+
as a reference implementation for the MCP ecosystem.
277+
</p>
278+
</footer>
279+
</body>
280+
</html>

0 commit comments

Comments
 (0)