MCP를 활용한 use case의 두번째 글입니다.

이전 글에서는 Docker에 대해 다뤘다면 이번 글에서는 Cursor IDE를 MCP server와 결합한 사례에 대해 살펴보겠습니다.

Cursor

Cursor는 VS Code 기반의 AI Code editor 입니다. VS code도 Cline이나 Github Copilot 같은 extension을 설치하면 AI model의 도움을 받으며 작업을 할 수 있지만 Cursor는 근본적으로 IDE 차원에서 AI model과 같이 일 하도록 설계되었습니다.

저는 3개월 전부터 이 IDE를 사용하기 시작했습니다. 그 전에는 VS code를 사용했었는데요, Cursor를 사용하면서 더 높은 개발 생산성 향상을 느끼고 있습니다.

Cursor 역시 MCP client 중의 하나이기 때문에 MCP server와 연결할 수 있습니다. 이 글에서는 Cursor와 MCP server를 결합하여 개발 경험을 높일 수 있는 방법들에 대해 알아볼 예정입니다.

Cursor는 이 곳에서 다운로드 받을 수 있습니다. 이 글을 읽기 위해 꼭 설치할 필요는 없지만 이번을 계기로 한 번 설치 해보고 사용해보는 것도 나쁘지 않을 것 같습니다. (참고로 2주의 free trial 기간을 제공합니다)

Cursor with Docker

이전 글에서도 사용해봤던 labs-ai-tools-for-devs를 Cursor에 연결시켜보겠습니다.

방법은 아주 간단합니다. Cursor에서 Cursor Settings 페이지를 열고 MCP 메뉴로 이동하세요

우상단에 Add new global MCP server 버튼을 누르면 mcp.json 파일이 열립니다.

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

• 이것은 Claude Desktop을 MCP client로 사용할 때의 설정과 동일한 것입니다 (claude_desktop_config.json)

mcp.json 파일을 수정/저장한 뒤 Cursor를 완전히 종료한 후에 다시 시작해야 합니다. 이렇게 하지 않으면 MCP server와 제대로 연결되지 않을 수 있기 때문입니다(일종의 Cursor 버그처럼 보입니다)

Cursor를 재시작 하고 다시 Cursor Settings > MCP 메뉴로 이동하면 아래와 같이 mcp_docker에 연결된 것을 볼 수 있습니다

아직 아무런 Tool도 등록되지 않았습니다. 이제 Docker Desktop을 실행해서 Tool을 활성화 해야 합니다.

• Postgres Tool을 활성화 시킵니다

• 다시 Cursor로 돌아와서 Refresh 버튼을 누르면 방금 전 활성화 시킨 Postgres 관련 Tool들이 보입니다 (Refresh 버튼은 mcp_docker 항목의 우상단에 있습니다)

설정이 모두 완료되었습니다. 이제 실제 PostgreSQL DB에 연결해서 테이블 스키마 정보를 조회해보도록 하겠습니다.

• Cursor chat을 열어서 PostgreSQL 정보와 어떤 테이블이 있는지 확인
  • Let's connect to the DB below and check what tables there are {DB INFORMATION}
• get_schema_info Tool을 사용해서 총 5개의 테이블을 조회합니다

지금 접속한 DB는 블로그 시스템을 위한 DB 입니다. 그리고 Cursor로 블로그 시스템 모듈 코드를 열었습니다.

자, 이제 Cursor와 MCP server를 결합하여 해볼 수 있는 것들이 있습니다.

블로그 모듈에서는 ORM으로 Prisma를 사용중입니다. Prisma로 스키마 관리를 하고 있는데요. prisma schema 파일과 실제 DB 스키마가 일치하는지 검증해보려고 합니다. 이 작업을 하기 위해서는 2가지 Context를 LLM에게 제공해야 합니다.

1. DB table schema 정보
   • MCP server를 통해 획득
2. Prisma schema file 정보
   • Cursor를 통해 획득

