modelcontextprotocol/ext-apps
MCP 도구에 인터랙티브 UI(차트, 폼, 대시보드)를 빌드하고 Claude·ChatGPT 등 채팅 클라이언트에서 인라인 렌더링하는 SDK
2,515+30이번 주0 찜
325포크93이슈
중간맛 분석
스택: TypeScript + Node.js + React/Vue/Svelte 등 프론트엔드 자유 선택 | 난이도: 중간~고급(MCP 기본 이해 필수) | 바로 쓸 수 있나: 예, 패키지로 설치 후 Quickstart 따라 20분 내 첫 앱 구동 가능 | 데모: 지도(Cesium)·3D(Three.js)·시트 악보·위키 탐색·대시보드·PDF 뷰어·QR코드 생성 등 15+ 예제 포함, npm start로 로컬 실행 가능
이런 레포예요
이럴 때 쓰면 좋아요
- ChatGPT·Claude 안에서 대화형 대시보드·분석 도구를 구동할 때
- MCP 서버의 도구 결과물을 시각적·인터랙티브하게 표현해야 할 때
- AI 채팅 클라이언트에서 폼·차트·3D 뷰어·설계 캔버스 같은 풍부한 UI를 제공하고 싶을 때
핵심 기능
PostMessage 기반 양방향 통신으로 UI와 호스트 간 데이터·도구 호출 연동React·Vue·Svelte·Preact·Solid·Vanilla JS 등 프론트엔드 프레임워크 자유 선택Claude·ChatGPT·VS Code·Goose·Postman 등 다중 MCP 클라이언트 호스트 지원Agent Skills로 AI 에이전트가 자동 앱 생성·마이그레이션·UI 추가 지원
대안 대비 차별점
OpenAI Apps SDK(ChatGPT 전용)나 Slack BlockKit(메시징 한정) 대비, MCP Apps는 표준화된 오픈 프로토콜 기반으로 다양한 채팅 클라이언트와 IDE 전반에서 인터랙티브 UI를 일관되게 제공합니다.
준비물
- Node.js 기본 이해
- MCP(Model Context Protocol) 개념 이해
- HTML/CSS/JavaScript 또는 React·Vue·Svelte 등 프론트엔드 경험
바로 시작하기
- MCP Apps SDK 설치
npm install -S @modelcontextprotocol/ext-apps
- 예제 클론 및 의존성 설치
git clone https://github.com/modelcontextprotocol/ext-apps.git
cd ext-apps
npm install
- 모든 예제 빌드 및 로컬 호스트 실행
npm start
- 브라우저에서 http://localhost:8080/ 접속하여 15+ 예제 앱 확인
또는 개별 예제 서버 실행 (Node.js):
npx -y @modelcontextprotocol/server-map --stdio
MCP 클라이언트에 추가 (Claude Desktop 등):
{
"mcpServers": {
"map": {
"command": "npx",
"args": ["-y", "@modelcontextprotocol/server-map", "--stdio"]
}
}
}
별 추이 · 7일
2,515+30 / 7일
활용성 · 따라 만들기 좋은가
베스트 샘플샘플 점수 60/100
- 관대한 라이선스
- 테스트 있음
- 예제 디렉토리
- 최근 활동
- AGENTS.md
- llms.txt
- 템플릿
🟢 최근 활동 있음 · 2025년 생성
이 레포에 깃밥 배지 달기
[](https://www.gitbap.com/r/modelcontextprotocol/ext-apps)🔌 클로드에서 바로 써보기
깃밥을 클로드에 연결하면 이런 레포를 클로드·커서·Codex에서 바로 찾고 체험할 수 있어요.
방법 ① 커넥터 URL
클로드 설정 → 커넥터에 이 주소를 붙여넣기.
https://www.gitbap.com/api/mcp방법 ② 플러그인 (체험까지)
플러그인을 설치하면 /gitbap-trending·/gitbap-try 슬래시 커맨드로 레포를 그 자리에서 체험. Claude Code에서 아래 두 줄을 차례로 실행하세요.
/plugin marketplace add jakeparkcolde/gitbap-cowork/plugin install gitbap-cowork@gitbapAI가 README 기반으로 요약했습니다 · 원문 보기