[{"data":1,"prerenderedAt":124},["ShallowReactive",2],{"blog-article-/blog/install-playwright-mcp-server-in-vs-code":3,"blog-surround-/blog/install-playwright-mcp-server-in-vs-code":115},{"id":4,"title":5,"body":6,"canonical":87,"date":99,"description":100,"extension":101,"featured":102,"image":103,"meta":104,"navigation":105,"ogImage":103,"path":106,"provider":103,"published":102,"seo":107,"stem":108,"tags":109,"url":103,"__hash__":114},"blog/blog/install-playwright-mcp-server-in-vs-code.md","Install Playwright MCP Server in VS Code",{"type":7,"value":8,"toc":90},"minimark",[9,13,18,31,35,38,42,45,48,52,55,58,61,70,74,79],[10,11,12],"p",{},"Installing MCP(Model Context Protocol) servers in Visual Studio Code just got a major upgrade! With the latest update, you'll notice a new MCP Servers section in the Extensions panel. Here you will find all the MCP servers you already have installed. You should also see a \"world\" icon for browsing MCP Servers.",[14,15,17],"h2",{"id":16},"getting-started","Getting Started",[19,20,21,25,28],"ul",{},[22,23,24],"li",{},"Open VS Code and click on the Extensions panel",[22,26,27],{},"Under extensions is a new section called MCP Servers Installed",[22,29,30],{},"Look for the new globe/world icon and click it to launch the MCP server browser",[14,32,34],{"id":33},"browse-available-mcp-servers","Browse Available MCP Servers",[10,36,37],{},"You'll be greeted by a curated list of available MCP servers, each with a description and quick actions.",[14,39,41],{"id":40},"install-an-mcp-server","Install an MCP Server",[10,43,44],{},"Find the server you want and click the Install button.\nThis will open a web link that triggers VS Code to handle the installation for you.",[10,46,47],{},"Confirm the install in VS Code—no need to copy-paste commands or hunt for repositories.",[14,49,51],{"id":50},"manage-your-servers","Manage Your Servers",[10,53,54],{},"Once installed, your MCP servers appear in the extension's sidebar.\nYou can start or stop servers with a single click.",[10,56,57],{},"Click on a server to view its README, check documentation, or access configuration options directly from the UI.",[10,59,60],{},"Give it a try and see how much easier MCP server installation can be!",[10,62,63,64],{},"Learn more at: ",[65,66,67],"a",{"href":67,"rel":68},"https://code.visualstudio.com/mcp",[69],"nofollow",[14,71,73],{"id":72},"watch-the-tutorial","Watch the Tutorial",[75,76],"lite-youtube",{"videoid":77,"playlabel":78},"exsikHe20D8","Install an MCP Server in VS Code. (Watch me install Playwright MCP)",[10,80,81],{},[82,83,84,85],"em",{},"Originally published on ",[65,86,89],{"href":87,"rel":88},"https://dev.to/debs_obrien/install-playwright-mcp-server-in-vs-code-4o91",[69],"Dev.to",{"title":91,"searchDepth":92,"depth":92,"links":93},"",2,[94,95,96,97,98],{"id":16,"depth":92,"text":17},{"id":33,"depth":92,"text":34},{"id":40,"depth":92,"text":41},{"id":50,"depth":92,"text":51},{"id":72,"depth":92,"text":73},"2024-07-15","Installing MCP(Model Context Protocol) servers in Visual Studio Code just got a major upgrade! Learn how to use the new MCP Servers section in the Extensions panel to easily browse, install, and manage MCP servers.","md",false,null,{},true,"/blog/install-playwright-mcp-server-in-vs-code",{"title":5,"description":100},"blog/install-playwright-mcp-server-in-vs-code",[110,111,112,113],"playwright","mcp","ai","vs-code","4iE-awT6JG0Z_1y9V4HW3rWc3X5QFxnRCAOXp70ksmo",[116,120],{"title":117,"path":118,"stem":119,"children":-1},"Testing Staging and Production environments in Playwright","/blog/testing-staging-production-envs-playwright","blog/testing-staging-production-envs-playwright",{"title":121,"path":122,"stem":123,"children":-1},"Building Your First MCP Server - A Beginner's Tutorial","/blog/building-your-first-mcp-server","blog/building-your-first-mcp-server",1790839746530]