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

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" 시대가 가까워지고 있다는 신호예요.

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

관련 글

AI 에이전트가 추론 시점에 실시간 데이터를 직접 끌어올 수 있게 된 거예요

바이브 코딩은 직관과 즉흥적 요구사항으로 빠르게 구현하는 방식이고, 스펙 코딩은 코드 한 줄 쓰기 전에 문서화와 설계를 먼저 끝내는 방식이에요

루카 과다니노 감독이 메가폰을 잡고 앤드루 가필드가 샘 알트만 역을 맡은 작품인데요