MCP (Model Context Protocol) 클라이언트 구현으로, 세 가지 통신 방식을 지원합니다: stdio, SSE, Streamable HTTP
- Yarn Offline Mirror: 오프라인 환경에서도 패키지 설치 가능
- 다중 통신 방식: stdio, SSE, Streamable HTTP 지원
- 탭 기반 UI: 각 통신 방식별 독립적인 로그 관리
- 실시간 알림: SSE와 Streamable HTTP에서 5초마다 서버 알림 수신
- TailwindCSS 4: 모던한 UI 스타일링
git clone <repository-url>
cd mcp-clientyarn install패키지는 npm_packages 디렉토리에 캐시되어 오프라인에서도 재설치 가능합니다.
MCP 서버 실행을 위해 Python 3.6+ 가 필요합니다.
yarn dev브라우저에서 http://localhost:3000 접속
각 통신 방식별로 별도의 서버를 실행해야 합니다:
yarn server:stdio
# 또는
python src/server/mcp_server.py stdioyarn server:sse
# 또는
python src/server/mcp_server.py sse 8001yarn server:http
# 또는
python src/server/mcp_server.py http 8002특징:
- Node.js 프로세스 간 통신
- 동기적 요청-응답 패턴
- 가장 단순한 구조
제한사항:
- ❌ 스트림 미지원: 동기적 통신 특성상 불가능
- ❌ 알림 미지원: 서버가 클라이언트에 자발적으로 메시지 전송 불가
- ❌ 브라우저 미지원: Node.js 환경에서만 동작
미지원 이유: stdio는 단방향 파이프 통신으로, 클라이언트가 요청을 보낸 후에만 응답을 받을 수 있는 구조입니다. 서버는 클라이언트의 요청 없이는 메시지를 보낼 수 없어, 스트리밍이나 알림과 같은 서버 주도 통신이 구조적으로 불가능합니다.
특징:
- ✅ 단방향 스트리밍 (서버 → 클라이언트)
- ✅ 자동 재연결
- ✅ 실시간 알림 지원
- ✅ 브라우저 네이티브 지원
지원 기능:
- 초기화 요청
- 단일 요청-응답
- 스트림 데이터 수신
- 5초마다 서버 알림
특징:
- ✅ 양방향 스트리밍
- ✅ Chunked Transfer Encoding
- ✅ 대용량 데이터 효율적 전송
- ✅ 실시간 알림 지원
지원 기능:
- 초기화 요청
- 단일 요청-응답
- 스트림 데이터 송수신
- 5초마다 서버 알림
mcp-client/
├── .yarnrc # Yarn offline mirror 설정
├── npm_packages/ # 오프라인 패키지 캐시
├── src/
│ ├── app/
│ │ ├── api/
│ │ │ └── stdio/
│ │ │ └── route.ts # Stdio API Route (Next.js)
│ │ ├── mcpClientStdioBrowser.ts # Stdio 브라우저 클라이언트
│ │ ├── mcpClientSSE.ts # SSE 클라이언트
│ │ └── mcpClientStreamableHttp.ts # Streamable HTTP 클라이언트
│ ├── components/
│ │ ├── McpTest.tsx # 메인 UI 컴포넌트
│ │ └── mcp/
│ │ ├── TransportTabs.tsx # 전송 방식 탭
│ │ ├── ConsoleLog.tsx # 콘솔 로그 표시
│ │ └── transport/
│ │ ├── StdioControls.tsx # Stdio 제어 버튼
│ │ ├── SSEControls.tsx # SSE 제어 버튼
│ │ └── StreamableHttpControls.tsx # HTTP 제어 버튼
│ ├── hooks/
│ │ ├── useTransportLogs.ts # 로그 관리 훅
│ │ └── transport/
│ │ ├── useStdioClient.ts # Stdio 클라이언트 훅
│ │ ├── useSSEClient.ts # SSE 클라이언트 훅
│ │ └── useStreamableHttpClient.ts # HTTP 클라이언트 훅
│ ├── types/
│ │ ├── mcp.ts # MCP 타입 정의
│ │ └── jsonrpc.ts # JSON-RPC 타입 정의
│ └── server/
│ └── mcp_server.py # Python MCP 서버 (3가지 모드)
└── package.json
interface JsonRpcRequest {
jsonrpc: "2.0";
id: string | number;
method: string;
params?: {
[key: string]: unknown;
};
}interface JsonRpcResponse {
jsonrpc: "2.0";
id: string | number;
result?: {
[key: string]: unknown;
};
error?: {
code: number;
message: string;
data?: unknown;
};
}- Next.js 16.0.3
- React 19.2.0
- TypeScript 5
- TailwindCSS 4
- UUID v13
- Python 3.6+
- HTTP Server (내장)
- Threading (알림 처리)
-
JsonRpc 타입 수정 금지:
JsonRpcRequest와JsonRpcResponse타입은 표준 스펙이므로 수정하지 마세요. -
로그 독립 관리: 각 탭(통신 방식)별로 로그가 독립적으로 관리됩니다.
-
Node.js API 필요: stdio 통신을 브라우저에서 사용하려면 별도의 Node.js API 서버를 구축해야 합니다.
-
Python 서버 동시 실행: 모든 통신 방식을 테스트하려면 3개의 Python 서버를 동시에 실행해야 합니다.
# 개발 서버 실행
yarn dev
# 프로덕션 빌드
yarn build
# 프로덕션 서버 실행
yarn start
# Python 서버 실행
yarn server:stdio # Stdio 서버
yarn server:sse # SSE 서버
yarn server:http # HTTP 서버Python 서버는 이미 CORS 헤더를 포함하고 있습니다. 문제가 지속되면 브라우저 확장 프로그램을 확인하세요.
- Python 서버가 실행 중인지 확인
- 올바른 포트를 사용하는지 확인 (SSE: 8001, HTTP: 8002)
- 방화벽 설정 확인
stdio는 브라우저에서 직접 테스트할 수 없습니다. Node.js 환경에서 별도로 테스트하거나, API 서버를 구축해야 합니다.
MIT