One terminal. One command per plugin. Suddenly Claude can talk to your designs, your databases, your repos, your tests, and your payment stack without you writing a single line of integration code.

These are called MCP servers (Model Context Protocol), and they're the fastest way to turn Claude Code from a smart assistant into a full-stack operator.

This guide gives you the 5 essential plugins every builder needs plus 3 bonus business plugins that unlock payments, team communication, and project management all installed in seconds.

🧠 What Is MCP?

MCP (Model Context Protocol) is an open standard that lets Claude Code connect directly to external tools, APIs, and services.

Think of each MCP server as a plugin you install it once, and Claude gains new abilities:

  • Read and edit your Figma designs
  • Run browser tests automatically
  • Manage your Notion workspace
  • Create pull requests on GitHub
  • Query and build databases on Supabase

One command installs each plugin. No config files to manually edit. No API wrappers to build.

⚡ Before You Start

Make sure you have:

  • Claude Code installed and running (setup guide here)
  • Node.js installed (v18+ recommended) needed for npx commands
  • A terminal open inside Claude Code

To verify MCP servers are connected after installing, type /mcp inside Claude Code. You'll see all active servers listed.

🎨 The 5 Essential Plugins

1. Figma MCP Design-to-Code in Seconds

What it does: Connects Claude directly to your Figma files. Claude can read your designs, extract styles, generate code from frames, and send live UI updates back to Figma.

Why it matters: You never have to manually translate a design into code again. Show Claude a Figma frame and say "build this" it reads the layout, colors, spacing, and components, then writes the code.

How to Install

Option A: One-click (Recommended)

  1. Open the Figma desktop app (make sure it's updated to the latest version)
  2. Open any Figma design file
  3. Click the Figma menu → Plugins → Manage plugins
  4. Search for "Claude Code" and install the Figma plugin
  5. The plugin automatically configures both the remote and desktop MCP server

Option B: CLI command

claude mcp add figma -- npx -y figma-developer-mcp --stdio

Restart Claude Code after installing.

What You Can Do With It

  • "Build this landing page from my Figma design"
  • "Extract the color palette and typography from this file"
  • "Generate React components from the selected frames"
  • "Update the button styles in Figma based on my code changes"

Pro tip: Use Figma MCP + Playwright MCP together design in Figma, build in Claude, test in the browser all from one terminal.

2. Playwright MCP Automated Browser Testing

What it does: Gives Claude the ability to control a real browser. It can navigate pages, click buttons, fill forms, take screenshots, and run end-to-end tests all through natural language.

Why it matters: Testing is the part everyone skips. With Playwright MCP, you just say "test the login flow" and Claude opens a browser, runs through the steps, and reports what passed or failed. No test scripts to write manually.

How to Install

claude mcp add playwright -- npx @playwright/mcp@latest

Restart Claude Code after installing.

What You Can Do With It

  • "Open my app and test the signup flow"
  • "Take a screenshot of the homepage on mobile"
  • "Fill out the contact form and submit it"
  • "Navigate to the dashboard and verify all charts load"
  • "Run through the checkout process and flag any errors"

Authentication tip: Playwright opens a visible browser window. If your app requires login, Claude will show you the login page you log in manually with your own credentials, then tell Claude to continue. Cookies persist for the session.

3. Notion MCP Your Workspace on Autopilot

What it does: Connects Claude to your entire Notion workspace. It can search pages, create documents, update databases, manage tasks, and pull information all through the official Notion API.

Why it matters: Instead of context-switching between your code editor and Notion, Claude can create PRDs, update project trackers, generate docs, and manage your knowledge base while you keep building.

How to Install

Step 1: Create a Notion Integration

  1. Go to notion.so/my-integrations
  2. Click "New integration"
  3. Name it something like Claude MCP
  4. Enable all capabilities (Read, Update, Insert)
  5. Copy your Internal Integration Token (starts with ntn_)

Step 2: Share your pages

  • Open any Notion page or database you want Claude to access
  • Click Share → Invite and add your Claude MCP integration

Step 3: Install the MCP server

claude mcp add notion -- npx -y @notionhq/notion-mcp-server

When prompted for environment variables, add your token:

claude mcp add notion -e OPENAPI_MCP_HEADERS='{"Authorization": "Bearer ntn_YOUR_TOKEN_HERE", "Notion-Version": "2022-06-28"}' -- npx -y @notionhq/notion-mcp-server

Restart Claude Code after installing.

What You Can Do With It

  • "Find my project tracker database and show overdue tasks"
  • "Create a new PRD page from this feature spec"
  • "Update the status of task #42 to Done"
  • "Search my workspace for anything related to onboarding"

4. GitHub MCP Repos, PRs, and Issues From Your Terminal

What it does: Gives Claude full access to your GitHub repositories. It can create branches, open pull requests, review code, manage issues, search repos, and handle your entire Git workflow.

Why it matters: You can go from "build this feature" to "open a PR with the changes" without ever leaving Claude Code. Claude handles the code and the Git workflow.

How to Install

Option A: Remote server (Recommended no token needed)

claude mcp add github --url https://api.githubcopilot.com/mcp/

This uses GitHub's hosted MCP server with OAuth it will prompt you to authorize in your browser.

Option B: Local server with Personal Access Token

  1. Go to github.com/settings/tokens and create a Personal Access Token (classic) with repo scope
  2. Run:
claude mcp add github -e GITHUB_PERSONAL_ACCESS_TOKEN=ghp_YOUR_TOKEN_HERE -- npx -y @modelcontextprotocol/server-github

Restart Claude Code after installing.

What You Can Do With It

  • "Create a new branch called feature/auth-flow and commit my changes"
  • "Open a pull request with a summary of what I just built"
  • "Show me all open issues labeled 'bug'"
  • "Review the latest PR and flag any security concerns"
  • "Search my org's repos for anything using Stripe API v2"