Introduction to MCP Servers

In this stage, we'll learn the basics of MCP servers in Cursor and set up our first server using Playwright. This will allow us to interact with web browsers directly from Cursor's AI chat.

What is MCP?

MCP (Model Context Protocol) is an open protocol that allows AI models in Cursor to interact with external tools and services. With MCP servers, the AI can perform actions beyond just generating text, such as:

- Controlling applications
- Accessing external APIs and data sources
- Running specific commands on your system
- Browsing websites and taking screenshots

MCP Setup Options

There are three ways to configure MCP servers in Cursor:

1. In Cursor Settings:
- Access through Settings → MCP Servers
- Configure global MCP servers available in all projects
Cursor MCP Settings

2. Project-specific setup:
- Create a .cursor/mcp.json file in your project root
- Servers defined here are only available in this specific project
3. Global configuration:
- Create a ~/.cursor/mcp.json file
- Servers defined here are available in all your projects

MCP Configuration Format

The configuration format in mcp.json files follows this structure:

{
  "mcpServers": {
    "serverName": {
      "command": "executable",
      "args": ["arg1", "arg2"],
      "env": { "ENV_VAR": "value" },
      "transport": "stdio" // or "sse"
    }
  }
}

Where:

- serverName: The name you'll use to reference this server
- command: The executable to run
- args: Command-line arguments to pass
- env: Environment variables (optional)
- transport: Communication method (default is "stdio")

Do not worry if you don't understand all of this parameters right now. We'll go through an examples in the next steps to sort this out.

This structure is used to configure both Global and Project-specific MCP servers through the mcp.json file.

Setting Up Playwright MCP Server

Let's set up our first MCP server using Playwright. Playwright is a browser automation framework that will allow the AI to control web browsers, navigate to websites, take screenshots, and interact with web pages.

Before continuing, ensure you have npx installed on your system. npx is a package runner that comes with Node.js and npm. This is required for the Playwright MCP server to work. Let's ask AI to install npx if it's not installed:

Ask Chat:

Check if npx and npm are installed. Install them if they are not installed.

Let's create the Playwright MCP configuration for our project using the project-specific approach. Ask the AI to create the folder and the mcp.json file.

Ask Chat:

Create a folder .cursor in our project directory if it doesn't already exist. Create a file .cursor/mcp.json with the following content: { "mcpServers": { "playwright": { "command": "npx", "args": [ "-y", "@executeautomation/playwright-mcp-server" ] } } }

If you use Windows, you need to change "npx" command to "cmd /c npx" in the mcp.json file.

Prompt for Windows users

Ask Chat:

Create a folder .cursor in our project directory if it doesn't already exist. Create a file .cursor/mcp.json with the following content: { "mcpServers": { "playwright": { "command": "cmd /c npx", "args": [ "-y", "@executeautomation/playwright-mcp-server" ] } } }

.cursor/mcp.json is created
.cursor/mcp.json is configured as defined above

After the file is created, check the settings to see the new MCP server:

Click on "Disabled" button to enable the server. After that, you should see the green checkmark on the server name as shown above.

Enabling the server might take time. If you see the server is not enabled, wait for a few seconds and click on Refresh button in settings.

Playwright MCP is enabled

Testing Our Playwright Setup

Now that we've set up our Playwright MCP server, let's test it by asking the AI to use it to check the weather in New York.

Ask Chat:

Using the playwright MCP tools, navigate to accuweather.com and check the current temperature in New York City. Take a screenshot of the weather page.

Chat uses Playwright MCP server to navigate in browser

If everything is set up correctly, the AI should be able to use the Playwright tools to open a browser, navigate to a weather website, and retrieve the current weather information for New York City.

Browsing with Playwright is not so fast. Give it a time to do the task.

What's Next?

In the next stage, we'll dive deeper into MCP architecture, transport formats, and will build a custom MCP server.