MCP Apps - Bringing UI Capabilities To MCP Clients
핵심 포인트
- 1MCP Apps는 도구가 대화 내에서 대화형 UI 구성 요소(예: 대시보드, 양식, 시각화)를 직접 렌더링할 수 있도록 하여, 기존의 텍스트 기반 상호작용의 한계를 뛰어넘는 새로운 공식 MCP 확장 기능입니다.
- 2이는 도구가 특정 UI 리소스 URI를 선언하면 호스트가 이를 샌드박스된 iframe에 표시하고, `@modelcontextprotocol/ext-apps` SDK를 통해 UI와 호스트 간의 양방향 통신 및 강력한 보안을 지원하는 방식으로 작동합니다.
- 3MCP-UI 및 OpenAI Apps SDK의 선구적인 작업을 표준화한 결과물인 MCP Apps는 Claude, ChatGPT, VS Code 등 주요 클라이언트에서 지원되어, 개발자들이 다양한 플랫폼에서 작동하는 풍부하고 상호작용적인 에이전트 경험을 구축할 수 있게 합니다.
MCP Apps는 공식적인 Model Context Protocol (MCP) 확장으로, 현재 정식 출시되어 개발자가 대화 내에서 직접 interactive UI 컴포넌트(예: 대시보드, 폼, 시각화, 다단계 워크플로우)를 렌더링할 수 있도록 합니다. 이는 기존 MCP-UI 및 OpenAI Apps SDK의 성과를 기반으로 구축된 첫 번째 공식 MCP 확장이며, ChatGPT, Claude, Goose, Visual Studio Code 등 다수의 클라이언트에서 이미 지원되고 있습니다.
MCP Apps의 핵심 기능은 툴이 단순 텍스트 대신 풍부하고 상호작용적인 인터페이스를 반환할 수 있도록 하는 것입니다. 예를 들어, 데이터 탐색을 위한 interactive 대시보드, 의존성 필드가 있는 설정 마법사, 하이라이트된 조항이 있는 문서 검토 PDF, 실시간 지표를 보여주는 서버 모니터링 툴 등이 가능합니다. 이러한 기능은 텍스트 교환으로는 불가능하거나 매끄럽지 않은 상호작용을 가능하게 합니다.
MCP Apps의 작동 방식은 두 가지 주요 MCP primitives에 의존합니다:
Tools with UI metadata: 툴 정의에_meta.ui.resourceUri필드를 포함하여 UI 리소스의 URI를 지정합니다. 예를 들어:
{
"name": "visualize_data",
"description": "Visualize data as an interactive chart",
"inputSchema": { /* ... */ },
"_meta": {
"ui": {
"resourceUri": "ui://charts/interactive"
}
}
}UI Resources:ui://scheme를 통해 서비스되는 서버-사이드 리소스로, 번들된 HTML/JavaScript 코드를 포함합니다.
호스트(클라이언트)는 지정된 resourceUri를 통해 UI 리소스를 가져와 sandboxed iframe 내에 렌더링합니다. iframe은 엄격한 권한으로 격리됩니다. 호스트와 UI 간의 양방향 통신은 postMessage를 통한 JSON-RPC 메커니즘을 통해 이루어집니다. 이는 UI가 호스트로부터 툴 결과를 수신하고, UI 내부에서 서버 툴을 호출하며, 사용자 상호작용에 따라 모델의 context를 업데이트할 수 있도록 합니다.
개발자는 @modelcontextprotocol/ext-apps 패키지의 App 클래스를 사용하여 UI-호스트 간 통신을 구현합니다. 주요 API는 다음과 같습니다:
app.connect(): 호스트와의 연결을 설정합니다.- : 호스트로부터 툴 결과를 수신합니다.
app.callServerTool({ name: "...", arguments: {...} }): UI에서 서버 툴을 호출합니다.app.updateModelContext({ content: [...] }): 모델context를 업데이트하여 사용자 선택과 같은 정보를 제공합니다.
보안 측면에서, MCP Apps는 여러 계층의 보호를 제공합니다. 모든 UI 콘텐츠는 sandboxed iframe에서 실행되며, 호스트는 렌더링 전에 HTML 콘텐츠를 검토할 수 있습니다. 모든 UI-호스트 통신은 로깅 가능한 JSON-RPC를 통해 이루어지며, 호스트는 UI 시작 툴 호출에 대해 명시적 사용자 동의를 요구할 수 있습니다. 이는 의심스러운 동작을 차단할 수 있도록 합니다.
MCP Apps는 모델이 데이터를 요약하는 것을 넘어 사용자가 데이터를 탐색하고, 정렬하고, 필터링하며, 특정 레코드를 클릭할 수 있도록 함으로써, 툴과 사용자 간의 'context gap'을 해소합니다. 텍스트 응답에서 각 상호작용이 새로운 프롬프트를 필요로 했던 것과 달리, MCP Apps는 UI가 실시간 업데이트, 미디어 뷰어, 영구 상태, 직접 조작 등을 처리하며 모델과 사용자가 필요한 모든 context를 단일하고 친숙한 인터페이스에서 얻을 수 있도록 합니다.