Merge pull request #31 from modelcontextprotocol/feature/splash-copy-buttons

feat: add copy buttons to example server URLs on splash page

src/index.ts

@@ -238,12 +238,21 @@ async function main() {
       const splashPath = path.join(srcStaticDir, 'index.html');
       let html = fs.readFileSync(splashPath, 'utf8');
 
-      // Inject example server endpoints
-      const exampleServersHtml = AVAILABLE_EXAMPLES.map(slug => `
-                <div class="endpoint">
-                    <span class="method post">POST</span>
-                    <span>/${slug}/mcp - ${formatServerName(slug)} MCP App Server</span>
-                </div>`).join('');
+      // Inject example server endpoints with copy buttons
+      const exampleServersHtml = AVAILABLE_EXAMPLES.map(slug => {
+        const fullUrl = `${config.baseUri}/${slug}/mcp`;
+        return `
+                <div class="endpoint endpoint-with-copy">
+                    <div class="endpoint-info">
+                        <span class="method post">POST</span>
+                        <span>/${slug}/mcp - ${formatServerName(slug)} MCP App Server</span>
+                    </div>
+                    <button class="copy-btn" onclick="copyUrl(this, '${fullUrl}')">
+                        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect x="9" y="9" width="13" height="13" rx="2" ry="2"></rect><path d="M5 15H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1"></path></svg>
+                        <span class="btn-text">Copy</span>
+                    </button>
+                </div>`;
+      }).join('');
       html = html.replace('<!-- EXAMPLE_SERVERS_PLACEHOLDER -->', exampleServersHtml);
 
       res.send(html);

src/static/index.html

@@ -97,9 +97,30 @@
 
     <footer>
         <p>
-            Built by the <a href="https://modelcontextprotocol.io">Model Context Protocol</a> team 
+            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>

src/static/styles.css

@@ -117,6 +117,44 @@ h1 {
     gap: 1rem;
 }
 
+.endpoint-with-copy {
+    justify-content: space-between;
+}
+
+.endpoint-info {
+    display: flex;
+    align-items: center;
+    gap: 1rem;
+    flex: 1;
+}
+
+.copy-btn {
+    background: #000000;
+    color: #ffffff;
+    border: none;
+    padding: 0.4rem 0.75rem;
+    font-family: inherit;
+    font-size: 0.85rem;
+    cursor: pointer;
+    transition: all 0.2s ease;
+    display: flex;
+    align-items: center;
+    gap: 0.4rem;
+}
+
+.copy-btn:hover {
+    background: #333333;
+}
+
+.copy-btn.copied {
+    background: #009900;
+}
+
+.copy-btn svg {
+    width: 14px;
+    height: 14px;
+}
+
 .method {
     font-weight: bold;
     min-width: 80px;