Cursor는 chat interface에 File을 지정하여 Context로 삼을 수 있습니다.

• 이전 Chat에 이미 DB 접속 정보가 있고 Cursor의 파일 첨부 기능을 통해 우리가 LLM에게 제공해야 하는 2가지 Context를 위한 준비가 끝난 것입니다.

우리가 의도한대로 이 작업을 하기 위해서는 아래 프로세스대로 수행되어야 할 것입니다:

1. MCP client(Cursor)에게 필요한 정보를 모두 제공
2. 원격 DB의 테이블 스키마를 조회하고(MCP server)
3. 로컬의 Prisma 스키마 파일을 읽어서(Cursor)
4. 이 둘을 비교하는(LLM) 작업을 수행

자, 이제 해보겠습니다

• get_schema_info Tool을 5번 호출하여 테이블 5개의 schema 정보를 가져옵니다.
• Cursor chat interface에 @schema.prisma 파일을 첨부했기 때문에 파일 정보를 읽어옵니다.
• LLM은 이 2가지 정보를 Context로 하여 사용자 질의를 처리합니다
  • 총 5개 테이블의 이름과 컬럼에 대해 비교하고 일치하는지 확인 ✅
  • DB table schema에는 있지만 Prisma schema에는 없는 설정들 확인 ✅
  • 비교 결과 Prisma schema에 반영해야 할 것들이 있는지 확인하고 사용자에게 제안 ✅

저는 이 결과가 꽤나 만족스럽습니다!

Cursor라는 IDE를 MCP client로 사용하기 때문에 갖는 이점을 확인할 수 있었습니다. 내가 지금 편집하고 있는 코드를 Context로 바로 덧붙일 수 있기 때문입니다. 그리고 질의 결과에 따라서 코드를 적절하게 수정하는 것까지 자동으로 AI model에 의해서 처리됩니다.

이와 동일한 작업을 Claude로 하려면 어떻게 해야 했을까요?
Claude에 MCP server를 연결하고 DB 정보를 조회한 후에 Prisma 스키마 파일을 직접 복사해서 Claude chat interface에 붙여넣기 해야 했을 것입니다. 그리고 질의 결과에 의해 파일을 수정해야 하는 경우 Claude에서 제안하는것을 또 복사해서 Prisma 스키마 파일을 수정해야 합니다.

Cursor가 MCP client 기능을 제공하는 것은 매우 현명한 결정이었다고 생각합니다. 개발자로서 이러한 MCP server와의 결합을 통해 막대한 개발 생산성 향상을 꾀할 수 있게 되었습니다.

Cursor with BrowserTools

이번에는 BrowserTools 라는 Tool을 사용해보겠습니다. 이 Tool을 통해 MCP client와 크롬 브라우저를 연결시킬 수 있습니다. 모니터링뿐만 아니라 여러가지 interaction도 가능해집니다.

공식 Github repository 주소는 이 곳 입니다.

설치 방법은 Installation document를 참조하시기 바랍니다. BrowserTools을 사용하기 위해서는 총 3가지 설정이 필요합니다:

1. Chrome extension
   • Extension 설치 파일을 다운로드 받아 Chrome Extensions 메뉴에서 설치합니다
   • Chrome 뿐만 아니라 Chrome 기반의 브라우저 (Arc)도 가능합니다
2. MCP client 설정
   • Cursor의 MCP 메뉴를 열어서 아래 내용을 추가하세요

   Copy

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

3. MCP server 설정

   Copy

   npx @agentdeskai/browser-tools-server@1.2.0

• 설치가 정상적으로 진행되면 Cursor의 MCP 메뉴에 위와 같이 browser-tools가 나타날 것입니다

BrowserTools로 오류 수정

설치가 끝났으니 이제 사용해볼 차례입니다.

현재 개발 중인 블로그 시스템 모듈(Next.js 15 기반)에 오류가 발생한 상황을 가정하고 이를 Cursor와 BrowserTools를 통해 어떻게 디버깅하고 코드 수정까지 하는지를 테스트 해볼 예정입니다.

