Frontend Developer

Intermediate

Browser testing, design tools, and version control for frontend workflows.

4 curated servers · Install in minutes

Quick Install — All 4 Servers

Install all servers in this pack at once. Pick your client, then copy or download the config.

Claude Code

claude mcp add context7 -- npx -y @upstash/context7-mcp
claude mcp add microsoft-playwright-mcp -- npx -y @playwright/mcp@latest

Cursor

{
  "mcpServers": {
    "context7": {
      "command": "npx",
      "args": [
        "-y",
        "@upstash/context7-mcp"
      ]
    },
    "microsoft-playwright-mcp": {
      "command": "npx",
      "args": [
        "-y",
        "@playwright/mcp@latest"
      ]
    }
  }
}

VS Code

{
  "mcp": {
    "servers": {
      "context7": {
        "command": "npx",
        "args": [
          "-y",
          "@upstash/context7-mcp"
        ]
      },
      "microsoft-playwright-mcp": {
        "command": "npx",
        "args": [
          "-y",
          "@playwright/mcp@latest"
        ]
      }
    }
  }
}

Windsurf

{
  "mcpServers": {
    "context7": {
      "command": "npx",
      "args": [
        "-y",
        "@upstash/context7-mcp"
      ]
    },
    "microsoft-playwright-mcp": {
      "command": "npx",
      "args": [
        "-y",
        "@playwright/mcp@latest"
      ]
    }
  }
}

Claude Desktop

{
  "mcpServers": {
    "context7": {
      "command": "npx",
      "args": [
        "-y",
        "@upstash/context7-mcp"
      ]
    },
    "microsoft-playwright-mcp": {
      "command": "npx",
      "args": [
        "-y",
        "@playwright/mcp@latest"
      ]
    }
  }
}

Servers in This Pack

1 MCP Filesystem Server Caution

Golang implementation for local file system access.

Tools provided (5)

read_filewrite_filelist_directorysearch_filesmove_file

Compatibility

Claude CodeFull support

Tested

CursorFull support

Tested

VS CodeFull support

Tested

WindsurfFull support

Tested

Claude DesktopFull support

Tested

2 Context7 Verified

Up-to-date code documentation for LLMs and AI code editors.

Tools provided (2)

resolve-library-idget-library-docs

Compatibility

Claude CodeFull support

Tested

CursorFull support

Tested

VS CodeFull support

Tested

Windsurf

Not Tested

Claude Desktop

Not Tested

Install

Claude Code

claude mcp add context7 -- npx -y @upstash/context7-mcp

Cursor

{
  "mcpServers": {
    "context7": {
      "command": "npx",
      "args": [
        "-y",
        "@upstash/context7-mcp"
      ]
    }
  }
}

VS Code

{
  "mcp": {
    "servers": {
      "context7": {
        "command": "npx",
        "args": [
          "-y",
          "@upstash/context7-mcp"
        ]
      }
    }
  }
}

Windsurf

{
  "mcpServers": {
    "context7": {
      "command": "npx",
      "args": [
        "-y",
        "@upstash/context7-mcp"
      ]
    }
  }
}

Claude Desktop

{
  "mcpServers": {
    "context7": {
      "command": "npx",
      "args": [
        "-y",
        "@upstash/context7-mcp"
      ]
    }
  }
}

3 Playwright MCP Verified

Official Microsoft Playwright MCP server, enabling LLMs to interact with web pages through structured accessibility snapshots

Tools provided (5)

browser_navigatebrowser_clickbrowser_fillbrowser_snapshotbrowser_take_screenshot

Compatibility

Claude CodeFull support

Tested

CursorFull support

Tested

VS CodeFull support

Tested

WindsurfFull support

Tested

Claude DesktopFull support

Tested

Install

Claude Code

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

Cursor

{
  "mcpServers": {
    "microsoft-playwright-mcp": {
      "command": "npx",
      "args": [
        "-y",
        "@playwright/mcp@latest"
      ]
    }
  }
}

VS Code

{
  "mcp": {
    "servers": {
      "microsoft-playwright-mcp": {
        "command": "npx",
        "args": [
          "-y",
          "@playwright/mcp@latest"
        ]
      }
    }
  }
}

Windsurf

{
  "mcpServers": {
    "microsoft-playwright-mcp": {
      "command": "npx",
      "args": [
        "-y",
        "@playwright/mcp@latest"
      ]
    }
  }
}

Claude Desktop

{
  "mcpServers": {
    "microsoft-playwright-mcp": {
      "command": "npx",
      "args": [
        "-y",
        "@playwright/mcp@latest"
      ]
    }
  }
}

4 Github MCP Server Verified

Official GitHub server for integration with repository management, PRs, issues, and more.

Tools provided (6)

create_issuelist_issuescreate_pull_requestget_file_contentssearch_codecreate_branch

Compatibility

Claude CodeFull support

Tested

CursorFull support

Tested

VS CodeFull support via Copilot

Tested

WindsurfBasic operations work

Partial

Claude DesktopFull support

Tested

FAQ

What is the Frontend Developer starter pack?

Browser testing, design tools, and version control for frontend workflows. It includes 4 pre-selected MCP servers that work well together.

How do I install the Frontend Developer starter pack?

Install each server individually using the commands on this page. For Claude Code, run each command in your terminal. For Cursor or VS Code, add the JSON config to your settings file.

Can I add more servers later?

Yes! Starter packs are just a starting point. Browse our full directory to find additional MCP servers for your needs.