MCP Cursor 연동

Cursor에서 MCP로 GitHub와 Chrome 개발자 도구 연동

written by

Cursor

Cursor는 AI를 활용한 코드 편집기(에디터)로, 개발자의 생산성 향상에 초점을 맞춘 도구입니다. VSCode 기반으로 만들어져있기 때문에 VScode 설정을 그대로 마이그레이션해서 사용 할 수 있습니다.

Cursor 설치

Download Cursor 페이지에서 Cursor를 다운받아 설치해 줍니다.

Cursor MCP

Cursor는 MCP를 기본적으로 지원합니다. 이를 통해 AI와 다양한 서비스를 신속하고 간편하게 연동할 수 있습니다.

1. Open Cursor Settings 버튼 클릭
2. MCP 탭 선택
3. 원하는 MCP 설정

> Cursor MCP탭에서 다양한 서비스와 AI를 손쉽게 연결 가능

MCP servers

여기에서는 두 가지 MCP 서버를 연동해보겠습니다.

• GitHub MCP Server
• BrowserTools MCP

GitHub 연동

Smithery

Smithery는 MCP 서버를 모아둔 사이트 입니다. 다양한 MCP 서버가 있으니 필요한 MCP 서버를 찾아서 사용해 보세요!

GitHub MCP Server

Smithery에서 GitHub로 검색하면 @smithery-ai/github의 GitHub를 클릭합니다.

GitHub 토큰

MCP 서버가 GitHub에 접근하려면 GitHub 토큰이 필요합니다.

1. GitHub 프로필에서 Settings 클릭
2. Developer Settings 탭 클릭 (가장 하단에 있음)
3. Personal access tokens - Fine-grained tokens - Generate new token 버튼 클릭

토큰 권한 설정 및 생성

아래의 예시와 같이 필요한 권한을 설정해서 토큰을 생성합니다.

• Expiration : 토큰 만료기간 설정
• Repository access : All repositories
• Repository permissions : 필요한 기능을 사용할 수 있게 Read and write 권한을 설정
  • Actions
  • Administration
  • Commit statuses
  • Contents
  • Issues
  • Commit statuses

Smithery Installation

1. Smithery 우측에 Installation Cursor 탭 클릭
2. GitHub 토큰을 입력하고 Connect 클릭
3. Cursor 버전과 운영체제에 알맞은 커맨드를 복사 또는 JSON으로 복사

Cursor에 적용 (Cursor ≤0.46.x)

이제 복사한 커맨드를 설정만하면 Cursor에 MCP 서버 설정이 끝납니다!

1. Cursor에서 MCP 탭 Add new MCP server 클릭
2. Name : 아무 이름이나 상관없음
3. Type : command 선택
4. Command : 복사한 커맨드 붙여넣기

mcp.json (Cursor ≥0.47.x)

mcp.json 파일을 통해 각 프로젝트별, 또는 전체 프로젝트에서 실행 할 MCP 서버를 설정 할 수 있습니다. Configuration Locations 페이지를 참고하시길 바랍니다!

{
  "mcpServers": {
    "github": {
      "command": "npx",
      "args": [
        "-y",
        "@smithery/cli@latest",
        "run",
        "@smithery-ai/github",
        "--config",
        "{\"githubPersonalAccessToken\":\".............\"}"
      ]
    }
  }
}

Cursor! GitHub 레포 만들어줘

이제 Cursor에게 GitHub 관련된 작업을 시킬 수 있습니다. Cursor가 필요한 동작을 수행 할 수 있게 Run tool, Accept만 해주면 됩니다!

> AI가 MCP로 GitHub를 도구처럼 이용한다! 😲

Big News(2025-03-27)

“LLMs are engines, It’s time for vehicles”

OpenAI에서도 MCP를 공식 지원을 발표했습니다! LLM 업계의 선두인 두 회사가 모두 MCP를 지원하겠다는 것은 앞으로 LLM 활용에 엄청난 변화를 가속화시킬 듯합니다! LLM이 MCP를 통해 다양한 인터페이스로 우리 삶에 스며드는 날이 머지 않은 듯 합니다.

> 출처 : X -Sam Altman

Chrome 개발자 도구 연동

이번에는 Cursor가 직접 브라우저를 개발자 도구를 사용 할 수 있게 만들어주는 BrowserTools MCP 서버를 설정해 보겠습니다.

Chrome Extension 다운로드

해당 Extension은 현재(2025.03.15) Marketplace에서 승인 대기 중입니다. 따라서 Extension을 압축 파일을 다운받아서 직접 설치해줘야 합니다.

Installation 페이지를 참고해서 설치를 진행합니다.

Extension 설치

1. 크롬에서 확장 프로그램 관리
2. 개발자 모드 활성화
3. 압축해제된 확장 프로그램 로드

Cursor 연동

이제 아래의 커맨드를 설정만하면 Cursor에 MCP 서버 설정이 끝납니다!

npx @agentdeskai/browser-tools-mcp@1.2.0

Cursor! 크롬 브라우저 에러 확인하고 수정해줘

이제 MCP를 통해 Cursor가 직접 크롬을 사용하여 에러를 확인하고 수정이 가능합니다!

마무리

MCP를 통해서 AI가 도구를 사용 할 수 있게 만들수 있다니… 정말 놀랍지 않나요? 이미 수 많은 MCP 서버가 있으니 자신에게 필요한 MCP 서버를 찾아서 활용해 보시길 바랍니다!

• 웹 브라우저
• 데이터베이스
• Slack
• Notion

다음으로

다음글: MCP 서버 구축에서는 자신만의 MCP 서버를 직접 만들어보겠습니다!

감사합니다! 😊

참고 문헌

• Creator Magic - 10x AI Coding: MCP + Cursor Does Everything!
• smithery.ai
• BrowserTools MCP