A2UI + MCP 앱: 선언형 UI와 커스텀 에이전틱 UI의 장점을 한 번에!

2026년 6월 17일

에이전틱 워크플로우가 단순 텍스트 교환을 넘어 풍부한 UI로 진화하면서, 개발자들은 깊은 커스터마이징과 매끄러운 통합 사이에서 늘 고민하게 돼요.

지금까지 개발자들은 종종 다음 두 가지 경로 중 하나를 선택해야 했어요:

• 모델 컨텍스트 프로토콜(MCP) 앱은 표준 웹 기술을 사용해서 iframe 내에서 창의적인 자유를 제공해요. 하지만 이러한 애플리케이션이 iframe에 의존하면 디자인 시스템 충돌이나 불필요한 스크롤바 같은 시각적인 부조화로 인해 단절된 사용자 경험을 유발할 수 있어요. 동시에 _계산 성능_과 보안 캡슐화 측면에서도 상당한 어려움을 안겨주죠.
• 에이전트-투-사용자 인터페이스(A2UI)는 선언형 프레임워크를 사용해요. 원시 HTML, CSS, JavaScript를 보내는 대신, A2UI는 JSON 페이로드를 이용해서 어떤 것을 렌더링할지 정의하고, 호스트 애플리케이션이 네이티브 컴포넌트를 통해 화면을 처리하도록 해줘요. 그러면 호스트 애플리케이션은 이 데이터를 안전하게 자체 네이티브 UI 요소로 변환하죠. 이 방식은 일관된 디자인과 향상된 보안을 보장하지만, 개발자들은 특정 컴포넌트 라이브러리에 제약을 받아요. 특히 차트나 양식과 같은 구조화된 데이터에는 성능이 좋고 안전하며 통합된 경험을 제공하지만, 복잡한 클라이언트 사이드 로직 처리에는 어려움을 겪어요.

이러한 상충 관계를 해결하기 위해, A2UI와 MCP 앱의 매끄러운 통합을 보여주는 세 가지 아키텍처 패턴과 함께 구현 가이드 및 샘플 코드를 공유해 드려요. MCP 확장 기능을 만들어서 이 패턴들을 더 쉽게 채택할 수 있도록 고려하고 있어요. 관심 있다면 알려주세요.

이 두 가지 접근 방식을 통합하면 개발자들은 표준 UI 요소에 네이티브 컴포넌트 렌더링을 활용하면서, 고도로 맞춤화되고 복잡한 경험을 위해서는 커스텀 iframe 임베딩을 예약할 수 있게 돼요.

패턴 1. MCP 서버를 통한 A2UI 사용하기

MCP 서버에서 A2UI를 제공하면, 개발자들이 MCP 앱을 대체할 수 있는 풍부하고 네이티브하게 렌더링되는 UI를 자기 툴에 추가할 수 있어요. 이는 널리 채택된 MCP 툴 연결의 단순함과 네이티브 A2UI 렌더링을 결합하죠.

이 접근 방식은 생성형 UI를 도입하려는 개발자들의 진입 장벽을 낮춰줘요. 완전한 Agent-to-Agent (A2A) 아키텍처를 구축하거나 복잡한 검색 메커니즘에 신경 쓸 필요 없이 동적 UI의 이점을 제공하거든요.

아키텍처적 장점

