← 새소식으로 돌아가기

SessionCast Markup — 터미널에서 리치 UI 위젯 렌더링

CLI 에이전트가 터미널에 특수 마크업 블록을 출력하면 웹 뷰어에서 리치 UI 컴포넌트로 렌더링됩니다.

동작 방식

CLI 에이전트가 sessioncast 언어 태그가 붙은 펜스드 코드 블록을 출력하면, 웹 뷰어가 이를 감지하고 원시 텍스트 대신 인터랙티브 위젯을 렌더링합니다.

type: card
title: Build Status
status: success
body: All 42 tests passed in 3.2s

뷰어가 블록 내부의 YAML을 파싱하고 해당하는 컴포넌트를 렌더링합니다 — 카드, 테이블, 차트, 버튼, 폼 등을 지원합니다.

지원 위젯 타입

  • card — 제목, 상태 배지, 본문이 있는 정보 카드
  • table — 정렬 가능한 컬럼이 있는 데이터 테이블
  • chart — 메트릭용 바/라인 차트
  • button — 클릭 가능한 액션 버튼
  • form — 텍스트 필드, 드롭다운, 체크박스가 있는 입력 폼
  • progress — 퍼센트 표시가 있는 프로그레스 바
  • alert — 경고, 에러, 정보, 성공 알림

예시: 상태 대시보드

type: table
title: Service Health
columns: [Service, Status, Latency]
rows:
  - [API, "Healthy", "12ms"]
  - [Relay, "Healthy", "3ms"]
  - [Auth, "Degraded", "250ms"]

AI 에이전트 개발자를 위해

SessionCast를 사용하는 AI 코딩 에이전트를 위해 설계되었습니다. 터미널에 일반 텍스트를 출력하는 대신, 구조화된 마크업으로 뷰어에서 적절한 UI로 렌더링할 수 있습니다.

활용 사례:

  • 빌드 결과 — 텍스트 벽 대신 테이블로 테스트 결과 표시
  • 진행 추적 — 장시간 작업에 프로그레스 바 렌더링
  • 인터랙티브 폼 — 명령어 입력 없이 파라미터 입력
  • 대시보드 — 메트릭과 상태를 한눈에 표시

뷰어의 감지 방식

웹 뷰어가 정규식 기반 디텍터로 터미널 출력에서 sessioncast 블록을 스캔합니다. 발견되면 YAML을 추출하고, 스키마를 검증한 후 매칭되는 React 컴포넌트를 렌더링합니다. 알 수 없는 타입은 무시되고 원시 텍스트로 표시됩니다.

요구 사항

  • Web Viewerapp.sessioncast.io 최신 버전
  • stdout에 출력할 수 있는 모든 CLI 에이전트
불러오는 중...