Web 클라이언트

Web 클라이언트 (Web client)

그래픽 MCP Inspector의 탭별 둘러보기예요. Web 클라이언트는 Inspector의 가장 풍부한 표면으로, 실제 MCP 연결을 소유하는 작은 Node 서버가 뒷받침하는 단일 페이지 앱입니다.

출처: 문서

본문

Web 클라이언트는 Inspector의 가장 풍부한 표면이에요. 실제 MCP 연결을 소유하는 작은 Node 서버가 뒷받침하는 단일 페이지 앱이죠. 기본 모드라서 모드 플래그 없이 npx @modelcontextprotocol/inspector를 실행하면 여기에 도착합니다.

npx @modelcontextprotocol/inspector                       # empty, add servers in the UI
npx @modelcontextprotocol/inspector node build/index.js   # with an ad-hoc stdio server
npx @modelcontextprotocol/inspector --catalog ./mcp.json  # with a catalog file

세션 토큰 (The session token)

Web 클라이언트 뒤의 Node 서버는 머신에서 프로세스를 실행할 수 있기 때문에, 모든 /api/* 경로를 실행할 때마다 생성되는 토큰으로 보호해요. 런처는 그 토큰이 포함된 URL을 출력합니다. 그 URL을 열고, 기억에서 localhost:6274를 직접 입력하지 마세요.

브라우저는 토큰을 우선순위 순서대로 세 곳에서 복구해요.

1. 매 페이지 로드 때마다 index.html에 주입되는 window.__INSPECTOR_API_TOKEN__. 이것이 맨 URL 재로드나 북마크가 계속 동작하게 하는 이유예요.
2. 그 출력 URL에 사용되는 ?MCP_INSPECTOR_API_TOKEN=... 쿼리 문자열.
3. 백스톱 역할의 sessionStorage.

MCP_INSPECTOR_API_TOKEN 환경 변수를 설정하면 알려진 토큰을 고정할 수 있고(스크립트 실행에 유용), DANGEROUSLY_OMIT_AUTH=true로 검사를 완전히 끌 수도 있지만, 그 포트에 다른 어떤 것도 도달할 수 없는 머신에서만 하세요. 둘 다 Web 백엔드 환경 변수에 설명돼 있어요.

개발 모드 (Dev mode)

--dev는 web 전용 플래그예요. 사전 빌드된 번들을 서빙하는 대신 Vite 개발 서버를 실행하는데, Inspector 자체를 작업할 때 중요합니다.

mcp-inspector --web --dev

프로덕션 --web은 빌드된 번들을 서빙해요. 게시된 패키지에는 그 번들이 항상 들어 있지만, 새 소스 체크아웃에는 없어서 러너가 처음 실행할 때 필요 시 빌드합니다.

탭 바 (The tab bar)

Network와 Console은 함께 나타나지 않아요. 레거시와 현대 시대는 프로토콜 시대에 설명되어 있습니다.

모니터링 사이드바

Tasks, Logs, Protocol, Network, Console은 모니터 그룹을 형성해요. 그룹을 고정하면 탭 바에서 떨어져 크기 조정 가능한 오른쪽 열로 이동해서, Tools나 Resources에서 작업하면서 트래픽을 관찰할 수 있어요. 열 너비와 선택된 모니터 탭은 재로드 후에도 유지됩니다.

Servers

Servers 화면은 진입점이에요. 서버 행은 전송, 연결 상태, 서버별 설정을 여는 컨트롤을 담고 있어요.

그 목록이 어디에서 오는지, 그리고 편집 가능한지 여부는 실행 방식에 따라 달라집니다.

첫 실행 시 Web 클라이언트는 카탈로그를 두 개의 샘플 서버로 시드합니다. /tmp로 범위가 한정된 파일시스템 서버와 표준 "everything" 참조 서버죠. CLI와 TUI가 대신 빈 카탈로그를 시드하는 이유를 포함한 전체 규칙은 구성과 플래그를 참고하세요.

Server Settings

• Protocol Era: legacy / auto / modern. 프로토콜 시대 참고.
• Log level per request: 현대 시대 연결이 각 나가는 요청에 기본적으로 찍는 수준, 또는 off로 선택 해제(로그 참고).
• Advertised Extensions: Inspector가 capabilities.extensions에서 선언하는 확장들. 디버깅 손잡이예요. 서버는 여러분이 광고하는 것에 따라 등록 내용을 정당하게 바꿀 수 있어요. Tasks 확장을 해제하고 test-servers/configs/advertised-extensions-http.json 픽스처에 다시 연결하면(각 시대를 로컬에서 재현에서 설정) 도구가 사라지는 것을 볼 수 있어요.
• Roots: roots 클라이언트 기능을 통해 광고되는 루트. 예를 들어 @modelcontextprotocol/server-filesystem은 roots/list를 호출해 허용된 디렉터리를 배워요.
• Headers, timeouts, OAuth 필드.
• Fetch lists one page at a time: 꺼져 있으면 목록 결과가 연결 시 페이지 전반에서 자동 집계돼요. 켜져 있으면 각 목록이 페이지 1만 로드하며 Load next page 컨트롤과 N pages loaded 상태를 보여 줘요. 12개의 도구·리소스·프롬프트를 각각 세 페이지로 페이지네이션하는 test-servers/configs/pagination-http.json으로 재현할 수 있어요.

Tools

도구를 선택하면 설명, 폼으로 렌더링된 입력 스키마, 어노테이션을 볼 수 있어요. 폼을 채우고 호출하면 결과가 구조화된 콘텐츠, 포함 리소스, 이미지를 기본적으로 처리해 아래에 렌더링됩니다.

현대 시대 서버에서 이 화면은 미러링된 Mcp-Param-* 헤더, 제외된 도구, 별도의 -32602 오류 패널도 보여 주는데, 모두 프로토콜 시대에서 다룹니다.

Resources

리소스와 리소스 템플릿을 MIME 타입과 설명과 함께 나열하고, 선택 시 내용을 읽으며, 구독을 지원하는 서버에는 Subscribe를 제공해요. 구독 메커니즘은 시대별로 다릅니다. 리소스 구독을 참고하세요.

Prompts

프롬프트 템플릿을 인수와 함께 나열하고, 사용자가 제공한 인수에 대해 생성된 메시지를 렌더링해요. 이것이 프롬프트가 의도한 대로 산출되는지 확인하는 가장 빠른 방법입니다.

Apps

MCP Apps는 UI를 지닌 도구예요. Apps 탭은 별도 포트에서 서빙되는 샌드박스 iframe 안에서 하나를 렌더링하고, ui/* 브리지를 실행하며, 뷰의 ui/message 제출과 notifications/message 로그를 사이드 패널에 보여 줍니다.

• 샌드박스 포트는 기본적으로 동적이에요. 노출하거나 포워딩해야 한다면 MCP_SANDBOX_PORT로 고정하세요.
• 샌드박스는 frame-ancestors CSP로 게이트되고, 대괄호 IPv6 리터럴은 유효한 CSP 호스트 소스가 아니므로, Inspector를 localhost, 127.0.0.1, 호스트 이름, 또는 LAN IPv4에서 탐색하세요. 맨 http://[::1]:...에서는 안 됩니다.
• 샌드박스 URL은 항상 일반 http라서, https:// Inspector 페이지는 혼합 콘텐츠로 프레임을 차단해요. MCP Apps는 오늘날 일반 http 오리진이 필요합니다.

CLI 우선 자동 검토 흐름은 레시피를 참고하세요.

Protocol, Network, Console

세 탭은 같은 트래픽을 서로 다른 상세 수준으로 보여 줍니다.

• Protocol: JSON-RPC 기록. 응답과 쌍을 이룬 요청, 인라인 알림, MRTR 라운드를 하나의 대화로 그룹화하고, 사양 오류를 클래스별로 렌더링해요.
• Network: SSE와 Streamable HTTP 서버를 위한 HTTP 계층. 상태 코드, 요청·응답 헤더, 본문. 현대 연결에서는 표준화된 Mcp-* 헤더가 강조되고 센티널 값이 디코딩돼요.
• Console: 연결된 stdio 서버 프로세스의 stderr. 대부분의 stdio 서버가 자체 진단을 두는 곳이죠.

이 보기들에서 비밀은 마스킹되며, 항목은 지우거나 내보낼 수 있어요.

딥 링크 (Deep links)

드라이버(스크립트, CI 하네스, 또는 CLI의 --print-handoff)는 단일 내비게이션으로 연결된 Inspector에 도달할 수 있어요.

http://127.0.0.1:6274/?serverUrl=<url>&transport=http|sse&autoConnect=<token>

세 개의 추가 매개변수는 렌더링된 앱에 도달하게 해줘요. openApp=<toolName>은 도구를 이름 짓고, appArgs=<base64url(JSON)>은 인수를 제공하며(도구의 스키마 기본값 위에 병합), autoOpen=<token>은 도구 호출을 자동으로 실행합니다. autoOpen은 호출을 실행하므로 autoConnect와 같은 필수 토큰 게이트를 지닙니다.

호스트 바인딩과 오리진

기본적으로 Inspector는 localhost에 바인딩하고 그 포트의 루프백 오리진에서만 요청을 받아들여요. 백엔드가 머신에서 프로세스를 실행하므로 두 기본값 모두 보안 경계로 취급하세요.

모든 인터페이스에 바인딩(HOST=0.0.0.0)은 DANGEROUSLY_BIND_ALL_INTERFACES=true를 설정하지 않는 한 거부됩니다. 특정 비루프백 주소에 바인딩하는 것은 한 번에 모든 인터페이스가 아니라 단일 의도적 노출이므로, 옵트인 없이 허용됩니다.

전체 매트릭스는 네트워크에서 호스팅하기 레시피와, 변수는 구성을 참고하세요.

더 알아보기 (Learn more)

• MCP Inspector
• 프로토콜 시대
• 인증
• 디버깅