This is the second post exploring use cases leveraging the Model Context Protocol (MCP).

While the previous post covered Docker, this article will explore an example of combining the Cursor IDE with an MCP server.

Cursor

Cursor is an AI-powered code editor based on VS Code. While VS Code allows you to get help from AI models by installing extensions like Codeium or GitHub Copilot, Cursor is fundamentally designed at the IDE level to work alongside AI models.

I started using this IDE about three months ago. Before that, I used VS Code, and I've experienced a significant increase in development productivity since switching to Cursor.

Cursor is also one of the MCP clients, so it can connect to an MCP server. This post will explore ways to enhance the development experience by combining Cursor and an MCP server.

You can download Cursor here. While installing it isn't mandatory to read this article, it might be a good opportunity to try it out. (Note: It offers a 2-week free trial period).

Cursor with Docker

Let's connect labs-ai-tools-for-devs, which we also used in the previous post, to Cursor.

The method is very simple. Open the Cursor Settings page in Cursor and navigate to the MCP menu.

Click the Add new global MCP server button in the top-right corner, and the mcp.json file will open.

{
  "mcpServers": {
    "mcp_docker": {
      "command": "docker",
      "args": [
        "run",
        "-i",
        "--rm",
        "alpine/socat",
        "STDIO",
        "TCP:host.docker.internal:8811"
      ]
    }
  }
}

• This is the same configuration used when using Claude Desktop as an MCP client (claude_desktop_config.json).

After modifying and saving the mcp.json file, you need to completely quit and restart Cursor. If you don't, it might not connect properly to the MCP server (this seems to be a kind of bug in Cursor).

Restart Cursor and go back to Cursor Settings > MCP menu. You should see it connected to mcp_docker as shown below.

No Tools are registered yet. Now, you need to run Docker Desktop to activate a Tool.

• Activate the Postgres Tool.

• Go back to Cursor and click the Refresh button (located in the top-right corner of the mcp_docker item). You should now see the Postgres-related Tools you just activated.

The setup is complete. Now, let's connect to the actual PostgreSQL DB and try querying the table schema information.

• Open Cursor chat and ask for PostgreSQL information and table names.
  • Let's connect to the DB below and check what tables there are {DB INFORMATION}
• It uses the get_schema_info Tool to retrieve a total of 5 tables.

The database we connected to is for a blog system. And I have opened the blog system module code in Cursor.

Now, there are things we can try by combining Cursor and the MCP server.

The blog module uses Prisma as its ORM for schema management. I want to verify if the Prisma schema file matches the actual DB schema. To do this, we need to provide two pieces of context to the LLM:

1. DB table schema information
   • Obtained via the MCP server
2. Prisma schema file information
   • Obtained via Cursor

Cursor allows specifying files in the chat interface to use as context.

• The previous chat already contains the DB connection information, and by using Cursor's file attachment feature, we have prepared the two necessary contexts to provide to the LLM.

For this task to proceed as intended, it should follow this process:

1. Provide all necessary information to the MCP client (Cursor).
2. Query the remote DB's table schema (MCP server).
3. Read the local Prisma schema file (Cursor).
4. Perform the comparison between the two (LLM).

Okay, let's try it.

• The get_schema_info Tool is called 5 times to fetch the schema information for 5 tables.
• Since the @schema.prisma file was attached to the Cursor chat interface, its content is read.
• The LLM uses these two pieces of information as context to process the user's query.
  • Compares the names and columns of all 5 tables and confirms matches ✅
  • Identifies settings present in the DB table schema but missing in the Prisma schema ✅
  • Checks if anything needs to be reflected in the Prisma schema based on the comparison results and suggests them to the user ✅

I find this result quite satisfactory!

We could see the advantages of using an IDE like Cursor as an MCP client. It's because you can immediately add the code you are currently editing as context. And based on the query results, the code can be appropriately modified automatically by the AI model.