오류 테스트를 위해 일부러 BlogComment.tsx 파일을 수정하여 비정상적인 객체를 참조하도록 하였습니다.

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

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

• Line 5: 이 부분에서 오류가 발생할 것입니다.

BlogComment.tsx을 갖고 있는 컴포넌트를 그리는 화면으로 진입하는 경우 아래와 같이 오류가 발생하고 렌더링이 실패하게 됩니다.

이 상태에서 Cursor의 Chat을 Agent 모드로 열어서 자연어로 오류를 파악하고 수정해달라고 요청해보겠습니다. 여기서부터는 영상으로 녹화했으니 한 번 보시겠습니다.

• 화면 절반 왼쪽은 Cursor이고 오른쪽은 브라우저(Arc) 화면입니다
• Cursor chat에 check console error and fix it 이라고 입력합니다
• Cursor는 getConsoleErrors Tool을 호출하여 console error 정보를 불러옵니다
  • 이를 통해 console error 문자열을 Context에 포함시킬 수 있게 됩니다
• LLM은 console error 문자열로부터 BlogComment component를 확인해야겠다고 판단합니다
  • Cursor IDE는 BlogComment 파일을 검색하고 찾아서 해당 파일을 읽습니다. 이 파일 내용을 Context에 포함시킬 수 있게 됩니다
• LLM은 console error와 BlogComment 파일을 종합하여 어떤 라인을 수정/삭제 하면 될지 판단합니다
• Cursor는 diff view를 통해 사용자(개발자)에게 선택권을 줍니다
  • 저는 Accept 했고 파일 저장 후 브라우저에 반영되어 오류가 수정됩니다
• Cursor는 다시 getConsoleErrors Tool을 호출하여 console error 정보를 확인합니다
  • 더 이상의 오류가 없음을 확인하고 Agent가 중단됩니다

Cursor IDE와 MCP server를 결합했을 때의 장점이 느껴지시나요?

이 작업을 MCP server 없이도 할 수는 있습니다. 브라우저에서 오류를 확인하면 콘솔창의 오류 로그를 복사해서 Cursor의 Chat에 붙여넣기 하는 방식으로도 할 수 있으니까요.

하지만 사람의 개입을 최소화하여 작업을 끝마칠 수 있다는 막강한 장점이 있습니다. BrowserTools를 사용하면 console error 로그 뿐만 아니라 network error를 가져올 수 있고 브라우저에 특정 HTML element를 선택한 후에 해당 정보를 바로 조회할 수도 있습니다.

이를 통해 Cursor를 벗어나지 않고 단일한 곳에서 작업을 시작/종료 할 수 있게 되는 것입니다. 저는 이것이 Cursor와 MCP server를 결합했을 때의 가장 큰 장점이라고 생각합니다.

지금까지 2개의 use case를 살펴봤습니다. Cursor와 같은 IDE를 MCP server와 연결하면 그 활용 방법이 무궁무진해질 것입니다. MCP는 아직 초기 단계의 기술이기 때문에 지금보다 더 많은 client, server 들이 구현되면서 그 사용성도 더 높아지 것으로 기대합니다.

이 글을 적는 2025년 3월 27일 오늘, OpenAI에서 Agents SDK에 MCP를 지원 한다는 소식이 발표되었습니다. OpenAI 뿐만 아니라 더 많은 Major model provider측에서 MCP를 도입하면 좋겠네요. 😎

이번 글에서 소개한 것 외에도 꽤 많은 MCP server(or client)가 구현되어 있습니다.

• mco.so
• awesome-mcp-servers

이곳에서 사람들이 업로드 해놓은 MCP 프로젝트들을 확인해보시고 본인의 usecase에 맞게끔 사용해보는 것도 추천드립니다.

그럼 끝까지 읽어주셔서 감사합니다!