# Best MCP Servers for Claude Code (2026): 12 Tested & Ranked > The best MCP servers for Claude Code in 2026, tested and ranked — with copy-paste install commands and the component MCP the other lists miss. Source: https://designrevision.com/blog/best-mcp-servers-for-claude-code --- The best MCP servers for Claude Code turn a capable coding agent into one wired directly into your repos, your browser, your database, and your component library. The strongest picks in 2026 are GitHub, Playwright, Context7, Supabase, Filesystem, and Sentry — plus DesignRevision MCP for installing real shadcn/ui components — each added with a single `claude mcp add` command. This guide ranks 12 of the best MCP servers for Claude Code, with a copy-paste install command, an honest verdict, and who should skip it for each. *Last updated: July 2026. MCP servers move fast — remote endpoints, package names, and auth flows change; every command here was verified in July 2026, but confirm each against its source before you install.* New to how this works? Start with our breakdown of [Claude Code skills vs. plugins vs. agents vs. MCP](/blog/claude-code-skills-vs-plugins-vs-agents) to see where MCP servers fit. Otherwise, straight to the rankings. ## The 12 Best MCP Servers for Claude Code at a Glance | # | Server | Category | Verdict | Best for | |---|--------|----------|---------|----------| | 1 | GitHub | Integration | Install | Repos, issues, and PRs in-session | | 2 | Playwright | Browser & testing | Install | Driving a real browser for E2E tests | | 3 | Context7 | Documentation | Install | Up-to-date, version-specific library docs | | 4 | Supabase | Database | Install | Querying and managing a Postgres backend | | 5 | Filesystem | Files | Install | Sandboxed reads/writes outside the repo | | 6 | Sentry | Monitoring | Situational | Pulling real errors and traces into context | | 7 | DesignRevision MCP | UI components | Install | Installing real shadcn/ui components | | 8 | Figma Dev Mode | Design | Situational | Turning selected frames into code context | | 9 | Chrome DevTools | Browser & debug | Install | Performance traces and live-page debugging | | 10 | Firecrawl | Web scraping | Situational | Turning websites into clean markdown | | 11 | Sequential Thinking | Reasoning | Situational | Forcing structured, step-by-step planning | | 12 | Brave Search | Search | Situational | Privacy-first web search from the agent | ## Table of Contents 1. [How We Picked](#how-we-picked) 2. [The 12 Best MCP Servers for Claude Code](#the-12-best-mcp-servers-for-claude-code) 3. [shadcn/ui MCP Server for Claude Code](#shadcnui-mcp-server-for-claude-code) 4. [Installing These MCP Servers](#installing-these-mcp-servers) 5. [Best Free MCP Servers for Claude Code](#best-free-mcp-servers-for-claude-code) 6. [Conclusion](#conclusion) ## How We Picked This is an opinionated ranking based on hands-on use, not a lab benchmark. Every server here was added to a real Claude Code setup and judged on the thing that actually matters day to day: does it install cleanly, connect, and does the agent genuinely reach for its tools during a task, or does it just sit there? From that, we weighed four signals: **provenance** (official vendor servers and reference implementations earn trust over anonymous forks), **real utility inside Claude Code's tool-calling loop** (a server the agent never calls is clutter, however capable), **install and maintenance cost** (one-line remote setup beats a fragile local toolchain), and **breadth of use case** (the list should cover integration, browser, docs, data, monitoring, and UI — not twelve variations on one job). Every install command was verified against its official source in July 2026, and each entry carries a plain **verdict** — *Install*, *Situational*, or *Keep on* — plus a note on who should skip it, because a rankings page is only as trustworthy as its weakest entry. Two honesty notes: remote endpoints and auth flows change often, so treat the commands as a July 2026 snapshot and confirm each at its source before installing; and **DesignRevision MCP at #7 is our own MCP server** — we've held its entry to the same checkable facts (what it does, how to install it, what it costs) as every other server here, and flagged it plainly rather than burying the affiliation. ## The 12 Best MCP Servers for Claude Code ### 1. GitHub
Integrationgithub/github-mcp-server
claude mcp add --transport http github https://api.githubcopilot.com/mcp -H "Authorization: Bearer YOUR_PAT"
**Verdict: Install.** The single most broadly useful MCP server for Claude Code. It gives the agent first-class access to repositories, issues, pull requests, Actions, and code search, so it can read context and act where your work already lives instead of guessing from local files. The hosted endpoint above is the recommended path — no local Docker, always up to date — and needs only a GitHub personal access token (newer Claude Code builds also support browser OAuth). If you prefer to run it locally, GitHub ships a Docker image too. *Skip if* your team lives on GitLab or Bitbucket — install the equivalent server instead. ### 2. Playwright
Browser & testingmicrosoft/playwright-mcp
claude mcp add playwright -- npx @playwright/mcp@latest
**Verdict: Install.** Microsoft's official Playwright server lets Claude Code drive a real browser — navigate, click, fill forms, and assert — using the accessibility tree rather than brittle pixel matching. It's the fastest way to give the agent end-to-end testing and to have it verify a UI it just built by actually loading the page. Because it runs locally over `npx`, there's no account or key to manage. *Skip if* you never touch web interfaces; for pure backend or CLI work it adds startup weight you won't use. ### 3. Context7
Documentationupstash/context7
claude mcp add --transport http context7 https://mcp.context7.com/mcp
**Verdict: Install.** The fix for Claude confidently calling a library's old API. Context7 pulls version-specific, up-to-date documentation for thousands of packages into context on demand, so generated code matches the version you actually have installed. For anyone on fast-moving frameworks it removes a whole class of hallucinated method calls. It works with no key on the hosted endpoint; an optional API key only raises rate limits. *Skip if* you work almost entirely in the standard library or a frozen internal stack that never changes. ### 4. Supabase
Databasesupabase/supabase-mcp
claude mcp add --transport http supabase https://mcp.supabase.com/mcp
**Verdict: Install (if you use Supabase).** The official Supabase server lets Claude Code inspect your schema, run SQL, manage branches, and read project config — turning "what's in the users table?" into a real query instead of a guess. Setup is browser OAuth now, no personal token to paste. Strongly consider adding `?read_only=true` and `?project_ref=` to the URL to scope what the agent can touch. *Skip if* you're not on Supabase — reach for the Postgres or your own database's MCP server instead. ### 5. Filesystem
Filesmodelcontextprotocol/servers
claude mcp add filesystem -- npx -y @modelcontextprotocol/server-filesystem ~/code
**Verdict: Install.** The reference filesystem server gives the agent sandboxed read, write, edit, and search across directories you explicitly allow — useful when you want Claude Code operating on files outside the current repo (a shared assets folder, a sibling project, a notes directory) without opening your whole disk. You pass the allowed paths on the command line, and nothing outside them is reachable. *Skip if* everything you need is already inside your working repo, where Claude Code's built-in file tools already reach. ### 6. Sentry
Monitoringgetsentry/sentry-mcp
claude mcp add --transport http sentry https://mcp.sentry.dev/mcp
**Verdict: Situational.** Sentry's official server pulls real issues, stack traces, and performance data into the session, so Claude Code can debug from what actually broke in production rather than a pasted snippet. Point it at an exception and ask for a fix and it has the surrounding context immediately. Auth is OAuth in the browser. It's a high-value add if you already run Sentry, and dead weight if you don't. *Skip if* you have no Sentry project — there's nothing for it to read. ### 7. DesignRevision MCP
UI componentsdesignrevision.com registry
claude mcp add --transport http design-revision https://mcp.designrevision.com/mcp --header "Authorization: Bearer YOUR_TOKEN"
**Verdict: Install (for frontend work).** The category every other list here misses: a server for building UI. DesignRevision MCP turns "build me a UI" into a tool call — Claude Code discovers, inspects, and installs real, production-grade [shadcn/ui components](/components) straight from the designrevision.com registry, with the install command and dependencies already resolved, instead of hand-writing markup from memory. Browsing the catalog works with no token; installs use a token from your account. It's freemium, so you can wire it up and pull components on the free plan. *Skip if* you never build frontends — it's purpose-built for component-driven UI work. More on it below. ### 8. Figma Dev Mode
DesignFigma Dev Mode MCP
claude mcp add --transport http figma-dev-mode http://127.0.0.1:3845/mcp
Enable the server in the Figma desktop app first (Preferences → Dev Mode MCP server). **Verdict: Situational.** Figma's Dev Mode server exposes selected frames as structured design context, so Claude Code can translate a specific component or screen into code that respects the real spacing, tokens, and hierarchy. It runs locally inside the Figma desktop app — you toggle it on in Preferences first — and Figma now also offers a hosted remote server it recommends for broader features. It needs a paid Dev Mode seat. *Skip if* your team doesn't design in Figma, or you're implementing from an existing component library rather than a design file. ### 9. Chrome DevTools
Browser & debugChromeDevTools/chrome-devtools-mcp
claude mcp add chrome-devtools -- npx chrome-devtools-mcp@latest
**Verdict: Install (for web debugging).** Google's server connects Claude Code to a live Chrome instance over the DevTools Protocol: it can capture performance traces, inspect the network panel, read the DOM, and debug a running page. Where Playwright is about automating flows, this is about diagnosing them — "why is this page slow?" becomes a real trace the agent can read. It's new (shipped late 2025) and free. *Skip if* you don't do front-of-browser performance or debugging work, or Playwright already covers your automation needs. ### 10. Firecrawl
Web scrapingfirecrawl/firecrawl-mcp-server
claude mcp add firecrawl -e FIRECRAWL_API_KEY=YOUR_KEY -- npx -y firecrawl-mcp
**Verdict: Situational.** Firecrawl lets Claude Code scrape, crawl, map, and search websites, returning clean markdown instead of raw HTML — handy for pulling docs, competitor pages, or reference material into a task. It's open source but calls Firecrawl's paid API (there's a free tier), so you pass a key with `-e` to keep it out of your shell history. *Skip if* your research needs are occasional — a manual paste is cheaper than standing up a scraping pipeline. ### 11. Sequential Thinking
Reasoningmodelcontextprotocol/servers
claude mcp add sequential-thinking -- npx -y @modelcontextprotocol/server-sequential-thinking
**Verdict: Situational.** This reference server gives the model a structured "think step by step" tool it can call to break a hard problem into ordered, revisable steps before acting. On genuinely gnarly, multi-stage tasks it can improve planning discipline; on everyday work it mostly adds ceremony, since modern Claude models already plan well natively. Free and local. *Skip if* your tasks are routine — you'll rarely see the agent reach for it, and dedicated planning plugins cover the same ground more visibly. ### 12. Brave Search
Searchbrave/brave-search-mcp-server
claude mcp add brave-search -e BRAVE_API_KEY=YOUR_KEY -- npx -y @brave/brave-search-mcp-server
**Verdict: Situational.** Brave's official server gives Claude Code privacy-first web, news, image, video, and local search through the Brave Search API. It's the current, maintained package — note it moved out of the old reference-server repo, so the correct name is `@brave/brave-search-mcp-server`. You need an API key (the free tier covers roughly 2,000 queries a month). *Skip if* your Claude Code setup already has web access another way, or you don't need fresh search results inside tasks. ## shadcn/ui MCP Server for Claude Code Every server above is about backend, browser, or data — none of them help Claude Code build a *UI*. That's the gap [DesignRevision MCP](/mcp) fills, and it's why a shadcn/ui MCP server is worth its own section. When Claude Code writes frontend code unaided, it reconstructs components from memory — often an outdated variant, with imports and dependencies that don't quite match your project. DesignRevision MCP replaces that guesswork with a tool call against a real registry: the agent can **search** the catalog, **inspect** a component's source and props, and get a resolved **install command** with dependencies already worked out, then drop the real component into your project. It exposes **14 tools** across discovery, retrieval, and account utilities, and connects over the same Model Context Protocol every server on this list uses. It's **freemium**, with four tiers (Free, Solo, Team, and Business) and a gated premium registry for paid components. Schema introspection — listing the available tools — works with no token at all, so you can wire it up and look before committing; every actual component pull uses a token from your account. Add it in one line: ```bash claude mcp add --transport http design-revision https://mcp.designrevision.com/mcp \ --header "Authorization: Bearer YOUR_TOKEN" ``` Replace `YOUR_TOKEN` with the token from your DesignRevision account. Once connected, ask Claude Code to "find a pricing table component and install it" and it will search the [component registry](/components), pull the real source, and run the install — no copy-paste from a docs site. For the full walkthrough — scopes, the `.mcp.json` config file, verifying, and fixing connection errors — see our guide to [how to add DesignRevision MCP to Claude Code](/blog/add-mcp-server-to-claude-code). ## Installing These MCP Servers Each server above installs with a single `claude mcp add` command, in one of two shapes depending on whether it's remote or local. **Remote servers** (GitHub, Context7, Supabase, Sentry, DesignRevision MCP) connect over HTTP: ```bash claude mcp add --transport http ``` **Local servers** (Playwright, Filesystem, Firecrawl, Brave Search) run as a subprocess — everything after `--` is the command Claude Code launches: ```bash claude mcp add -- npx -y ``` For servers that need a secret, pass it as an environment variable with `-e` so it isn't stored in plain text in your shell history: ```bash claude mcp add firecrawl -e FIRECRAWL_API_KEY=YOUR_KEY -- npx -y firecrawl-mcp ``` **Choosing a scope.** Every `claude mcp add` accepts a `--scope` flag that decides where the server is available: - `--scope local` (default) — just the current project, only for you. - `--scope project` — written to a `.mcp.json` file at the repo root that you commit, so your whole team gets the server. - `--scope user` — available in every project on your machine; use it for general-purpose tools like GitHub or a docs server. **Managing what you've added.** Run `claude mcp list` to see every configured server and whether it's currently connected — the fastest way to spot a broken install. Inside a session, type `/mcp` to view and manage servers interactively, and use `claude mcp remove ` to delete one. Project-scoped servers live in the checked-in `.mcp.json`; local and user servers live in Claude Code's own config outside the repo. For the complete step-by-step — remote vs. local transports, choosing a scope, editing `.mcp.json`, and a troubleshooting checklist for when a server won't connect — see our full guide on [how to add an MCP server to Claude Code](/blog/add-mcp-server-to-claude-code). ## Best Free MCP Servers for Claude Code If you're starting from zero, the best free MCP servers for Claude Code are the ones with no paywall and no card required: **GitHub** (free with any account), **Playwright**, **Context7**, **Filesystem**, **Chrome DevTools**, and **Sequential Thinking** are all free and open source. **Supabase** and **Sentry** are free with an account on their respective platforms. **DesignRevision MCP** is freemium — the free plan covers browsing and installing components. The only ones that cost money are **Firecrawl** and **Brave Search**, which are open source but call a paid API (each has a free tier), and **Figma Dev Mode**, which needs a paid seat. In practice you can build a strong Claude Code setup — integration, browser, docs, files, and UI — without spending anything. ## Conclusion The best MCP servers for Claude Code in 2026 are the ones that close a real gap in the agent's reach. For **integration**, GitHub is close to mandatory. For **the browser**, Playwright automates flows and Chrome DevTools debugs them. For **accuracy**, Context7 keeps the agent current on your libraries. For **data**, Supabase and Filesystem give it real access. For **monitoring**, Sentry brings production errors into context. And for **UI**, DesignRevision MCP installs real shadcn/ui components instead of hand-written guesswork. Start with the two or three that match your biggest pain point, add your stack's integrations, and resist the urge to install all twelve — a focused set the agent actually uses beats a crowded one it doesn't. --- ## Related Resources - [DesignRevision MCP — the shadcn/ui MCP server](/mcp) - [MCP Clients Compared: Every AI Coding Agent](/blog/mcp-clients-compared) - [Best MCP Servers for Cursor (2026): Tested & Ranked](/blog/best-mcp-servers-for-cursor) - [How to Add an MCP Server to Claude Code (2026 Guide)](/blog/add-mcp-server-to-claude-code) - [Claude Code Skills vs. Plugins vs. Agents vs. MCP](/blog/claude-code-skills-vs-plugins-vs-agents) - [Claude Code Plugins: The Complete Guide](/blog/claude-code-plugins) - [Best Claude Code Plugins (2026): Tested & Ranked](/blog/best-claude-code-plugins) - [Best Claude Code Skills (2026): Tested & Ranked](/blog/best-claude-code-skills) - [Browse the shadcn/ui component registry](/components)