Repolode
MCP-UI-Org

MCP-UI-Org/mcp-ui

MCP 도구가 반환하고 호스트가 렌더링할 수 있는 대화형 UI 리소스를 만들기 위한 TypeScript, Ruby, Python SDK

스타
5,224
포크
434
열린 이슈
64
마지막 커밋
지난달

어떤 프로젝트인가요?

mcp-ui는 Model Context Protocol(MCP)을 통해 제공되는 도구에 대화형 UI를 연결하는 SDK입니다. 서버가 보통 ui:// URI로 제공되는 HTML UI 리소스를 만들면 MCP 호스트가 이를 가져와 도구 결과 옆에 렌더링하므로, AI 어시스턴트가 텍스트뿐 아니라 위젯도 표시할 수 있습니다.

이 프로젝트는 도구가 _meta.ui.resourceUri를 통해 UI를 연결하는 MCP Apps 패턴을 구현하고, UI 리소스를 도구 응답에 직접 포함하는 레거시 방식도 지원합니다. 클라이언트 패키지는 AppRenderer 및 UIResourceRenderer 컴포넌트와 Web Component를 제공합니다. UI 콘텐츠는 샌드박스 처리된 iframe에서 실행되며, 위젯은 onUIAction 및 관련 핸들러를 통해 도구를 호출하거나 호스트에 메시지를 보낼 수 있습니다.

TypeScript(@mcp-ui/server), Ruby(mcp_ui_server), Python(mcp-ui-server)용 서버 헬퍼를 제공합니다. 또한 postMessage 프로토콜을 ChatGPT의 window.openai API로 변환하는 Apps SDK 어댑터도 포함되어 있습니다.

핵심 기능

  • 01MCP 호스트용으로 ui:// URI와 text/html MIME 타입을 사용하는 UI 리소스를 생성합니다
  • 02MCP Apps 패턴을 사용해 _meta.ui.resourceUri로 도구와 UI를 연결합니다
  • 03React AppRenderer 및 UIResourceRenderer 컴포넌트와 Web Component를 제공합니다
  • 04UI 콘텐츠를 샌드박스 처리된 iframe에서 렌더링합니다
  • 05TypeScript, Ruby, Python용 서버 SDK를 지원합니다
  • 06ChatGPT Apps SDK와 연결하는 어댑터를 포함합니다

활용 사례

  • MCP 서버에 양식이나 대시보드 위젯을 추가해 AI 어시스턴트가 표시하도록 합니다
  • 타사 서버의 도구 UI를 렌더링하는 MCP 호스트를 구축합니다
  • 사용자가 클릭하면 도구를 호출하는 대화형 컨트롤을 반환합니다
  • Ruby 또는 Python 백엔드에 MCP 기반 위젯을 통합합니다

빠른 시작

  1. 1

    npm으로 TypeScript 서버 및 클라이언트 패키지를 설치합니다

    npm install @mcp-ui/server @mcp-ui/client
  2. 2

    또는 pip으로 Python 서버 SDK를 설치합니다

    pip install mcp-ui-server
  3. 3

    Getting Started 예제를 따라 UI 리소스를 만들고 _meta.ui.resourceUri를 사용해 도구에 연결합니다

사용 전 알아둘 점

  • 렌더링하려면 MCP Apps 또는 레거시 MCP-UI renderer를 지원하는 호스트가 필요합니다.
  • UI를 표시하려면 AppRenderer에 sandbox proxy URL을 설정해야 합니다.
  • 일부 호스트별 어댑터는 브리지로 제공되며, 호스트가 공개 사양을 채택하면 불필요해질 수 있습니다.

토픽

자주 묻는 질문

mcp-ui은(는) 무엇인가요?
MCP 도구가 반환하고 호스트가 렌더링할 수 있는 대화형 UI 리소스를 만들기 위한 TypeScript, Ruby, Python SDK mcp-ui는 Model Context Protocol(MCP)을 통해 제공되는 도구에 대화형 UI를 연결하는 SDK입니다. 서버가 보통 ui:// URI로 제공되는 HTML UI 리소스를 만들면 MCP 호스트가 이를 가져와 도구 결과 옆에 렌더링하므로, AI 어시스턴트가 텍스트뿐 아니라 위젯도 표시할 수 있습니다.
mcp-ui은(는) 무료로 사용할 수 있나요? 라이선스는 무엇인가요?
mcp-ui은(는) Apache-2.0 라이선스의 오픈소스입니다. 상업용 제품에 사용하기 전에 라이선스 조건을 확인하세요.
mcp-ui은(는) 아직 유지보수되고 있나요?
6개월 이내 업데이트. mcp-ui의 마지막 커밋은 2026년 9월 16일입니다.
mcp-ui은(는) 어디에 사용할 수 있나요?
MCP 서버에 양식이나 대시보드 위젯을 추가해 AI 어시스턴트가 표시하도록 합니다 타사 서버의 도구 UI를 렌더링하는 MCP 호스트를 구축합니다 사용자가 클릭하면 도구를 호출하는 대화형 컨트롤을 반환합니다 Ruby 또는 Python 백엔드에 MCP 기반 위젯을 통합합니다
mcp-ui는 어떻게 설치하나요?
npm으로 TypeScript 서버 및 클라이언트 패키지를 설치합니다: npm install @mcp-ui/server @mcp-ui/client 또는 pip으로 Python 서버 SDK를 설치합니다: pip install mcp-ui-server Getting Started 예제를 따라 UI 리소스를 만들고 _meta.ui.resourceUri를 사용해 도구에 연결합니다
mcp-ui은(는) 어디서 받을 수 있나요?
소스 코드와 설치 방법은 GitHub에 있습니다: https://github.com/MCP-UI-Org/mcp-ui

요약은 프로젝트 README를 바탕으로 AI가 작성했습니다. GitHub 통계는 매일 갱신됩니다.

관련 프로젝트