Prefect, Python 개발자를 위한 생성형 UI 도입

1월에 소개된 MCP 앱은 기존 MCP 프로토콜의 확장으로, 더 동적인 사용자 상호 작용을 가능하게 합니다. 이전에는 표준 프로세스에 사용자 상호 작용을 매개하고 정보를 주고받는 에이전트가 포함되었습니다. 새로운 프로토콜 확장은 UI 구성 요소를 직접 전달하고 인터페이스 렌더링에서 에이전트의 개입을 우회하여 이 주기를 근본적으로 변경합니다.

MCP 앱의 핵심 혁신은 결과를 처리하는 에이전트의 일반적인 역할을 우회하여 최종 사용자에게 인터랙티브 사용자 인터페이스를 직접 제공하는 기능입니다. 사용자가 MCP 앱 지원 도구를 사용하는 에이전트에게 무언가를 요청하면 도구의 응답이 HTML, CSS 및 JavaScript를 사용하여 렌더링된 완전한 UI로 사용자에게 직접 전송됩니다. 이 아키텍처는 풍부하고 맞춤형 브랜드 인터랙티브 경험을 가능하게 할 뿐만 아니라 사용자가 에이전트의 컨텍스트 창을 완전히 우회하여 애플리케이션과 직접 상호 작용할 수 있도록 합니다.

이러한 개선은 애플리케이션 인터페이스 내에서 사용자와 체스 게임을 하는 에이전트와 같이 더 복잡하고 동적인 사용 사례의 가능성을 열어줍니다.

Lowin은 전체 React 프런트엔드 생태계를 Python에 직접 통합하려는 시도는 실현 가능하거나 바람직한 솔루션이 아니라고 명시적으로 밝혔습니다. 초점은 Python 엔지니어가 기존 프런트엔드 개발 패러다임에 얽매이지 않고 인터랙티브하고 미학적으로 만족스러우며 기능적인 UI를 만들 수 있도록 하는 것입니다.

대신, 그들의 핵심 책임은 조직 전체에서 정보를 효율적으로 공유하고 수집하는 것입니다. 목표는 마케팅 중심의 디자인에 집중하기보다는 내부 프로세스를 지원하는 기능적이고 효과적인 사용자 인터페이스를 제공하는 것입니다. 이러한 구분은 운영 효율성과 내부 데이터 관리가 목표인 엔터프라이즈 컨텍스트 내에서 UI를 개발하는 실용성 우선 접근 방식을 강조합니다.

사용자는 Prefab 문서에서 플레이그라운드 환경에 액세스하고 Python 코드를 즉시 편집하며 해당 사용자 인터페이스에 대한 즉각적인 변경 사항을 관찰할 수 있습니다. 이 접근 방식은 UI 생성을 처음부터 구축하는 대신 기존 구성 요소에서 요소를 조립하는 구성 프로세스로 간주합니다.

에이전트가 일반적으로 결과를 처리하고 전달하는 표준 MCP 도구와 달리 Prefab이 있는 MCP 앱은 생성된 UI와 직접 사용자 상호 작용을 가능하게 합니다. 이 통합은 MCP 서버의 기능을 변환하여 완전히 인터랙티브한 웹 애플리케이션을 호스팅하고 서비스할 수 있도록 합니다.

FastMCP는 이러한 Python 구성 요소에서 필요한 HTML, JavaScript 및 CSS 생성을 자동화합니다. 정적 함수 결과를 인터랙티브 데이터 테이블로 변환하는 예가 있으며, 이는 모두 프레임워크에 의해 자동으로 처리됩니다.

Prefab이 제공하는 인터랙티브 데이터 테이블 구성 요소는 포괄적인 UI 기능을 바로 사용할 수 있도록 포함합니다. 검색, 필터링, 정렬 및 페이지 매김과 같은 필수 기능을 지원합니다. Prefab을 사용하는 개발자는 이러한 일반적인 데이터 조작 도구를 구현하기 위해 추가 프런트엔드 코드를 작성할 필요가 없습니다.

이 접근 방식은 최소한의 코드 라인으로 상당한 눈에 띄는 변경 사항을 달성하려는 Prefect의 원칙과 일치합니다. 프레임워크는 복잡한 UI 레이아웃을 점진적으로 구축하는 프로세스를 간소화합니다.

반응형 변수를 위해 'RX' 클래스를 사용하며, 이는 참조되면 구성 요소 전체에서 값을 자동으로 업데이트합니다. 이 기능은 기본 JavaScript 복잡성을 추상화하여 동적 UI 생성을 간소화합니다.

FastMCP 앱의 컨텍스트에서 MCP 서버 자체는 백엔드 인프라 역할을 합니다. 이 아키텍처는 간단한 단일 도구 상호 작용에서 포괄적인 다중 구성 요소 애플리케이션으로 확장할 수 있도록 합니다.

FastMCP 애플리케이션 개발에는 앱을 Python 클래스로 정의하는 것이 포함됩니다. 애플리케이션 UI의 진입점은 `@app.ui` 데코레이터를 사용하여 지정하며, 이는 기본 UI를 구성하는 Prefab 구성 요소를 반환합니다. UI에 액세스할 수 있는 백엔드 메서드는 `@app.tools` 데코레이터로 표시되어 FastMCP 프레임워크 내에서 애플리케이션 개발을 위한 명확한 구조를 제공합니다.

Lowin은 표준 MCP 파일 업로드에 내재된 '세계에서 가장 비싼 복사 붙여넣기 작업'을 언급했습니다. 여기서 에이전트는 비효율적으로 파일 내용을 문자별로 서버에 다시 입력합니다. 이 프로세스는 상당한 지연 시간과 비용을 발생시킵니다. FastMCP는 파일을 에이전트를 우회하여 서버에 직접 업로드할 수 있도록 하여 데이터 전송을 간소화함으로써 이러한 비효율성을 직접적으로 해결합니다. 이 직접 업로드 기능은 대량 데이터 처리를 훨씬 효율적으로 가능하게 하는 주요 개선 사항입니다.

이를 통해 개발자가 인터페이스 구성 요소를 수동으로 정의할 필요 없이 Prefab이 사용자 인터페이스를 실시간으로 렌더링할 수 있습니다. 이 JSON 기반 프로토콜 직렬화를 허용하는 도구를 노출함으로써 시스템은 AI 기반의 동적 UI 생성을 용이하게 하여 유연성을 높이고 개발 노력을 줄입니다. 에이전트는 UI 정의를 직접 전달하고 Prefab이 이를 해석하고 표시합니다.

결과적으로 시스템은 이제 Python 코드를 직접 유선으로 스트리밍하며, 이 코드는 샌드박스 환경에서 실행됩니다. 이 Python 코드는 렌더링되기 전에 서버에서 JSON으로 변환되어 토큰 효율성을 높이고 지연 시간을 줄입니다. 이 방법은 생성형 UI를 더 빠르고 리소스 효율적으로 전달합니다.

개발자는 이 선택적 추가 기능을 설치하고 필요한 구성 요소를 가져와 Python 코드에서 직접 Prefab 구성 요소를 반환하여 MCP 앱 사용을 시작할 수 있습니다.