How would one do the same task with Claude?
You would have to connect the MCP server to Claude, query the DB information, then manually copy the Prisma schema file content and paste it into the Claude chat interface. If the query results suggest file modifications, you would need to copy Claude's suggestions and manually edit the Prisma schema file.

I think Cursor providing MCP client functionality was a very wise decision. As a developer, this combination with an MCP server allows for potentially huge improvements in development productivity.

Cursor with BrowserTools

This time, let's try using a Tool called BrowserTools. This Tool allows connecting an MCP client to the Chrome browser. It enables not only monitoring but also various interactions.

The official GitHub repository address is here.

For installation instructions, please refer to the Installation document. Using BrowserTools requires three setup steps:

1. Chrome extension
   • Download the extension installation file and install it via the Chrome Extensions menu.
   • Chrome-based browsers (like Arc) are also supported.
2. MCP client configuration
   • Open Cursor's MCP menu and add the following:

   Copy

   "browser-tools": {
     "command": "npx",
     "args": ["@agentdeskai/browser-tools-mcp@1.2.0"]
   }

3. MCP server setup

   Copy

   npx @agentdeskai/browser-tools-server@1.2.0

• If the installation proceeds correctly, browser-tools will appear in Cursor's MCP menu as shown above.

Fixing Errors with BrowserTools

Now that the installation is complete, it's time to use it.

We will simulate a situation where an error occurs in the blog system module currently under development (based on Next.js 15) and test how to debug and even modify the code using Cursor and BrowserTools.

For the error test, I intentionally modified the BlogComment.tsx file to reference an invalid object.

const BlogComment = () => {
  const undefinedObject = undefined;

  return (
    <div>{undefinedObject.test}</div>
  );
}

• Line 5: An error will occur here.

When navigating to the screen that renders the component containing BlogComment.tsx, an error occurs, and rendering fails, as shown below.

In this state, let's open Cursor's Chat in Agent mode and ask it in natural language to identify and fix the error. From here, I've recorded a video, so please take a look.

• The left half of the screen is Cursor, and the right half is the browser (Arc).
• I type check console error and fix it into the Cursor chat.
• Cursor calls the getConsoleErrors Tool to fetch console error information.
  • This allows including the console error string in the context.
• The LLM determines from the console error string that it needs to check the BlogComment component.
  • Cursor IDE searches for and finds the BlogComment file and reads it. This file content can now be included in the context.
• The LLM analyzes the console error and the BlogComment file content to determine which line to modify/delete.
• Cursor presents a diff view, giving the user (developer) the choice.
  • I chose Accept, saved the file, and the browser reflected the change, fixing the error.
• Cursor calls the getConsoleErrors Tool again to check the console error information.
  • It confirms there are no more errors, and the Agent stops.

Can you see the benefit of combining the Cursor IDE with an MCP server?

This task could be done without an MCP server. You could check the error in the browser, copy the error log from the console, and paste it into Cursor's Chat.

However, the powerful advantage lies in minimizing human intervention to complete the task. Using BrowserTools, you can fetch not only console error logs but also network errors, and you can select a specific HTML element in the browser and immediately query its information.

This enables starting and finishing tasks from a single place, without leaving Cursor. I believe this is the biggest advantage of combining Cursor with an MCP server.

So far, we've looked at two use cases. Connecting an IDE like Cursor with an MCP server opens up limitless possibilities for its application. As MCP is still an early-stage technology, I expect its usability to increase further as more clients and servers are implemented.

Today, March 27, 2025, as I write this post, news was announced that OpenAI supports MCP in their Agents SDK It would be great if not only OpenAI but also more major model providers adopt MCP. 😎

Besides the ones introduced in this post, quite a few MCP servers (or clients) have been implemented.

• mcp.so
• awesome-mcp-servers

I recommend checking out the MCP projects uploaded by people in these places and trying them out according to your own use case.

Thank you for reading to the end!