Tide Pool / A2UI

Tide Pool은 Triggerfish가 대화형 콘텐츠를 렌더링하는 에이전트 구동 시각적 워크스페이스입니다: 대시보드, 차트, 양식, 코드 미리보기, 리치 미디어. 선형 대화인 채팅과 달리 Tide Pool은 에이전트가 제어하는 캔버스입니다.

A2UI란?

A2UI(Agent-to-UI)는 Tide Pool을 구동하는 프로토콜입니다. 에이전트가 연결된 클라이언트에 시각적 콘텐츠와 업데이트를 실시간으로 푸시하는 방법을 정의합니다. 에이전트가 보여줄 것을 결정하고 클라이언트가 렌더링합니다.

아키텍처

에이전트는 tide_pool 도구를 사용하여 Gateway에서 실행되는 Tide Pool 호스트에 콘텐츠를 푸시합니다. 호스트는 지원되는 플랫폼의 연결된 Tide Pool 렌더러에 WebSocket을 통해 업데이트를 릴레이합니다.

Tide Pool 도구

에이전트는 다음 도구를 통해 Tide Pool과 상호 작용합니다:

도구	설명	사용 사례
tidepool_render	워크스페이스에 구성 요소 트리를 렌더링	대시보드, 양식, 시각화, 리치 콘텐츠
tidepool_update	ID로 단일 구성 요소의 props를 업데이트	전체 뷰를 교체하지 않는 점진적 업데이트
tidepool_clear	워크스페이스를 지워 모든 구성 요소를 제거	세션 전환, 새로 시작

레거시 동작

기본 호스트는 이전 버전과의 호환성을 위해 더 낮은 수준의 동작도 지원합니다:

동작	설명
push	원시 HTML/JS 콘텐츠 푸시
eval	샌드박스에서 JavaScript 실행
reset	모든 콘텐츠 지우기
snapshot	이미지로 캡처

사용 사례

Tide Pool은 채팅만으로는 부족한 시나리오를 위해 설계되었습니다:

• 대시보드 -- 에이전트가 연결된 통합의 메트릭을 보여주는 실시간 대시보드를 구축합니다.
• 데이터 시각화 -- 쿼리 결과에서 렌더링된 차트와 그래프.
• 양식 및 입력 -- 구조화된 데이터 수집을 위한 대화형 양식.
• 코드 미리보기 -- 실시간 실행 결과와 함께 구문 강조된 코드.
• 리치 미디어 -- 이미지, 지도, 임베디드 콘텐츠.
• 협업 편집 -- 에이전트가 검토 및 주석을 위한 문서를 제시합니다.

작동 방식

1. 에이전트에게 무언가를 시각화하도록 요청합니다(또는 에이전트가 시각적 응답이 적절하다고 판단합니다).
2. 에이전트가 push 동작을 사용하여 HTML과 JavaScript를 Tide Pool에 보냅니다.
3. Gateway의 Tide Pool 호스트가 콘텐츠를 수신하고 연결된 클라이언트에 릴레이합니다.
4. 렌더러가 콘텐츠를 실시간으로 표시합니다.
5. 에이전트가 eval을 사용하여 전체 뷰를 교체하지 않고 점진적 업데이트를 수행할 수 있습니다.
6. 컨텍스트가 변경되면 에이전트가 reset을 사용하여 워크스페이스를 지웁니다.

보안 연동

Tide Pool 콘텐츠는 다른 모든 출력과 동일한 보안 시행 대상입니다:

• PRE_OUTPUT hook -- Tide Pool에 푸시되는 모든 콘텐츠가 렌더링 전에 PRE_OUTPUT 시행 hook을 통과합니다. 출력 정책을 위반하는 분류된 데이터가 차단됩니다.
• 세션 taint -- 렌더링된 콘텐츠는 세션의 taint 수준을 상속합니다. CONFIDENTIAL 데이터를 보여주는 Tide Pool은 그 자체가 CONFIDENTIAL입니다.
• 스냅샷 분류 -- Tide Pool 스냅샷은 캡처 시 세션의 taint 수준으로 분류됩니다.
• JavaScript 샌드박싱 -- eval을 통해 실행되는 JavaScript는 Tide Pool 컨텍스트 내에서 샌드박싱됩니다. 호스트 시스템, 네트워크, 파일시스템에 대한 접근이 없습니다.
• 네트워크 접근 없음 -- Tide Pool 런타임은 네트워크 요청을 할 수 없습니다. 모든 데이터는 에이전트와 정책 계층을 통해 흐릅니다.

상태 표시기

Tidepool 웹 인터페이스에는 실시간 상태 표시기가 포함됩니다:

컨텍스트 길이 바

LLM의 컨텍스트 윈도우 중 얼마나 소비되었는지 보여주는 스타일된 진행 바입니다. 각 메시지 후와 압축 후에 업데이트됩니다.

MCP 서버 상태

구성된 MCP 서버의 연결 상태를 보여줍니다(예: "MCP 3/3"). 색상 구분: 모두 연결된 경우 녹색, 부분인 경우 노란색, 없는 경우 빨간색.

보안 시크릿 입력

에이전트가 시크릿을 입력해야 할 때(secret_save 도구를 통해) Tidepool이 보안 입력 팝업을 표시합니다. 입력된 값은 키체인으로 직접 전달됩니다 -- 채팅을 통해 전송되거나 대화 기록에 보이지 않습니다.

Tide Pool을 에이전트의 화이트보드로 생각하십시오. 채팅이 에이전트와 대화하는 방법이라면 Tide Pool은 에이전트가 보여주는 곳입니다. :::