2 2
3> Learn how to connect Claude Code to your tools with the Model Context Protocol.3> Learn how to connect Claude Code to your tools with the Model Context Protocol.
4 4
5export const MCPServersTable = ({platform = "all"}) => {
6 const generateClaudeCodeCommand = server => {
7 if (server.customCommands && server.customCommands.claudeCode) {
8 return server.customCommands.claudeCode;
9 }
10 if (server.urls.http) {
11 return `claude mcp add --transport http ${server.name.toLowerCase().replace(/[^a-z0-9]/g, '-')} ${server.urls.http}`;
12 }
13 if (server.urls.sse) {
14 return `claude mcp add --transport sse ${server.name.toLowerCase().replace(/[^a-z0-9]/g, '-')} ${server.urls.sse}`;
15 }
16 if (server.urls.stdio) {
17 const envFlags = server.authentication && server.authentication.envVars ? server.authentication.envVars.map(v => `--env ${v}=YOUR_${v.split('_').pop()}`).join(' ') : '';
18 const baseCommand = `claude mcp add --transport stdio ${server.name.toLowerCase().replace(/[^a-z0-9]/g, '-')}`;
19 return envFlags ? `${baseCommand} ${envFlags} -- ${server.urls.stdio}` : `${baseCommand} -- ${server.urls.stdio}`;
20 }
21 return null;
22 };
23 const servers = [{
24 name: "Airtable",
25 category: "Databases & Data Management",
26 description: "Read/write records, manage bases and tables",
27 documentation: "https://github.com/domdomegg/airtable-mcp-server",
28 urls: {
29 stdio: "npx -y airtable-mcp-server"
30 },
31 authentication: {
32 type: "api_key",
33 envVars: ["AIRTABLE_API_KEY"]
34 },
35 availability: {
36 claudeCode: true,
37 mcpConnector: false,
38 claudeDesktop: true
39 }
40 }, {
41 name: "Figma",
42 category: "Design & Media",
43 description: "Generate better code by bringing in full Figma context",
44 documentation: "https://developers.figma.com",
45 urls: {
46 http: "https://mcp.figma.com/mcp"
47 },
48 customCommands: {
49 claudeCode: "claude mcp add --transport http figma-remote-mcp https://mcp.figma.com/mcp"
50 },
51 availability: {
52 claudeCode: true,
53 mcpConnector: false,
54 claudeDesktop: false
55 },
56 notes: "Visit developers.figma.com for local server setup."
57 }, {
58 name: "Asana",
59 category: "Project Management & Documentation",
60 description: "Interact with your Asana workspace to keep projects on track",
61 documentation: "https://developers.asana.com/docs/using-asanas-model-control-protocol-mcp-server",
62 urls: {
63 sse: "https://mcp.asana.com/sse"
64 },
65 authentication: {
66 type: "oauth"
67 },
68 availability: {
69 claudeCode: true,
70 mcpConnector: true,
71 claudeDesktop: false
72 }
73 }, {
74 name: "Atlassian",
75 category: "Project Management & Documentation",
76 description: "Manage your Jira tickets and Confluence docs",
77 documentation: "https://www.atlassian.com/platform/remote-mcp-server",
78 urls: {
79 sse: "https://mcp.atlassian.com/v1/sse"
80 },
81 authentication: {
82 type: "oauth"
83 },
84 availability: {
85 claudeCode: true,
86 mcpConnector: true,
87 claudeDesktop: false
88 }
89 }, {
90 name: "ClickUp",
91 category: "Project Management & Documentation",
92 description: "Task management, project tracking",
93 documentation: "https://github.com/hauptsacheNet/clickup-mcp",
94 urls: {
95 stdio: "npx -y @hauptsache.net/clickup-mcp"
96 },
97 authentication: {
98 type: "api_key",
99 envVars: ["CLICKUP_API_KEY", "CLICKUP_TEAM_ID"]
100 },
101 availability: {
102 claudeCode: true,
103 mcpConnector: false,
104 claudeDesktop: true
105 }
106 }, {
107 name: "Cloudflare",
108 category: "Infrastructure & DevOps",
109 description: "Build applications, analyze traffic, monitor performance, and manage security settings through Cloudflare",
110 documentation: "https://developers.cloudflare.com/agents/model-context-protocol/mcp-servers-for-cloudflare/",
111 urls: {},
112 availability: {
113 claudeCode: true,
114 mcpConnector: true,
115 claudeDesktop: false
116 },
117 notes: "Multiple services available. See documentation for specific server URLs. Claude Code can use the Cloudflare CLI if installed."
118 }, {
119 name: "Cloudinary",
120 category: "Design & Media",
121 description: "Upload, manage, transform, and analyze your media assets",
122 documentation: "https://cloudinary.com/documentation/cloudinary_llm_mcp#mcp_servers",
123 urls: {},
124 authentication: {
125 type: "oauth"
126 },
127 availability: {
128 claudeCode: true,
129 mcpConnector: true,
130 claudeDesktop: false
131 },
132 notes: "Multiple services available. See documentation for specific server URLs."
133 }, {
134 name: "Intercom",
135 category: "Project Management & Documentation",
136 description: "Access real-time customer conversations, tickets, and user data",
137 documentation: "https://developers.intercom.com/docs/guides/mcp",
138 urls: {
139 http: "https://mcp.intercom.com/mcp"
140 },
141 authentication: {
142 type: "oauth"
143 },
144 availability: {
145 claudeCode: true,
146 mcpConnector: true,
147 claudeDesktop: false
148 }
149 }, {
150 name: "invideo",
151 category: "Design & Media",
152 description: "Build video creation capabilities into your applications",
153 documentation: "https://invideo.io/ai/mcp",
154 urls: {
155 sse: "https://mcp.invideo.io/sse"
156 },
157 authentication: {
158 type: "oauth"
159 },
160 availability: {
161 claudeCode: true,
162 mcpConnector: true,
163 claudeDesktop: false
164 }
165 }, {
166 name: "Linear",
167 category: "Project Management & Documentation",
168 description: "Integrate with Linear's issue tracking and project management",
169 documentation: "https://linear.app/docs/mcp",
170 urls: {
171 http: "https://mcp.linear.app/mcp"
172 },
173 authentication: {
174 type: "oauth"
175 },
176 availability: {
177 claudeCode: true,
178 mcpConnector: true,
179 claudeDesktop: false
180 }
181 }, {
182 name: "Notion",
183 category: "Project Management & Documentation",
184 description: "Read docs, update pages, manage tasks",
185 documentation: "https://developers.notion.com/docs/mcp",
186 urls: {
187 http: "https://mcp.notion.com/mcp"
188 },
189 authentication: {
190 type: "oauth"
191 },
192 availability: {
193 claudeCode: true,
194 mcpConnector: false,
195 claudeDesktop: false
196 }
197 }, {
198 name: "PayPal",
199 category: "Payments & Commerce",
200 description: "Integrate PayPal commerce capabilities, payment processing, transaction management",
201 documentation: "https://www.paypal.ai/",
202 urls: {
203 http: "https://mcp.paypal.com/mcp"
204 },
205 authentication: {
206 type: "oauth"
207 },
208 availability: {
209 claudeCode: true,
210 mcpConnector: true,
211 claudeDesktop: false
212 }
213 }, {
214 name: "Plaid",
215 category: "Payments & Commerce",
216 description: "Analyze, troubleshoot, and optimize Plaid integrations. Banking data, financial account linking",
217 documentation: "https://plaid.com/blog/plaid-mcp-ai-assistant-claude/",
218 urls: {
219 sse: "https://api.dashboard.plaid.com/mcp/sse"
220 },
221 authentication: {
222 type: "oauth"
223 },
224 availability: {
225 claudeCode: true,
226 mcpConnector: true,
227 claudeDesktop: false
228 }
229 }, {
230 name: "Sentry",
231 category: "Development & Testing Tools",
232 description: "Monitor errors, debug production issues",
233 documentation: "https://docs.sentry.io/product/sentry-mcp/",
234 urls: {
235 http: "https://mcp.sentry.dev/mcp"
236 },
237 authentication: {
238 type: "oauth"
239 },
240 availability: {
241 claudeCode: true,
242 mcpConnector: false,
243 claudeDesktop: false
244 }
245 }, {
246 name: "Square",
247 category: "Payments & Commerce",
248 description: "Use an agent to build on Square APIs. Payments, inventory, orders, and more",
249 documentation: "https://developer.squareup.com/docs/mcp",
250 urls: {
251 sse: "https://mcp.squareup.com/sse"
252 },
253 authentication: {
254 type: "oauth"
255 },
256 availability: {
257 claudeCode: true,
258 mcpConnector: true,
259 claudeDesktop: false
260 }
261 }, {
262 name: "Socket",
263 category: "Development & Testing Tools",
264 description: "Security analysis for dependencies",
265 documentation: "https://github.com/SocketDev/socket-mcp",
266 urls: {
267 http: "https://mcp.socket.dev/"
268 },
269 authentication: {
270 type: "oauth"
271 },
272 availability: {
273 claudeCode: true,
274 mcpConnector: false,
275 claudeDesktop: false
276 }
277 }, {
278 name: "Stripe",
279 category: "Payments & Commerce",
280 description: "Payment processing, subscription management, and financial transactions",
281 documentation: "https://docs.stripe.com/mcp",
282 urls: {
283 http: "https://mcp.stripe.com"
284 },
285 authentication: {
286 type: "oauth"
287 },
288 availability: {
289 claudeCode: true,
290 mcpConnector: true,
291 claudeDesktop: false
292 }
293 }, {
294 name: "Workato",
295 category: "Automation & Integration",
296 description: "Access any application, workflows or data via Workato, made accessible for AI",
297 documentation: "https://docs.workato.com/mcp.html",
298 urls: {},
299 availability: {
300 claudeCode: true,
301 mcpConnector: true,
302 claudeDesktop: false
303 },
304 notes: "MCP servers are programmatically generated"
305 }, {
306 name: "Zapier",
307 category: "Automation & Integration",
308 description: "Connect to nearly 8,000 apps through Zapier's automation platform",
309 documentation: "https://help.zapier.com/hc/en-us/articles/36265392843917",
310 urls: {},
311 availability: {
312 claudeCode: true,
313 mcpConnector: true,
314 claudeDesktop: false
315 },
316 notes: "Generate a user-specific URL at mcp.zapier.com"
317 }, {
318 name: "Box",
319 category: "Project Management & Documentation",
320 description: "Ask questions about your enterprise content, get insights from unstructured data, automate content workflows",
321 documentation: "https://box.dev/guides/box-mcp/remote/",
322 urls: {
323 http: "https://mcp.box.com/"
324 },
325 authentication: {
326 type: "oauth"
327 },
328 availability: {
329 claudeCode: true,
330 mcpConnector: true,
331 claudeDesktop: false
332 }
333 }, {
334 name: "Canva",
335 category: "Design & Media",
336 description: "Browse, summarize, autofill, and even generate new Canva designs directly from Claude",
337 documentation: "https://www.canva.dev/docs/connect/canva-mcp-server-setup/",
338 urls: {
339 http: "https://mcp.canva.com/mcp"
340 },
341 authentication: {
342 type: "oauth"
343 },
344 availability: {
345 claudeCode: true,
346 mcpConnector: true,
347 claudeDesktop: false
348 }
349 }, {
350 name: "Daloopa",
351 category: "Databases & Data Management",
352 description: "Supplies high quality fundamental financial data sourced from SEC Filings, investor presentations",
353 documentation: "https://docs.daloopa.com/docs/daloopa-mcp",
354 urls: {
355 http: "https://mcp.daloopa.com/server/mcp"
356 },
357 authentication: {
358 type: "oauth"
359 },
360 availability: {
361 claudeCode: true,
362 mcpConnector: true,
363 claudeDesktop: false
364 }
365 }, {
366 name: "Fireflies",
367 category: "Project Management & Documentation",
368 description: "Extract valuable insights from meeting transcripts and summaries",
369 documentation: "https://guide.fireflies.ai/articles/8272956938-learn-about-the-fireflies-mcp-server-model-context-protocol",
370 urls: {
371 http: "https://api.fireflies.ai/mcp"
372 },
373 authentication: {
374 type: "oauth"
375 },
376 availability: {
377 claudeCode: true,
378 mcpConnector: true,
379 claudeDesktop: false
380 }
381 }, {
382 name: "HubSpot",
383 category: "Databases & Data Management",
384 description: "Access and manage HubSpot CRM data by fetching contacts, companies, and deals, and creating and updating records",
385 documentation: "https://developers.hubspot.com/mcp",
386 urls: {
387 http: "https://mcp.hubspot.com/anthropic"
388 },
389 authentication: {
390 type: "oauth"
391 },
392 availability: {
393 claudeCode: true,
394 mcpConnector: true,
395 claudeDesktop: false
396 }
397 }, {
398 name: "Hugging Face",
399 category: "Development & Testing Tools",
400 description: "Provides access to Hugging Face Hub information and Gradio AI Applications",
401 documentation: "https://huggingface.co/settings/mcp",
402 urls: {
403 http: "https://huggingface.co/mcp"
404 },
405 authentication: {
406 type: "oauth"
407 },
408 availability: {
409 claudeCode: true,
410 mcpConnector: true,
411 claudeDesktop: false
412 }
413 }, {
414 name: "Jam",
415 category: "Development & Testing Tools",
416 description: "Debug faster with AI agents that can access Jam recordings like video, console logs, network requests, and errors",
417 documentation: "https://jam.dev/docs/debug-a-jam/mcp",
418 urls: {
419 http: "https://mcp.jam.dev/mcp"
420 },
421 authentication: {
422 type: "oauth"
423 },
424 availability: {
425 claudeCode: true,
426 mcpConnector: true,
427 claudeDesktop: false
428 }
429 }, {
430 name: "Monday",
431 category: "Project Management & Documentation",
432 description: "Manage monday.com boards by creating items, updating columns, assigning owners, setting timelines, adding CRM activities, and writing summaries",
433 documentation: "https://developer.monday.com/apps/docs/mondaycom-mcp-integration",
434 urls: {
435 http: "https://mcp.monday.com/mcp"
436 },
437 authentication: {
438 type: "oauth"
439 },
440 availability: {
441 claudeCode: true,
442 mcpConnector: true,
443 claudeDesktop: false
444 }
445 }, {
446 name: "Netlify",
447 category: "Infrastructure & DevOps",
448 description: "Create, deploy, and manage websites on Netlify. Control all aspects of your site from creating secrets to enforcing access controls to aggregating form submissions",
449 documentation: "https://docs.netlify.com/build/build-with-ai/netlify-mcp-server/",
450 urls: {
451 http: "https://netlify-mcp.netlify.app/mcp"
452 },
453 authentication: {
454 type: "oauth"
455 },
456 availability: {
457 claudeCode: true,
458 mcpConnector: true,
459 claudeDesktop: false
460 }
461 }, {
462 name: "Stytch",
463 category: "Infrastructure & DevOps",
464 description: "Configure and manage Stytch authentication services, redirect URLs, email templates, and workspace settings",
465 documentation: "https://stytch.com/docs/workspace-management/stytch-mcp",
466 urls: {
467 http: "http://mcp.stytch.dev/mcp"
468 },
469 authentication: {
470 type: "oauth"
471 },
472 availability: {
473 claudeCode: true,
474 mcpConnector: true,
475 claudeDesktop: false
476 }
477 }, {
478 name: "Vercel",
479 category: "Infrastructure & DevOps",
480 description: "Vercel's official MCP server, allowing you to search and navigate documentation, manage projects and deployments, and analyze deployment logs—all in one place",
481 documentation: "https://vercel.com/docs/mcp/vercel-mcp",
482 urls: {
483 http: "https://mcp.vercel.com/"
484 },
485 authentication: {
486 type: "oauth"
487 },
488 availability: {
489 claudeCode: true,
490 mcpConnector: true,
491 claudeDesktop: false
492 }
493 }];
494 const filteredServers = servers.filter(server => {
495 if (platform === "claudeCode") {
496 return server.availability.claudeCode;
497 } else if (platform === "mcpConnector") {
498 return server.availability.mcpConnector;
499 } else if (platform === "claudeDesktop") {
500 return server.availability.claudeDesktop;
501 } else if (platform === "all") {
502 return true;
503 } else {
504 throw new Error(`Unknown platform: ${platform}`);
505 }
506 });
507 const serversByCategory = filteredServers.reduce((acc, server) => {
508 if (!acc[server.category]) {
509 acc[server.category] = [];
510 }
511 acc[server.category].push(server);
512 return acc;
513 }, {});
514 const categoryOrder = ["Development & Testing Tools", "Project Management & Documentation", "Databases & Data Management", "Payments & Commerce", "Design & Media", "Infrastructure & DevOps", "Automation & Integration"];
515 return <>
516 <style jsx>{`
517 .cards-container {
518 display: grid;
519 gap: 1rem;
520 margin-bottom: 2rem;
521 }
522 .server-card {
523 border: 1px solid var(--border-color, #e5e7eb);
524 border-radius: 6px;
525 padding: 1rem;
526 }
527 .command-row {
528 display: flex;
529 align-items: center;
530 gap: 0.25rem;
531 }
532 .command-row code {
533 font-size: 0.75rem;
534 overflow-x: auto;
535 }
536 `}</style>
537
538 {categoryOrder.map(category => {
539 if (!serversByCategory[category]) return null;
540 return <div key={category}>
541 <h3>{category}</h3>
542 <div className="cards-container">
543 {serversByCategory[category].map(server => {
544 const claudeCodeCommand = generateClaudeCodeCommand(server);
545 const mcpUrl = server.urls.http || server.urls.sse;
546 const commandToShow = platform === "claudeCode" ? claudeCodeCommand : mcpUrl;
547 return <div key={server.name} className="server-card">
548 <div>
549 {server.documentation ? <a href={server.documentation}>
550 <strong>{server.name}</strong>
551 </a> : <strong>{server.name}</strong>}
552 </div>
553
554 <p style={{
555 margin: '0.5rem 0',
556 fontSize: '0.9rem'
557 }}>
558 {server.description}
559 {server.notes && <span style={{
560 display: 'block',
561 marginTop: '0.25rem',
562 fontSize: '0.8rem',
563 fontStyle: 'italic',
564 opacity: 0.7
565 }}>
566 {server.notes}
567 </span>}
568 </p>
569
570 {commandToShow && <>
571 <p style={{
572 display: 'block',
573 fontSize: '0.75rem',
574 fontWeight: 500,
575 minWidth: 'fit-content',
576 marginTop: '0.5rem',
577 marginBottom: 0
578 }}>
579 {platform === "claudeCode" ? "Command" : "URL"}
580 </p>
581 <div className="command-row">
582 <code>
583 {commandToShow}
584 </code>
585 </div>
586 </>}
587 </div>;
588 })}
589 </div>
590 </div>;
591 })}
592 </>;
593};
594
595Claude Code can connect to hundreds of external tools and data sources through the [Model Context Protocol (MCP)](https://modelcontextprotocol.io/introduction), an open-source standard for AI-tool integrations. MCP servers give Claude Code access to your tools, databases, and APIs.5Claude Code can connect to hundreds of external tools and data sources through the [Model Context Protocol (MCP)](https://modelcontextprotocol.io/introduction), an open-source standard for AI-tool integrations. MCP servers give Claude Code access to your tools, databases, and APIs.
596 6
597## What you can do with MCP7## What you can do with MCP
