IDE 확장, 터미널 CLI, 데스크톱 앱 또는 SDK로 실행되는 오픈소스 자율 코딩 에이전트입니다.
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
npm으로 TypeScript 서버 및 클라이언트 패키지를 설치합니다
npm install @mcp-ui/server @mcp-ui/client - 2
또는 pip으로 Python 서버 SDK를 설치합니다
pip install mcp-ui-server - 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 통계는 매일 갱신됩니다.
관련 프로젝트
터미널에서 실행되며 클라우드 API와 Ollama 같은 로컬 모델 백엔드를 지원하는 오픈소스 코딩 에이전트 CLI입니다.
터미널에서 실행하는 오픈소스 AI 코딩 에이전트로, 데스크톱·웹·에디터·채팅 인터페이스도 제공합니다.
Python, .NET, Java에서 모델·플러그인·벡터 데이터베이스 연동을 통해 AI 에이전트와 멀티 에이전트 시스템을 구축하는 SDK입니다.
LLM 에이전트의 대화와 실행을 Python 및 TypeScript 앱에서 활용할 수 있는 영구적이고 구조화된 메모리로 바꾸는 에이전트 네이티브 메모리 인프라입니다.
LLM 애플리케이션에 표준화된 컨텍스트를 제공하는 Model Context Protocol 서버와 클라이언트를 구축하기 위한 공식 TypeScript SDK입니다.