MCP 서버에서 대화형 UI를 제공하는 표준화된 방법
MCP Apps는 MCP 서버가 대화형 UI 요소를 표시할 수 있도록 하는 표준 제안임
차트, 양식, 비디오 플레이어 등 대화형 UI가 필요한 경우에 유용함
SDK는 앱 개발자와 호스트 개발자 모두를 위한 기능을 제공함
React 훅(Hooks)을 포함하여 앱 개발을 지원하며, 샌드박스(Sandbox) 환경에서 UI를 렌더링함
MCP Apps의 핵심 개념
MCP Apps는 MCP 서버가 대화형 UI를 제공하기 위한 표준을 제시하며, MCP-UI 및 OpenAI의 Apps SDK에서 영감을 받았다. 도구 정의(Tool Definition), 도구 호출(Tool Call), 호스트 렌더링(Host Rendering), 양방향 통신(Bidirectional Communication)의 4단계로 작동한다. 이를 통해 LLM은 도구를 호출하고, 호스트는 샌드박스(Sandbox) 환경에서 UI를 렌더링하며, UI와 호스트 간의 데이터 교환이 가능하다.
SDK의 역할 및 구성
SDK는 앱 개발자와 호스트 개발자를 위한 두 가지 주요 구성 요소를 제공한다. 앱 개발자는 `@modelcontextprotocol/ext-apps` SDK와 `@modelcontextprotocol/ext-apps/react` React 훅을 사용하여 대화형 UI를 구축할 수 있다. 호스트 개발자는 `@modelcontextprotocol/ext-apps/app-bridge` SDK를 사용하여 MCP Apps를 자신의 채팅 애플리케이션에 통합할 수 있다. API 문서(API Docs)를 통해 자세한 사용법을 확인할 수 있다.
Agent Skills를 활용한 확장성
이 저장소는 MCP Apps를 구축하기 위한 두 가지 Agent Skills를 제공하며, Claude Code 플러그인으로 설치할 수 있다. Agent Skills는 AI 코딩 에이전트 내에서 MCP Apps를 쉽게 사용할 수 있도록 지원한다. Agent Skills 가이드(Agent Skills Guide)를 통해 AI 코딩 에이전트에서 스킬을 설치하는 방법에 대한 자세한 정보를 얻을 수 있다.
예제를 통한 실용적인 활용
예제 디렉토리(`examples/`)는 실제 사용 사례를 보여주는 데모 앱을 포함하고 있다. Map, Three.js, ShaderToy, Sheet Music 등 다양한 예제를 통해 MCP Apps의 활용 방법을 확인할 수 있다. 각 예제는 CesiumJS, Three.js, GLSL, ABC notation과 같은 기술을 사용하여 대화형 UI를 구현한다. 이를 통해 개발자는 MCP Apps를 다양한 프로젝트에 적용하는 방법을 배울 수 있다.
