diff --git a/config.example.toml b/config.example.toml index 10c3cc2..c0aba45 100644 --- a/config.example.toml +++ b/config.example.toml @@ -72,6 +72,37 @@ directory = "skills" # command = "npx" # args = ["-y", "@modelcontextprotocol/server-filesystem", "/tmp/rustfox-sandbox"] +# Example: Google Workspace MCP server (Gmail, Calendar, Drive, Docs, Sheets, Slides) +# Note: use --from because the package name differs from the executable name +# +# OAuth setup: +# 1. https://console.cloud.google.com/apis/credentials +# → Create/select project → enable Drive, Gmail, Calendar, Docs, Sheets, Slides APIs +# 2. OAuth consent screen → External → add your email as a test user +# 3. Credentials → Create OAuth Client ID → Web application +# → add Authorised redirect URI: https://developers.google.com/oauthplayground +# → save your Client ID and Client Secret +# 4. Open https://developers.google.com/oauthplayground +# → gear icon → check "Use your own OAuth credentials" → enter Client ID + Secret +# → add scopes: https://www.googleapis.com/auth/drive +# https://www.googleapis.com/auth/gmail.modify +# https://www.googleapis.com/auth/calendar +# https://www.googleapis.com/auth/documents +# https://www.googleapis.com/auth/spreadsheets +# https://www.googleapis.com/auth/presentations +# → "Authorize APIs" → sign in → "Exchange authorization code for tokens" +# → copy the Refresh token value +# +# [[mcp_servers]] +# name = "google-workspace" +# command = "uvx" +# args = ["--from", "google-workspace-mcp", "google-workspace-worker"] +# [mcp_servers.env] +# GOOGLE_WORKSPACE_CLIENT_ID = "your-client-id.apps.googleusercontent.com" +# GOOGLE_WORKSPACE_CLIENT_SECRET = "your-client-secret" +# GOOGLE_WORKSPACE_REFRESH_TOKEN = "your-refresh-token" # from step 4 above +# GOOGLE_WORKSPACE_ENABLED_CAPABILITIES = '["drive","docs","gmail","calendar","sheets","slides"]' + # Example: Web search MCP server with environment variables # [[mcp_servers]] # name = "brave-search" diff --git a/setup/index.html b/setup/index.html index 82f0a45..95e701d 100644 --- a/setup/index.html +++ b/setup/index.html @@ -122,6 +122,21 @@ padding: 0.1rem 0.3rem; } .mcp-tool-link:hover { color: #f6851b; } + /* Per-tool setup guide */ + .mcp-setup-guide { + margin-left: 1.75rem; + margin-top: 0.6rem; + background: #131825; + border: 1px solid #2d3748; + border-radius: 6px; + padding: 0.55rem 0.75rem; + font-size: 0.78rem; + color: #718096; + line-height: 1.75; + } + .mcp-setup-guide strong { color: #cbd5e0; } + .mcp-setup-guide a { color: #f6851b; text-decoration: none; } + .mcp-setup-guide a:hover { text-decoration: underline; } /* Find more footer */ .mcp-more { margin-top: 1.25rem; @@ -131,6 +146,140 @@ } .mcp-more a { color: #f6851b; text-decoration: none; } .mcp-more a:hover { text-decoration: underline; } + /* OAuth guide button */ + .btn-guide { + display: inline-flex; + align-items: center; + gap: 0.3rem; + margin-left: 1.75rem; + margin-top: 0.55rem; + padding: 0.3rem 0.75rem; + border-radius: 6px; + border: 1px solid #f6851b; + background: transparent; + color: #f6851b; + font-size: 0.78rem; + font-weight: 600; + cursor: pointer; + transition: background 0.15s, color 0.15s; + } + .btn-guide:hover { background: #f6851b; color: #fff; opacity: 1; } + /* Modal overlay */ + .modal-overlay { + display: none; + position: fixed; + inset: 0; + background: rgba(0,0,0,0.72); + z-index: 1000; + align-items: center; + justify-content: center; + padding: 1.5rem; + } + .modal-overlay.open { display: flex; } + .modal-box { + background: #1a1f2e; + border: 1px solid #2d3748; + border-radius: 16px; + width: 100%; + max-width: 560px; + max-height: 90vh; + overflow-y: auto; + padding: 2rem; + position: relative; + } + .modal-close { + position: absolute; + top: 1rem; + right: 1rem; + background: none; + border: none; + color: #718096; + font-size: 1.25rem; + cursor: pointer; + line-height: 1; + padding: 0.2rem 0.4rem; + border-radius: 4px; + transition: color 0.15s; + } + .modal-close:hover { color: #e2e8f0; opacity: 1; } + .modal-box h3 { + font-size: 1.1rem; + font-weight: 700; + color: #e2e8f0; + margin-bottom: 0.3rem; + } + .modal-subtitle { + font-size: 0.8rem; + color: #718096; + margin-bottom: 1.5rem; + line-height: 1.5; + } + /* OAuth step list */ + .oauth-steps { list-style: none; counter-reset: oauth-counter; } + .oauth-step { + counter-increment: oauth-counter; + display: flex; + gap: 0.875rem; + margin-bottom: 1.25rem; + } + .oauth-step:last-child { margin-bottom: 0; } + .oauth-step-num { + flex-shrink: 0; + width: 1.75rem; + height: 1.75rem; + border-radius: 50%; + background: #f6851b; + color: #fff; + font-weight: 700; + font-size: 0.8rem; + display: flex; + align-items: center; + justify-content: center; + margin-top: 0.05rem; + } + .oauth-step-body { flex: 1; } + .oauth-step-title { + font-weight: 600; + font-size: 0.9rem; + color: #e2e8f0; + margin-bottom: 0.3rem; + } + .oauth-step-desc { + font-size: 0.8rem; + color: #a0aec0; + line-height: 1.65; + } + .oauth-step-desc a { + color: #f6851b; + text-decoration: none; + font-weight: 600; + } + .oauth-step-desc a:hover { text-decoration: underline; } + .scope-list { + margin: 0.4rem 0 0 0; + padding: 0.5rem 0.75rem; + background: #0f1117; + border: 1px solid #2d3748; + border-radius: 6px; + list-style: none; + } + .scope-list li { + font-family: monospace; + font-size: 0.73rem; + color: #68d391; + padding: 0.1rem 0; + line-height: 1.7; + } + .oauth-warning { + margin-top: 1.25rem; + padding: 0.6rem 0.875rem; + background: #2d1a0a; + border: 1px solid #744210; + border-radius: 8px; + font-size: 0.78rem; + color: #fbd38d; + line-height: 1.6; + } /* Custom MCP server section */ .custom-mcp-section { margin-top: 1.75rem; border-top: 1px solid #2d3748; padding-top: 1.25rem; } .custom-mcp-section h3 { font-size: 0.8rem; text-transform: uppercase; letter-spacing: 0.08em; color: #718096; margin-bottom: 0.75rem; } @@ -197,6 +346,78 @@ + + +