• iframe 한계 우회: MCP 서버에서 UI를 위해 MCP 앱을 사용하면 시각적 불일치와 지연이 발생할 수 있어요. A2UI-over-MCP는 iframe을 우회하여 호스트 애플리케이션이 자체 디자인 시스템을 사용해서 에이전트의 의도를 네이티브하게 렌더링할 수 있게 해줘요.
• 관심사의 분리: MCP는 백엔드 툴과 데이터 접근을 처리하고, A2UI는 프런트엔드 컴포넌트 렌더링을 담당해요. 이렇게 하면 에이전트 로직이 UI 구현 세부사항이 아닌 추론에 집중하면서 깔끔하게 유지되죠.
• 향상된 환경 이식성: MCP 서버는 React, Flutter, Angular 등 어떤 클라이언트에도 커스텀 연결 없이 데이터를 A2UI 클라이언트에 공급해서 렌더링할 수 있어요. 이는 '한 번 작성해서 어디서든 네이티브하게 렌더링'하는 기능을 제공하며, 서버가 모든 다른 화면에 대해 고유한 응답을 준비해야 하는 문제를 해결해줘요.
• 간소화된 보안: MCP 툴에서 흐르는 데이터는 A2UI의 기본적으로 안전한 JSON 아키텍처와 통합돼요. 원시 HTML을 전달하는 전통적인 방식과 달리, A2UI는 클라이언트가 사전 정의된 카탈로그에서 신뢰할 수 있는 컴포넌트만 렌더링하는 기능 기반 보안 모델을 사용해요.
• 개발 주기 가속화: MCP 툴을 제작하거나 리소스를 정의하는 전문 지식이 이제 정교한 사용자 인터페이스를 생성하는 능력으로 직접 연결돼요. A2UI 에이전트 SDK를 활용하면, 라이브러리가 스키마 강제 적용과 유효성 검사를 네이티브로 관리하므로, 개발 팀은 수동으로 JSON을 작성하는 복잡성을 건너뛸 수 있어요.

실제로 확인해 보세요

아래는 A2UI-over-MCP 아키텍처로 구동되는 데모 애플리케이션이에요. 애플리케이션은 두 개의 패널로 구성되어 있어요. 왼쪽 패널에는 사용자가 요리 스타일과 단백질 종류를 선택할 수 있는 간단한 양식이 있고, 오른쪽 패널에는 레시피 카드가 표시돼요. 사용자는 왼쪽 패널에서 요리 스타일과 단백질 종류를 선택하고 "레시피 받기" 버튼을 클릭해서 새로운 레시피 카드를 가져와 오른쪽 패널에 표시해요.

이 앱의 두 패널 모두 A2UI로 생성되었으며, 둘 다 A2UI 페이로드를 MCP 서버에서 직접 가져와 A2UI 프레임워크로 직접 렌더링하는 A2UI-over-MCP 아키텍처를 활용하고 있어요. UI 렌더링에 A2UI 프레임워크를 활용함으로써, 호스트 애플리케이션은 어떤 UI 컴포넌트 로직도 유지할 필요 없이 단순히 A2UI 컴포넌트에 자체 테마를 적용하는 것만으로 디자인 일관성을 유지할 수 있어요.

Video 7 A2UI-over-MCP 레시피 스튜디오 작동 모습

내부 동작 원리: 어떻게 작동하나요?

MCP 서버가 표준 텍스트 응답이나 번들로 제공되는 HTML/JS 웹 앱을 반환하는 대신, A2UI 페이로드를 반환하려면 특정 MIME 타입(application/a2ui+json)을 가진 구조화된 JSON 페이로드를 반환해요.

{
  "content": [
    {
      "type": "resource",
      "resource": {
        "uri": "a2ui://dynamic-ui/recipe-card",
        "mimeType": "application/a2ui+json",
        "text": "[
          { \"version\": \"v0.9\",
            \"createSurface\": { ... }
          }
        ]"
      }
    }
  ]
}

JSON

Copied

예시: MCP 툴 호출을 통해 임베드된 리소스로 전달되는 A2UI 페이로드 — GitHub에서 전체 샘플 코드 보기

개발자들은 이 페이로드를 전달하는 두 가지 메커니즘을 활용할 수 있어요: MCP 리소스(resources/read)를 통하거나 MCP 툴 호출(tools/call)을 통해서요. 어떤 방법을 사용하든 엔드포인트는 a2ui:// URI 스키마를 사용해요. 페이로드를 받으면, A2UI를 지원하는 호스트 환경은 이 JSON 구조를 자동으로 네이티브 렌더링 엔진으로 보내 실행해요.

구현 전략: 정적 전달 대 동적 전달

1. MCP 리소스(resources/read)를 통한 정적 전달

