Spaces:
Running
Running
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>LM Studio MCP Server Integration</title> | |
| <!-- Fonts --> | |
| <link rel="preconnect" href="https://fonts.googleapis.com"> | |
| <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin> | |
| <link | |
| href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;600;700&family=JetBrains+Mono:wght@400;700&display=swap" | |
| rel="stylesheet"> | |
| <!-- Icons --> | |
| <link href="https://cdn.jsdelivr.net/npm/remixicon@3.5.0/fonts/remixicon.css" rel="stylesheet"> | |
| <style> | |
| /* --- CSS Variables & Reset --- */ | |
| :root { | |
| --bg-color: #09090b; | |
| --surface-color: #18181b; | |
| --surface-hover: #27272a; | |
| --primary-gradient: linear-gradient(135deg, #FFD21E 0%, #EB8C00 100%); | |
| --accent-gradient: linear-gradient(135deg, #3B82F6 0%, #8B5CF6 100%); | |
| --text-main: #f4f4f5; | |
| --text-muted: #a1a1aa; | |
| --border-color: #27272a; | |
| --radius-md: 12px; | |
| --radius-lg: 24px; | |
| --radius-full: 9999px; | |
| --font-sans: 'Inter', sans-serif; | |
| --font-mono: 'JetBrains Mono', monospace; | |
| --max-width: 1200px; | |
| } | |
| * { | |
| box-sizing: border-box; | |
| margin: 0; | |
| padding: 0; | |
| } | |
| body { | |
| background-color: var(--bg-color); | |
| color: var(--text-main); | |
| font-family: var(--font-sans); | |
| line-height: 1.6; | |
| overflow-x: hidden; | |
| } | |
| a { | |
| text-decoration: none; | |
| color: inherit; | |
| transition: all 0.2s ease; | |
| } | |
| ul { | |
| list-style: none; | |
| } | |
| /* --- Layout Utilities --- */ | |
| .container { | |
| width: 100%; | |
| max-width: var(--max-width); | |
| margin: 0 auto; | |
| padding: 0 2rem; | |
| } | |
| .flex-center { | |
| display: flex; | |
| align-items: center; | |
| justify-content: center; | |
| } | |
| .grid { | |
| display: grid; | |
| gap: 2rem; | |
| } | |
| /* --- Buttons --- */ | |
| .btn { | |
| display: inline-flex; | |
| align-items: center; | |
| justify-content: center; | |
| padding: 0.875rem 1.75rem; | |
| border-radius: var(--radius-full); | |
| font-weight: 600; | |
| font-size: 1rem; | |
| gap: 0.5rem; | |
| cursor: pointer; | |
| transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); | |
| position: relative; | |
| overflow: hidden; | |
| } | |
| .btn-primary { | |
| background: var(--primary-gradient); | |
| color: #000; | |
| box-shadow: 0 4px 15px rgba(255, 210, 30, 0.2); | |
| border: none; | |
| } | |
| .btn-primary:hover { | |
| transform: translateY(-2px); | |
| box-shadow: 0 8px 25px rgba(255, 210, 30, 0.3); | |
| } | |
| .btn-secondary { | |
| background: rgba(255, 255, 255, 0.05); | |
| border: 1px solid var(--border-color); | |
| color: var(--text-main); | |
| } | |
| .btn-secondary:hover { | |
| background: rgba(255, 255, 255, 0.1); | |
| border-color: #3B82F6; | |
| } | |
| /* --- Header --- */ | |
| header { | |
| position: fixed; | |
| top: 0; | |
| left: 0; | |
| width: 100%; | |
| z-index: 1000; | |
| background: rgba(9, 9, 11, 0.8); | |
| backdrop-filter: blur(12px); | |
| border-bottom: 1px solid var(--border-color); | |
| padding: 1rem 0; | |
| } | |
| .header-content { | |
| display: flex; | |
| justify-content: space-between; | |
| align-items: center; | |
| } | |
| .brand { | |
| font-weight: 700; | |
| font-size: 1.25rem; | |
| display: flex; | |
| align-items: center; | |
| gap: 0.5rem; | |
| background: var(--primary-gradient); | |
| -webkit-background-clip: text; | |
| -webkit-text-fill-color: transparent; | |
| } | |
| .brand i { | |
| -webkit-text-fill-color: #FFD21E; | |
| } | |
| .attribution-link { | |
| font-size: 0.875rem; | |
| color: var(--text-muted); | |
| background: var(--surface-color); | |
| padding: 0.5rem 1rem; | |
| border-radius: 50px; | |
| border: 1px solid var(--border-color); | |
| transition: all 0.3s ease; | |
| } | |
| .attribution-link:hover { | |
| color: var(--text-main); | |
| border-color: #FFD21E; | |
| box-shadow: 0 0 10px rgba(255, 210, 30, 0.1); | |
| } | |
| /* --- Hero Section --- */ | |
| .hero { | |
| padding-top: 160px; | |
| padding-bottom: 100px; | |
| text-align: center; | |
| position: relative; | |
| overflow: hidden; | |
| } | |
| .hero::before { | |
| content: ''; | |
| position: absolute; | |
| top: -20%; | |
| left: 50%; | |
| transform: translateX(-50%); | |
| width: 800px; | |
| height: 800px; | |
| background: radial-gradient(circle, rgba(59, 130, 246, 0.08) 0%, rgba(9, 9, 11, 0) 70%); | |
| z-index: -1; | |
| pointer-events: none; | |
| } | |
| .hero-badge { | |
| display: inline-flex; | |
| align-items: center; | |
| gap: 0.5rem; | |
| padding: 0.5rem 1rem; | |
| background: rgba(59, 130, 246, 0.1); | |
| border: 1px solid rgba(59, 130, 246, 0.2); | |
| border-radius: 50px; | |
| color: #60a5fa; | |
| font-size: 0.875rem; | |
| font-weight: 500; | |
| margin-bottom: 1.5rem; | |
| } | |
| .hero h1 { | |
| font-size: 3.5rem; | |
| font-weight: 800; | |
| line-height: 1.1; | |
| margin-bottom: 1.5rem; | |
| letter-spacing: -0.02em; | |
| background: linear-gradient(to bottom right, #ffffff 30%, #a1a1aa 100%); | |
| -webkit-background-clip: text; | |
| -webkit-text-fill-color: transparent; | |
| } | |
| .hero p { | |
| font-size: 1.25rem; | |
| color: var(--text-muted); | |
| max-width: 600px; | |
| margin: 0 auto 3rem auto; | |
| } | |
| /* --- Action Steps --- */ | |
| .action-steps { | |
| display: flex; | |
| flex-direction: column; | |
| align-items: center; | |
| gap: 1.5rem; | |
| margin-bottom: 4rem; | |
| } | |
| .step-container { | |
| display: flex; | |
| align-items: center; | |
| gap: 3rem; | |
| } | |
| .step-connector { | |
| width: 40px; | |
| height: 2px; | |
| background: var(--border-color); | |
| position: relative; | |
| } | |
| .step-connector::after { | |
| content: ''; | |
| position: absolute; | |
| top: -4px; | |
| left: 0; | |
| width: 0%; | |
| height: 10px; | |
| background: #FFD21E; | |
| transition: width 0.5s ease; | |
| } | |
| .action-group:hover .step-connector::after { | |
| width: 100%; | |
| } | |
| .step-label { | |
| display: flex; | |
| flex-direction: column; | |
| align-items: center; | |
| gap: 1rem; | |
| } | |
| .step-number { | |
| font-size: 0.75rem; | |
| text-transform: uppercase; | |
| letter-spacing: 0.1em; | |
| color: var(--text-muted); | |
| font-weight: 600; | |
| } | |
| /* --- Features Grid --- */ | |
| .features { | |
| padding: 4rem 0; | |
| background: var(--surface-color); | |
| border-top: 1px solid var(--border-color); | |
| border-bottom: 1px solid var(--border-color); | |
| } | |
| .section-title { | |
| text-align: center; | |
| margin-bottom: 3rem; | |
| } | |
| .section-title h2 { | |
| font-size: 2rem; | |
| margin-bottom: 0.5rem; | |
| } | |
| .section-title span { | |
| color: #FFD21E; | |
| text-transform: uppercase; | |
| font-size: 0.875rem; | |
| letter-spacing: 0.1em; | |
| font-weight: 600; | |
| } | |
| .features-grid { | |
| grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); | |
| } | |
| .feature-card { | |
| background: var(--bg-color); | |
| padding: 2rem; | |
| border-radius: var(--radius-md); | |
| border: 1px solid var(--border-color); | |
| transition: transform 0.3s ease, border-color 0.3s ease; | |
| } | |
| .feature-card:hover { | |
| transform: translateY(-5px); | |
| border-color: #3B82F6; | |
| } | |
| .icon-box { | |
| width: 48px; | |
| height: 48px; | |
| border-radius: 12px; | |
| background: rgba(59, 130, 246, 0.1); | |
| color: #3B82F6; | |
| display: flex; | |
| align-items: center; | |
| justify-content: center; | |
| font-size: 1.5rem; | |
| margin-bottom: 1.5rem; | |
| } | |
| .feature-card h3 { | |
| font-size: 1.25rem; | |
| margin-bottom: 0.75rem; | |
| } | |
| .feature-card p { | |
| color: var(--text-muted); | |
| font-size: 0.95rem; | |
| } | |
| /* --- Configuration Section --- */ | |
| .config-section { | |
| padding: 6rem 0; | |
| } | |
| .code-window { | |
| background: #0f0f11; | |
| border-radius: var(--radius-md); | |
| border: 1px solid var(--border-color); | |
| overflow: hidden; | |
| max-width: 800px; | |
| margin: 0 auto; | |
| box-shadow: 0 4px 20px rgba(0, 0, 0, 0.4); | |
| } | |
| .code-header { | |
| background: #18181b; | |
| padding: 0.75rem 1.5rem; | |
| border-bottom: 1px solid var(--border-color); | |
| display: flex; | |
| justify-content: space-between; | |
| align-items: center; | |
| } | |
| .window-controls { | |
| display: flex; | |
| gap: 6px; | |
| } | |
| .control { | |
| width: 10px; | |
| height: 10px; | |
| border-radius: 50%; | |
| } | |
| .red { background: #ef4444; } | |
| .yellow { background: #eab308; } | |
| .green { background: #22c55e; } | |
| .lang-tag { | |
| font-family: var(--font-mono); | |
| font-size: 0.75rem; | |
| color: var(--text-muted); | |
| } | |
| .copy-btn { | |
| background: transparent; | |
| border: 1px solid var(--border-color); | |
| color: var(--text-muted); | |
| padding: 4px 12px; | |
| border-radius: 6px; | |
| font-size: 0.75rem; | |
| cursor: pointer; | |
| transition: all 0.2s; | |
| display: flex; | |
| align-items: center; | |
| gap: 6px; | |
| } | |
| .copy-btn:hover { | |
| background: var(--surface-hover); | |
| color: var(--text-main); | |
| } | |
| .code-content { | |
| padding: 1.5rem; | |
| font-family: var(--font-mono); | |
| font-size: 0.9rem; | |
| overflow-x: auto; | |
| color: #d4d4d8; | |
| } | |
| .key { color: #9cdcfe; } | |
| .string { color: #ce9178; } | |
| .boolean { color: #569cd6; } | |
| /* --- Footer --- */ | |
| footer { | |
| border-top: 1px solid var(--border-color); | |
| padding: 3rem 0; | |
| text-align: center; | |
| color: var(--text-muted); | |
| font-size: 0.9rem; | |
| } | |
| /* --- Responsive Design --- */ | |
| @media (max-width: 768px) { | |
| .hero h1 { font-size: 2.5rem; } | |
| .hero p { font-size: 1rem; } | |
| .container { padding: 0 1.5rem; } | |
| .features-grid { grid-template-columns: 1fr; } | |
| .step-container { | |
| flex-direction: column; | |
| gap: 1.5rem; | |
| } | |
| .step-connector { | |
| width: 2px; | |
| height: 30px; | |
| transform: rotate(90deg); | |
| } | |
| } | |
| </style> | |
| </head> | |
| <body> | |
| <!-- Header --> | |
| <header> | |
| <div class="container header-content"> | |
| <div class="brand"> | |
| <i class="ri-openai-fill"></i> | |
| HF MCP Server | |
| </div> | |
| <!-- Requested Attribution --> | |
| <a href="https://huggingface.co/spaces/akhaliq/anycoder" target="_blank" class="attribution-link"> | |
| Built with anycoder <i class="ri-external-link-line" style="font-size: 0.8em; margin-left: 4px;"></i> | |
| </a> | |
| </div> | |
| </header> | |
| <!-- Main Content --> | |
| <main> | |
| <!-- Hero Section --> | |
| <section class="hero container"> | |
| <div class="hero-badge"> | |
| <i class="ri-flashlight-fill"></i> New Integration Available | |
| </div> | |
| <h1>Bridge Local & Cloud AI</h1> | |
| <p> | |
| Connect your local LM Studio environment to the Hugging Face ecosystem. | |
| Authenticate securely to access your private models and spaces. | |
| </p> | |
| <!-- NEW: Action Steps --> | |
| <div class="action-steps action-group"> | |
| <div class="step-container"> | |
| <!-- Step 1: Login --> | |
| <div class="step-label"> | |
| <span class="step-number">Step 01</span> | |
| <!-- User requested URL implemented here --> | |
| <a href="https://huggingface.co/mcp?login" target="_blank" class="btn btn-primary"> | |
| <i class="ri-login-circle-line"></i> | |
| Login to Hugging Face | |
| </a> | |
| </div> | |
| <div class="step-connector"></div> | |
| <!-- Step 2: Install --> | |
| <div class="step-label"> | |
| <span class="step-number">Step 02</span> | |
| <a href="https://lmstudio.ai/install-mcp?name=hf-mcp-server&config=eyJ1cmwiOiJodHRwczovL2h1Z2dpbmdmYWNlLmNvL21jcCIsImhlYWRlcnMiOnsiQXV0aG9yaXphdGlvbiI6IkJlYXJlciA8WU9VUl9IRl9UT0tFTj4ifX0%3D" class="btn btn-secondary"> | |
| <i class="ri-download-cloud-2-line"></i> | |
| Install MCP Server | |
| </a> | |
| </div> | |
| </div> | |
| <div style="color: var(--text-muted); font-size: 0.85rem; margin-top: 0.5rem; display: flex; align-items: center; gap: 0.5rem;"> | |
| <i class="ri-information-line"></i> | |
| <span>Login first to generate your session token, then install to link LM Studio.</span> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Features Section --> | |
| <section class="features"> | |
| <div class="container"> | |
| <div class="section-title"> | |
| <span>Workflow</span> | |
| <h2>Seamless Integration</h2> | |
| </div> | |
| <div class="grid features-grid"> | |
| <!-- Feature 1 --> | |
| <div class="feature-card"> | |
| <div class="icon-box"> | |
| <i class="ri-user-voice-line"></i> | |
| </div> | |
| <h3>Secure Authentication</h3> | |
| <p> | |
| Use the official Hugging Face login endpoint to securely authorize your local MCP client instance. | |
| </p> | |
| </div> | |
| <!-- Feature 2 --> | |
| <div class="feature-card"> | |
| <div class="icon-box"> | |
| <i class="ri-shield-check-line"></i> | |
| </div> | |
| <h3>Token Management</h3> | |
| <p> | |
| The configuration automatically handles Bearer token injection after you authenticate via the login portal. | |
| </p> | |
| </div> | |
| <!-- Feature 3 --> | |
| <div class="feature-card"> | |
| <div class="icon-box"> | |
| <i class="ri-flow-chart"></i> | |
| </div> | |
| <h3>Unified Workflow</h3> | |
| <p> | |
| Switch effortlessly between local inference and cloud-hosted models on Hugging Face without leaving LM Studio. | |
| </p> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Configuration Preview --> | |
| <section class="config-section container"> | |
| <div class="section-title"> | |
| <span>Technical Details</span> | |
| <h2>Server Configuration</h2> | |
| <p style="color: var(--text-muted);">The MCP server uses this configuration to connect.</p> | |
| </div> | |
| <div class="code-window"> | |
| <div class="code-header"> | |
| <div class="window-controls"> | |
| <div class="control red"></div> | |
| <div class="control yellow"></div> | |
| <div class="control green"></div> | |
| </div> | |
| <span class="lang-tag">config.json</span> | |
| <button class="copy-btn" onclick="copyConfig()"> | |
| <i class="ri-file-copy-line"></i> Copy | |
| </button> | |
| </div> | |
| <div class="code-content"> | |
| <pre> | |
| { | |
| <span class="key">"url"</span>: <span class="string">"https://huggingface.co/mcp"</span>, | |
| <span class="key">"headers"</span>: { | |
| <span class="key">"Authorization"</span>: <span class="string">"Bearer <YOUR_HF_TOKEN>"</span> | |
| } | |
| } | |
| </pre> | |
| </div> | |
| </div> | |
| </section> | |
| </main> | |
| <!-- Footer --> | |
| <footer> | |
| <div class="container"> | |
| <p>© 2023 HF MCP Integration. Built for the community.</p> | |
| </div> | |
| </footer> | |
| <!-- JavaScript for Interactivity --> | |
| <script> | |
| function copyConfig() { | |
| const configText = `{ | |
| "url": "https://huggingface.co/mcp", | |
| "headers": { | |
| "Authorization": "Bearer <YOUR_HF_TOKEN>" | |
| } | |
| }`; | |
| navigator.clipboard.writeText(configText).then(() => { | |
| const btn = document.querySelector('.copy-btn'); | |
| const originalHtml = btn.innerHTML; | |
| // Visual feedback | |
| btn.innerHTML = '<i class="ri-check-line"></i> Copied!'; | |
| btn.style.borderColor = '#22c55e'; | |
| btn.style.color = '#22c55e'; | |
| setTimeout(() => { | |
| btn.innerHTML = originalHtml; | |
| btn.style.borderColor = ''; | |
| btn.style.color = ''; | |
| }, 2000); | |
| }).catch(err => { | |
| console.error('Failed to copy: ', err); | |
| }); | |
| } | |
| </script> | |
| </body> | |
| </html> |