Useful links:

• Link to github repository with MCP sdk for typescirpt: https://github.com/modelcontextprotocol/typescript-sdk

Code snippets:

• creating new server

const server = new McpServer({
    name: "Example MCP Server",
    version: "1.0.0",
});

• connecting a server

const transport = new StdioServerTransport();
server.connect(transport);

Testing MCP SERVER

• launch below command in terminal or set it as a script in package.json file (currently under test script)

npx -y @modelcontextprotocol/inspector npx -y tsx main.ts

or

npm run test

register MCP server in vscode

• press ctrl + shift + p
• enter: MCP: List servers
• select : add new mcp server
• select: Command (stdio)
• enter command to run server: npx -y tsx main.ts
• enter name of server (example: mcp-demo), and hit enter
• select option workspace settings (available for project only) in the next question you should be redirected to mcp.json configuration file

MCP server initial correct configuration

File should be under .vscode directory in ptroject structure. File name must be mcp.json Example configuration of playwright and custom MCP servers:

{
  "servers": {
    "mcp-demo-countries": {
      "type": "stdio",
      "command": "npx",
      "args": [
        "-y",
        "tsx",
        "main.ts"
      ]
    },
    "playwright-test": {
      "type": "stdio",
      "command": "npx",
      "args": [
        "playwright",
        "run-test-mcp-server"
      ]
    }
  },
  "inputs": []
}

Playwright MCP

Currently available only on Node.js

Software requirements

• VS Code cersion: 1.105
• Playwright: 1.56.0

Getting started

All instructions are written for VS Code.

• update playwright:

npm i -D @playwright/test@latest

• Initialize agents:

npx playwright init-agents --loop=vscode

There are 3 chatmodes after intitializing agends:

• planner (generate test for applications)
• generator (generate playwright tests)
• healer (fix failing playwright tests)