modelcontextprotocol/ext-apps

해결하는 문제

MCP Apps는 AI 도구에서 단순한 텍스트나 구조화된 데이터 응답을 넘어서는 개발자들의 가능성을 제공합니다. 이는 차트, 양식, 대시보드, 디자인 캔버스와 같은 인터랙티브 사용자 인터페이스를 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 글로브 뷰어, 실시간 GLSL 색상 렌더러, 고객 유지율 히트맵, PDF 뷰어 등 다양한 데모 앱이 포함되어 있습니다.