콘텐츠로 이동

MCP 앱 (Apps) 개요

인터랙티브 UI 애플리케이션 — Claude Desktop 같은 MCP 호스트 안에서 렌더링됩니다.

팁: 포괄적인 API 문서, 고급 패턴, 전체 스펙은 공식 MCP Apps 문서에서 확인하세요.

텍스트 응답으로는 해결할 수 없는 자리가 있습니다. 데이터를 읽어 보는 것만으로는 부족하고, 직접 만져 봐야 할 때가 있죠. MCP 앱(App)은 서버가 인터랙티브한 HTML 인터페이스(데이터 시각화, 폼, 대시보드)를 반환해서, 그걸 채팅 안에서 바로 렌더링하게 해 주는 기능입니다.

왜 그냥 웹 앱으로 만들지 않을까요?

  • 컨텍스트 보존. 앱이 대화 안에 살아 있습니다. 사용자가 탭을 오가며 맥락을 잃거나, 어느 채팅 스레드에 그 대시보드가 있었는지 헤맬 일이 없어요. 그 UI는 그것을 만들어 낸 논의 바로 옆에 있어요.
  • 양방향 데이터 흐름. 앱은 MCP 서버의 어떤 도구든 호출할 수 있고, 호스트는 새로운 결과를 앱에 밀어 넣을 수 있어요. 독립형 웹 앱이라면 자체 API, 인증, 상태 관리가 필요하겠죠. MCP 앱은 기존 MCP 패턴으로 이걸 해결해요.
  • 호스트 기능과의 통합. 앱은 동작을 호스트에 위임할 수 있고, 호스트는 사용자가 이미 연결해 둔 기능과 도구를 호출해요(사용자 동의가 전제됩니다). 모든 앱이 직접 통합(예: 이메일 제공업체)을 구현하고 유지하는 대신, 앱은 "이 회의를 잡아 줘" 같은 결과를 요청하고, 호스트가 사용자의 기존 연결 기능을 통해 그걸 라우팅해요.
  • 보안 보장. MCP 앱은 호스트가 통제하는 샌드박스 iframe에서 실행돼요. 부모 페이지에 접근하거나, 쿠키를 훔치거나, 컨테이너를 벗어날 수 없어요. 덕분에 호스트는 서버 작성자를 완전히 신뢰하지 않아도 타사 앱을 안전하게 렌더링할 수 있어요.

이런 속성이 필요하지 않다면 일반 웹 앱이 더 단순할 수 있어요. 하지만 LLM 기반 대화와 긴밀하게 통합하려면 MCP 앱이 훨씬 나은 도구예요.

MCP 앱은 어떻게 동작할까요

기존 MCP 도구는 텍스트, 이미지, 리소스, 구조화된 데이터를 반환해서 호스트가 대화의 일부로 표시해요. MCP 앱은 이 패턴을 확장해서, 도구가 자신의 설명 안에 인터랙티브 UI에 대한 참조를 선언하고 호스트가 그 자리에 렌더링하게 해요.

핵심 패턴은 두 가지 MCP 프리미티브를 결합합니다. 설명 안에 UI 리소스를 선언하는 도구(tool) 하나와, 데이터를 인터랙티브 HTML 인터페이스로 렌더링하는 UI 리소스 하나가 그것이에요.

대규모 언어 모델(LLM)이 MCP 앱을 지원하는 도구를 호출하기로 결정하면, 이런 일이 벌어집니다.

  1. UI 사전 로딩(preloading). 도구 설명에 _meta.ui.resourceUri 필드가 있어 ui:// 리소스를 가리켜요. 호스트는 도구가 호출되기 전에 이 리소스를 미리 불러올 수 있고, 그래서 도구 입력을 앱으로 스트리밍하는 같은 기능도 쓸 수 있어요.
  2. 리소스 가져오기(fetch). 호스트가 서버에서 UI 리소스를 가져와요. 이 리소스는 HTML 페이지를 담고 있고, 보통 단순함을 위해 JavaScript와 CSS도 함께 번들돼요. 앱은 _meta.ui.csp에 지정된 오리진에서 외부 스크립트와 리소스도 불러올 수 있어요.
  3. 샌드박스 렌더링. 웹 호스트는 보통 대화 안의 샌드박스 iframe 안에 HTML을 렌더링해요. 샌드박스는 부모 페이지에 대한 앱의 접근을 제한해서 보안을 지켜 줘요. 리소스의 _meta.ui 객체에는 추가 기능(예: 마이크, 카메라)을 요청하는 permissions와, 앱이 리소스를 불러올 수 있는 외부 오리진을 통제하는 csp를 담을 수 있어요.
  4. 양방향 통신. 앱과 호스트는 MCP의 한 방언(dialect)을 이루는 JSON-RPC 프로토콜로 소통해요. 일부 요청·알림은 핵심 MCP 프로토콜과 공유되고(예: tools/call), 일부는 비슷하며(예: ui/initialize), 대부분은 ui/ 메서드 이름 접두사를 가진 새것이에요. 앱은 도구 호출을 요청하고, 메시지를 보내고, 모델의 컨텍스트를 갱신하고, 호스트로부터 데이터를 받을 수 있어요.

