피드로 돌아가기
Dev.toFrontend
원문 읽기
2일간 20개 MCP Apps 구축을 통한 UI enrichment 설계 패턴 도출
Lessons from building 20 MCP Apps in 2 days
AI 요약
Context
채팅 기반 인터페이스에서 텍스트 중심 정보 전달의 한계로 인한 가독성 저하 발생. 정형 데이터의 시각적 표현을 위해 MCP spec의 UI resource 확장 기능을 통한 샌드박스 iframe 렌더링 구조 필요.
Technical Solution
- ui:// resource scheme을 통한 UI 코드를 MCP server 내부에 포함하는 서버 사이드 번들링 구조 설계
- Vite 기반의 Multi-page 설정을 통해 TSX 파일당 개별 HTML을 생성하여 개별 리소스 매핑 효율화
- Text response를 기본 계약(Contract)으로 유지하고 UI를 보조적 Enrichment 레이어로 분리하여 클라이언트 호환성 확보
- 외부 API 호출 및 State Machine을 배제하고 Tool 결과값을 Props로 전달받는 Deterministic Pure Component 설계
- 호스트별 렌더링 환경(폭, 패딩, 테마) 차이에 대응하기 위해 초기 단계부터 가변 너비 대응 레이아웃 적용
- 호스트의 iframe 가시성을 고려하여 API Key 등 민감 정보 처리를 외부 보안 폼으로 분리하는 보안 아키텍처 채택
실천 포인트
- [ ] UI 구성 요소를 Pure Component로 설계하여 Props 외 외부 상태 의존성을 제거했는가 - [ ] UI가 없는 환경에서도 텍스트 응답만으로 핵심 정보 전달이 가능한지 검증했는가 - [ ] iframe 내부의 데이터가 호스트에 노출될 수 있음을 인지하고 Secret 정보 포함 여부를 확인했는가 - [ ] 다양한 호스트(ChatGPT, Claude, VS Code 등)의 뷰포트 제약 사항을 고려한 반응형 레이아웃을 적용했는가