✦ StealThis .dev
Plugins Easy

Windsurf Plugins

Windsurf's official plugins directory where developers browse and install MCP servers and integrations to extend the Windsurf agentic IDE and Cascade.

markdown
Targets: HTML

Code

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1" />
  <title>Windsurf Plugins — Directory</title>
  <style>
    :root {
      --bg: #0b0f17;
      --surface: #141a26;
      --surface-2: #1b2332;
      --text: #e6edf6;
      --muted: #8b97a8;
      --accent: #6ea8fe;
      --border: rgba(255, 255, 255, 0.08);
    }
    * { box-sizing: border-box; }
    html, body { height: 100%; }
    body {
      margin: 0;
      background: radial-gradient(1200px 600px at 50% -10%, #131c2b 0%, var(--bg) 60%);
      color: var(--text);
      font-family: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
      line-height: 1.55;
      display: flex;
      align-items: center;
      justify-content: center;
      padding: 24px;
    }
    .card {
      width: 100%;
      max-width: 640px;
      background: var(--surface);
      border: 1px solid var(--border);
      border-radius: 18px;
      padding: 28px;
      box-shadow: 0 20px 60px rgba(0, 0, 0, 0.45);
    }
    .eyebrow {
      display: inline-flex;
      align-items: center;
      gap: 8px;
      font-size: 12px;
      letter-spacing: 0.08em;
      text-transform: uppercase;
      color: var(--accent);
      font-weight: 600;
      margin: 0 0 10px;
    }
    .eyebrow .dot {
      width: 7px; height: 7px;
      border-radius: 50%;
      background: var(--accent);
      box-shadow: 0 0 12px var(--accent);
    }
    h1 {
      margin: 0 0 12px;
      font-size: 26px;
      line-height: 1.2;
      letter-spacing: -0.01em;
    }
    .desc {
      margin: 0 0 22px;
      color: var(--muted);
      font-size: 15px;
    }
    .section-label {
      font-size: 12px;
      letter-spacing: 0.06em;
      text-transform: uppercase;
      color: var(--muted);
      margin: 0 0 8px;
      font-weight: 600;
    }
    .access {
      background: var(--surface-2);
      border: 1px solid var(--border);
      border-radius: 12px;
      padding: 14px 16px;
      margin: 0 0 22px;
    }
    pre {
      margin: 0;
      overflow-x: auto;
    }
    code {
      font-family: "SFMono-Regular", ui-monospace, "JetBrains Mono", Menlo, Consolas, monospace;
      font-size: 13px;
      color: var(--text);
    }
    .access a { color: var(--accent); text-decoration: none; word-break: break-all; }
    .access a:hover { text-decoration: underline; }
    .pills {
      display: flex;
      flex-wrap: wrap;
      gap: 8px;
      margin: 0 0 26px;
    }
    .pill {
      font-size: 12px;
      color: var(--text);
      background: var(--surface-2);
      border: 1px solid var(--border);
      border-radius: 999px;
      padding: 5px 12px;
      white-space: nowrap;
    }
    .cta {
      display: inline-flex;
      align-items: center;
      gap: 8px;
      background: var(--accent);
      color: #07101f;
      font-weight: 700;
      font-size: 15px;
      text-decoration: none;
      padding: 12px 20px;
      border-radius: 12px;
      transition: transform 0.08s ease, box-shadow 0.2s ease;
    }
    .cta:hover { box-shadow: 0 8px 24px rgba(110, 168, 254, 0.35); }
    .cta:active { transform: translateY(1px); }
    .cta:focus-visible,
    .access a:focus-visible {
      outline: 2px solid var(--accent);
      outline-offset: 3px;
      border-radius: 6px;
    }
    .cta .arrow { font-size: 16px; line-height: 1; }
  </style>
</head>
<body>
  <main class="card">
    <p class="eyebrow"><span class="dot" aria-hidden="true"></span>Windsurf ecosystem</p>
    <h1>Windsurf Plugins</h1>
    <p class="desc">
      Official directory of plugins and MCP servers for the Windsurf agentic IDE.
      Browse, install, and connect new tools so Cascade can reach beyond your local codebase.
    </p>

    <p class="section-label">How to access</p>
    <div class="access">
      <pre><code># Browse the directory
<a href="https://windsurf.com/plugins" target="_blank" rel="noopener">https://windsurf.com/plugins</a>

# Or add MCP servers from inside Windsurf
# Cascade settings → Plugins / MCP → configure mcp_config.json</code></pre>
    </div>

    <p class="section-label">Compatible with</p>
    <div class="pills">
      <span class="pill">Windsurf</span>
      <span class="pill">Cascade</span>
      <span class="pill">MCP servers</span>
      <span class="pill">Tool integrations</span>
    </div>

    <a class="cta" href="https://windsurf.com/plugins" target="_blank" rel="noopener">
      Open Windsurf Plugins <span class="arrow" aria-hidden="true">→</span>
    </a>
  </main>
</body>
</html>

Windsurf Plugins

A directory of plugins and MCP (Model Context Protocol) servers you can install into Windsurf, the agentic IDE built around the Cascade assistant.

What it is

Windsurf Plugins is the official catalog of integrations for the Windsurf editor. It groups MCP servers and tool connectors that give Cascade access to external services — databases, issue trackers, documentation, browsers, and more — so the agent can act beyond the local codebase. Each entry links to setup details and the underlying server.

How to access / install

Browse the directory in your browser:

https://windsurf.com/plugins

Most entries are added from inside the editor: open Windsurf, go to the Cascade settings, and add or enable a plugin / MCP server there. MCP servers are configured through Windsurf’s MCP config (mcp_config.json), where you list each server’s launch command and arguments. After saving, refresh Cascade to pick up the new tools.

Good for

  • Developers using Windsurf who want to extend Cascade with new tools
  • Discovering ready-made MCP servers without hand-writing config
  • Connecting the agent to external data sources and services