무료 툴 같은 플레이그라운드로 MCP 서버 테스트 - 설정 필요 없음

Source: Dev.to

최근에 Model Context Protocol (MCP) 로 빌드하고 있다면, 그 고통을 잘 알 겁니다:

• “내 MCP 서버가 실제로 작동하고 있나요?”
• “도구를 올바르게 구현했나요?”
• “Claude Desktop이 내 도구를 인식하지 않는 이유는?”

결국 커스텀 테스트 스크립트를 작성하고, 로그를 파헤치며, curl 로 JSON‑RPC 요청을 수동으로 만들게 됩니다. 번거롭죠.

그래서 저는 MCP Playground Online 를 만들었습니다 – Postman이 REST API 개발을 바꾼 것처럼, MCP 서버를 테스트하고 디버깅할 수 있는 무료 브라우저 기반 도구입니다.

MCP란 실제로 무엇인가?

Model Context Protocol (MCP) 은 AI 모델이 외부 도구, API, 데이터 소스와 구조화된 방식으로 연결될 수 있게 해 주는 오픈 표준입니다. MCP를 AI 시스템과 현실 세계 기능 사이의 범용 어댑터라고 생각하면 됩니다:

Claude / ChatGPT / Gemini / Other LLM
        │
        │  MCP Protocol
        ▼
     MCP Server
        │
        ▼
External Systems
(GitHub • Slack • Databases • APIs • Files • etc.)

MCP 서버는 일반적으로 다음을 노출합니다:

• Tools – AI가 호출할 수 있는 함수들 (예: search_github, send_email)
• Resources – AI가 읽을 수 있는 데이터 (예: 파일, 데이터베이스 레코드)
• Prompts – 재사용 가능한 프롬프트 템플릿

내부적으로 MCP는 JSON‑RPC 2.0을 사용합니다. 이는 강력하지만 수동으로 테스트하기는 그리 재미있지는 않습니다.

MCP Playground Online이 하는 일

✅ 1. 서버 테스트 (Postman 스타일)

• MCP 서버 URL을 붙여넣고 연결합니다.
• 입력 스키마, 리소스, 프롬프트 템플릿이 포함된 모든 사용 가능한 도구를 즉시 확인할 수 있습니다.
• JSON 편집기를 사용해 UI에서 직접 도구를 실행합니다 – 스크립트나 CLI가 필요 없습니다.

✅ 2. 세 가지 전송 방식 지원

전송 방식을 전환하려면 클릭 한 번이면 됩니다 – 별도 재설정이 필요 없습니다.

✅ 3. 인증 지원

MCP 서버에 인증이 필요하면 토큰을 붙여넣기만 하면 됩니다.

• HTTP: Authorization: Bearer <token>
• SSE / WebSocket: 쿼리 파라미터 토큰 (브라우저 제한 회피)

✅ 4. MCP 서버 디렉터리

MCP가 처음인가요? 실제 MCP 서버들의 선별된 디렉터리를 탐색해 보세요. 포함된 통합 예시:

• GitHub
• Slack
• PostgreSQL
• Stripe
• Cloudflare

✅ 5. 프롬프트 라이브러리

일반적인 MCP 워크플로에 사용할 수 있는 재사용 가능한 프롬프트를 지속적으로 모아놓은 컬렉션 – 빠른 실험에 유용합니다.

빠른 데모: 첫 번째 MCP 서버 테스트

1. 열기 https://mcpplaygroundonline.com
2. 붙여넣기 your server URL, e.g. https://your-mcp-server.com/mcp
3. 선택 transport (HTTP POST for most servers)
4. 클릭 연결 – the UI will list your server’s tools, resources, and prompts
5. 선택 a tool → provide JSON input → 실행

You’ll see the full JSON‑RPC response instantly.

내부 동작 (호기심 많은 분들을 위해)

플레이그라운드는 전송 추상화 레이어를 사용하여 서로 다른 프로토콜이 일관되게 동작하도록 합니다. 간소화된 TypeScript 예시:

import { createTransport } from '@/lib/mcp-transport-client';

const transport = createTransport({
  serverUrl: 'https://api.example.com/mcp',
  authToken: 'Bearer your-token',
  transport: 'http' // or 'sse' or 'websocket'
});

const { capabilities } = await transport.connect();

const response = await transport.sendRequest({
  jsonrpc: '2.0',
  id: 1,
  method: 'tools/call',
  params: {
    name: 'search_github',
    arguments: { query: 'mcp typescript' }
  }
});

await transport.disconnect();