MCP-UI-Org/mcp-ui

해결하는 문제

mcp-ui는 Model Context Protocol (MCP)을 사용하여 AI 도구에 대한 대화형 웹 인터페이스를 제공하는 표준화된 방법을 제공합니다. 이는 AI 에이전트가 텍스트 전용 응답으로 제한되는 문제를 해결하며, 서버가 도구를 풍부하고 샌드박스화된 UI 구성 요소에 연결하여 호환되는 호스트에서 렌더링할 수 있도록 합니다.

작동 방식

이 프로젝트는 MCP Apps 표준을 구현하며, _meta.ui.resourceUri를 통해 도구와 UI를 연결합니다.

• 서버 측: 개발자는 SDK(TypeScript, Python, Ruby 지원)를 사용하여 UI 리소스(원시 HTML 또는 외부 URL 등)를 생성하고 등록합니다. 도구가 호출되면 서버는 호스트가 UI 콘텐츠를 가져오는 데 사용할 수 있는 URI를 제공합니다.
• 클라이언트 측: 호스트는 @mcp-ui/client SDK를 사용하여 AppRenderer 또는 UIResourceRenderer와 같은 구성 요소로 이러한 리소스를 렌더링하며, 보안을 위해 원격 코드는 샌드박스화된 <iframe> 내에서 실행됩니다.
• 상호 작용: UI 구성 요소는 postMessage 프로토콜을 통해 에이전트와 통신할 수 있으며, UI의 버튼이나 입력이 호스트에서 도구 호출이나 기타 작업을 트리거할 수 있습니다.
• 어댑터: 플랫폼별 어댑터는 개방형 MCP-UI 프로토콜을 호스트별 API(예: ChatGPT의 Apps SDK)로 변환합니다.

대상 사용자

• MCP 서버 개발자: AI 에이전트용 도구를 구축하면서 텍스트뿐만 아니라 시각적이고 대화형인 경험을 제공하려는 개발자.
• MCP 호스트 개발자: 타사 도구 UI를 렌더링하기 위한 표준화된 방법이 필요한 AI 채팅 인터페이스나 IDE를 구축하는 개발자.

주요 특징

• 다국어 지원: TypeScript, Python, Ruby용 서버 측 SDK 제공.
• 보안 우선: 모든 원격 UI 콘텐츠는 샌드박스화된 iframe 내에서 실행됨.
• 표준화: MCP Apps 사양을 완벽하게 준수.
• 크로스 플랫폼: 다양한 AI 호스트(Claude, ChatGPT, Goose 등)에서 위젯이 작동하도록 보장하는 어댑터 포함.
• 유연한 렌더링: 원시 HTML, 외부 URL 및 Remote-DOM 지원.