1import{c as r,j as e}from"./index-DrBPhjy5.js";import{L as i,y as c}from"./Layout-LwDNXt6D.js";import{C as a}from"./card-BCaF5CiV.js";import{B as o}from"./badge-CMh-GqOk.js";import{E as n}from"./external-link-CLJaV4l5.js";import{W as l}from"./workflow-ClFom81x.js";import{S as d}from"./shield-check-CeiJ5YF5.js";/** 2 * @license lucide-react v0.462.0 - ISC 3 * 4 * This source code is licensed under the ISC license. 5 * See the LICENSE file in the root directory of this source tree. 6 */const m=r("Boxes",[["path",{d:"M2.97 12.92A2 2 0 0 0 2 14.63v3.24a2 2 0 0 0 .97 1.71l3 1.8a2 2 0 0 0 2.06 0L12 19v-5.5l-5-3-4.03 2.42Z",key:"lc1i9w"}],["path",{d:"m7 16.5-4.74-2.85",key:"1o9zyk"}],["path",{d:"m7 16.5 5-3",key:"va8pkn"}],["path",{d:"M7 16.5v5.17",key:"jnp8gn"}],["path",{d:"M12 13.5V19l3.97 2.38a2 2 0 0 0 2.06 0l3-1.8a2 2 0 0 0 .97-1.71v-3.24a2 2 0 0 0-.97-1.71L17 10.5l-5 3Z",key:"8zsnat"}],["path",{d:"m17 16.5-5-3",key:"8arw3v"}],["path",{d:"m17 16.5 4.74-2.85",key:"8rfmw"}],["path",{d:"M17 16.5v5.17",key:"k6z78m"}],["path",{d:"M7.97 4.42A2 2 0 0 0 7 6.13v4.37l5 3 5-3V6.13a2 2 0 0 0-.97-1.71l-3-1.8a2 2 0 0 0-2.06 0l-3 1.8Z",key:"1xygjf"}],["path",{d:"M12 8 7.26 5.15",key:"1vbdud"}],["path",{d:"m12 8 4.74-2.85",key:"3rx089"}],["path",{d:"M12 13.5V8",key:"1io7kd"}]]);/** 7 * @license lucide-react v0.462.0 - ISC 8 * 9 * This source code is licensed under the ISC license. 10 * See the LICENSE file in the root directory of this source tree. 11 */const h=r("CreditCard",[["rect",{width:"20",height:"14",x:"2",y:"5",rx:"2",key:"ynyp8z"}],["line",{x1:"2",x2:"22",y1:"10",y2:"10",key:"1b3vmo"}]]);/** 12 * @license lucide-react v0.462.0 - ISC 13 * 14 * This source code is licensed under the ISC license. 15 * See the LICENSE file in the root directory of this source tree. 16 */const p=r("Github",[["path",{d:"M15 22v-4a4.8 4.8 0 0 0-1-3.5c3 0 6-2 6-5.5.08-1.25-.27-2.48-1-3.5.28-1.15.28-2.35 0-3.5 0 0-1 0-3 1.5-2.64-.5-5.36-.5-8 0C6 2 5 2 5 2c-.3 1.15-.3 2.35 0 3.5A5.403 5.403 0 0 0 4 9c0 3.5 3 5.5 6 5.5-.39.49-.68 1.05-.85 1.65-.17.6-.22 1.23-.15 1.85v4",key:"tonef"}],["path",{d:"M9 18c-4.51 2-5-2-7-2",key:"9comsn"}]]);/** 17 * @license lucide-react v0.462.0 - ISC 18 * 19 * This source code is licensed under the ISC license. 20 * See the LICENSE file in the root directory of this source tree. 21 */const u=r("Plug",[["path",{d:"M12 22v-5",key:"1ega77"}],["path",{d:"M9 8V2",key:"14iosj"}],["path",{d:"M15 8V2",key:"18g5xt"}],["path",{d:"M18 8v5a4 4 0 0 1-4 4h-4a4 4 0 0 1-4-4V8Z",key:"osxo6l"}]]),x=[{name:"Filesystem MCP Server",by:"Anthropic (reference server)",what:"Gives an agent scoped read/write access to local directories â the canonical first MCP server most people install.",url:"https://github.com/modelcontextprotocol/servers/tree/main/src/filesystem",tag:"Local files"},{name:"Git MCP Server",by:"Anthropic (reference server)",what:"Read repositories, search history, inspect diffs and commit â lets a coding agent reason about your actual version history.",url:"https://github.com/modelcontextprotocol/servers/tree/main/src/git",tag:"Version control"},{name:"GitHub MCP Server",by:"GitHub",what:"Official server for issues, pull requests, code search, Actions and repo management straight from your agent.",url:"https://github.com/github/github-mcp-server",tag:"DevOps"},{name:"Playwright MCP",by:"Microsoft",what:"Drives a real browser: navigate, click, fill forms, screenshot and read the DOM. The best way to give an agent eyes on your app.",url:"https://github.com/microsoft/playwright-mcp",tag:"Browser / QA"},{name:"Supabase MCP Server",by:"Supabase",what:"Query Postgres, inspect schemas, manage migrations and edge functions â pairs perfectly with a vibe-coded Supabase backend.",url:"https://github.com/supabase-community/supabase-mcp",tag:"Database"},{name:"PostgreSQL MCP Server",by:"Community / reference",what:"Read-only schema inspection and SQL querying against any Postgres instance, with safe query scoping.",url:"https://github.com/modelcontextprotocol/servers/tree/main/src/postgres",tag:"Database"},{name:"Fetch MCP Server",by:"Anthropic (reference server)",what:"Fetches a URL and converts the page to clean markdown so the model can actually read live web content.",url:"https://github.com/modelcontextprotocol/servers/tree/main/src/fetch",tag:"Web"},{name:"Memory MCP Server",by:"Anthropic (reference server)",what:"A persistent knowledge-graph memory so your assistant remembers facts, decisions and preferences across sessions.",url:"https://github.com/modelcontextprotocol/servers/tree/main/src/memory",tag:"Memory"},{name:"Sequential Thinking MCP",by:"Anthropic (reference server)",what:"Structured step-by-step reasoning as a tool â useful for planning larger refactors before the agent touches code.",url:"https://github.com/modelcontextprotocol/servers/tree/main/src/sequentialthinking",tag:"Reasoning"},{name:"Chrome DevTools MCP",by:"Google Chrome team",what:"Exposes DevTools: console logs, network requests, performance traces â the fastest way to let an agent debug a running site.",url:"https://github.com/ChromeDevTools/chrome-devtools-mcp",tag:"Debugging"}],g=[{name:"Linear MCP",by:"Linear",what:"Create, search and update issues, projects and cycles. Turn a bug conversation into a tracked ticket without leaving the chat.",url:"https://linear.app/docs/mcp",tag:"Project mgmt"},{name:"Notion MCP",by:"Notion",what:"Read and write pages and databases â great for keeping specs, PRDs and docs in sync with what the agent builds.",url:"https://developers.notion.com/docs/mcp",tag:"Docs / wiki"},{name:"Figma MCP (Dev Mode)",by:"Figma",what:"Pulls design frames, variables and layout data so an agent can generate UI that matches the actual design file.",url:"https://help.figma.com/hc/en-us/articles/32132100833559",tag:"Design"},{name:"Stripe MCP",by:"Stripe",what:"Query customers, subscriptions and payments, and scaffold integration code against real API objects.",url:"https://docs.stripe.com/mcp",tag:"Payments"},{name:"Sentry MCP",by:"Sentry",what:"Pull live errors, stack traces and release health so the agent debugs your real production failures.",url:"https://docs.sentry.io/product/sentry-mcp/",tag:"Monitoring"},{name:"Cloudflare MCP Servers",by:"Cloudflare",what:"Manage Workers, KV, R2, D1 and DNS, plus a hosted remote-MCP pattern you can copy for your own product.",url:"https://developers.cloudflare.com/agents/model-context-protocol/",tag:"Infrastru
21cture"},{name:"Atlassian MCP (Jira & Confluence)",by:"Atlassian",what:"Enterprise-grade issue tracking and documentation access with proper org permissions and audit trails.",url:"https://www.atlassian.com/platform/remote-mcp-server",tag:"Enterprise"},{name:"Slack MCP",by:"Community / Slack ecosystem",what:"Read channels and post messages so agents can report progress or gather context from team conversations.",url:"https://github.com/modelcontextprotocol/servers-archived/tree/main/src/slack",tag:"Comms"},{name:"Vercel MCP",by:"Vercel",what:"Inspect deployments, logs and project settings â lets an agent diagnose a failed build and suggest the fix.",url:"https://vercel.com/docs/mcp/vercel-mcp",tag:"Deployment"},{name:"Context7",by:"Upstash",what:"Injects up-to-date, version-accurate library documentation into the model's context, killing a huge class of hallucinated APIs.",url:"https://github.com/upstash/context7",tag:"Docs / accuracy"}],y=[{icon:e.jsx(c,{size:20}),title:"1. Hosts, clients and servers",body:"A host is the AI app you use (Claude Desktop, Cursor, an IDE, your own agent). Inside it, one client is created per connection. Each client talks to exactly one server â a small program that exposes a specific capability, like your filesystem, GitHub, or a Postgres database. One host, many servers."},{icon:e.jsx(m,{size:20}),title:"2. Three primitives: tools, resources, prompts",body:"Tools are actions the model can call (create an issue, run a query). Resources are read-only data the app can load into context (a file, a table schema, a doc). Prompts are reusable templates a user can invoke deliberately. Together they cover 'do something', 'know something', and 'start something'."},{icon:e.jsx(l,{size:20}),title:"3. A single transport and message format",body:"MCP uses JSON-RPC 2.0 over either stdio (local servers running on your machine) or streamable HTTP/SSE (remote servers you connect to over the network). Because the wire format is fixed, any compliant client works with any compliant server â no bespoke SDK per integration."},{icon:e.jsx(d,{size:20}),title:"4. Explicit consent and safe boundaries",body:"Servers declare their capabilities during a handshake, and the host decides what the model is allowed to reach. Users approve tool calls, scope directory access, and grant OAuth per connection. The model never sees credentials â the server holds them."}],P=()=>e.jsx(i,{title:"MCP Explained: Model Context Protocol & Top Connectors (2026)",description:"A complete guide to the Model Context Protocol (MCP) â the open standard connecting AI models to tools and data. Architecture, principles, and the top 10 open-source and commercial MCP connectors.",canonicalUrl:"https://quick-code-launch.lovable.app/mcp",children:e.jsxs("div",{className:"container mx-auto px-4 sm:px-6 lg:px-8 py-12 md:py-16 max-w-5xl",children:[e.jsxs("header",{className:"mb-12 text-center",children:[e.jsx(o,{className:"mb-4",children:"Open Standard"}),e.jsx("h1",{className:"text-3xl md:text-5xl font-bold mb-4",children:"MCP â The Model Context Protocol"}),e.jsxs("p",{className:"text-lg text-muted-foreground max-w-3xl mx-auto",children:["Introduced by ",e.jsx("a",{className:"text-primary hover:underline",href:"https://www.anthropic.com/news/model-context-protocol",target:"_blank",rel:"noopener noreferrer",children:"Anthropic in late 2024"})," and now governed under the Linux Foundation's Agentic AI Foundation, MCP is an open standard for connecting AI models and assistants to external tools, data sources and applications."]})]}),e.jsx(a,{className:"p-6 md:p-8 mb-12 bg-primary/5 border-primary/20",children:e.jsxs("div",{className:"flex items-start gap-4",children:[e.jsx(u,{className:"text-primary shrink-0 mt-1",size:28}),e.jsxs("div",{children:[e.jsx("h2",{className:"text-xl font-semibold mb-2",children:"The USB-C port for AI apps"}),e.jsx("p",{className:"text-muted-foreground",children:"Just as USB-C replaced dozens of proprietary charging and data cables with one universal connector, MCP replaces custom, fragmented API integrations with a single standard communication layer. Before MCP, every AI app had to hand-roll an integration for every tool â an MÃN problem. With MCP you build one server per tool and one client per app, and everything plugs into everything else."})]})]})}),e.jsxs("section",{className:"mb-14",children:[e.jsx("h2",{className:"text-2xl font-bold mb-6",children:"How it fits together"}),e.jsx(a,{className:"p-6 overflow-x-auto",children:e.jsx("pre",{className:"text-xs md:text-sm leading-relaxed font-mono text-foreground whitespace-pre",children:` ââââââââââââââââââââââââââââââââââââââââââââ 22 â HOST (Claude Desktop, Cursor, IDE, â 23 â your own agent app) â 24 â â 25 â ââââââââââ ââââââââââ ââââââââââ â 26 â â Client â â Client â â Client â â 27 â âââââ¬âââââ âââââ¬âââââ âââââ¬âââââ â 28 âââââââââ¼ââââââââââââ¼ââââââââââââ¼âââââââââââ 29 â JSON-RPC â JSON-RPC â JSON-RPC 30 stdio â â HTTP/SSE â HTTP/SSE 31 âââââââââ¼âââ ââââââ¼ââââââ ââââ¼âââââââââ 32 â Server â â Server â â Server â 33 â Filesystemâ â GitHub â â Postgres â 34 âââââââââ¬âââ ââââââ¬ââââââ ââââ¬âââââââââ 35 â â â 36 local files REST API database 37 38 Each server exposes: TOOLS (actions) · 39 RESOURCES (readable data) · PROMPTS (templates)`})})]}),e.jsxs("section",{className:"mb-14",children:[e.jsx("h2",{className:"text-2xl font-bold mb-2",children:"The four architecture principles"}),e.jsxs("p",{className:"text-muted-foreground mb-6",children:["Full spec: ",e.jsx("a",{className:"text-primary hover:underline",href:"https://modelcontextprotocol.io/docs/concepts/architecture",target:"_blank",rel:"noopener noreferrer",children:"modelcontextprotocol.io"})]}),e.jsx("div",{className:"grid md:grid-cols-2 gap-5",children:y.map(t=>e.jsxs(a,{className:"p-6",children:[e.jsxs("div",{className:"flex items-center gap-2 mb-3 text-primary",children:[t.icon,e.jsx("h3",{className:"font-semibold text-foreground",children:t.title})]}),e.jsx("p",{className:"text-sm text-muted-foreground leading-relaxed",children:t.body})]},t.title))})]}),e.jsxs("section",{className:"mb-14",children:[e.jsx("h2",{className:"text-2xl font-bold mb-6",children:"Why MCP matters for vibe coders"}),e.jsx("div",{className:"grid md:grid-cols-2 gap-5",children:[["Kills the integration tax","Write a server once and every MCP-aware app â Claude, Cursor, VS Code agents, your own bot â can use it. No more rebuilding the same GitHub or database wrapper for each tool."],["Grounds the model in reality","Instead of guessing your schema or an API signature, the agent reads the real table, the real docs, the real error. Hallucinated code drops sharply."],["Turns chat into action","Agents stop describing fixes and start applying them: open the PR, run the query, restart the deploy, file the ticket."],["Portable across models","MCP is model-agnostic. Swap GPT-6.
391 for Claude Opus 5.5 or a local Qwen model and your connectors keep working."],["Safer than raw API keys","Credentials live in the server, scoped per connection, with user approval on tool calls â not pasted into a prompt."],["A real ecosystem","Thousands of community servers already exist, and vendors ship official ones. Discovery registries make them installable in a click."]].map(([t,s])=>e.jsxs(a,{className:"p-6",children:[e.jsx("h3",{className:"font-semibold mb-2",children:t}),e.jsx("p",{className:"text-sm text-muted-foreground leading-relaxed",children:s})]},t))})]}),e.jsxs("section",{className:"mb-14",children:[e.jsxs("div",{className:"flex items-center gap-2 mb-2",children:[e.jsx(p,{size:22,className:"text-primary"}),e.jsx("h2",{className:"text-2xl font-bold",children:"Top 10 open-source MCP connectors"})]}),e.jsx("p",{className:"text-muted-foreground mb-6",children:"Free, self-hostable servers you can add to your agent today."}),e.jsx("div",{className:"space-y-4",children:x.map((t,s)=>e.jsxs(a,{className:"p-5",children:[e.jsxs("div",{className:"flex flex-wrap items-center gap-3 mb-2",children:[e.jsx("span",{className:"flex h-7 w-7 shrink-0 items-center justify-center rounded-full bg-primary/10 text-primary text-sm font-bold",children:s+1}),e.jsx("h3",{className:"font-semibold text-lg",children:t.name}),e.jsx(o,{variant:"secondary",children:t.tag}),e.jsxs("span",{className:"text-xs text-muted-foreground",children:["by ",t.by]})]}),e.jsx("p",{className:"text-sm text-muted-foreground mb-3",children:t.what}),e.jsxs("a",{href:t.url,target:"_blank",rel:"noopener noreferrer",className:"text-sm text-primary hover:underline inline-flex items-center gap-1",children:["View server ",e.jsx(n,{size:14})]})]},t.name))})]}),e.jsxs("section",{className:"mb-14",children:[e.jsxs("div",{className:"flex items-center gap-2 mb-2",children:[e.jsx(h,{size:22,className:"text-primary"}),e.jsx("h2",{className:"text-2xl font-bold",children:"Top 10 paid & business-critical MCP connectors"})]}),e.jsx("p",{className:"text-muted-foreground mb-6",children:"Vendor-maintained servers for the products real teams run on. Most are free to connect but require a paid account on the underlying service."}),e.jsx("div",{className:"space-y-4",children:g.map((t,s)=>e.jsxs(a,{className:"p-5",children:[e.jsxs("div",{className:"flex flex-wrap items-center gap-3 mb-2",children:[e.jsx("span",{className:"flex h-7 w-7 shrink-0 items-center justify-center rounded-full bg-accent/10 text-accent text-sm font-bold",children:s+1}),e.jsx("h3",{className:"font-semibold text-lg",children:t.name}),e.jsx(o,{variant:"secondary",children:t.tag}),e.jsxs("span",{className:"text-xs text-muted-foreground",children:["by ",t.by]})]}),e.jsx("p",{className:"text-sm text-muted-foreground mb-3",children:t.what}),e.jsxs("a",{href:t.url,target:"_blank",rel:"noopener noreferrer",className:"text-sm text-primary hover:underline inline-flex items-center gap-1",children:["Documentation ",e.jsx(n,{size:14})]})]},t.name))})]}),e.jsxs("section",{className:"mb-14",children:[e.jsx("h2",{className:"text-2xl font-bold mb-4",children:"Adding your first MCP server"}),e.jsxs(a,{className:"p-6",children:[e.jsx("p",{className:"text-sm text-muted-foreground mb-4",children:"Most hosts read a small JSON config. This adds the filesystem and GitHub servers to a local client:"}),e.jsx("pre",{className:"bg-muted rounded-lg p-4 text-xs md:text-sm overflow-x-auto",children:e.jsx("code",{children:`{ 40 "mcpServers": { 41 "filesystem": { 42 "command": "npx", 43 "args": ["-y", "@modelcontextprotocol/server-filesystem", "/Users/me/projects"] 44 }, 45 "github": { 46 "command": "npx", 47 "args": ["-y", "@modelcontextprotocol/server-github"], 48 "env": { "GITHUB_PERSONAL_ACCESS_TOKEN": "ghp_..." } 49 } 50 } 51}`})}),e.jsx("p",{className:"text-sm text-muted-foreground mt-4",children:"Restart the host, and the tools appear in your agent. Scope directories tightly and use least-privilege tokens â an MCP server is real access, not a sandbox."})]})]}),e.jsxs("section",{children:[e.jsx("h2",{className:"text-2xl font-bold mb-4",children:"Go deeper"}),e.jsx("div",{className:"grid sm:grid-cols-2 gap-4",children:[["Official MCP documentation","https://modelcontextprotocol.io/"],["MCP specification","https://modelcontextprotocol.io/specification/latest"],["Reference servers on GitHub","https://github.com/modelcontextprotocol/servers"],["Anthropic's MCP announcement","https://www.anthropic.com/news/model-context-protocol"],["Agentic AI Foundation (Linux Foundation)","https://agenticaifoundation.org/"],["Build an MCP server (quickstart)","https://modelcontextprotocol.io/quickstart/server"]].map(([t,s])=>e.jsxs("a",{href:s,target:"_blank",rel:"noopener noreferrer",className:"flex items-center justify-between gap-2 rounded-lg border border-border p-4 text-sm hover:border-primary hover:text-primary transition-colors",children:[t,e.jsx(n,{size:16,className:"shrink-0"})]},s))}),e.jsxs("p",{className:"text-sm text-muted-foreground mt-6",children:["Related on this site:"," ",e.jsx("a",{className:"text-primary hover:underline",href:"/ai-agents",children:"AI Agents"}),","," ",e.jsx("a",{className:"text-primary hover:underline",href:"/ai-ides",children:"Top 10 AI IDEs"}),","," ",e.jsx("a",{className:"text-primary hover:underline",href:"/claude-cli",children:"Claude CLI"}),","," ",e.jsx("a",{className:"text-primary hover:underline",href:"/backend-databases",children:"Backend & Databases"}),"."]})]})]})});export{P as default};
Line numbers count LF bytes from the start of the resource, as the search results do. Vendor segments are library code the classifier recognised; they are stored but not indexed. Bytes are shown as Latin1 characters, one per byte.