4,500+ servers built on MCP Fusion
Vinkius
Web Scraper logo
Vinkius
Windsurf logo

How to Use the Web Scraper MCP in Windsurf

Read any public webpage and build multi-step workflows automatically with Windsurf.

See Vinkius in Action

Works with every AI agent you already use

…and any MCP-compatible client

Web Scraper MCP on Cursor AI Code Editor MCP Client Web Scraper MCP on Claude Desktop App MCP Integration Web Scraper MCP on OpenAI Agents SDK MCP Compatible Web Scraper MCP on Visual Studio Code MCP Extension Client Web Scraper MCP on GitHub Copilot AI Agent MCP Integration Web Scraper MCP on Google Gemini AI MCP Integration Web Scraper MCP on Lovable AI Development MCP Client Web Scraper MCP on Mistral AI Agents MCP Compatible Web Scraper MCP on Amazon AWS Bedrock MCP Support
MCP Servers - Free for Subscribers
Windsurf

Connect Web Scraper MCP to Windsurf

Create your Vinkius account to connect Web Scraper to Windsurf and route execution through our secure gateway. The platform manages server hosting, runtime updates, and security layers. Configuration requires no manual server provisioning.

GDPR Free for Subscribers

Crawl entire documentation sites.

The `crawl` tool lets your autonomous agent explore a site, starting from one URL. It handles up to 10 pages, keeping the response size manageable while mapping out the structure of the target website. You can follow internal links using `list_links`, which only returns hyperlinks sharing the same hostname as the source page. This keeps your search focused and efficient.

Extract clean article content.

Need the main text from a blog post or academic paper? Use the `read` tool; it applies a Reader View approach to strip out noise, converting the core material into Markdown. This works best when dealing with long-form articles and documentation. For general web pages that aren't strictly articles—like landing pages—use the `batch_read` tool. It fetches multiple URLs in parallel, handling up to 10 addresses at once.

Gather structured metadata.

The `extract` tool grabs key data points from a page, including its title, description, OG tags, language code, and author. It also reports on canonical links and the total number of internal links found. Remember that for the full raw content of the page, you'll still want to use the dedicated `read` tool rather than relying solely on this metadata extraction.

Setup guide

Set up Web Scraper MCP in Windsurf

Prerequisites

  • Windsurf IDE installed (macOS, Windows, or Linux)
  • Active Vinkius subscription with a valid endpoint token
  1. 1

    Open MCP configuration

    Click the Cascade assistant icon in the sidebar, then click the hammer icon (🔨) at the top of the panel. Select "Configure" to open ~/.codeium/windsurf/mcp_config.json.

  2. 2

    Add the Web Scraper MCP

    Paste the JSON snippet shown on the right into the mcpServers object. Replace [YOUR_TOKEN_HERE] with your endpoint token from cloud.vinkius.com.

  3. 3

    Refresh MCPs

    Go back to the hammer icon (🔨) in Cascade and click "Refresh". Windsurf will detect the new server. No full restart is needed — the connection is hot-reloaded.

  4. 4

    Verify in Cascade

    Start a new Cascade conversation and ask something like "Show my Web Scraper payment history." If connected, Cascade will call the Web Scraper tools directly. You will see a green dot next to the server name in the MCP panel.

mcp_config.json
{
  "mcpServers": {
    "web-scraper-mcp": {
      "url": "https://edge.vinkius.com/[YOUR_TOKEN_HERE]/mcp"
    }
  }
}

Independent Platform Disclaimer: Vinkius is an independent platform and is not affiliated with, endorsed by, sponsored by, verified by, or otherwise authorized by Web Scraper. All third-party trademarks, logos, and brand names are the property of their respective owners. Their use on this website is strictly for informational purposes to identify service compatibility and interoperability.

Why Choose Vinkius

Vinkius connects your tools to AI with real-time monitoring and automatic cost savings — all from one dashboard.

Real-time monitoring

Live

visibility into every interaction

Connect your favorite tools to your AI and see exactly what's happening — every request, every response, in real time.

Built-in savings

60%

lower AI costs

Vinkius compresses data between your apps and your AI automatically. Lower bills every month — no configuration required.

Single dashboard

One

place for every integration

Every tool your AI connects to, managed from a single screen. One account, complete control.

Common questions about Web Scraper MCP in Windsurf

