MCP

MCP (Model Context Protocol)

AI 에이전트(LLM)가 외부 도구와 데이터를 연결하는 데 표준화를 제공하는 오픈 프로토콜

• USB-C 포트처럼, 다양한 도구·데이터 소스를 하나의 통일된 인터페이스로 연결해줌

• Host: LLM 애플리케이션 (클로드 데스크탑, 커서 IDE 등)

  • 프롬프트를 처리하는 측, MCP 전체 흐름의 중심

• Client: 도구의 목록, 기능 탐색 및 연결 담당

  • 특정 서버와 상태 유지, 기능 협상 및 메시지 라우팅 담당

  • Host와 Server 사이의 요청/응답을 중개

• Server: 도구의 실제 실행 환경을 접근할 수 있도록 제공하는 역할

  • 도구, 리소스, 프롬프트 템플릿을 제공

LLM (Large Language Model)

• 방대한 양의 텍스트 데이터를 학습한 인공지능 모델로, 인간처럼 자연어를 이해하고 생성 가능

• GPT-4, Claude, Gemini 등

AI Aigent란?

• LLM + 도구 = 에이전트

• LLM은 똑똑하지만, 외부 세계에 직접 접근할 수 없음

• LLM을 외부 세계와 상호작용하게 함으로써, 작업을 능동적으로 수행하는 에이전트가됨

장점

• 표준화된 인터페이스(JSON-RPC 기반)

  • MCP는 모든 도구/데이터 소스가 동일한 통신 형식을 따름

  • 도구마다 다른 API 형식/호출 방식에 대응할 필요가 없음

  • MCP 클라이언트는 그 표준을 구현하여 도구들과 통신하는 역할

  • 하나의 MCP 클라이언트 코드로 여러 종류의 데이터 소스와 도구들을 활용할 수 있어 개발 시간 대폭 감축

• 한 번 개발된 MCP 서버는 여러 서비스에서 재사용 가능

  • MCP 서버는 자신이 어떤 기능을 갖고 있고, 어떻게 호출하면 되는지 메타데이터를 제공

  • MCP 클라이언트는 이 메타데이터를 읽어 도구를 이해하여 사용함

  • 이 구조가 표준화되어있기 때문에, 다양한 애플리케이션에서 활용 가능

• 런타임 도구 확장 및 변경이 가능 (유지보수성)

  • 정통적 API 방식은 서비스 구조가 바뀌면 호출 방식도 바뀌기 때문에, 클라이언트 코드 수정 + 재배포 필요

  • MCP는 런타임 수준에서 클라이언트가 자동으로 인식하여 자동으로 반영함

BrowserTools MCP

브라우저 내부 상태를 에이전트가 직접 살펴보고 디버깅해주는 MCP

• Github

• Docs

• 브라우저 개발자 도구의 콘솔과 네트워크 탭을 분석해 에러를 파악하고 디버깅을 지원

• Lighthouse 기반의 웹 감사 기능을 통해서 사이트의 성능, 접근성, SEO 등을 분석하고 최적화 방향을 제안

• 브라우저 내 요소를 직접 선택해 프롬프트로 활용할 수 있고, 브라우저 화면을 자동으로 캡처해 분석함

• 웹 개발자에게 필수인 MCP

Install

• chrom extension 설치 후 등록

• 커서 AI가 borwserTools MCP를 이해할 수 있도록 값 설정

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

• 크롬 브라우저에 추가한 익스텐션과 MCP Server를 연결

  • BrowserTools MCP 서버 실행

  • npx @agentdeskai/browser-tools-server@1.2.0

Context7 MCP

AI 기반 코드 생성 시, 다양한 도구의 최신 버전별 문서를 자동으로 반영해 정확성과 신뢰도를 크게 높여주는 도구

• Github

• 최신 버전별 공식 문서와 코드 예시를 LLM 프롬프트에 주입시킴

• 구버전 라이브러리 기반의 낡은 답변이나 할루시네이션을 효과적으로 방지해주는 도구

• 프롬프트 문장 뒤에 use context7 를 추가하면 자동으로 적용됨

할루시네이션이란?

• AI가 그럴듯하지만 사실과 다른 정보를 생성하는 현상

Docs

커서에서 제공하는 Docs는 외부 문서를 수동으로 연결하여 자동으로 LLM에 넣어주는 기능

• Context7을 사용하면 더이상 Docs를 수동으로 등록하거나 관리하지 않아도 됨

• Context7은 자체 서버에서 최신 문서들을 관리하고, 이를 검색해 LLM이 사용할 수 있도록 제공

Install

{
  "mcpServers": {
    "context7": {
      "command": "npx",
      "args": ["-y", "@upstash/context7-mcp"]
    }
  }
}