MCP(Model Context Protocol) 서버를 NestJS로 구현해서 AI 채팅창 안에 인터랙티브 UI를 띄우는 방식이에요

ChatGPT와 Claude 안에서 React 앱을 직접 렌더링하는 새로운 아키텍처가 제안됐어요.

MCP(Model Context Protocol) 서버를 NestJS로 구현해서 AI 채팅창 안에 인터랙티브 UI를 띄우는 방식이에요. ui:// 리소스로 index.html을 전달하면 iframe 안에서 React 앱이 돌아가거든요.

기존 방식의 문제는 "Toggle Tax"라는 개념으로 설명돼요. 2022년 하버드 비즈니스 리뷰 연구에 따르면 평균 직장인은 하루 1,200번 앱을 전환하고, 연간 생산성의 9%를 여기에 쏟아붓는다고 해요. AI가 "이 링크 클릭하세요"라고 안내하는 순간 사용자는 맥락을 잃고 이탈하는 거예요.

AI 에이전트가 단순 텍스트 답변을 넘어 복잡한 UI까지 직접 서빙하는 "에이전틱 UI" 시대가 가까워지고 있다는 신호예요.