diff --git a/docs/quickstarts/mcp.mdx b/docs/quickstarts/mcp.mdx index 8e3d1648..4688683d 100644 --- a/docs/quickstarts/mcp.mdx +++ b/docs/quickstarts/mcp.mdx @@ -1,5 +1,9 @@ # MCP +import MCPInstallBox from "@site/src/components/MCPInstallBox"; + + + ## Overview The Tigris MCP Server implements the diff --git a/src/components/MCPInstallBox/index.jsx b/src/components/MCPInstallBox/index.jsx new file mode 100644 index 00000000..f960a9ff --- /dev/null +++ b/src/components/MCPInstallBox/index.jsx @@ -0,0 +1,110 @@ +import React from "react"; +import "./styles.css"; + +const CURSOR_URL = + "cursor://anysphere.cursor-deeplink/mcp/install?name=tigris&config=eyJ1cmwiOiJodHRwczovL21jcC5zdG9yYWdlLmRldi9tY3AifQ%3D%3D"; + +const VSCODE_URL = + "vscode:mcp/install?%7B%22name%22%3A%22tigris%22%2C%22type%22%3A%22http%22%2C%22url%22%3A%22https%3A%2F%2Fmcp.storage.dev%2Fmcp%22%7D"; + +const CLAUDE_URL = "/docs/mcp/remote/#claude-desktop"; + +const ALL_INTEGRATIONS_URL = "/docs/mcp/remote/"; + +function CursorIcon() { + return ( + + ); +} + +function VSCodeIcon() { + return ( + + ); +} + +function ClaudeIcon() { + return ( + + ); +} + +export default function MCPInstallBox() { + return ( + + ); +} diff --git a/src/components/MCPInstallBox/styles.css b/src/components/MCPInstallBox/styles.css new file mode 100644 index 00000000..fd00e404 --- /dev/null +++ b/src/components/MCPInstallBox/styles.css @@ -0,0 +1,126 @@ +.mcp-install-box { + display: flex; + flex-direction: column; + gap: 1.25rem; + padding: 1.5rem; + margin: 1.5rem 0 2rem; + border-radius: 14px; + border: 1px solid rgba(98, 254, 181, 0.28); + background: + radial-gradient( + 120% 120% at 0% 0%, + rgba(98, 254, 181, 0.1) 0%, + transparent 60% + ), + var(--docs-color-background-100); + box-shadow: 0 1px 0 rgba(255, 255, 255, 0.04) inset; +} + +[data-theme="light"] .mcp-install-box { + border-color: rgba(56, 172, 140, 0.35); + background: + radial-gradient( + 120% 120% at 0% 0%, + rgba(56, 172, 140, 0.08) 0%, + transparent 60% + ), + var(--docs-color-background-100); +} + +.mcp-install-box-header { + display: flex; + flex-direction: column; + gap: 0.4rem; +} + +.mcp-install-box-eyebrow { + font-size: 11px; + font-weight: 700; + letter-spacing: 0.12em; + text-transform: uppercase; + color: var(--ifm-color-primary); +} + +.mcp-install-box-title { + font-size: 20px; + font-weight: 700; + letter-spacing: -0.02em; + margin: 0; + color: var(--docs-color-text); +} + +.mcp-install-box-subtitle { + font-size: 14px; + line-height: 1.55; + color: var(--docs-color-text-100); + margin: 0; + max-width: 60ch; +} + +.mcp-install-box-buttons { + display: grid; + grid-template-columns: repeat(3, minmax(0, 1fr)); + gap: 10px; +} + +.mcp-install-btn { + display: flex; + align-items: center; + justify-content: center; + gap: 0.55rem; + padding: 0.7rem 1rem; + border-radius: 10px; + border: 1px solid rgba(255, 255, 255, 0.16); + background: rgba(255, 255, 255, 0.04); + color: var(--docs-color-text); + font-size: 14px; + font-weight: 600; + letter-spacing: -0.01em; + text-decoration: none; + transition: + background-color 0.18s ease, + border-color 0.18s ease, + transform 0.18s ease; +} + +.mcp-install-btn:hover, +.mcp-install-btn:focus-visible { + background: rgba(98, 254, 181, 0.12); + border-color: rgba(98, 254, 181, 0.4); + color: var(--docs-color-text); + text-decoration: none; + transform: translateY(-1px); + outline: none; +} + +[data-theme="light"] .mcp-install-btn { + background: rgba(0, 0, 0, 0.03); + border-color: var(--docs-color-border); +} + +[data-theme="light"] .mcp-install-btn:hover, +[data-theme="light"] .mcp-install-btn:focus-visible { + background: rgba(56, 172, 140, 0.08); + border-color: rgba(56, 172, 140, 0.45); +} + +.mcp-install-box-link { + align-self: flex-start; + font-size: 13px; + font-weight: 600; + color: var(--ifm-color-primary); + text-decoration: none; + padding-top: 0.25rem; +} + +.mcp-install-box-link:hover, +.mcp-install-box-link:focus-visible { + text-decoration: underline; + outline: none; +} + +@media screen and (max-width: 640px) { + .mcp-install-box-buttons { + grid-template-columns: 1fr; + } +} diff --git a/src/components/ToolCards/index.jsx b/src/components/ToolCards/index.jsx index 7afad0f7..fd4b04e9 100644 --- a/src/components/ToolCards/index.jsx +++ b/src/components/ToolCards/index.jsx @@ -143,7 +143,7 @@ export default function ToolCards() { description="Manage buckets, keys, and global configurations from your terminal. Built for speed and scriptability in CI/CD pipelines." to="/cli/" > -
+
@@ -204,81 +204,44 @@ export default function ToolCards() { description="Empower your AI assistants. Expose your Tigris buckets and objects to LLMs via the Model Context Protocol for seamless context integration." to="/quickstarts/mcp" > - diff --git a/src/components/ToolCards/styles.css b/src/components/ToolCards/styles.css index 4eacf277..6d33b89a 100644 --- a/src/components/ToolCards/styles.css +++ b/src/components/ToolCards/styles.css @@ -156,6 +156,116 @@ gap: 8px; } +/* CLI preview: top-align terminal with the SDK card's first terminal, + and stretch the terminal box to match the SDK's lower terminal bottom */ +.tool-card-preview:has(> .tool-card-cli-code) { + flex: 1; + margin-top: 0; + display: flex; + flex-direction: column; +} + +.tool-card-cli-code { + flex: 1; +} + +/* AI buttons: featured top button + 2x2 grid */ +.tool-card-preview:has(> .tool-card-ai-buttons) { + flex: 1; + margin-top: 0; + display: flex; + flex-direction: column; +} + +.tool-card-ai-buttons { + display: flex; + flex-direction: column; + gap: 10px; + flex: 1; +} + +.tool-card-ai-grid { + display: grid; + grid-template-columns: repeat(2, minmax(0, 1fr)); + gap: 10px; + flex: 1; +} + +/* Override the shared mcp-btn look for buttons inside the AI card */ +.tool-card-ai-buttons .tool-card-mcp-btn { + justify-content: center; + text-align: center; + font-size: 16px; + font-weight: 600; + letter-spacing: -0.01em; + padding: 0.75rem 1rem; + border-radius: 0.625rem; + background: rgba(255, 255, 255, 0.04); + border: 1px solid rgba(255, 255, 255, 0.14); + transition: + background-color 0.18s ease, + border-color 0.18s ease, + transform 0.18s ease; +} + +.tool-card-ai-buttons .tool-card-mcp-btn:hover { + background: rgba(98, 254, 181, 0.1); + border-color: rgba(98, 254, 181, 0.35); + transform: translateY(-1px); +} + +[data-theme="light"] .tool-card-ai-buttons .tool-card-mcp-btn { + background: rgba(0, 0, 0, 0.03); + border-color: var(--docs-color-border); +} + +[data-theme="light"] .tool-card-ai-buttons .tool-card-mcp-btn:hover { + background: rgba(56, 172, 140, 0.08); + border-color: rgba(56, 172, 140, 0.4); +} + +.tool-card-ai-btn-featured { + font-size: 18px; + font-weight: 700; + letter-spacing: -0.02em; + padding: 0.9rem 1rem !important; + background: linear-gradient( + 135deg, + rgba(98, 254, 181, 0.16) 0%, + rgba(98, 254, 181, 0.06) 100% + ) !important; + border-color: rgba(98, 254, 181, 0.32) !important; + color: #fff; +} + +.tool-card-ai-buttons .tool-card-ai-btn-featured:hover { + background: linear-gradient( + 135deg, + rgba(98, 254, 181, 0.24) 0%, + rgba(98, 254, 181, 0.12) 100% + ) !important; + border-color: rgba(98, 254, 181, 0.5) !important; +} + +[data-theme="light"] .tool-card-ai-btn-featured { + background: linear-gradient( + 135deg, + rgba(56, 172, 140, 0.14) 0%, + rgba(56, 172, 140, 0.05) 100% + ) !important; + border-color: rgba(56, 172, 140, 0.4) !important; + color: var(--docs-color-text); +} + +[data-theme="light"] .tool-card-ai-buttons .tool-card-ai-btn-featured:hover { + background: linear-gradient( + 135deg, + rgba(56, 172, 140, 0.22) 0%, + rgba(56, 172, 140, 0.1) 100% + ) !important; + border-color: rgba(56, 172, 140, 0.55) !important; +} + .tool-card-mcp-btn { position: relative; display: flex;