modelcontextprotocol/ext-apps

해결하는 문제

표준 MCP 도구는 일반적으로 텍스트나 구조화된 데이터를 반환하지만, 이는 복잡한 시각화에는 한계가 있습니다. MCP Apps를 사용하면 개발자는 차트, 양식, 대시보드, 디자인 캔버스와 같은 상호작용 가능한 사용자 인터페이스를 구축할 수 있으며, Claude나 ChatGPT와 같은 호환 가능한 AI 채팅 클라이언트 내부에 직접 렌더링할 수 있습니다.

작동 방식

Model Context Protocol (MCP)를 확장하여 도구가 ui:// URI를 사용해 UI 리소스를 선언할 수 있도록 합니다. LLM이 도구를 호출하면 호스트 클라이언트는 관련 HTML 인터페이스를 가져와 사전에 격리된 iframe에 표시합니다. 이를 통해 호스트는 알림을 통해 UI에 데이터를 전달하고, UI는 호스트를 통해 다른 도구를 트리거하는 양방향 통신이 가능해집니다.

대상 사용자

• 앱 개발자: 제공된 SDK와 React 훅을 사용해 상호작용 가능한 뷰를 구축하는 사람.
• 호스트 개발자: 이러한 뷰를 채팅 클라이언트에 통합하는 사람.
• MCP 서버 작성자: UI 메타데이터를 도구에 등록하여 사용자 경험을 향상시키는 사람.

주요 특징

• 광범위한 클라이언트 지원: Claude, ChatGPT, VS Code, Goose, Postman와 호환.
• 에이전트 워크플로우: AI 코딩 에이전트가 MCP 서버에 자동으로 UI를 스텁화, 마이그레이션 또는 추가할 수 있는 "에이전트 기술" 포함.
• 프레임워크 독립성: React, Vue, Svelte, Preact, Solid, Vanilla JS용 스타터 템플릿 제공.
• 풍부한 예제: 3D 글로브 뷰어, 실시간 OS 메트릭스, PDF 뷰어 등 다양한 데모 앱 포함.