Generative UI... in Python? — Jeremiah Lowin, Prefect

한 줄 핵심

MCP 앱과 prefab을 통해 Python 개발자가 복잡한 프런트엔드 없이도 MCP 서버에 직접 연결되는 인터랙티브 UI를 만들 수 있고, 나아가 Python DSL을 스트리밍해 생성형 UI까지 구현할 수 있다.

시간별 요약

1. 0:00
   MCP 앱과 에이전트 우회 기존 MCP 도구는 항상 에이전트를 거쳐 결과가 사용자에게 전달되지만, MCP 앱은 HTML/CSS/JavaScript UI를 직접 사용자에게 보내 에이전트를 우회한다. 이 방식은 예약, 좌석 변경, 일정 상호작용처럼 사용자가 직접 조작해야 하는 경험을 가능하게 하며, 향후 에이전트가 앱 자체와 상호작용하는 확장도 예고된다.
2. 3:20
   Python 엔지니어에게 UI를 배포하기 대상 사용자가 대부분 Python 엔지니어이기 때문에 React를 강제로 얹는 방식은 현실적이지 않으며, 기존 프런트엔드 생태계를 Python에 억지로 통합하는 접근도 피해야 한다. 대신 조직 내부에서 정보 공유와 수집에 필요한 실용적인 UI를 제공하는 쪽으로 문제를 재정의한다.
3. 4:45
   표, 폼, 차트로 문제를 좁히기 UI 요구를 표, 폼, 차트 같은 제한된 범주로 좁히면 범용 프런트엔드를 새로 만드는 대신 목적에 맞는 scoped UI 프레임워크를 설계할 수 있다. prefab은 이런 범위에서 Python만으로 UI를 조합할 수 있게 해 주며, Hello world 카드도 전부 Python 코드로 생성된다.
4. 5:43
   프런트엔드를 만드는 대신 조합하기 핵심은 프런트엔드를 처음부터 구축하는 것이 아니라 잘 설계된 컴포넌트를 조합해 완성하는 것이다. 이렇게 하면 구조가 코드에 드러나고, 사용자는 임의의 UI가 아니라 정돈된 화면을 빠르게 제공받을 수 있다.
5. 6:37
   DSL과 그 사이의 JSON prefab은 context manager 기반의 Python DSL로 UI를 선언적으로 구성하고, 이를 JSON 프로토콜로 직렬화한 뒤 React 앱에서 렌더링한다. 여기서 핵심은 Python이 아니라 JSON이라는 중간 표현이며, 이 덕분에 에이전트와 사람이 같은 UI 표현을 생성·수정·전송할 수 있고, reactive 변수로 클라이언트 상호작용도 구현된다.
6. 8:54
   문서를 문서화 대상 안에서 렌더링하기 prefab의 문서는 prefab 자체로 렌더링되며, 문서의 예제 코드는 라이브로 실행되어 UI가 즉시 보인다. 사용자는 예제를 플레이그라운드로 열어 Python 코드를 직접 수정하고 결과 UI를 바로 확인할 수 있다.
7. 10:13
   인터랙티브 도구와 표 옆의 차트 MCP 도구가 Python dictionary 대신 prefab 컴포넌트를 반환하면 FastMCP가 이를 감지해 인터랙티브 MCP 앱으로 전환한다. 그 결과 검색·필터링·정렬·페이지네이션이 가능한 표를 제공할 수 있고, 같은 방식으로 표 옆에 파이 차트를 배치하는 구성도 자연스럽게 만들 수 있다.
8. 12:56
   전체 앱과 비싼 복붙 문제 완전한 앱 형태에서는 UI 진입점과 백엔드 도구를 함께 정의해 폼 입력을 데이터베이스 저장 같은 작업으로 연결할 수 있다. 특히 파일 업로드처럼 에이전트를 거치면 대용량 텍스트를 그대로 재입력하게 되는 비효율이 발생하므로, MCP 앱으로 사용자가 파일을 직접 서버에 보내는 구조가 훨씬 저렴하고 안전하다.
9. 15:15
   생성형 UI와 wire 위에서 JSON보다 작은 Python 에이전트가 UI 프로토콜을 실시간으로 스트리밍하면 렌더러가 이를 즉시 화면으로 바꾸는 생성형 UI가 가능하다. 이후 발견된 중요한 사실은 Python 표현이 JSON보다 약 70% 작아 토큰, 비용, 지연 시간 측면에서 더 효율적이므로, 지금은 JSON 대신 Python을 전송해 샌드박스에서 실행한 뒤 JSON으로 변환해 렌더링한다.

실무 인사이트

• MCP 앱은 에이전트를 통한 간접 응답보다 사용자가 직접 조작하는 화면이 필요한 업무에 특히 적합하므로, 내부 업무 도구와 데이터 입력 화면부터 적용하면 효과가 크다.
• UI 범위를 표·폼·차트로 제한하면 Python 팀도 유지 가능한 수준의 DSL을 만들 수 있으며, 이때 핵심은 프런트엔드 기술 스택이 아니라 중간 표현과 컴포넌트 설계다.
• 파일 업로드나 생성형 UI처럼 에이전트가 중간에서 복붙하거나 재서술하는 비용이 큰 작업은, 사용자-서버 직접 경로와 더 작은 직렬화 표현으로 바꾸는 것만으로도 효율이 크게 개선된다.