example-remote-server/src/static/index.html at c8e22b8b0046d1f43d8e150302e6ef4d7f182c5c · modelcontextprotocol/example-remote-server · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>MCP Feature Reference Server</title>
    <link rel="stylesheet" href="/styles.css">
</head>
<body>
    <div class="container">
        <header>
            <img src="/mcp-logo.png" alt="MCP Logo" class="logo">
            <h1>MCP Feature Reference Server</h1>
        </header>

        <p class="tagline">
            A comprehensive reference implementation of the Model Context Protocol (MCP) server
            demonstrating all protocol features with full authentication support and horizontal scalability.
        </p>

        <div class="features">
            <div class="feature-card">
                <h3>Complete MCP Support</h3>
                <p>All MCP features including tools, resources, prompts, sampling, completions, and logging with full protocol compliance.</p>
            </div>
            <div class="feature-card">
                <h3>Multiple Transports</h3>
                <p>Streamable HTTP (SHTTP) and Server-Sent Events (SSE) transports for flexible client integration.</p>
            </div>
            <div class="feature-card">
                <h3>OAuth 2.0 Authentication</h3>
                <p>Complete OAuth flow with PKCE support and a built-in fake provider for testing and development.</p>
            </div>
            <div class="feature-card">
                <h3>Horizontal Scalability</h3>
                <p>Redis-backed session management enables multi-instance deployments with automatic load distribution.</p>
            </div>
            <div class="feature-card">
                <h3>8 Demo Tools</h3>
                <p>Echo, add, long-running operations, LLM sampling, image handling, annotations, resource references, and elicitations.</p>
            </div>
            <div class="feature-card">
                <h3>100+ Resources</h3>
                <p>Example resources with pagination, templates, subscriptions, and real-time update notifications.</p>
            </div>
        </div>

        <div class="endpoints">
            <h2>API Endpoints</h2>
            <div class="endpoint-list">
                <div class="endpoint">
                    <span class="method post">POST</span>
                    <span>/mcp - Initialize sessions or send messages (Streamable HTTP)</span>
                </div>
                <div class="endpoint">
                    <span class="method get">GET</span>
                    <span>/mcp - Establish SSE streams (Streamable HTTP)</span>
                </div>
                <div class="endpoint">
                    <span class="method delete">DELETE</span>
                    <span>/mcp - Terminate sessions (Streamable HTTP)</span>
                </div>
                <div class="endpoint">
                    <span class="method get">GET</span>
                    <span>/sse - Legacy SSE transport endpoint</span>
                </div>
                <div class="endpoint">
                    <span class="method post">POST</span>
                    <span>/message - Legacy message endpoint for SSE transport</span>
                </div>
            </div>
        </div>

        <div class="endpoints">
            <h2>MCP App Example Servers</h2>
            <p class="section-description">Interactive MCP servers with rich UI capabilities. Each server demonstrates different MCP Apps features.</p>
            <div class="endpoint-list" id="example-servers">
                <!-- EXAMPLE_SERVERS_PLACEHOLDER -->
            </div>
        </div>

        <div class="links">
            <a href="https://github.com/modelcontextprotocol/example-remote-server" class="link-button">
                <svg width="20" height="20" viewBox="0 0 24 24" fill="currentColor">
                    <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"/>
                </svg>
                GitHub Repository
            </a>
            <a href="https://modelcontextprotocol.io" class="link-button secondary">
                MCP Documentation
            </a>
            <a href="https://modelcontextprotocol.io/specification/2025-06-18" class="link-button secondary">
                Protocol Specification
            </a>
        </div>
    </div>

    <footer>
        <p>
            Built by the <a href="https://modelcontextprotocol.io">Model Context Protocol</a> team
            as a reference implementation for the MCP ecosystem.
        </p>
    </footer>

    <script>
        function copyUrl(btn, url) {
            // Fallback for non-HTTPS contexts
            const textarea = document.createElement('textarea');
            textarea.value = url;
            textarea.style.position = 'fixed';
            textarea.style.opacity = '0';
            document.body.appendChild(textarea);
            textarea.select();
            document.execCommand('copy');
            document.body.removeChild(textarea);

            btn.classList.add('copied');
            btn.querySelector('.btn-text').textContent = 'Copied!';
            setTimeout(() => {
                btn.classList.remove('copied');
                btn.querySelector('.btn-text').textContent = 'Copy';
            }, 2000);
        }
    </script>
</body>
</html>