MCP 앱은 언제 쓸까요

MCP 앱은 이런 용도에 잘 맞아요.

복잡한 데이터 탐색. 사용자가 "지역별 매출을 보여 줘"라고 물었을 때, 텍스트 응답은 숫자를 늘어놓겠지만 MCP 앱은 인터랙티브 맵을 렌더링해서 어떤 프롬프트도 없이 지역을 클릭해 드릴다운하고, 호버로 세부 정보를 보고, 지표를 전환하게 해 줘요.

선택지가 많은 설정. 배포를 설정하는 일은 수십 개의 서로 의존하는 선택을 요구해요. "어느 지역?" "어느 인스턴스 크기?" "오토스케일링 켤까?" 같은 일문일답 대신, MCP 앱은 모든 선택지를 한 번에 보여 주는 폼을 제시해요. 검증과 기본값도 함께요.

풍부한 미디어 보기. 사용자가 PDF를 검토하거나 3D 모델을 보거나 생성된 이미지를 미리 보려 할 때, 텍스트 설명으로는 부족해요. MCP 앱은 실제 뷰어(팬, 줌, 회전)를 대화 안에 직접 임베드해요.

실시간 모니터링. 실시간 지표, 로그, 시스템 상태를 보여 주는 대시보드는 지속적인 갱신이 필요해요. MCP 앱은 영구 연결을 유지해서, 사용자가 "지금 상태는?" 하고 묻지 않아도 데이터가 변하면 표시를 갱신해요.

다단계 워크플로. 비용 보고서 승인, 코드 변경 검토, 이슈 분류는 항목을 하나씩 살펴보는 작업이에요. MCP 앱은 상호작용을 가로지르며 유지되는 탐색 컨트롤, 동작 버튼, 상태를 제공해요.

보안 모델

MCP 앱은 샌드박스 iframe 안에서 실행돼서, 호스트 애플리케이션과 강하게 격리돼요. 샌드박스는 앱이 부모 창의 DOM에 접근하거나, 호스트의 쿠키·로컬 스토리지를 읽거나, 부모 페이지를 탐색하거나, 부모 컨텍스트에서 스크립트를 실행하는 것을 막아 줘요.

앱과 호스트 사이의 모든 통신은 postMessage API를 거쳐요. 호스트는 앱이 접근할 수 있는 기능을 통제해요. 예를 들어 호스트는 앱이 호출할 수 있는 도구를 제한하거나 sendOpenLink 기능을 비활성화할 수 있어요.

프레임워크 지원

MCP 앱은 핵심 프로토콜처럼 JSON-RPC 위에 만들어진 MCP만의 방언을 써요. 일부 메시지는 일반 MCP와 공유되고(예: tools/call), 다른 것들은 앱 고유예요(예: ui/initialize). 전송(transport)은 stdio나 HTTP 대신 postMessage를 사용해요.

전부 표준 웹 프리미티브라서 어떤 프레임워크를 써도, 아예 안 써도 괜찮아요. @modelcontextprotocol/ext-apps의 App 클래스는 편의 래퍼일 뿐 필수가 아니에요. 의존성을 피하거나 더 세밀한 통제가 필요하다면 postMessage 프로토콜을 직접 구현해도 돼요. examples 디렉터리에는 React, Vue, Svelte, Preact, Solid, 바닐라 JavaScript용 스타터 템플릿이 있어요. 각 프레임워크 계열의 권장 패턴을 보여 주지만, 예시일 뿐 필수는 아니에요.

클라이언트 지원

참고: MCP 앱은 핵심 MCP 스펙의 확장입니다. 호스트 지원은 클라이언트마다 다릅니다.

MCP 앱은 현재 Claude와 Claude Desktop에서 지원돼요. 클라이언트별 전체 확장 지원 목록은 클라이언트 매트릭스에서 확인하세요.

호스트 애플리케이션에 MCP 앱을 통합하는 두 가지 경로가 있어요.

  1. 프레임워크 사용. @mcp-ui/client 패키지는 호스트 애플리케이션에서 MCP 앱 뷰를 렌더링하고 상호작용하는 React 컴포넌트를 제공해요. 사용법은 MCP-UI 문서를 보세요.
  2. AppBridge 기반 구축. SDK에는 App Bridge 모듈이 있어서, 샌드박스 iframe에서 앱 렌더링, 메시지 전달, 도구 호출 프록시, 보안 정책 적용을 처리해요. basic-host 예시를 참고하세요.

구현 세부 사항은 API 문서에서 확인할 수 있어요.

예시

ext-apps 저장소에는 다양한 용도를 보여 주는 바로 실행 가능한 예시가 있어요.

직접 MCP 앱을 만들려면 빌드 가이드를 참고하세요.