원격 MCP 구축 방법 (Vercel + Next.js + Cline 및 Cursor)

카테고리

프로그래밍/소프트웨어 개발

서브카테고리

웹 개발

대상자

• 중급 이상의 웹 개발자
• Next.js 및 Vercel 배포 경험을 가진 개발자
• MCP (Magic Code Platform) 시스템을 활용한 프로젝트 구현을 원하는 개발자

핵심 요약

• 3단계 아키텍처: Cline/Cursor → Vercel에 배포된 MCP 서버 → Vercel에 배포된 웹 앱
• 필수 패키지 설치: @vercel/mcp-adapter, zod 사용 (Next.js 13+ 지원)
• 배포 키 포인트: Upstash Redis 연결, URL 동적 업데이트, Cline/Cursor 설정 파일 구성

섹션별 세부 요약

1. 프로젝트 생성 및 초기 설정

• npx create-next-app@latest 명령어로 Next.js 프로젝트 생성
• @vercel/mcp-adapter 및 zod 라이브러리 설치
• public 폴더에 template_no.png, template_yes.png 이미지 파일 추가

2. MCP 서버 코드 구현

• app/[transport]/route.ts 파일에서 @vercel/mcp-adapter 기반 MCP 핸들러 정의
• generate_meme 도구의 입력 파라미터:

```ts

noText: z.string(),

yesText: z.string()

```

• /api/generate-meme 엔드포인트에서 텍스트 수신 및 저장 로직 구현

3. 웹 앱 클라이언트 구현

• app/page.tsx 파일에서 사용자 입력 상태 관리 및 /api/generate-meme API 호출
• useEffect로 4초 간격으로 데이터 동기화 (정기 요청 처리)

4. Vercel 배포 및 설정

• Vercel 프로젝트 생성: GitHub 저장소 연결 후 배포
• Redis 설정: Upstash 데이터베이스 생성 및 연결
• URL 동적 업데이트: 배포된 Vercel 도메인 URL을 코드에 반영

5. Cline 및 Cursor 설정

• cline_mcp_settings.json과 mcp.json 파일에서 MCP 서버 URL 구성
• Streamable HTTP/SSE 프로토콜 선택 예시:

```json

{

"mcpServers": {

"meme-mcp-server": {

"command": "npx",

"args": ["mcp-remote", "to vercel/mcp"],

"transportType": "Streamable HTTP"

}

}

}

```

결론

• 원격 MCP는 확장성과 협업 효율성을 높이는 핵심 기술
• 테스트 후 Vercel 프로젝트 삭제를 잊지 말아야 하며, 정기 요청으로 인한 비용 발생 방지
• Next.js 13+ 및 Vercel의 최신 API 사용을 권장 (성능 최적화)