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을 외부 세계와 상호작용하게 함으로써, 작업을 능동적으로 수행하는 에이전트가됨

MCP Server

• 컨텍스트를 수집해서 LLM에 주입

  • DB에서 데이터를 가져옴

  • 웹 검색을 통해 최신 정보를 가져옴

• 데이터를 토대로 결과를 생성

  • Figma MCP로 디자인 생성

  • 노션 MCP로 결과값 입력

Remote MCP Server

• 로컬이 아닌 클라우드 환경에서 MCP 서버를 구동하는 방식

• 기존에는 MCP Server를 로컬에 설치해 실행했지만, 이 경우 로컬 자원을 많이 소모하고 환경 의존성이 큰 단점이 있었음

• 로컬에서 remote로 넘어가는 추세

• 어떻게 Instruction(지시사항)과 Tool(MCP)을 잘 구성해 Agent에 전달해야 더 높은 품질의 소스코드를 생산할 수 있을까?

• 어떻게 워크플로우를 체계적으로 구성하고, Instruction과 Tool을 팀원들에게 효과적으로 공유해 동일한 프로세스를 구축할 수 있을까?

장점

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

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

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

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

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

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

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

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

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

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

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

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

https://smithery.ai/

가끔 MCP Client와 MCP Server를 연결할 때 Node.js 버전 충돌 문제가 발생됨

• 특히 nvm을 사용할 경우, 터미널에서 쓰는 Node 버전과 MCP Client, MCP Server가 사용하는 Node 버전이 각각 달라서 충돌이 생길 수 있음

• 하나의 버전으로 통일해 사용하는 것이 가장 바람직함

• 또는 아래와 같이 세팅

• "env": {
    "NODE_TLS_REJECT_UNAUTHORIZED: "0"
  }

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"]
    }
  }
}

Figma MCP

• Cursor Talck to Figma

Install

curl -fsSL https://bun.sh/install | bash
source ~/.zshrc

git clone https://github.com/sonnylazuardi/cursor-talk-to-figma-mcp.git

bun socket

Figma Desktop Plugin 연결

Figma Desktop에 플러그인을 설치해 사용해야 하기 때문에, 해당 플러그인을 다운로드하려면 코드를 클론

• Figma Desktop에서만 Plugins > Development > New Plugin 기능을 사용가능하기 때문

think-mcp-server

MCP를 지원하는 AI 환경에 "think" 도구 기능을 추가해주는 MCP 서버

• 모델이 복잡한 문제를 해결할 때 생각 과정을 중간중간에 멈추고 단계별로 정리할 수 있도록 도움

• 모델이 순차적 결정 구조를 따라 계획을 세우고, 목적에 맞는 응답을 일관되게 생성하도록 돕는다.

• AI가 즉흥적 응답 대신 사고 단계를 명확히 거치고 응답하도록 만드는 도구

  • Cursor 내에 AI의 사고 과정을 투명하게 노출