대화 맥락과 상관없이 항상 일정한, 규범적인 인터페이스가 필요한 워크플로우의 경우, 개발자들은 A2UI 페이로드를 표준 MCP 리소스로 제공할 수 있어요. 호스트 애플리케이션은 단순히 전용 URI(예: a2ui://config-panel)를 검색하고, 서버는 불변하는 JSON 구조를 직접 전달하죠.

• 이상적인 사용 사례: 개인 정보 보호 고지, 표준화된 구성 양식 또는 영구적인 환경 설정과 같은 기본 구성 요소에 적합해요.
• 핵심 이점: 이 접근 방식은 LLM이 실시간 UI 합성을 할 필요가 없으므로, 높은 예측 가능성과 효율적인 캐싱을 보장하고 계산 오버헤드가 전혀 없어요.

2. MCP 툴 호출(tools/call)을 통한 동적 전달

진정한 생성형 UI와 실시간 데이터 주입을 구현하려면, 클라이언트가 MCP 툴을 호출할 수 있어요. 백엔드는 실시간 컨텍스트를 검색하는 로직을 실행해서 에이전트가 A2UI 레이아웃을 동적으로 조립할 수 있게 해줘요. 이렇게 맞춤형으로 생성된 페이로드는 CallToolResult 내에 임베드된 리소스로 반환돼요.

• 이상적인 사용 사례: 반응형 데이터 시각화, 컨텍스트 인식 날씨 모듈, 또는 특정 사용자 요구사항에 맞춰 개인화된 콘텐츠 카드 등이 있어요.
• 핵심 이점: 아키텍처의 유연성을 제공하여 에이전트가 사용자 목표에 반응하는 정교하고 네이티브처럼 느껴지는 경험을 구축할 수 있도록 지원해요.

아키텍처 다이어그램: 에이전트가 MCP를 사용해서 로컬 데이터셋 컨텍스트를 검색하고, A2UI를 사용해서 동적 데이터 시각화 컴포넌트를 클라이언트로 직접 스트리밍해요.

코드 살펴보기

이 아키텍처가 실제로 작동하는 모습을 보려면, A2UI-over-MCP 퀵 스타트 가이드를 확인해서 위 데모에서 보여드린 A2UIxMCP 레시피 스튜디오 웹 앱을 실행해 보세요. 이 인터랙티브 데모는 MCP 리소스에서 로드된 정적 A2UI 화면(레시피 선택 양식)과 MCP 툴에서 제공되는 동적 A2UI 화면(커스텀 생성된 레시피 카드)이 나란히 실행되는 모습을 보여줘요.

차이점 이해하기: A2UI over MCP 대 A2UI over A2A

엔지니어링 팀 사이에서 자주 문의되는 질문은 A2UI-over-MCP 구현이 전송 프로토콜 외에 네이티브 Agent-to-Agent (A2A) 아키텍처와 어떻게 다른가 하는 점이에요. 그 차이는 동적 특성과 오케스트레이션 복잡성의 수준에 있어요.

• A2UI over MCP (리소스): 정적이고 규범적인 UI예요. 고정된 데이터 입력 양식과 같은 엄격한 구조적 요구사항에 가장 적합한 선택이죠.
• A2UI over MCP (툴): 툴 파라미터에 기반한 템플릿형 동적 UI예요. 정적이고 규범적인 UI도 제공할 수 있어요. 동적 제어는 툴의 입력 파라미터로 제한돼요.
• A2UI over A2A: 지원되는 카탈로그의 컴포넌트 범위 내에서 완전히 생성형이고 개방적이에요. 에이전트는 전체 대화 컨텍스트를 가지고 즉석에서 UI 구성을 주도해요. 이 접근 방식은 필요하다면 템플릿형 UI와 정적 UI도 제공할 수 있어요.

엔지니어들은 일반적으로 확정적인 결과를 위해 MCP 툴을 활용하지만, 이 엔드포인트들이 본질적으로 정적 로직에만 국한되는 건 아니에요. 표준 MCP 툴 구성에서 백엔드 LLM을 사용하는 것이 일반적이지는 않지만, 개발자들은 원한다면 툴 호출 뒤에 에이전틱 레이어를 구성해서 A2UI-over-MCP 아키텍처를 통해 더 생성형인 UI 경험을 제공할 수 있어요. 하지만 UI 생성을 구동하는 컨텍스트는 툴 파라미터와 백엔드 에이전트를 위한 정해진 프롬프트에 한정될 거예요.

패턴 2. A2UI 컴포넌트 내에서 MCP 앱 실행하기

A2UI-over-MCP는 네이티브 통합에 이상적이지만, 때로는 MCP 앱의 독립적이고 고도로 커스텀 가능한 환경이 필요할 때가 있어요. 호스트의 네이티브 디자인 시스템이나 보안 경계를 방해하지 않으면서 MCP 앱을 A2UI 컴포넌트 안에 캡슐화해서 이걸 달성할 수 있죠. A2UI 컴포넌트 내에 MCP 앱을 캡슐화함으로써 엔지니어들은 복잡하고 상태 의존적인 모듈들을 보안 iframe으로 위임해서 고도로 맞춤화된 경험을 제공할 수 있어요.

이 하이브리드 방식은 엔지니어들에게 복잡하고 상태 의존적인 모듈에 대한 창의적인 유연성을 제공하는 동시에, 기본 인터페이스가 호스트의 네이티브 디자인과 일치하도록 하고 강력한 상태 동기화 프로토콜을 유지하도록 보장해요.

아키텍처적 장점

• 브랜드 일관성과 제어된 위임: 호스트는 MCP 앱 iframe 외부의 UX에 대한 디자인 통제권을 유지하고, MCP 앱 내부의 UX는 외부 툴 개발자에게 신중하게 위임해요.
• 특수 기능: 실시간 상태 전환이 있는 인터랙티브 게임이나 콘서트 좌석 선택과 같은 맞춤형 유효성 검사 로직이 있는 복잡한 워크플로우와 같은 복잡하고 상태 의존적인 모듈들은 순수하게 선언형 컴포넌트로 구축하기 어려운 경우가 많아요. MCP 앱을 임베딩하면 개발자가 가장 필요한 곳에서 창의적인 자유를 가질 수 있게 함으로써 이 문제를 해결할 수 있죠.
• 안전한 상태 정렬: 호스트 애플리케이션은 규제된 이벤트 기반 루프를 통해 MCP 앱의 내부 상태와 동기화를 유지해요. A2UI 렌더링 엔진을 중개자로 사용함으로써, 이 아키텍처는 기본 환경의 컨텍스트를 타사 코드와 분리하면서도 상태 일관성을 보장해요.

실제로 확인해 보세요

아래는 MCP 앱을 A2UI 컴포넌트로 보여주는 데모 애플리케이션이에요. 서버 사이드 에이전트는 A2UI 페이로드로 응답하는데, 이 페이로드의 컴포넌트 중 하나는 입력 파라미터에 웹 기반 퐁 게임의 전체 코드가 포함된 MCP 앱 컴포넌트예요. A2UI 페이로드에는 MCP 앱에 포함되지 않은 두 개의 스코어 카드도 들어있어요.

사용자가 CPU를 상대로 퐁 게임을 시작하면, 패들 제어와 공 위치 상태는 임베드된 MCP 앱 내 코드에 의해 관리돼요. 하지만 점수가 날 때마다 이 이벤트는 에이전트로 전달되고, 네이티브 A2UI 컴포넌트들이 업데이트된 점수로 다시 채워지면서 A2UI 화면의 모든 컴포넌트(네이티브 A2UI와 MCP 앱) 간의 상태 동기화가 가능해져요.

Video 8 예시: A2UI 퐁 게임 작동 모습

내부 동작 원리: 어떻게 작동하나요?

이 하이브리드 접근 방식을 달성하기 위해, 개발자들은 보안 iframe 래퍼 역할을 하는 커스텀 A2UI 컴포넌트 (MCP 앱 컴포넌트라고 함)를 정의해요. 이 일반화된 래퍼는 어떤 표준 MCP 앱이든 담을 수 있으며, 앱이 외부와 통신할 수 있는 브릿지 채널을 제공하죠.

에이전트가 요청할 때마다 MCP 서버는 앱의 HTML과 JavaScript 자산을 에이전트로 전송해요. 그러면 에이전트는 애플리케이션 코드를 구조화된 A2UI JSON 내에 임베딩하고, 지정된 컴포넌트 파라미터와 통합해요. 통합된 JSON은 호스트로 전달되고, MCP 앱은 다른 A2UI 네이티브 컴포넌트와 함께 위 iframe 래퍼 내에서 렌더링돼요.

A2UI 렌더링 엔진은 네이티브 컴포넌트와 임베드된 MCP 앱 모두에서 상태를 안전하고 이벤트 중심적인 사이클을 사용해서 유지하는데, 이걸 상태 동기화라고 불러요. 실시간 DOM 스크래핑이나 상태 폴링에 의존하는 대신, 동기화는 명시적인 가로채기 루프를 따라요.

1. 가로채기 및 변환: MCP 앱 내에서 주요 상태 전환이 일어날 때 (예: 퐁 게임에서 점수를 얻었을 때), 앱은 표준 MCP 툴 호출을 트리거해요. 래핑 A2UI 컴포넌트 레이어가 이 요청을 로컬에서 가로채고, JSON 인수를 구조화된 A2UI 액션 컨텍스트로 매핑하며, 앱의 로컬 UI 루프가 차단되지 않도록 즉시 확인 응답을 반환해요.
2. 요청 라우팅: 호스트 애플리케이션은 이 변환된 컨텍스트를 A2UI 액션으로 패키징하고 백엔드 AI 에이전트로 라우팅해요. 에이전트는 전체 조정자 역할을 하며, 미세 상태(패들/공 좌표 또는 임시 양식 입력)를 추적하지 않고 거시적인 '주요 상태'(예: 게임 점수 또는 예약 확인)만 추적해요.
3. 하이드레이션: 에이전트가 전체 화면 상태를 평가하면, 포맷된 DataModel 업데이트 JSON을 반환해요. A2UI 엔진은 네이티브 컴포넌트(스코어카드 같은)를 직접 업데이트하고, 이 업데이트된 리소스를 앱 브릿지를 통해 푸시하여 내부 MCP 앱의 내부 상태를 다시 채워줘요.

코드 살펴보기

이 아키텍처가 실제로 작동하는 모습을 보려면, MCP Apps in A2UI 퀵 스타트 가이드를 확인해서 라이브 클라이언트를 실행해 보세요. 이 인터랙티브 데모는 MCP 서버와 통합된 AI 에이전트가 계산기 앱과 퐁 게임을 제공하는 기능을 보여주는데, 이들은 일반 MCP 앱 래퍼 컴포넌트의 Angular 구현 내에서 제공될 수 있어요.

패턴 3. MCP 앱 내에서 A2UI 실행하기

이 패턴은 강력한 현대화 브릿지 역할을 하며, 복잡한 아키텍처 개편 없이도 동적이고 에이전트 기반의 UI를 기존 애플리케이션이나 A2UI를 사용하지 않는 환경에 주입할 수 있게 해줘요.

이 패턴에서는 MCP 앱 번들 자체에 A2UI 렌더러가 포함되어 있어요. 동적 A2UI 인터페이스를 가져오기 위해, MCP 앱은 앞서 논의한 A2UI-over-MCP 메커니즘을 활용해서 A2UI 페이로드를 검색하기 위한 툴 호출을 서버에 연결해요. A2UI JSON 페이로드를 받으면, MCP 앱은 이를 파싱하고 자체 iframe 경계 내에서 완전히 렌더링하죠. 생성형 UI의 복잡성을 자체 포함된 렌더러에 흡수함으로써, 이 패턴은 개발자가 최소한의 아키텍처 개편만으로도 기존 시스템에 동적인 AI 기반 상호작용을 구현할 수 있도록 해줘요.

아키텍처적 장점

• A2UI를 지원하지 않는 호스트를 위한 생성형 UI: 호스트 환경이 A2UI 자체를 네이티브로 지원하지 않아도 MCP 앱이 에이전트 기반 A2UI 기능을 제공할 수 있도록 해줘요.
• 레거시 시스템 업그레이드: 레거시 애플리케이션은 기본적인 MCP 앱 iframe 컨테이너만 지원하면 돼요. MCP 앱이 모든 생성형 UI 복잡성을 흡수하여 최소한의 엔지니어링 노력으로 오래된 시스템에 동적인 AI 상호작용을 가능하게 해주죠.
• 자체 포함된 상호작용 루프: A2UI 렌더러가 iframe으로 둘러싸인 MCP 앱의 경계 내에 완전히 존재하기 때문에, 로컬 상태 전환(예: 문서 수정 수락/거부)은 앱 내에서 안전하게 직접 처리될 수 있어요. 관리되고 미리 정의된 컨텍스트만 앱 브릿지를 통해 호스트로 다시 전달되죠.

실제로 확인해 보세요

아래는 A2UI가 임베드된 MCP 앱을 보여주는 데모 애플리케이션이에요. 호스트 앱은 MCP 서버에서 가져온 온라인 텍스트 편집기를 제공하는 MCP 앱을 로드해요. 이 MCP 앱은 A2UI JSON 페이로드를 UI로 렌더링하는 기능을 제공하는 A2UI 라이브러리와 함께 패키징되어 있어요. 패턴 1에서 논의된 A2UI-over-MCP 기술을 통합함으로써, 이 MCP 앱은 MCP 서버와 효과적으로 통신해서 A2UI 프로토콜을 통한 생성형 UI 기능을 지원할 수 있어요.

이 데모에서 사용자는 텍스트의 일부를 하이라이트해서 AI 지원 텍스트 편집을 시작해요. 사용자가 텍스트를 하이라이트하면, 백엔드 서버는 해당 텍스트를 인수로 받아서 상황에 맞는 편집 파라미터를 고안해요. 이 제어 기능은 A2UI를 통해 제공되며, MCP 앱은 이 페이로드를 받아서 렌더링하죠. 그러면 사용자는 파라미터를 조정해서 AI가 텍스트를 어떻게 편집할지 지시할 수 있어요. 사용자가 "수정 생성"을 클릭하면, AI 에이전트가 이 파라미터를 고려해서 사용자에게 편집 제안을 제공해요.

Video 9 예시: 생성형 문서 편집기

내부 동작 원리: 어떻게 작동하나요?

다른 패턴과 대조적으로, 이 아키텍처 패턴은 호스트 환경 내에 네이티브 A2UI 지원이 필요 없어지게 해요. A2UI 렌더링 엔진을 MCP 앱 번들 내에 직접 패키징함으로써, 개발자들은 복잡성을 임베드된 애플리케이션 자체에 오프로드할 수 있어요.

앱 브릿지를 활용해서 임베드된 MCP 앱은 패턴 1의 A2UI-over-MCP 메커니즘을 사용해서 백엔드 AI 에이전트와 통신해요. application/a2ui+json MIME 타입을 포함하는 MCP 서버로부터 받는 모든 응답은 A2UI 페이로드로 처리되고 렌더링을 위해 A2UI 라이브러리로 위임돼요.

생성형 기능을 달성하기 위해, 이 데모 앱에는 MCP 서버 뒤에 AI 에이전트가 있어요. 이를 통해 MCP 툴 호출은 LLM을 활용해서 제공된 인수로부터 상황에 맞는 제어 파라미터와 텍스트 수정을 생성할 수 있게 되죠.

다음 상호작용 라이프사이클이 이 자체 포함된 루프를 관리해요:

1. 컨텍스트 트리거: 사용자가 문서 편집기 내 특정 구절을 하이라이트하는 것과 같이 기본 인터페이스와 상호작용해요.
2. 이벤트 중계: 앱 브릿지는 이 이벤트를 postMessage를 통해 호스트로 전송하고, 호스트는 다시 이 컨텍스트를 백엔드 AI 에이전트로 전달해요.
3. 생성형 페이로드 반환: 에이전트는 요구사항을 평가하고, 동적 슬라이더나 특수 편집 컨트롤을 포함할 수 있는 맞춤형 A2UI JSON 페이로드를 MCP 서버를 통해 반환해요.
4. 내부 렌더링: application/a2ui+json MIME 타입을 인식하면, 앱의 내부 렌더러는 지정된 패널에 인터페이스를 동적으로 마운트해요.
5. 관리형 통신: 높은 수준의 사용자 액션은 브릿지를 통해 백엔드 처리로 전달되고, 수정 수락 또는 거부와 같은 로컬 상태 전환은 보안 격리를 유지하기 위해 앱 샌드박스 내에서 직접 관리돼요.

<html>
<body>

  <div>
    <h3>MCP App (Editor Panel)</h3>
    <p>This text is native to the sandboxed third-party app.</p>
    
    <!-- A2UI Surface custom element provided by the A2UI SDK -->
    <a2ui-surface surfaceId="recipe-card"></a2ui-surface>
  </div>

  <script>
    // Note: The pseudocode below assumes AppBridge from @modelcontextprotocol/ext-apps
    // and a2uiProcessor from the A2UI SDK are preloaded or inlined.
    const bridge = new AppBridge({ name: 'editor-panel', version: '1.0.0' });

    // Helper to extract and process dynamic A2UI responses from tool results
    function processA2UIResponse(result) {
      const a2uiResource = result?.content?.find(
        c => c.type === 'resource' && c.resource?.mimeType === 'application/a2ui+json'
      );
      if (a2uiResource?.resource?.text) {
        const payload = JSON.parse(a2uiResource.resource.text);
        window.a2uiProcessor.processMessages(payload);
      }
    }

    // 1. Initialize AppBridge and fetch initial controls
    async function initApp() {
      await bridge.connect();
      
      // Call server tool to load initial layout controls
      const result = await bridge.callServerTool({ name: 'fetch_controls', arguments: {} });
      processA2UIResponse(result);
    }

    // 2. Handle interactive User Actions routed by the A2UI SDK
    window.a2uiProcessor.events.subscribe(async (event) => {
      if (!event.message.userAction) return;
      const action = event.message.userAction;
      
      // Route the user action directly via the bridge to the MCP Server tool
      const result = await bridge.callServerTool({
        name: action.name,
        arguments: action.context
      });
      
      // Feed any updated server UI states back to the A2UI processor
      processA2UIResponse(result);
    });

    // Initialize the app on startup
    initApp();
  </script>
</body>
</html>

HTML

Copied

예시: 임베드된 MCP 앱의 기능 로직에 대한 개략적인 개요예요. 호스트 통신을 위한 postMessage 사용, 동적 A2UI 레이아웃 검색, 사용자 상호작용을 서버로 다시 전달하는 방법을 보여주고 있어요.

코드 살펴보기

이 아키텍처가 실제로 작동하는 모습을 보려면, A2UI in MCP Apps 퀵 스타트 가이드를 확인해서 라이브 클라이언트를 실행해 보세요. 이 인터랙티브 데모는 사용자에게 생성형 텍스트 편집 경험을 지원하기 위해 자체 A2UI 렌더링 엔진을 포함하는 MCP 앱을 보여줘요.

결론

A2UI와 MCP 앱을 결합하면 창의적인 표현력을 희생하지 않으면서도 에이전틱 UI를 안전하고 유능하며 네이티브처럼 느껴지게 유지할 수 있어요. 이 통합 접근 방식은 툴로 UI를 렌더링할 때 iframe을 우회하고 (A2UI over MCP), 선언형 뷰 내에 풍부한 커스텀 캔버스를 표시하며 (MCP Apps in A2UI), 기존 웹 앱에 동적 UI를 쉽게 추가할 수 있게 해줘요 (A2UI in MCP Apps).

올바른 아키텍처 선택하기

A2UI는 어떤 백엔드에서든 어떤 프런트엔드로든 전송될 수 있는 유연한 메시지 형식이에요. 이런 유연성 덕분에 사용 방법이 아주 많죠.

이러한 옵션들을 잘 활용할 수 있도록, 아래 의사결정 트리를 사용해서 프로젝트의 특정 제약 조건과 요구사항에 가장 적합한 아키텍처를 찾아보세요:

선택 프레임워크: 위 아키텍처 의사결정 트리를 따라가면서 특정 에이전틱 요구사항에 가장 적합한 전달 패턴을 확인해 보세요.

시작해 보세요

자신의 스택에서 A2UI와 MCP 앱을 연결할 준비가 되셨나요?

• A2UI.org에서 A2UI GenUI 문서를 검토해 보세요.

• 다음 가이드를 읽어보세요.

  • A2UI over MCP
  • MCP Apps in A2UI
  • A2UI in MCP Apps

• 서버 설정을 위한 Model Context Protocol 문서를 살펴보고, 커스텀 앱 임베딩에 대해 더 알아보려면 MCP 앱 개요를 읽어보세요.

• 위에 제시된 모든 샘플 통합을 보려면 A2UI GitHub 저장소를 방문해 보세요.

이전

다음