You don't have to process every page manually. Use the `crawl` tool first; it maps out a site up to 10 pages deep, giving your agent an overview of all available content links. Then, you can chain subsequent steps using tools like `batch_read` on specific link sets.
Yes. If you're scraping a simple product page or a basic informational site, the `read` tool is still effective because it cleans up most noise. However, if you need raw structure and metadata, running `extract` provides title, description, and OG tags.
The `extract` tool is built for this. It gives you specific structured elements like the ``, meta description, and various Open Graph tags. You'll get a clean report on these items without needing to parse the entire page body.</div></div></div><div class="border-t border-zinc-200 dark:border-white/[0.06] transition-colors duration-300" data-faq-item><button type="button" class="w-full flex items-center justify-between gap-4 py-6 text-left cursor-pointer select-none group" data-faq-toggle aria-expanded="false"><span class="text-base font-semibold tracking-tight transition-colors duration-300 text-zinc-700 dark:text-white/70 group-hover:text-zinc-900 dark:group-hover:text-white">What if I need to scrape multiple URLs at once with Web Scraper in Windsurf?</span><span class="relative w-5 h-5 shrink-0 flex items-center justify-center transition-colors duration-300 text-zinc-400 dark:text-white/40 group-hover:text-zinc-900 dark:group-hover:text-white"><span class="absolute w-3.5 h-[1.5px] bg-current rounded-full"></span><span class="absolute w-[1.5px] h-3.5 bg-current rounded-full transition-transform duration-300" data-faq-plus></span></span></button><div class="transition-all duration-300 ease-in-out overflow-hidden max-h-0" data-faq-body><div class="text-[15.5px] text-zinc-600 dark:text-white/50 leading-[1.75] pb-6">Use `batch_read` for parallel fetching. This tool lets you feed it up to 10 distinct URLs and pulls the full, clean Markdown content from all of them simultaneously. It's a huge time saver compared to running reads one by one.</div></div></div><div class="border-t border-zinc-200 dark:border-white/[0.06] transition-colors duration-300" data-faq-item><button type="button" class="w-full flex items-center justify-between gap-4 py-6 text-left cursor-pointer select-none group" data-faq-toggle aria-expanded="false"><span class="text-base font-semibold tracking-tight transition-colors duration-300 text-zinc-700 dark:text-white/70 group-hover:text-zinc-900 dark:group-hover:text-white">What kind of data privacy concerns should I know about with Web Scraper in Windsurf?</span><span class="relative w-5 h-5 shrink-0 flex items-center justify-center transition-colors duration-300 text-zinc-400 dark:text-white/40 group-hover:text-zinc-900 dark:group-hover:text-white"><span class="absolute w-3.5 h-[1.5px] bg-current rounded-full"></span><span class="absolute w-[1.5px] h-3.5 bg-current rounded-full transition-transform duration-300" data-faq-plus></span></span></button><div class="transition-all duration-300 ease-in-out overflow-hidden max-h-0" data-faq-body><div class="text-[15.5px] text-zinc-600 dark:text-white/50 leading-[1.75] pb-6">This MCP Server accesses public web page content and associated metadata (like titles and descriptions). The system doesn't access private or authenticated user data; it only reads what's visible to a standard browser crawl.</div></div></div></div></section><script> (function initFaqAccordion() { document.querySelectorAll("[data-faq-toggle]").forEach((btn) => { if (btn.dataset.faqBound) return; btn.dataset.faqBound = "true"; btn.addEventListener("click", () => { const item = btn.closest("[data-faq-item]"); if (!item) return; const body = item.querySelector("[data-faq-body]"); const plus = item.querySelector("[data-faq-plus]"); const isOpen = btn.getAttribute("aria-expanded") === "true"; document.querySelectorAll("[data-faq-item]").forEach((other) => { if (other !== item) { const otherBody = other.querySelector("[data-faq-body]"); const otherPlus = other.querySelector("[data-faq-plus]"); const otherBtn = other.querySelector("[data-faq-toggle]"); if (otherBody) otherBody.style.maxHeight = "0"; if (otherPlus) { otherPlus.style.transform = ""; } if (otherBtn) otherBtn.setAttribute("aria-expanded", "false"); } }); if (isOpen) { body.style.maxHeight = "0"; plus.style.transform = ""; btn.setAttribute("aria-expanded", "false"); } else { body.style.maxHeight = body.scrollHeight + "px"; plus.style.transform = "rotate(90deg) scaleY(0)"; btn.setAttribute("aria-expanded", "true"); } }); }); })(); </script> </div> </section> <section class="py-20 "> <div class="max-w-7xl mx-auto px-4"> <p id="ai-tools" class="text-2xl sm:text-3xl lg:text-4xl font-black tracking-tight leading-[1.08] text-zinc-900 dark:text-white font-display"> Use it with your favorite AI tools </p> <p class="text-lg text-zinc-600 dark:text-white/40 leading-relaxed max-w-5xl mb-8"> Connect this server to Cursor, Claude, VS Code, and more. </p> <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-4"> <a href="/apps/web-scraper-mcp/claude-desktop" class="group relative overflow-hidden rounded-xl block transition-transform duration-200 hover:scale-[1.03] hover:shadow-2xl" style="background-color: #D97757;"> <div class="relative z-10 p-5 sm:p-6 flex flex-col h-full min-h-[120px]"> <div class="mb-auto"> <span class="text-lg lg:text-xl font-bold text-white tracking-tight leading-tight block drop-shadow-sm"> Claude Desktop </span> <span class="inline-flex mt-1.5 rounded-sm bg-black/20 px-1.5 py-0.5 text-[9px] font-mono text-white/90 uppercase tracking-wider backdrop-blur-sm"> ide </span> </div> </div> <div class="absolute -right-3 -bottom-3 w-24 h-24 sm:w-28 sm:h-28 rotate-[25deg] opacity-30 group-hover:opacity-50 transition-opacity duration-300"> <svg class="w-full h-full text-white drop-shadow-lg" viewBox="0 0 24 24" fill="currentColor"><path d="M17.3041 3.541h-3.6718l6.696 16.918H24Zm-10.6082 0L0 20.459h3.7442l1.3693-3.5527h7.0052l1.3693 3.5528h3.7442L10.5363 3.5409Zm-.3712 10.2232 2.2914-5.9456 2.2914 5.9456Z"/></svg> </div> </a><a href="/apps/web-scraper-mcp/cursor" class="group relative overflow-hidden rounded-xl block transition-transform duration-200 hover:scale-[1.03] hover:shadow-2xl" style="background-color: #1A1A2E;"> <div class="relative z-10 p-5 sm:p-6 flex flex-col h-full min-h-[120px]"> <div class="mb-auto"> <span class="text-lg lg:text-xl font-bold text-white tracking-tight leading-tight block drop-shadow-sm"> Cursor </span> <span class="inline-flex mt-1.5 rounded-sm bg-black/20 px-1.5 py-0.5 text-[9px] font-mono text-white/90 uppercase tracking-wider backdrop-blur-sm"> ide </span> </div> </div> <div class="absolute -right-3 -bottom-3 w-24 h-24 sm:w-28 sm:h-28 rotate-[25deg] opacity-30 group-hover:opacity-50 transition-opacity duration-300"> <svg class="w-full h-full text-white drop-shadow-lg" viewBox="0 0 24 24" fill="currentColor"><path d="M11.503.131 1.891 5.678a.84.84 0 0 0-.42.726v11.188c0 .3.162.575.42.724l9.609 5.55a1 1 0 0 0 .998 0l9.61-5.55a.84.84 0 0 0 .42-.724V6.404a.84.84 0 0 0-.42-.726L12.497.131a1.01 1.01 0 0 0-.996 0M2.657 6.338h18.55c.263 0 .43.287.297.515L12.23 22.918c-.062.107-.229.064-.229-.06V12.335a.59.59 0 0 0-.295-.51l-9.11-5.257c-.109-.063-.064-.23.061-.23"/></svg> </div> </a><a href="/apps/web-scraper-mcp/vscode-copilot" class="group relative overflow-hidden rounded-xl block transition-transform duration-200 hover:scale-[1.03] hover:shadow-2xl" style="background-color: #24292F;"> <div class="relative z-10 p-5 sm:p-6 flex flex-col h-full min-h-[120px]"> <div class="mb-auto"> <span class="text-lg lg:text-xl font-bold text-white tracking-tight leading-tight block drop-shadow-sm"> VS Code Copilot </span> <span class="inline-flex mt-1.5 rounded-sm bg-black/20 px-1.5 py-0.5 text-[9px] font-mono text-white/90 uppercase tracking-wider backdrop-blur-sm"> ide </span> </div> </div> <div class="absolute -right-3 -bottom-3 w-24 h-24 sm:w-28 sm:h-28 rotate-[25deg] opacity-30 group-hover:opacity-50 transition-opacity duration-300"> <svg class="w-full h-full text-white drop-shadow-lg" viewBox="0 0 24 24" fill="currentColor"><path d="M12 .297c-6.63 0-12 5.373-12 12 0 5.303 3.438 9.8 8.205 11.385.6.113.82-.258.82-.577 0-.285-.01-1.04-.015-2.04-3.338.724-4.042-1.61-4.042-1.61C4.422 18.07 3.633 17.7 3.633 17.7c-1.087-.744.084-.729.084-.729 1.205.084 1.838 1.236 1.838 1.236 1.07 1.835 2.809 1.305 3.495.998.108-.776.417-1.305.76-1.605-2.665-.3-5.466-1.332-5.466-5.93 0-1.31.465-2.38 1.235-3.22-.135-.303-.54-1.523.105-3.176 0 0 1.005-.322 3.3 1.23.96-.267 1.98-.399 3-.405 1.02.006 2.04.138 3 .405 2.28-1.552 3.285-1.23 3.285-1.23.645 1.653.24 2.873.12 3.176.765.84 1.23 1.91 1.23 3.22 0 4.61-2.805 5.625-5.475 5.92.42.36.81 1.096.81 2.22 0 1.606-.015 2.896-.015 3.286 0 .315.21.69.825.57C20.565 22.092 24 17.592 24 12.297c0-6.627-5.373-12-12-12"/></svg> </div> </a><a href="/apps/web-scraper-mcp/windsurf" class="group relative overflow-hidden rounded-xl block transition-transform duration-200 hover:scale-[1.03] hover:shadow-2xl" style="background-color: #00C2A8;"> <div class="relative z-10 p-5 sm:p-6 flex flex-col h-full min-h-[120px]"> <div class="mb-auto"> <span class="text-lg lg:text-xl font-bold text-white tracking-tight leading-tight block drop-shadow-sm"> Windsurf </span> <span class="inline-flex mt-1.5 rounded-sm bg-black/20 px-1.5 py-0.5 text-[9px] font-mono text-white/90 uppercase tracking-wider backdrop-blur-sm"> ide </span> </div> </div> <div class="absolute -right-3 -bottom-3 w-24 h-24 sm:w-28 sm:h-28 rotate-[25deg] opacity-30 group-hover:opacity-50 transition-opacity duration-300"> <svg class="w-full h-full text-white drop-shadow-lg" viewBox="0 0 24 24" fill="currentColor"><path d="M23.55 5.067c-1.2038-.002-2.1806.973-2.1806 2.1765v4.8676c0 .972-.8035 1.7594-1.7597 1.7594-.568 0-1.1352-.286-1.4718-.7659l-4.9713-7.1003c-.4125-.5896-1.0837-.941-1.8103-.941-1.1334 0-2.1533.9635-2.1533 2.153v4.8957c0 .972-.7969 1.7594-1.7596 1.7594-.57 0-1.1363-.286-1.4728-.7658L.4076 5.1598C.2822 4.9798 0 5.0688 0 5.2882v4.2452c0 .2147.0656.4228.1884.599l5.4748 7.8183c.3234.462.8006.8052 1.3509.9298 1.3771.313 2.6446-.747 2.6446-2.0977v-4.893c0-.972.7875-1.7593 1.7596-1.7593h.003a1.798 1.798 0 0 1 1.4718.7658l4.9723 7.0994c.4135.5905 1.05.941 1.8093.941 1.1587 0 2.1515-.9645 2.1515-2.153v-4.8948c0-.972.7875-1.7594 1.7596-1.7594h.194a.22.22 0 0 0 .2204-.2202v-4.622a.22.22 0 0 0-.2203-.2203Z"/></svg> </div> </a><a href="/apps/web-scraper-mcp/cline" class="group relative overflow-hidden rounded-xl block transition-transform duration-200 hover:scale-[1.03] hover:shadow-2xl" style="background-color: #5B5FC7;"> <div class="relative z-10 p-5 sm:p-6 flex flex-col h-full min-h-[120px]"> <div class="mb-auto"> <span class="text-lg lg:text-xl font-bold text-white tracking-tight leading-tight block drop-shadow-sm"> Cline </span> <span class="inline-flex mt-1.5 rounded-sm bg-black/20 px-1.5 py-0.5 text-[9px] font-mono text-white/90 uppercase tracking-wider backdrop-blur-sm"> ide </span> </div> </div> <div class="absolute -right-3 -bottom-3 w-24 h-24 sm:w-28 sm:h-28 rotate-[25deg] opacity-30 group-hover:opacity-50 transition-opacity duration-300"> <svg class="w-full h-full text-white drop-shadow-lg" viewBox="0 0 24 24" fill="currentColor"><path d="m23.365 13.556-1.442-2.895V8.994c0-2.764-2.218-5.002-4.954-5.002h-2.464c.178-.367.276-.779.276-1.213A2.77 2.77 0 0 0 12.018 0a2.77 2.77 0 0 0-2.763 2.779c0 .434.098.846.276 1.213H7.067c-2.736 0-4.954 2.238-4.954 5.002v1.667L.64 13.549c-.149.29-.149.636 0 .927l1.472 2.855v1.667C2.113 21.762 4.33 24 7.067 24h9.902c2.736 0 4.954-2.238 4.954-5.002V17.33l1.44-2.865c.143-.286.143-.622.002-.91m-12.854 2.36a2.27 2.27 0 0 1-2.261 2.273 2.27 2.27 0 0 1-2.261-2.273v-4.042A2.27 2.27 0 0 1 8.249 9.6a2.267 2.267 0 0 1 2.262 2.274zm7.285 0a2.27 2.27 0 0 1-2.26 2.273 2.27 2.27 0 0 1-2.262-2.273v-4.042A2.267 2.267 0 0 1 15.535 9.6a2.267 2.267 0 0 1 2.261 2.274z"/></svg> </div> </a><a href="/apps/web-scraper-mcp/claude-code" class="group relative overflow-hidden rounded-xl block transition-transform duration-200 hover:scale-[1.03] hover:shadow-2xl" style="background-color: #D97757;"> <div class="relative z-10 p-5 sm:p-6 flex flex-col h-full min-h-[120px]"> <div class="mb-auto"> <span class="text-lg lg:text-xl font-bold text-white tracking-tight leading-tight block drop-shadow-sm"> Claude Code </span> <span class="inline-flex mt-1.5 rounded-sm bg-black/20 px-1.5 py-0.5 text-[9px] font-mono text-white/90 uppercase tracking-wider backdrop-blur-sm"> cli </span> </div> </div> <div class="absolute -right-3 -bottom-3 w-24 h-24 sm:w-28 sm:h-28 rotate-[25deg] opacity-30 group-hover:opacity-50 transition-opacity duration-300"> <svg class="w-full h-full text-white drop-shadow-lg" viewBox="0 0 24 24" fill="currentColor"><path d="M17.3041 3.541h-3.6718l6.696 16.918H24Zm-10.6082 0L0 20.459h3.7442l1.3693-3.5527h7.0052l1.3693 3.5528h3.7442L10.5363 3.5409Zm-.3712 10.2232 2.2914-5.9456 2.2914 5.9456Z"/></svg> </div> </a><a href="/apps/web-scraper-mcp/openai-agents-sdk" class="group relative overflow-hidden rounded-xl block transition-transform duration-200 hover:scale-[1.03] hover:shadow-2xl" style="background-color: #10A37F;"> <div class="relative z-10 p-5 sm:p-6 flex flex-col h-full min-h-[120px]"> <div class="mb-auto"> <span class="text-lg lg:text-xl font-bold text-white tracking-tight leading-tight block drop-shadow-sm"> OpenAI Agents SDK </span> <span class="inline-flex mt-1.5 rounded-sm bg-black/20 px-1.5 py-0.5 text-[9px] font-mono text-white/90 uppercase tracking-wider backdrop-blur-sm"> sdk-python </span> </div> </div> <div class="absolute -right-3 -bottom-3 w-24 h-24 sm:w-28 sm:h-28 rotate-[25deg] opacity-30 group-hover:opacity-50 transition-opacity duration-300"> <svg class="w-full h-full text-white drop-shadow-lg" viewBox="0 0 24 24" fill="currentColor"><path d="M22.282 9.821a5.985 5.985 0 0 0-.516-4.91 6.046 6.046 0 0 0-6.51-2.9A6.065 6.065 0 0 0 4.981 4.18a5.985 5.985 0 0 0-3.998 2.9 6.046 6.046 0 0 0 .743 7.097 5.98 5.98 0 0 0 .51 4.911 6.051 6.051 0 0 0 6.515 2.9A5.985 5.985 0 0 0 13.26 24a6.056 6.056 0 0 0 5.772-4.206 5.99 5.99 0 0 0 3.997-2.9 6.056 6.056 0 0 0-.747-7.073zM13.26 22.43a4.476 4.476 0 0 1-2.876-1.04l.141-.081 4.779-2.758a.795.795 0 0 0 .392-.681v-6.737l2.02 1.168a.071.071 0 0 1 .038.052v5.583a4.504 4.504 0 0 1-4.494 4.494zM3.6 18.304a4.47 4.47 0 0 1-.535-3.014l.142.085 4.783 2.759a.771.771 0 0 0 .78 0l5.843-3.369v2.332a.08.08 0 0 1-.033.062L9.74 19.95a4.5 4.5 0 0 1-6.14-1.646zM2.34 7.896a4.485 4.485 0 0 1 2.366-1.973V11.6a.766.766 0 0 0 .388.676l5.815 3.355-2.02 1.168a.076.076 0 0 1-.071 0l-4.83-2.786A4.504 4.504 0 0 1 2.34 7.872zm16.597 3.855l-5.833-3.387L15.119 7.2a.076.076 0 0 1 .071 0l4.83 2.791a4.494 4.494 0 0 1-.676 8.105v-5.678a.79.79 0 0 0-.407-.667zm2.01-3.023l-.141-.085-4.774-2.782a.776.776 0 0 0-.785 0L9.409 9.23V6.897a.066.066 0 0 1 .028-.061l4.83-2.787a4.5 4.5 0 0 1 6.68 4.66zm-12.64 4.135l-2.02-1.164a.08.08 0 0 1-.038-.057V6.075a4.5 4.5 0 0 1 7.375-3.453l-.142.08L8.704 5.46a.795.795 0 0 0-.393.681zm1.097-2.365l2.602-1.5 2.607 1.5v2.999l-2.597 1.5-2.607-1.5z"/></svg> </div> </a><a href="/apps/web-scraper-mcp/google-adk" class="group relative overflow-hidden rounded-xl block transition-transform duration-200 hover:scale-[1.03] hover:shadow-2xl" style="background-color: #4285F4;"> <div class="relative z-10 p-5 sm:p-6 flex flex-col h-full min-h-[120px]"> <div class="mb-auto"> <span class="text-lg lg:text-xl font-bold text-white tracking-tight leading-tight block drop-shadow-sm"> Google ADK </span> <span class="inline-flex mt-1.5 rounded-sm bg-black/20 px-1.5 py-0.5 text-[9px] font-mono text-white/90 uppercase tracking-wider backdrop-blur-sm"> sdk-python </span> </div> </div> <div class="absolute -right-3 -bottom-3 w-24 h-24 sm:w-28 sm:h-28 rotate-[25deg] opacity-30 group-hover:opacity-50 transition-opacity duration-300"> <svg class="w-full h-full text-white drop-shadow-lg" viewBox="0 0 24 24" fill="currentColor"><path d="M11.04 19.32Q12 21.51 12 24q0-2.49.93-4.68.96-2.19 2.58-3.81t3.81-2.55Q21.51 12 24 12q-2.49 0-4.68-.93a12.3 12.3 0 0 1-3.81-2.58 12.3 12.3 0 0 1-2.58-3.81Q12 2.49 12 0q0 2.49-.96 4.68-.93 2.19-2.55 3.81a12.3 12.3 0 0 1-3.81 2.58Q2.49 12 0 12q2.49 0 4.68.96 2.19.93 3.81 2.55t2.55 3.81"/></svg> </div> </a><a href="/apps/web-scraper-mcp/pydantic-ai" class="group relative overflow-hidden rounded-xl block transition-transform duration-200 hover:scale-[1.03] hover:shadow-2xl" style="background-color: #E6007A;"> <div class="relative z-10 p-5 sm:p-6 flex flex-col h-full min-h-[120px]"> <div class="mb-auto"> <span class="text-lg lg:text-xl font-bold text-white tracking-tight leading-tight block drop-shadow-sm"> Pydantic AI </span> <span class="inline-flex mt-1.5 rounded-sm bg-black/20 px-1.5 py-0.5 text-[9px] font-mono text-white/90 uppercase tracking-wider backdrop-blur-sm"> sdk-python </span> </div> </div> <div class="absolute -right-3 -bottom-3 w-24 h-24 sm:w-28 sm:h-28 rotate-[25deg] opacity-30 group-hover:opacity-50 transition-opacity duration-300"> <svg class="w-full h-full text-white drop-shadow-lg" viewBox="0 0 24 24" fill="currentColor"><path d="m23.826 17.316-4.23-5.866-6.847-9.496c-.348-.48-1.151-.48-1.497 0l-6.845 9.494-4.233 5.868a.925.925 0 0 0 .46 1.417l11.078 3.626h.002a.92.92 0 0 0 .572 0h.002l11.077-3.626c.28-.092.5-.31.59-.592a.916.916 0 0 0-.13-.825h.002ZM12.001 4.07l4.44 6.158-4.152-1.36c-.032-.01-.066-.008-.098-.016a.8.8 0 0 0-.096-.016c-.032-.004-.062-.016-.094-.016s-.062.012-.094.016a.74.74 0 0 0-.096.016c-.032.006-.066.006-.096.016L7.59 10.221l-.026.008 4.44-6.158h-.002Zm-6.273 8.7 4.834-1.583.516-.168v9.19L2.41 17.372l3.317-4.6Zm7.197 7.437V11.02l5.35 1.752 3.316 4.598-8.666 2.838Z"/></svg> </div> </a><a href="/apps/web-scraper-mcp/ai-sdk" class="group relative overflow-hidden rounded-xl block transition-transform duration-200 hover:scale-[1.03] hover:shadow-2xl" style="background-color: #000000;"> <div class="relative z-10 p-5 sm:p-6 flex flex-col h-full min-h-[120px]"> <div class="mb-auto"> <span class="text-lg lg:text-xl font-bold text-white tracking-tight leading-tight block drop-shadow-sm"> Vercel AI SDK </span> <span class="inline-flex mt-1.5 rounded-sm bg-black/20 px-1.5 py-0.5 text-[9px] font-mono text-white/90 uppercase tracking-wider backdrop-blur-sm"> sdk-typescript </span> </div> </div> <div class="absolute -right-3 -bottom-3 w-24 h-24 sm:w-28 sm:h-28 rotate-[25deg] opacity-30 group-hover:opacity-50 transition-opacity duration-300"> <svg class="w-full h-full text-white drop-shadow-lg" viewBox="0 0 24 24" fill="currentColor"><path d="m12 1.608 12 20.784H0Z"/></svg> </div> </a><a href="/apps/web-scraper-mcp/mastra-ai" class="group relative overflow-hidden rounded-xl block transition-transform duration-200 hover:scale-[1.03] hover:shadow-2xl" style="background-color: #6C5CE7;"> <div class="relative z-10 p-5 sm:p-6 flex flex-col h-full min-h-[120px]"> <div class="mb-auto"> <span class="text-lg lg:text-xl font-bold text-white tracking-tight leading-tight block drop-shadow-sm"> Mastra AI </span> <span class="inline-flex mt-1.5 rounded-sm bg-black/20 px-1.5 py-0.5 text-[9px] font-mono text-white/90 uppercase tracking-wider backdrop-blur-sm"> sdk-typescript </span> </div> </div> <div class="absolute -right-3 -bottom-3 w-24 h-24 sm:w-28 sm:h-28 rotate-[25deg] opacity-30 group-hover:opacity-50 transition-opacity duration-300"> <img src="https://www.google.com/s2/favicons?domain=mastra.ai&sz=128" alt="Mastra AI" class="w-full h-full object-contain drop-shadow-lg" loading="lazy" decoding="async"> </div> </a><a href="/apps/web-scraper-mcp/crewai" class="group relative overflow-hidden rounded-xl block transition-transform duration-200 hover:scale-[1.03] hover:shadow-2xl" style="background-color: #FF6B35;"> <div class="relative z-10 p-5 sm:p-6 flex flex-col h-full min-h-[120px]"> <div class="mb-auto"> <span class="text-lg lg:text-xl font-bold text-white tracking-tight leading-tight block drop-shadow-sm"> CrewAI </span> <span class="inline-flex mt-1.5 rounded-sm bg-black/20 px-1.5 py-0.5 text-[9px] font-mono text-white/90 uppercase tracking-wider backdrop-blur-sm"> framework </span> </div> </div> <div class="absolute -right-3 -bottom-3 w-24 h-24 sm:w-28 sm:h-28 rotate-[25deg] opacity-30 group-hover:opacity-50 transition-opacity duration-300"> <svg class="w-full h-full text-white drop-shadow-lg" viewBox="0 0 24 24" fill="currentColor"><path d="M12.482.18C7.161 1.319 1.478 9.069 1.426 15.372c-.051 5.527 3.1 8.68 8.68 8.627 6.716-.05 14.259-6.87 12.09-10.9-.672-1.292-1.396-1.344-2.687-.207-1.602 1.395-1.654.31-.207-2.893 1.757-3.98 1.705-5.322-.31-7.544C17.03.388 14.962-.388 12.482.181Zm5.322 2.068c2.273 2.015 2.376 4.236.465 8.42-1.395 3.1-2.17 3.515-3.824 1.86-1.24-1.24-1.343-3.46-.258-6.044 1.137-2.635.982-3.1-.568-1.653-3.72 3.358-6.458 9.765-5.424 12.503.464 1.189.825 1.395 2.737 1.395 2.79 0 6.303-1.705 7.957-3.926 1.756-2.274 2.79-2.274 2.79-.052 0 3.875-6.459 8.627-11.625 8.627-6.251 0-9.351-4.752-7.491-11.47.878-2.995 4.443-7.904 7.077-9.66 3.255-2.17 5.684-2.17 8.164 0z"/></svg> </div> </a><a href="/apps/web-scraper-mcp/langchain" class="group relative overflow-hidden rounded-xl block transition-transform duration-200 hover:scale-[1.03] hover:shadow-2xl" style="background-color: #1C3C3C;"> <div class="relative z-10 p-5 sm:p-6 flex flex-col h-full min-h-[120px]"> <div class="mb-auto"> <span class="text-lg lg:text-xl font-bold text-white tracking-tight leading-tight block drop-shadow-sm"> LangChain </span> <span class="inline-flex mt-1.5 rounded-sm bg-black/20 px-1.5 py-0.5 text-[9px] font-mono text-white/90 uppercase tracking-wider backdrop-blur-sm"> framework </span> </div> </div> <div class="absolute -right-3 -bottom-3 w-24 h-24 sm:w-28 sm:h-28 rotate-[25deg] opacity-30 group-hover:opacity-50 transition-opacity duration-300"> <svg class="w-full h-full text-white drop-shadow-lg" viewBox="0 0 24 24" fill="currentColor"><path d="M7.53 15.975a7.53 7.53 0 0 0 2.206-5.325A7.54 7.54 0 0 0 7.53 5.325L2.205 0A7.54 7.54 0 0 0 0 5.325a7.54 7.54 0 0 0 2.205 5.325zm11.144.493a7.54 7.54 0 0 0-5.325-2.206 7.54 7.54 0 0 0-5.325 2.206l5.325 5.325a7.54 7.54 0 0 0 5.325 2.205A7.54 7.54 0 0 0 24 21.793zM2.219 21.78a7.54 7.54 0 0 0 5.325 2.205v-7.53H.014a7.54 7.54 0 0 0 2.205 5.325M20.73 8.595a7.53 7.53 0 0 0-5.327-2.206 7.53 7.53 0 0 0-5.325 2.207l5.325 5.325z"/></svg> </div> </a><a href="/apps/web-scraper-mcp/llamaindex" class="group relative overflow-hidden rounded-xl block transition-transform duration-200 hover:scale-[1.03] hover:shadow-2xl" style="background-color: #7C3AED;"> <div class="relative z-10 p-5 sm:p-6 flex flex-col h-full min-h-[120px]"> <div class="mb-auto"> <span class="text-lg lg:text-xl font-bold text-white tracking-tight leading-tight block drop-shadow-sm"> LlamaIndex </span> <span class="inline-flex mt-1.5 rounded-sm bg-black/20 px-1.5 py-0.5 text-[9px] font-mono text-white/90 uppercase tracking-wider backdrop-blur-sm"> framework </span> </div> </div> <div class="absolute -right-3 -bottom-3 w-24 h-24 sm:w-28 sm:h-28 rotate-[25deg] opacity-30 group-hover:opacity-50 transition-opacity duration-300"> <img src="https://www.google.com/s2/favicons?domain=llamaindex.ai&sz=128" alt="LlamaIndex" class="w-full h-full object-contain drop-shadow-lg" loading="lazy" decoding="async"> </div> </a><a href="/apps/web-scraper-mcp/autogen" class="group relative overflow-hidden rounded-xl block transition-transform duration-200 hover:scale-[1.03] hover:shadow-2xl" style="background-color: #0078D4;"> <div class="relative z-10 p-5 sm:p-6 flex flex-col h-full min-h-[120px]"> <div class="mb-auto"> <span class="text-lg lg:text-xl font-bold text-white tracking-tight leading-tight block drop-shadow-sm"> AutoGen </span> <span class="inline-flex mt-1.5 rounded-sm bg-black/20 px-1.5 py-0.5 text-[9px] font-mono text-white/90 uppercase tracking-wider backdrop-blur-sm"> framework </span> </div> </div> <div class="absolute -right-3 -bottom-3 w-24 h-24 sm:w-28 sm:h-28 rotate-[25deg] opacity-30 group-hover:opacity-50 transition-opacity duration-300"> <img src="https://www.google.com/s2/favicons?domain=microsoft.com&sz=128" alt="AutoGen" class="w-full h-full object-contain drop-shadow-lg" loading="lazy" decoding="async"> </div> </a> </div> </div> </section> <section class="py-4 pb-16"> <div class="max-w-7xl mx-auto px-4"> <div class="relative overflow-hidden rounded-lg bg-zinc-50 dark:bg-[#0a0a0a] border border-zinc-200 dark:border-white/[0.06]"> <div class="absolute -top-32 -left-32 w-80 h-80 bg-indigo-600/10 dark:bg-indigo-600/15 rounded-full blur-[100px] pointer-events-none"></div> <div class="relative z-10 px-10 py-12 sm:px-14 sm:py-16 lg:px-16 lg:py-20 flex flex-col lg:flex-row items-start lg:items-center justify-between gap-8 lg:gap-16"> <div class="flex-1 min-w-0"> <h3 id="start-using" class="text-2xl sm:text-3xl lg:text-[40px] font-extrabold tracking-tight text-zinc-900 dark:text-white leading-[1.15] mb-3"> Start using the <span class="text-indigo-600 dark:text-indigo-400">Web Scraper</span> MCP today </h3> <p class="text-sm sm:text-base text-zinc-500 dark:text-white/50 leading-relaxed max-w-xl"> We host it, we monitor it, we maintain it. You just paste one token. </p> </div> <div class="shrink-0"> <a href="https://cloud.vinkius.com" class="inline-flex items-center gap-2 px-6 py-3 rounded-xl bg-zinc-900 dark:bg-white text-white dark:text-black text-sm font-bold hover:bg-zinc-800 dark:hover:bg-white/90 transition-colors"> Get started <svg class="w-4 h-4" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2.5" aria-hidden="true"><path stroke-linecap="round" stroke-linejoin="round" d="M13.5 4.5 21 12m0 0-7.5 7.5M21 12H3"></path></svg> </a> </div> </div> </div> </div> </section> </section> </div></article> <div id="mcp-page-context" class="hidden" data-mcp-title="Web Scraper" data-mcp-desc="Set up the Web Scraper MCP in Windsurf through Vinkius. Step-by-step configuration for connecting Web Scraper to Windsurf — ready in under 2 minutes." data-mcp-icon="https://site-assets.vinkius.com/vk/favicon/favicon-96x96.png" data-mcp-client="Windsurf"></div> <div id="mcp-sticky-bar" data-sticky-bar class="fixed inset-x-0 z-50 border-b border-white/10 bg-neutral-950/90 backdrop-blur-xl shadow-[0_4px_30px_rgba(0,0,0,0.8)] transition-[transform,opacity] duration-300 ease-out" style="top: 64px; transform: translateY(-100%); opacity: 0; pointer-events: none;" aria-hidden="true" inert> <div class="max-w-7xl mx-auto px-4 py-3 flex items-center justify-between gap-4"> <div class="flex items-center gap-3 min-w-0"> <div class="w-8 h-8 rounded-lg overflow-hidden shrink-0 ring-1 ring-white/10"> <img src="https://site-assets.vinkius.com/vk/favicon/favicon-96x96.png" alt="" class="w-full h-full object-cover" width="36" height="36" loading="eager" data-fallback="https://yt3.googleusercontent.com/ytc/AIdro_nyYJ8Pjg4aOskJ6dL--v-NIE3jVYRsQRtAeUyoSmzYQg=s900-c-k-c0x00ffffff-no-rj" onerror="if(this.dataset.fallback){this.src=this.dataset.fallback;this.onerror=null}else{this.style.display='none'}"> </div> <div class="min-w-0 flex flex-col justify-center"> <div class="flex items-center gap-2"> <p class="text-sm font-semibold text-white truncate">Web Scraper</p> </div> <p class="text-xs text-white/50 truncate"> MCP - Built for AI Agents by Vinkius </p> </div> </div> <button type="button" data-auth-modal-trigger data-ga="cta_click" class="shrink-0 inline-flex items-center gap-2 px-4 py-2 rounded-lg text-white text-sm font-semibold cursor-pointer hover:opacity-90 transition-opacity" style="background-color: #0EA5E9;"> <img src="https://t2.gstatic.com/faviconV2?client=SOCIAL&type=FAVICON&fallback_opts=TYPE,SIZE,URL&url=https%3A%2F%2Fwindsurf.com&size=128" alt="Windsurf" class="w-4 h-4 rounded-sm" width="16" height="16" loading="eager"> Use in Windsurf </button> </div> </div> <script>(function(){const sentinelId = "hero-section"; const headerHeight = 64; const bar = document.querySelector("[data-sticky-bar]"); const sentinel = document.getElementById(sentinelId); if (!bar || !sentinel) return; const show = () => { bar.style.transform = "translateY(0)"; bar.style.opacity = "1"; bar.style.pointerEvents = "auto"; bar.setAttribute("aria-hidden", "false"); bar.removeAttribute("inert"); }; const hide = () => { bar.style.transform = "translateY(-100%)"; bar.style.opacity = "0"; bar.style.pointerEvents = "none"; bar.setAttribute("aria-hidden", "true"); bar.setAttribute("inert", ""); }; const observer = new IntersectionObserver( ([entry]) => { entry.isIntersecting ? hide() : show(); }, { rootMargin: `-${headerHeight}px 0px 0px 0px`, threshold: 0, }, ); observer.observe(sentinel); const cta = bar.querySelector("[data-auth-modal-trigger]"); if (cta) { cta.addEventListener("click", (e) => { e.preventDefault(); if (typeof window.authModal?.open === "function") { window.authModal.open(); } }); } })();</script> <div id="scroll-cta-modal" class="fixed inset-0 z-[200] flex items-center justify-center p-4 opacity-0 pointer-events-none transition-opacity duration-300" data-server-slug="web-scraper-mcp" data-client-name="Windsurf"> <div id="scroll-cta-overlay" class="absolute inset-0 bg-black/80 backdrop-blur-md cursor-pointer"></div> <div id="scroll-cta-panel" class="scroll-cta-panel relative z-10 w-full max-w-2xl rounded-2xl border border-white/[0.08] bg-[#0a0a0a] shadow-2xl overflow-hidden translate-y-6 scale-95 transition-all duration-350"> <div class="absolute top-0 left-0 right-0 h-px bg-gradient-to-r from-transparent via-indigo-500/50 to-transparent"></div> <button id="scroll-cta-close" class="absolute top-4 right-4 z-20 flex items-center justify-center w-8 h-8 rounded-full text-white/40 hover:text-white hover:bg-white/[0.08] transition-colors cursor-pointer" aria-label="Close modal"> <svg class="w-4 h-4" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"><path d="M18 6 6 18"></path><path d="m6 6 12 12"></path></svg> </button> <div class="px-8 pt-6 pb-8 relative z-10"> <div class="flex items-center gap-2 mb-5"> <span class="inline-flex items-center gap-1.5 px-2.5 py-1 rounded-full text-xs font-semibold bg-emerald-500/10 text-emerald-400 border border-emerald-500/20"> <svg class="w-3 h-3" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"><path d="M9 12.75 11.25 15 15 9.75M21 12a9 9 0 1 1-18 0 9 9 0 0 1 18 0Z"></path></svg> Built & Managed by Vinkius </span> <span class="inline-flex items-center gap-1.5 px-2.5 py-1 rounded-full text-xs font-semibold bg-indigo-500/10 text-indigo-400 border border-indigo-500/20"> <svg class="w-3 h-3" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"><path d="M13 2 3 14h9l-1 8 10-12h-9l1-8z"></path></svg> 30s setup </span> <span class="inline-flex items-center gap-1 px-2.5 py-1 rounded-full text-xs font-semibold bg-white/[0.04] text-white/50 border border-white/10"> 5 tools </span> </div> <p id="we-ve-already-built-the-for-just-plug-in" class="text-2xl sm:text-3xl font-bold text-white leading-tight tracking-tight mb-4"> We've already built the connector for Web Scraper. Just plug in your AI agents and start using Vinkius. </p> <p class="text-sm sm:text-base text-white/50 leading-relaxed mb-4"> <span class="text-white/80 font-semibold">No hosting. No infrastructure. No complex setup.</span> <br> <span class="text-white/70 font-medium"> All 5 tools are live and waiting. You're up and running in seconds.</span> </p> <div class="flex items-center flex-wrap gap-4 py-3 px-4 rounded-xl bg-white/[0.03] border border-white/[0.06] w-full mb-6"> <div class="flex items-center flex-wrap gap-3"> <div class="group/icon relative"> <img src="https://t2.gstatic.com/faviconV2?client=SOCIAL&type=FAVICON&fallback_opts=TYPE,SIZE,URL&url=https://claude.ai&size=128" alt="Claude" class="w-6 h-6 rounded-md opacity-80 group-hover/icon:opacity-100 transition-opacity" loading="lazy" decoding="async"> <span class="absolute -top-8 left-1/2 -translate-x-1/2 px-2 py-1 bg-black text-[10px] text-white rounded opacity-0 group-hover/icon:opacity-100 transition-opacity whitespace-nowrap border border-white/10 pointer-events-none">Claude</span> </div> <div class="h-4 w-px bg-white/10"></div> <div class="group/icon relative"> <img src="https://t2.gstatic.com/faviconV2?client=SOCIAL&type=FAVICON&fallback_opts=TYPE,SIZE,URL&url=https://openai.com&size=128" alt="ChatGPT" class="w-6 h-6 rounded-md opacity-80 group-hover/icon:opacity-100 transition-opacity" loading="lazy" decoding="async"> <span class="absolute -top-8 left-1/2 -translate-x-1/2 px-2 py-1 bg-black text-[10px] text-white rounded opacity-0 group-hover/icon:opacity-100 transition-opacity whitespace-nowrap border border-white/10 pointer-events-none">ChatGPT</span> </div> <div class="h-4 w-px bg-white/10"></div> <div class="group/icon relative"> <img src="https://t2.gstatic.com/faviconV2?client=SOCIAL&type=FAVICON&fallback_opts=TYPE,SIZE,URL&url=https://cursor.com&size=128" alt="Cursor" class="w-6 h-6 rounded-md opacity-80 group-hover/icon:opacity-100 transition-opacity" loading="lazy" decoding="async"> <span class="absolute -top-8 left-1/2 -translate-x-1/2 px-2 py-1 bg-black text-[10px] text-white rounded opacity-0 group-hover/icon:opacity-100 transition-opacity whitespace-nowrap border border-white/10 pointer-events-none">Cursor</span> </div> <div class="h-4 w-px bg-white/10"></div> <div class="group/icon relative"> <img src="https://www.gstatic.com/lamda/images/gemini_favicon_f069958c85030456e93de685481c559f160ea06b.png" alt="Gemini" class="w-6 h-6 rounded-md opacity-80 group-hover/icon:opacity-100 transition-opacity" loading="lazy" decoding="async"> <span class="absolute -top-8 left-1/2 -translate-x-1/2 px-2 py-1 bg-black text-[10px] text-white rounded opacity-0 group-hover/icon:opacity-100 transition-opacity whitespace-nowrap border border-white/10 pointer-events-none">Gemini</span> </div> <div class="h-4 w-px bg-white/10"></div> <div class="group/icon relative"> <img src="https://t2.gstatic.com/faviconV2?client=SOCIAL&type=FAVICON&fallback_opts=TYPE,SIZE,URL&url=https://windsurf.ai&size=128" alt="Windsurf" class="w-6 h-6 rounded-md opacity-80 group-hover/icon:opacity-100 transition-opacity" loading="lazy" decoding="async"> <span class="absolute -top-8 left-1/2 -translate-x-1/2 px-2 py-1 bg-black text-[10px] text-white rounded opacity-0 group-hover/icon:opacity-100 transition-opacity whitespace-nowrap border border-white/10 pointer-events-none">Windsurf</span> </div> <div class="h-4 w-px bg-white/10"></div> <div class="group/icon relative"> <img src="https://t2.gstatic.com/faviconV2?client=SOCIAL&type=FAVICON&fallback_opts=TYPE,SIZE,URL&url=https://code.visualstudio.com&size=128" alt="VS Code" class="w-6 h-6 rounded-md opacity-80 group-hover/icon:opacity-100 transition-opacity" loading="lazy" decoding="async"> <span class="absolute -top-8 left-1/2 -translate-x-1/2 px-2 py-1 bg-black text-[10px] text-white rounded opacity-0 group-hover/icon:opacity-100 transition-opacity whitespace-nowrap border border-white/10 pointer-events-none">VS Code</span> </div> <div class="h-4 w-px bg-white/10"></div> <div class="group/icon relative"> <img src="https://t2.gstatic.com/faviconV2?client=SOCIAL&type=FAVICON&fallback_opts=TYPE,SIZE,URL&url=https://jetbrains.com&size=128" alt="JetBrains" class="w-6 h-6 rounded-md opacity-80 group-hover/icon:opacity-100 transition-opacity" loading="lazy" decoding="async"> <span class="absolute -top-8 left-1/2 -translate-x-1/2 px-2 py-1 bg-black text-[10px] text-white rounded opacity-0 group-hover/icon:opacity-100 transition-opacity whitespace-nowrap border border-white/10 pointer-events-none">JetBrains</span> </div> <div class="h-4 w-px bg-white/10"></div> <div class="group/icon relative"> <img src="https://t2.gstatic.com/faviconV2?client=SOCIAL&type=FAVICON&fallback_opts=TYPE,SIZE,URL&url=https://vercel.com&size=128" alt="Vercel" class="w-6 h-6 rounded-md opacity-80 group-hover/icon:opacity-100 transition-opacity" loading="lazy" decoding="async"> <span class="absolute -top-8 left-1/2 -translate-x-1/2 px-2 py-1 bg-black text-[10px] text-white rounded opacity-0 group-hover/icon:opacity-100 transition-opacity whitespace-nowrap border border-white/10 pointer-events-none">Vercel</span> </div> </div> <div class="h-4 w-px bg-white/10 mx-1"></div> <span class="text-[11px] text-white/40 font-medium">+ other MCP clients</span> </div> <p class="text-sm text-white/50 leading-relaxed mb-6"> Vinkius gives your AI agents access to <span class="text-white font-semibold">the full catalog of app connectors</span>, all fully managed, secure, and enterprise-ready. One subscription, every tool you need. </p> <div class="grid grid-cols-2 gap-x-6 gap-y-2.5 mb-8 text-[13px] text-white/45"> <span class="inline-flex items-center gap-2"> <svg class="w-3.5 h-3.5 text-emerald-500/70 shrink-0" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2.5"><path d="m5 12 5 5L20 7"></path></svg> Zero hosting required </span> <span class="inline-flex items-center gap-2"> <svg class="w-3.5 h-3.5 text-emerald-500/70 shrink-0" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2.5"><path d="m5 12 5 5L20 7"></path></svg> Full MCP catalog included </span> <span class="inline-flex items-center gap-2"> <svg class="w-3.5 h-3.5 text-emerald-500/70 shrink-0" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2.5"><path d="m5 12 5 5L20 7"></path></svg> Enterprise-grade security </span> <span class="inline-flex items-center gap-2"> <svg class="w-3.5 h-3.5 text-emerald-500/70 shrink-0" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2.5"><path d="m5 12 5 5L20 7"></path></svg> Auto-updated by Vinkius </span> </div> <div class="flex flex-col-reverse sm:flex-row items-stretch sm:items-center gap-3"> <button id="scroll-cta-dismiss" class="inline-flex items-center justify-center px-6 py-3.5 rounded-xl text-sm font-medium text-white/50 hover:text-white border border-white/[0.08] hover:border-white/20 transition-all duration-200 cursor-pointer"> Maybe Later </button> <button id="scroll-cta-connect" data-auth-modal-trigger data-ga="cta_click" data-ga-cta-location="scroll-cta-modal" class="flex-1 inline-flex items-center justify-center gap-2 px-6 py-3.5 rounded-xl text-[15px] font-semibold text-black bg-white hover:bg-white/90 transition-all duration-200 shadow-lg shadow-white/10 cursor-pointer"> <svg class="w-4 h-4" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"><path d="M13 2 3 14h9l-1 8 10-12h-9l1-8z"></path></svg> Connect MCP to Windsurf </button> </div> <p class="text-sm text-white/80 mt-5 text-center"> Built, hosted, and secured by Vinkius. You just connect and go. </p> </div> </div> </div> <script type="module">function i(){const e=document.getElementById("scroll-cta-modal");if(!e)return;const a=document.getElementById("scroll-cta-panel"),f=document.getElementById("scroll-cta-overlay"),w=document.getElementById("scroll-cta-close"),E=document.getElementById("scroll-cta-dismiss"),y=document.getElementById("scroll-cta-connect"),r=e.getAttribute("data-server-slug")||"unknown",d=(e.getAttribute("data-client-name")||"").toLowerCase().replace(/\s+/g,"-"),m=`vk_scroll_cta_${r}${d?"_"+d:""}`;let c=!1,t=null,u=null,n=null;function o(){try{return sessionStorage.getItem(m)==="1"}catch{return!1}}function L(){try{sessionStorage.setItem(m,"1")}catch{}}function g(){c||o()||u||(u=setTimeout(()=>{o()||(c=!0,e?.classList.remove("opacity-0","pointer-events-none"),a?.classList.remove("translate-y-6","scale-95"),window.vkTrack&&window.vkTrack("scroll_cta_shown",{server_slug:r}),k())},1200))}function l(){c=!1,e?.classList.add("opacity-0","pointer-events-none"),a?.classList.add("translate-y-6","scale-95"),L()}function p(){const s=window.scrollY||document.documentElement.scrollTop,v=document.documentElement.scrollHeight-document.documentElement.clientHeight;return v>0?s/v*100:0}function k(){t&&(window.removeEventListener("scroll",t),t=null),n&&(clearTimeout(n),n=null)}f?.addEventListener("click",l),w?.addEventListener("click",l),E?.addEventListener("click",l),y?.addEventListener("click",()=>{l()}),o()||(t=()=>{p()>=50&&g()},window.addEventListener("scroll",t,{passive:!0}),n=setTimeout(()=>{g()},8e3))}document.addEventListener("astro:page-load",i);document.readyState==="loading"?document.addEventListener("DOMContentLoaded",i):i();</script> </main> <script> document.addEventListener("DOMContentLoaded", () => { document.querySelectorAll("[data-copy-btn]").forEach((btn) => { btn.addEventListener("click", () => { const text = btn.dataset.copyText || ""; navigator.clipboard.writeText(text).then(() => { if (typeof window.vkTrack === 'function') window.vkTrack('config_copy', { page_path: window.location.pathname }); const original = btn.innerHTML; btn.innerHTML = '<span class="text-emerald-400">Copied!</span>'; setTimeout(() => { btn.innerHTML = original; }, 2000); }); }); }); const tabs = document.querySelectorAll("[data-setup-tab]"); const panels = document.querySelectorAll("[data-setup-panel]"); tabs.forEach((tab) => { tab.addEventListener("click", () => { const target = tab.dataset.setupTab; panels.forEach((p) => { p.classList.toggle("hidden", p.dataset.setupPanel !== target); }); tabs.forEach((t) => { const active = t.dataset.setupTab === target; t.classList.toggle("text-zinc-900", active); t.classList.toggle("dark:text-white", active); t.classList.toggle("text-zinc-400", !active); t.classList.toggle("dark:text-white/40", !active); const line = t.querySelector("[data-tab-line]"); if (active && !line) { const s = document.createElement("span"); s.dataset.tabLine = ""; s.className = "absolute bottom-0 left-0 right-0 h-0.5 bg-zinc-900 dark:bg-white"; t.appendChild(s); } else if (!active && line) { line.remove(); } }); }); }); }); </script> </main> <footer class="mt-20 border-white/10 border-t bg-black"> <div class="max-w-7xl mx-auto border-x border-white/10"> <div class="grid grid-cols-2 md:grid-cols-4 lg:grid-cols-6 gap-x-8 gap-y-12 px-8 lg:px-16 py-14"> <div class="col-span-2 md:col-span-4 lg:col-span-2 flex flex-col gap-5 lg:pr-12"> <a href="/" class="inline-block" aria-label="Vinkius"> <img src="https://site-assets.vinkius.com/vk/logo-black-min.png" alt="Vinkius" title="Vinkius" class="h-6 w-auto object-contain brightness-0 invert opacity-90 hover:opacity-100 transition-opacity" loading="lazy" decoding="async"> </a> <p class="text-sm text-white/60 leading-relaxed"> MCPs are the music of AI Agents. We built the catalog and the infrastructure stack for the AI agent economy. </p> <img src="/vinkius-img/nvidia-inception-program.png" class="-ml-4.5" loading="lazy" decoding="async" alt="NVIDIA Inception Program"> <div class="flex items-center gap-4"> <a href="https://www.linkedin.com/company/vinkius" target="_blank" rel="noopener" aria-label="LinkedIn" class="group rounded focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-white/20"> <svg class="w-5 h-5 text-white/60 group-hover:text-white transition-colors duration-200" fill="currentColor" viewBox="0 0 24 24"><path d="M20.447 20.452h-3.554v-5.569c0-1.328-.027-3.037-1.852-3.037-1.853 0-2.136 1.445-2.136 2.939v5.667H9.351V9h3.414v1.561h.046c.477-.9 1.637-1.85 3.37-1.85 3.601 0 4.267 2.37 4.267 5.455v6.286zM5.337 7.433c-1.144 0-2.063-.926-2.063-2.065 0-1.138.92-2.063 2.063-2.063 1.14 0 2.064.925 2.064 2.063 0 1.139-.925 2.065-2.064 2.065zm1.782 13.019H3.555V9h3.564v11.452zM22.225 0H1.771C.792 0 0 .774 0 1.729v20.542C0 23.227.792 24 1.771 24h20.451C23.2 24 24 23.227 24 22.271V1.729C24 .774 23.2 0 22.222 0h.003z"></path></svg> </a> <a href="https://github.com/vinkius-labs" target="_blank" rel="noopener" aria-label="GitHub" class="group rounded focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-white/20"> <svg class="w-5 h-5 text-white/60 group-hover:text-white transition-colors duration-200" fill="currentColor" viewBox="0 0 24 24"><path d="M12 0c-6.626 0-12 5.373-12 12 0 5.302 3.438 9.8 8.207 11.387.599.111.793-.261.793-.577v-2.234c-3.338.726-4.033-1.416-4.033-1.416-.546-1.387-1.333-1.756-1.333-1.756-1.089-.745.083-.729.083-.729 1.205.084 1.839 1.237 1.839 1.237 1.07 1.834 2.807 1.304 3.492.997.107-.775.418-1.305.762-1.604-2.665-.305-5.467-1.334-5.467-5.931 0-1.311.469-2.381 1.236-3.221-.124-.303-.535-1.524.117-3.176 0 0 1.008-.322 3.301 1.23.957-.266 1.983-.399 3.003-.404 1.02.005 2.047.138 3.006.404 2.291-1.552 3.297-1.23 3.297-1.23.653 1.653.242 2.874.118 3.176.77.84 1.235 1.911 1.235 3.221 0 4.609-2.807 5.624-5.479 5.921.43.372.823 1.102.823 2.222v3.293c0 .319.192.694.801.576 4.765-1.589 8.199-6.086 8.199-11.386 0-6.627-5.373-12-12-12z"></path></svg> </a> <a href="https://x.com/vinkiuslabs" target="_blank" rel="noopener" aria-label="X" class="group rounded focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-white/20"> <svg class="w-5 h-5 text-white/60 group-hover:text-white transition-colors duration-200" fill="currentColor" viewBox="0 0 24 24"><path d="M18.244 2.25h3.308l-7.227 8.26 8.502 11.24H16.17l-5.214-6.817L4.99 21.75H1.68l7.73-8.835L1.254 2.25H8.08l4.713 6.231zm-1.161 17.52h1.833L7.084 4.126H5.117z"></path></svg> </a> </div> </div> <div class="flex flex-col items-start lg:ml-auto"> <h4 class="text-[11px] font-semibold text-white/60 uppercase tracking-[0.12em] mb-5"> App Catalog </h4> <ul class="flex flex-col p-0 m-0 w-full text-left space-y-2.5"> <li> <a href="/discover" class="text-[13px] text-white/40 hover:text-white transition-colors duration-200 focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-white/20 rounded -mx-1 px-1 inline-flex items-center gap-1.5"> Explore Servers </a> </li><li> <a href="/ship-log" class="text-[13px] text-white/40 hover:text-white transition-colors duration-200 focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-white/20 rounded -mx-1 px-1 inline-flex items-center gap-1.5"> Ship Log </a> </li><li> <a href="/claude/mcp" class="text-[13px] text-white/40 hover:text-white transition-colors duration-200 focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-white/20 rounded -mx-1 px-1 inline-flex items-center gap-1.5"> Servers for Claude </a> </li><li> <a href="/categories" class="text-[13px] text-white/40 hover:text-white transition-colors duration-200 focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-white/20 rounded -mx-1 px-1 inline-flex items-center gap-1.5"> Categories </a> </li><li> <a href="/tags" class="text-[13px] text-white/40 hover:text-white transition-colors duration-200 focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-white/20 rounded -mx-1 px-1 inline-flex items-center gap-1.5"> Tags </a> </li> </ul> </div><div class="flex flex-col items-start lg:ml-auto"> <h4 class="text-[11px] font-semibold text-white/60 uppercase tracking-[0.12em] mb-5"> Platform </h4> <ul class="flex flex-col p-0 m-0 w-full text-left space-y-2.5"> <li> <a href="/ai-agents-enterprise" class="text-[13px] text-white/40 hover:text-white transition-colors duration-200 focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-white/20 rounded -mx-1 px-1 inline-flex items-center gap-1.5"> Overview </a> </li><li> <a href="/governance" class="text-[13px] text-white/40 hover:text-white transition-colors duration-200 focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-white/20 rounded -mx-1 px-1 inline-flex items-center gap-1.5"> MCP Governance </a> </li><li> <a href="/sandboxes" class="text-[13px] text-white/40 hover:text-white transition-colors duration-200 focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-white/20 rounded -mx-1 px-1 inline-flex items-center gap-1.5"> MCP Sandboxes </a> </li><li> <a href="/analytics" class="text-[13px] text-white/40 hover:text-white transition-colors duration-200 focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-white/20 rounded -mx-1 px-1 inline-flex items-center gap-1.5"> MCP Analytics </a> </li> </ul> </div><div class="flex flex-col items-start lg:ml-auto"> <h4 class="text-[11px] font-semibold text-white/60 uppercase tracking-[0.12em] mb-5"> Resources </h4> <ul class="flex flex-col p-0 m-0 w-full text-left space-y-2.5"> <li> <a href="/developers" class="text-[13px] text-white/40 hover:text-white transition-colors duration-200 focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-white/20 rounded -mx-1 px-1 inline-flex items-center gap-1.5"> Developers </a> </li><li> <a href="https://docs.vinkius.com/getting-started" target="_blank" rel="noopener" class="text-[13px] text-white/40 hover:text-white transition-colors duration-200 focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-white/20 rounded -mx-1 px-1 inline-flex items-center gap-1.5"> Documentation <svg class="w-[10px] h-[10px] opacity-30 group-hover:opacity-100 transition-opacity" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2.5"> <path stroke-linecap="round" stroke-linejoin="round" d="M10 6H6a2 2 0 00-2 2v10a2 2 0 002 2h10a2 2 0 002-2v-4M14 4h6m0 0v6m0-6L10 14"></path> </svg> </a> </li><li> <a href="https://mcp-inspector.vinkius.com/" target="_blank" rel="noopener" class="text-[13px] text-white/40 hover:text-white transition-colors duration-200 focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-white/20 rounded -mx-1 px-1 inline-flex items-center gap-1.5"> MCP Inspector <svg class="w-[10px] h-[10px] opacity-30 group-hover:opacity-100 transition-opacity" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2.5"> <path stroke-linecap="round" stroke-linejoin="round" d="M10 6H6a2 2 0 00-2 2v10a2 2 0 002 2h10a2 2 0 002-2v-4M14 4h6m0 0v6m0-6L10 14"></path> </svg> </a> </li><li> <a href="https://github.com/vinkius-labs/mcpfusion" target="_blank" rel="noopener" class="text-[13px] text-white/40 hover:text-white transition-colors duration-200 focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-white/20 rounded -mx-1 px-1 inline-flex items-center gap-1.5"> MCP Fusion Framework <svg class="w-[10px] h-[10px] opacity-30 group-hover:opacity-100 transition-opacity" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2.5"> <path stroke-linecap="round" stroke-linejoin="round" d="M10 6H6a2 2 0 00-2 2v10a2 2 0 002 2h10a2 2 0 002-2v-4M14 4h6m0 0v6m0-6L10 14"></path> </svg> </a> </li><li> <a href="/mcp-distribution-channel" class="text-[13px] text-white/40 hover:text-white transition-colors duration-200 focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-white/20 rounded -mx-1 px-1 inline-flex items-center gap-1.5"> Distribution Channel </a> </li> </ul> </div><div class="flex flex-col items-start lg:ml-auto"> <h4 class="text-[11px] font-semibold text-white/60 uppercase tracking-[0.12em] mb-5"> Company </h4> <ul class="flex flex-col p-0 m-0 w-full text-left space-y-2.5"> <li> <a href="/about" class="text-[13px] text-white/40 hover:text-white transition-colors duration-200 focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-white/20 rounded -mx-1 px-1 inline-flex items-center gap-1.5"> About </a> </li><li> <a href="/how-it-works" class="text-[13px] text-white/40 hover:text-white transition-colors duration-200 focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-white/20 rounded -mx-1 px-1 inline-flex items-center gap-1.5"> How It Works </a> </li><li> <a href="/infrastructure" class="text-[13px] text-white/40 hover:text-white transition-colors duration-200 focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-white/20 rounded -mx-1 px-1 inline-flex items-center gap-1.5"> Infrastructure </a> </li><li> <a href="https://blog.vinkius.com" target="_blank" rel="noopener" class="text-[13px] text-white/40 hover:text-white transition-colors duration-200 focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-white/20 rounded -mx-1 px-1 inline-flex items-center gap-1.5"> Intelligence <svg class="w-[10px] h-[10px] opacity-30 group-hover:opacity-100 transition-opacity" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2.5"> <path stroke-linecap="round" stroke-linejoin="round" d="M10 6H6a2 2 0 00-2 2v10a2 2 0 002 2h10a2 2 0 002-2v-4M14 4h6m0 0v6m0-6L10 14"></path> </svg> </a> </li><li> <a href="https://docs.vinkius.com/getting-started" target="_blank" rel="noopener" class="text-[13px] text-white/40 hover:text-white transition-colors duration-200 focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-white/20 rounded -mx-1 px-1 inline-flex items-center gap-1.5"> Documentation <svg class="w-[10px] h-[10px] opacity-30 group-hover:opacity-100 transition-opacity" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2.5"> <path stroke-linecap="round" stroke-linejoin="round" d="M10 6H6a2 2 0 00-2 2v10a2 2 0 002 2h10a2 2 0 002-2v-4M14 4h6m0 0v6m0-6L10 14"></path> </svg> </a> </li><li> <a href="/contact" class="text-[13px] text-white/40 hover:text-white transition-colors duration-200 focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-white/20 rounded -mx-1 px-1 inline-flex items-center gap-1.5"> Contact Us </a> </li> </ul> </div> </div> <div class="flex justify-between border-t border-white/[0.06] px-8 lg:px-16 py-4"> <div class="flex items-center gap-2 flex-wrap"> <span class="text-[11px] font-semibold text-white/30 uppercase tracking-[0.12em]">Enterprise</span> <span class="text-white/[0.15] select-none" aria-hidden="true">—</span> <a href="/mcp-projects" class="text-[13px] text-white/35 hover:text-white/70 transition-colors duration-200 focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-white/20 rounded"> Projects </a> <span class="text-white/[0.15] select-none hidden sm:inline" aria-hidden="true"> · </span> <a href="/mcp-roles-access" class="text-[13px] text-white/35 hover:text-white/70 transition-colors duration-200 focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-white/20 rounded"> Roles & Access </a> <span class="text-white/[0.15] select-none hidden sm:inline" aria-hidden="true"> · </span> <a href="/mcp-sso-identity" class="text-[13px] text-white/35 hover:text-white/70 transition-colors duration-200 focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-white/20 rounded"> SSO & Identity </a> </div> <div class="flex flex-wrap items-center gap-x-5"> <span class="inline-flex items-center gap-1.5 text-[11px] text-white/40 tracking-wide"> <svg class="w-2.5 h-2.5 text-emerald-500/60" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="3"> <path d="m5 12 5 5L20 7"></path> </svg> GDPR </span><span class="inline-flex items-center gap-1.5 text-[11px] text-white/40 tracking-wide"> <svg class="w-2.5 h-2.5 text-emerald-500/60" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="3"> <path d="m5 12 5 5L20 7"></path> </svg> AWS Hosted </span><span class="inline-flex items-center gap-1.5 text-[11px] text-white/40 tracking-wide"> <svg class="w-2.5 h-2.5 text-emerald-500/60" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="3"> <path d="m5 12 5 5L20 7"></path> </svg> V8 Sandbox </span><span class="inline-flex items-center gap-1.5 text-[11px] text-white/40 tracking-wide"> <svg class="w-2.5 h-2.5 text-emerald-500/60" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="3"> <path d="m5 12 5 5L20 7"></path> </svg> Zero-Trust DLP </span><span class="inline-flex items-center gap-1.5 text-[11px] text-white/40 tracking-wide"> <svg class="w-2.5 h-2.5 text-emerald-500/60" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="3"> <path d="m5 12 5 5L20 7"></path> </svg> Open Source </span> </div> </div> <div class="border-t border-white/[0.06] px-8 lg:px-16 py-4"> <div class="flex justify-between items-center gap-3 flex-wrap"> <div class="flex items-center gap-3 flex-wrap"> <div class="flex items-center gap-1.5"> <a href="https://github.com/renatomarinho" target="_blank" rel="noopener nofollow" class="group flex items-center gap-3 rounded-full transition-all duration-300 hover:bg-white/[0.04] -ml-1.5 pl-1.5 pr-2 py-1.5"> <img src="https://avatars.githubusercontent.com/u/26571?v=4&s=48" alt="" class="w-6 h-6 rounded-full ring-1 ring-white/10 group-hover:ring-white/25 transition-all duration-300" loading="lazy" decoding="async"> <span class="text-[11px] text-white/60 group-hover:text-white/60 transition-colors duration-300"> Built by <span class="text-white/50 group-hover:text-white/80 font-medium transition-colors duration-300">Renato Marinho</span> </span> </a> <a href="https://www.linkedin.com/in/renatomarinho13" target="_blank" rel="noopener nofollow" aria-label="LinkedIn" class="text-white/60 hover:text-white/80 transition-colors duration-300 focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-white/20 rounded p-1"> <svg class="w-3.5 h-3.5" fill="currentColor" viewBox="0 0 24 24"><path d="M20.447 20.452h-3.554v-5.569c0-1.328-.027-3.037-1.852-3.037-1.853 0-2.136 1.445-2.136 2.939v5.667H9.351V9h3.414v1.561h.046c.477-.9 1.637-1.85 3.37-1.85 3.601 0 4.267 2.37 4.267 5.455v6.286zM5.337 7.433c-1.144 0-2.063-.926-2.063-2.065 0-1.138.92-2.063 2.063-2.063 1.14 0 2.064.925 2.064 2.063 0 1.139-.925 2.065-2.064 2.065zm1.782 13.019H3.555V9h3.564v11.452zM22.225 0H1.771C.792 0 0 .774 0 1.729v20.542C0 23.227.792 24 1.771 24h20.451C23.2 24 24 23.227 24 22.271V1.729C24 .774 23.2 0 22.222 0h.003z"></path></svg> </a> </div> <span class="text-white/[0.2] select-none hidden sm:inline" aria-hidden="true">·</span> <span class="text-[11px] text-white/50 tracking-wide">On GitHub since 2008</span> <span class="text-white/[0.2] select-none hidden sm:inline" aria-hidden="true">·</span> <span class="text-[11px] text-white/50 tracking-wide">5,700+ GitHub stars</span> <span class="text-white/[0.2] select-none hidden sm:inline" aria-hidden="true">·</span> <span class="text-[11px] text-white/50 tracking-wide">1.6M+ Packagist installs</span> </div> <p class="text-[11px] text-white/25"> © 2026 Vinkius — Built in Europe </p> </div> </div> <div class="border-t border-white/[0.06] px-8 lg:px-16 py-4 flex flex-col md:flex-row items-start md:items-center justify-between gap-3 pb-20"> <div> <p class="text-[11px] text-white/80 leading-relaxed max-w-5xl"> Third-party trademarks and logos are the property of their respective owners. Vinkius is an independent platform. <a href="/legal/terms-and-conditions#third-party-services" class="underline text-white/40 hover:text-white/55 transition-colors duration-200 focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-white/20 rounded">Legal notice</a>. </p> </div> <div class="flex items-center flex-wrap gap-x-4 gap-y-1"> <a href="/legal/terms-and-conditions" class="text-[11px] text-white/25 hover:text-white/50 transition-colors duration-200 focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-white/20 rounded py-0.5"> Terms </a><a href="/legal/privacy-policy" class="text-[11px] text-white/25 hover:text-white/50 transition-colors duration-200 focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-white/20 rounded py-0.5"> Privacy </a><a href="/legal/cookie-policy" class="text-[11px] text-white/25 hover:text-white/50 transition-colors duration-200 focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-white/20 rounded py-0.5"> Cookies </a><a href="/legal/security" class="text-[11px] text-white/25 hover:text-white/50 transition-colors duration-200 focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-white/20 rounded py-0.5"> Security </a><a href="/legal/data-processing-agreement" class="text-[11px] text-white/25 hover:text-white/50 transition-colors duration-200 focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-white/20 rounded py-0.5"> DPA </a> </div> </div> </div> </footer> <script defer src="https://www.googletagmanager.com/gtag/js?id=G-7HZZ2HZ5GG"></script> <script defer> window.dataLayer = window.dataLayer || []; function gtag() { dataLayer.push(arguments); } gtag("js", new Date()); gtag("config", "G-7HZZ2HZ5GG"); window.vkTrack = function (name, params) { if (typeof gtag !== "function") return; params = params || {}; params.page_path = window.location.pathname; gtag("event", name, params); }; window.vkTrackOutbound = function (name, params, href) { if (!href) return; params = params || {}; params.page_path = window.location.pathname; var done = false; var go = function () { if (!done) { done = true; window.location.href = href; } }; if (typeof gtag === "function") { params.event_callback = go; gtag("event", name, params); setTimeout(go, 1000); } else { go(); } }; document.addEventListener("click", function (e) { var el = e.target.closest("[data-ga]"); if (!el) return; var eventName = el.getAttribute("data-ga"); if (!eventName) return; var params = {}; Array.from(el.attributes).forEach(function (attr) { if ( attr.name.startsWith("data-ga-") && attr.name !== "data-ga-outbound" ) { var key = attr.name.replace("data-ga-", "").replace(/-/g, "_"); params[key] = attr.value; } }); if (!params.label) { var text = (el.innerText || "").trim().substring(0, 60); if (text) params.label = text; } if (el.hasAttribute("data-ga-outbound") && el.tagName === "A") { e.preventDefault(); window.vkTrackOutbound(eventName, params, el.href); return; } window.vkTrack(eventName, params); }); </script> </div> <div id="auth-modal" role="dialog" aria-modal="true" aria-label="Get Started — Authenticate" class="auth-modal fixed inset-0 z-[9999] flex items-center justify-center p-4 sm:p-6 hidden" data-astro-cid-ke56sdij> <div class="auth-modal__backdrop absolute inset-0 bg-black/80 backdrop-blur-md" data-auth-modal-close data-astro-cid-ke56sdij></div> <div class="auth-modal__card relative w-full max-w-4xl bg-black border border-white/10 rounded-2xl sm:rounded-3xl shadow-2xl overflow-hidden flex flex-col items-start md:flex-row" data-astro-cid-ke56sdij> <button class="absolute top-4 right-4 md:top-6 md:right-6 z-10 flex items-center justify-center w-8 h-8 rounded-full bg-black/20 hover:bg-black/50 backdrop-blur-sm text-white/40 hover:text-white transition-colors focus:outline-none focus-visible:ring-2 focus-visible:ring-white/30" aria-label="Close" data-auth-modal-close data-astro-cid-ke56sdij> <svg class="w-5 h-5" fill="none" viewBox="0 0 24 24" stroke="currentColor" data-astro-cid-ke56sdij> <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12" data-astro-cid-ke56sdij></path> </svg> </button> <div id="auth-panel-generic" class="hidden md:flex flex-col justify-between w-1/2 p-10 lg:p-12 bg-gradient-to-br from-[#121212] via-[#0d0d0d] to-black border-r border-white/5 relative overflow-hidden min-h-[520px]" data-astro-cid-ke56sdij> <div class="absolute inset-0 bg-gradient-to-br from-white/[0.03] to-transparent pointer-events-none" data-astro-cid-ke56sdij></div> <div class="absolute -top-24 -left-24 w-64 h-64 bg-white/[0.02] rounded-full blur-3xl" data-astro-cid-ke56sdij></div> <div class="relative z-10" data-astro-cid-ke56sdij> <img src="https://site-assets.vinkius.com/vk/logo-black-min.png" alt="Vinkius" class="h-7 mb-10 object-contain" loading="eager" data-astro-cid-ke56sdij> <h3 class="text-2xl font-bold text-white tracking-tight mb-3 leading-tight" data-astro-cid-ke56sdij> Your AI deserves better tools. </h3> <p class="text-sm text-white/40 mb-10 leading-relaxed" data-astro-cid-ke56sdij> Thousands of apps. One subscription. Connected in minutes. </p> <ol class="space-y-0" data-astro-cid-ke56sdij> <li class="flex items-start gap-4" data-astro-cid-ke56sdij> <div class="flex flex-col items-center" data-astro-cid-ke56sdij> <div class="flex items-center justify-center w-8 h-8 rounded-lg bg-white/[0.06] border border-white/[0.10] text-xs font-bold text-white/70" data-astro-cid-ke56sdij> 1 </div> <div class="w-px h-6 bg-white/[0.08]" data-astro-cid-ke56sdij></div> </div> <div class="pb-4" data-astro-cid-ke56sdij> <h4 class="font-semibold text-white text-[15px] mb-0.5" data-astro-cid-ke56sdij> Subscribe on Vinkius </h4> <p class="text-sm text-white/40 leading-relaxed" data-astro-cid-ke56sdij> Pick a plan that fits. You're set up in under a minute. </p> </div> </li> <li class="flex items-start gap-4" data-astro-cid-ke56sdij> <div class="flex flex-col items-center" data-astro-cid-ke56sdij> <div class="flex items-center justify-center w-8 h-8 rounded-lg bg-white/[0.06] border border-white/[0.10] text-xs font-bold text-white/70" data-astro-cid-ke56sdij> 2 </div> <div class="w-px h-6 bg-white/[0.08]" data-astro-cid-ke56sdij></div> </div> <div class="pb-4" data-astro-cid-ke56sdij> <h4 class="font-semibold text-white text-[15px] mb-0.5" data-astro-cid-ke56sdij> Configure your credentials </h4> <p class="text-sm text-white/40 leading-relaxed" data-astro-cid-ke56sdij> Grab your connection token from the dashboard. That's it. </p> </div> </li> <li class="flex items-start gap-4" data-astro-cid-ke56sdij> <div class="flex flex-col items-center" data-astro-cid-ke56sdij> <div class="flex items-center justify-center w-8 h-8 rounded-lg bg-white/[0.06] border border-white/[0.10] text-xs font-bold text-white/70" data-astro-cid-ke56sdij> 3 </div> </div> <div data-astro-cid-ke56sdij> <h4 class="font-semibold text-white text-[15px] mb-0.5" data-astro-cid-ke56sdij> Connect and start building </h4> <p class="text-sm text-white/40 leading-relaxed" data-astro-cid-ke56sdij> Paste the token into your editor or agent. Done. </p> </div> </li> </ol> <div class="mt-8 flex items-center gap-2.5 text-xs text-white/30" data-astro-cid-ke56sdij> <svg class="w-3.5 h-3.5 text-white/30" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2" data-astro-cid-ke56sdij><path stroke-linecap="round" stroke-linejoin="round" d="M9 12l2 2 4-4m5.618-4.016A11.955 11.955 0 0112 2.944a11.955 11.955 0 01-8.618 3.04A12.02 12.02 0 003 9c0 5.591 3.824 10.29 9 11.622 5.176-1.332 9-6.03 9-11.622 0-1.042-.133-2.052-.382-3.016z" data-astro-cid-ke56sdij></path></svg> <span data-astro-cid-ke56sdij>Your data stays yours. Always encrypted, never shared.</span> </div> </div> </div> <div id="auth-panel-mcp" class="hidden flex-col justify-between w-1/2 p-10 lg:p-12 bg-gradient-to-br from-[#121212] via-[#0d0d0d] to-black border-r border-white/5 relative overflow-hidden min-h-[520px]" data-astro-cid-ke56sdij> <div class="absolute inset-0 bg-gradient-to-br from-emerald-500/[0.03] to-transparent pointer-events-none" data-astro-cid-ke56sdij></div> <div class="absolute -bottom-32 -right-32 w-80 h-80 bg-emerald-500/[0.04] rounded-full blur-3xl pointer-events-none" data-astro-cid-ke56sdij></div> <div class="relative z-10 flex flex-col h-full" data-astro-cid-ke56sdij> <img src="https://site-assets.vinkius.com/vk/logo-black-min.png" alt="Vinkius" class="h-7 mb-10 object-contain self-start" loading="eager" data-astro-cid-ke56sdij> <div class="flex items-center justify-center w-16 h-16 rounded-2xl bg-white/[0.05] border border-white/[0.08] mb-5" data-astro-cid-ke56sdij> <img id="auth-mcp-icon" src="" alt="" class="w-10 h-10 object-contain rounded-lg" loading="lazy" decoding="async" data-astro-cid-ke56sdij> </div> <h3 id="auth-mcp-title" class="text-[22px] font-bold text-white tracking-tight mb-2 leading-tight" data-astro-cid-ke56sdij></h3> <p id="auth-mcp-desc" class="text-sm text-white/50 leading-relaxed mb-6 line-clamp-3" data-astro-cid-ke56sdij></p> <div id="auth-mcp-client" class="hidden items-center gap-2.5 px-4 py-2.5 rounded-xl bg-white/[0.04] border border-white/[0.06] mb-6 self-start" data-astro-cid-ke56sdij> <img id="auth-mcp-client-icon" src="" alt="" class="w-5 h-5 rounded-sm object-contain" width="20" height="20" loading="eager" data-astro-cid-ke56sdij> <span id="auth-mcp-client-name" class="text-xs font-semibold text-white/60" data-astro-cid-ke56sdij></span> </div> <div class="flex-1" data-astro-cid-ke56sdij></div> <div class="space-y-0" data-astro-cid-ke56sdij> <p class="text-[10px] font-semibold uppercase tracking-widest text-white/25 mb-3" data-astro-cid-ke56sdij> How it works </p> <div class="flex items-start gap-3" data-astro-cid-ke56sdij> <div class="flex flex-col items-center" data-astro-cid-ke56sdij> <div class="flex items-center justify-center w-6 h-6 rounded-md bg-emerald-500/10 border border-emerald-500/20 text-[10px] font-bold text-emerald-400" data-astro-cid-ke56sdij> 1 </div> <div class="w-px h-4 bg-emerald-500/10" data-astro-cid-ke56sdij></div> </div> <span class="text-sm text-white/50 pt-0.5" data-astro-cid-ke56sdij>Subscribe on Vinkius</span> </div> <div class="flex items-start gap-3" data-astro-cid-ke56sdij> <div class="flex flex-col items-center" data-astro-cid-ke56sdij> <div class="flex items-center justify-center w-6 h-6 rounded-md bg-emerald-500/10 border border-emerald-500/20 text-[10px] font-bold text-emerald-400" data-astro-cid-ke56sdij> 2 </div> <div class="w-px h-4 bg-emerald-500/10" data-astro-cid-ke56sdij></div> </div> <span class="text-sm text-white/50 pt-0.5" data-astro-cid-ke56sdij>Configure your credentials</span> </div> <div class="flex items-start gap-3" data-astro-cid-ke56sdij> <div class="flex flex-col items-center" data-astro-cid-ke56sdij> <div class="flex items-center justify-center w-6 h-6 rounded-md bg-emerald-500/10 border border-emerald-500/20 text-[10px] font-bold text-emerald-400" data-astro-cid-ke56sdij> 3 </div> </div> <span id="auth-step-connect" class="text-sm text-white/50 pt-0.5" data-astro-cid-ke56sdij>Connect and start building</span> </div> </div> </div> </div> <div class="w-full md:w-1/2 p-8 sm:p-10 lg:p-12 flex flex-col justify-center items-start bg-black" data-astro-cid-ke56sdij> <div class="md:hidden flex justify-center w-full mb-8" data-astro-cid-ke56sdij> <img src="https://site-assets.vinkius.com/vk/logo-black-min.png" alt="Vinkius" class="h-6" loading="eager" data-astro-cid-ke56sdij> </div> <div class="text-center md:text-left mb-8 md:mb-10 mt-8 md:mt-16 w-full" data-astro-cid-ke56sdij> <h2 id="auth-heading" class="text-2xl font-bold text-white tracking-tight mb-2" data-astro-cid-ke56sdij> Get Started </h2> <p id="auth-subheading" class="text-[15px] text-white/40 mb-6" data-astro-cid-ke56sdij> Sign in to subscribe and connect your apps in minutes. </p> </div> <div class="flex flex-col w-full gap-4" data-astro-cid-ke56sdij> <a href="https://cloud.vinkius.com/auth/google" class="auth-btn group w-full justify-center" id="auth-google-btn" data-ga="sign_up" data-ga-method="google" data-ga-outbound data-astro-cid-ke56sdij> <svg class="w-[22px] h-[22px] flex-shrink-0" viewBox="0 0 24 24" data-astro-cid-ke56sdij> <path fill="#4285F4" d="M22.56 12.25c0-.78-.07-1.53-.2-2.25H12v4.26h5.92c-.26 1.37-1.04 2.53-2.21 3.31v2.77h3.57c2.08-1.92 3.28-4.74 3.28-8.09z" data-astro-cid-ke56sdij></path> <path fill="#34A853" d="M12 23c2.97 0 5.46-.98 7.28-2.66l-3.57-2.77c-.98.66-2.23 1.06-3.71 1.06-2.86 0-5.29-1.93-6.16-4.53H2.18v2.84C3.99 20.53 7.7 23 12 23z" data-astro-cid-ke56sdij></path> <path fill="#FBBC05" d="M5.84 14.09c-.22-.66-.35-1.36-.35-2.09s.13-1.43.35-2.09V7.07H2.18C1.43 8.55 1 10.22 1 12s.43 3.45 1.18 4.93l2.85-2.22.81-.62z" data-astro-cid-ke56sdij></path> <path fill="#EA4335" d="M12 5.38c1.62 0 3.06.56 4.21 1.64l3.15-3.15C17.45 2.09 14.97 1 12 1 7.7 1 3.99 3.47 2.18 7.07l3.66 2.84c.87-2.6 3.3-4.53 6.16-4.53z" data-astro-cid-ke56sdij></path> </svg> <span class="auth-btn__label" data-astro-cid-ke56sdij>Start with Google</span> <svg class="w-4 h-4 opacity-0 -translate-x-1 group-hover:opacity-60 group-hover:translate-x-0 transition-all duration-200 flex-shrink-0 ml-auto" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2" data-astro-cid-ke56sdij> <path stroke-linecap="round" stroke-linejoin="round" d="M13 7l5 5m0 0l-5 5m5-5H6" data-astro-cid-ke56sdij></path> </svg> </a> <a href="https://cloud.vinkius.com/auth/github" class="auth-btn group w-full justify-center" id="auth-github-btn" data-ga="sign_up" data-ga-method="github" data-ga-outbound data-astro-cid-ke56sdij> <svg class="w-[22px] h-[22px] flex-shrink-0" fill="currentColor" viewBox="0 0 24 24" data-astro-cid-ke56sdij> <path d="M12 0c-6.626 0-12 5.373-12 12 0 5.302 3.438 9.8 8.207 11.387.599.111.793-.261.793-.577v-2.234c-3.338.726-4.033-1.416-4.033-1.416-.546-1.387-1.333-1.756-1.333-1.756-1.089-.745.083-.729.083-.729 1.205.084 1.839 1.237 1.839 1.237 1.07 1.834 2.807 1.304 3.492.997.107-.775.418-1.305.762-1.604-2.665-.305-5.467-1.334-5.467-5.931 0-1.311.469-2.381 1.236-3.221-.124-.303-.535-1.524.117-3.176 0 0 1.008-.322 3.301 1.23.957-.266 1.983-.399 3.003-.404 1.02.005 2.047.138 3.006.404 2.291-1.552 3.297-1.23 3.297-1.23.653 1.653.242 2.874.118 3.176.77.84 1.235 1.911 1.235 3.221 0 4.609-2.807 5.624-5.479 5.921.43.372.823 1.102.823 2.222v3.293c0 .319.192.694.801.576 4.765-1.589 8.199-6.086 8.199-11.386 0-6.627-5.373-12-12-12z" data-astro-cid-ke56sdij></path> </svg> <span class="auth-btn__label" data-astro-cid-ke56sdij>Start with GitHub</span> <svg class="w-4 h-4 opacity-0 -translate-x-1 group-hover:opacity-60 group-hover:translate-x-0 transition-all duration-200 flex-shrink-0 ml-auto" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2" data-astro-cid-ke56sdij> <path stroke-linecap="round" stroke-linejoin="round" d="M13 7l5 5m0 0l-5 5m5-5H6" data-astro-cid-ke56sdij></path> </svg> </a> </div> <div class="w-full pt-6 mt-2 flex flex-col items-center justify-center text-center" data-astro-cid-ke56sdij> <p class="text-xs text-white/60 leading-relaxed font-light" data-astro-cid-ke56sdij> By continuing, you agree to our <a href="/legal/terms-and-conditions" target="_blank" class="text-white underline hover:text-white/80 transition-colors" data-astro-cid-ke56sdij>Terms</a> and <a href="/legal/privacy-policy" target="_blank" class="text-white underline hover:text-white/80 transition-colors" data-astro-cid-ke56sdij>Privacy Policy</a>. </p> </div> </div> </div> </div> <script type="module">(function(){const e=document.getElementById("auth-modal");if(!e)return;const n=document.getElementById("auth-panel-generic"),c=document.getElementById("auth-panel-mcp"),s=document.getElementById("auth-mcp-icon"),u=document.getElementById("auth-mcp-title"),r=document.getElementById("auth-mcp-desc"),d=document.getElementById("auth-mcp-client"),p=document.getElementById("auth-mcp-client-name"),o=document.getElementById("auth-heading"),i=document.getElementById("auth-subheading"),I=()=>{document.body.style.overflow="hidden"},v=()=>{document.body.style.overflow=""};function f(){const t=document.getElementById("mcp-page-context");return t?{title:t.dataset.mcpTitle||"",desc:t.dataset.mcpDesc||"",icon:t.dataset.mcpIcon||"",client:t.dataset.mcpClient||""}:null}function L(){const t=f();if(t&&t.title&&n&&c){if(n.classList.add("hidden"),n.classList.remove("md:flex"),c.classList.remove("hidden"),c.classList.add("md:flex"),s&&(s.src=t.icon,s.alt=t.title),u){const y=t.title.toLowerCase().includes("mcp")?t.title:`${t.title} MCP`;u.textContent=y}if(r&&(r.textContent=t.desc),t.client&&d&&p){d.classList.remove("hidden"),d.classList.add("flex"),p.textContent=`Connect via ${t.client}`;const C={Cursor:"cursor.com",Windsurf:"windsurf.com","VS Code Copilot":"code.visualstudio.com",Cline:"cline.bot","Claude Desktop":"claude.ai","Claude Code":"claude.ai",LlamaIndex:"llamaindex.ai","AI SDK":"sdk.vercel.ai",LangChain:"langchain.com","Pydantic AI":"ai.pydantic.dev","OpenAI Agents SDK":"openai.com","Mastra AI":"mastra.ai","Google ADK":"google.com",CrewAI:"crewai.com",AutoGen:"microsoft.github.io"}[t.client],m=document.getElementById("auth-mcp-client-icon");m&&C&&(m.src=`https://t2.gstatic.com/faviconV2?client=SOCIAL&type=FAVICON&fallback_opts=TYPE,SIZE,URL&url=https://${C}&size=128`,m.alt=t.client)}o&&(o.textContent=`Activate ${t.title}`),i&&(i.textContent="Sign in to subscribe and start using this app right away.");const a=document.getElementById("auth-step-connect");a&&t.client&&(a.textContent=`Connect with ${t.client} — ready to go`)}else n&&(n.classList.remove("hidden"),n.classList.add("md:flex")),c&&(c.classList.add("hidden"),c.classList.remove("md:flex")),o&&(o.textContent="Get Started"),i&&(i.textContent="Sign in to subscribe and connect your apps in minutes.")}function h(){L(),e.classList.remove("hidden"),requestAnimationFrame(()=>{requestAnimationFrame(()=>e.classList.add("is-open"))}),I(),document.addEventListener("keydown",g);const t=f();typeof window.vkTrack=="function"&&window.vkTrack("auth_modal_open",{mcp_title:t?.title||"",mcp_client:t?.client||""})}function l(){e.classList.remove("is-open"),e.addEventListener("transitionend",()=>{e.classList.add("hidden")},{once:!0}),v(),document.removeEventListener("keydown",g)}function g(t){t.key==="Escape"&&l()}e.querySelectorAll("[data-auth-modal-close]").forEach(t=>{t.addEventListener("click",l)}),document.querySelectorAll("[data-auth-modal-trigger]").forEach(t=>{t.addEventListener("click",a=>{a.preventDefault(),h()})}),window.authModal={open:h,close:l}})();</script> <script> function initThemeToggle() { var toggle = document.getElementById("theme-toggle"); var sunIcon = document.getElementById("theme-icon-sun"); var moonIcon = document.getElementById("theme-icon-moon"); if (!toggle || !sunIcon || !moonIcon) return; if (toggle.dataset.themeInit) return; toggle.dataset.themeInit = "true"; function updateIcons() { var isDark = document.documentElement.classList.contains("dark"); sunIcon.classList.toggle("hidden", !isDark); moonIcon.classList.toggle("hidden", isDark); } toggle.addEventListener("click", function () { var isDark = document.documentElement.classList.contains("dark"); var newTheme = isDark ? "light" : "dark"; document.documentElement.classList.remove("dark", "light"); document.documentElement.classList.add(newTheme); localStorage.setItem("theme", newTheme); updateIcons(); }); window .matchMedia("(prefers-color-scheme: dark)") .addEventListener("change", function (e) { if (localStorage.getItem("theme")) return; var newTheme = e.matches ? "dark" : "light"; document.documentElement.classList.remove("dark", "light"); document.documentElement.classList.add(newTheme); updateIcons(); }); updateIcons(); } document.addEventListener("DOMContentLoaded", initThemeToggle); document.addEventListener("astro:page-load", initThemeToggle); </script> </body> </html>