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
env: Environment variables
transport: Communication protocol (usually "stdio")

Setting Up Playwright MCP

For our first MCP server, we'll use Playwright, which allows the AI to control a web browser. Let's set it up:

First, create a .cursor directory in your project root if it doesn't exist yet:

Create a .cursor directory in my project root if it doesn't exist.

Now, create a mcp.json file inside the .cursor directory with the following content:

Create a file at .cursor/mcp.json with the following content: { "mcpServers": { "playwright": { "command": "npx", "args": [ "-y", "@playwright/mcp@latest", "--headless" ] } } }

Windows Configuration

Create a file at .cursor/mcp.json with the following content: { "mcpServers": { "playwright": { "command": "cmd /c npx", "args": [ "-y", "@executeautomation/playwright-mcp-server" ] } } }

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

Cursor MCP Settings

Click on the toggle 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.

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.

Using the playwright MCP tools, navigate to weather.com and check the current temperature in New York City.

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.

Alternative: Installing Playwright MCP via UV

Besides using npx, you can also install and run MCP servers using UV, which provides better dependency management and faster execution. Let's explore how to use Playwright MCP with UV:

Check if UV is installed or install it if necessary.

Benefits of Using UV for MCP Servers

Using UV instead of npx provides several advantages:

Faster startup: UV caches packages more efficiently than npm
Better isolation: Each tool runs in its own virtual environment
Version pinning: You can specify exact versions or commits from GitHub
Direct from source: Install servers directly from GitHub without publishing to npm

For example, let's update the configuration to use duckduckgo MCP server via uv

Install duckduckgo MCP server using UV from https://github.com/nickclyde/duckduckgo-mcp-server.git Once the installation is complete, you can update your .cursor/mcp.json file to use the UV command: Edit a file .cursor/mcp.json to include the following MCP setup: "duckduckgo": { "command": "uv", "args": [ "tool", "run", "duckduckgo-mcp-server" ] }

Practical Example: Web Search

Use DuckDuckGo to find the current weather in New York City.

What's Next?

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