omdsh-dev/dsh-genui

GenUI for DeepSeek Harness: interactive UI components rendered inline in assistant replies via the dsh-ui fence — layout, charts, plots, forms, quizzes, mermaid, 3D scenes, and an action event loop back to the model. Ships the fence-teaching host plugin, the browser renderer (client half), and the genui skill.

dsh-genui란 무엇인가요?

dsh-genui는 **DeepSeek Harness (DSH)**용 플러그인입니다. DSH는 DeepSeek의 대규모 언어 모델을 실행하는 채팅 UI입니다. 이 플러그인은 모델 출력에서 dsh-ui로 표시된 특수 펜스 블록을 감시합니다. 발견하면 내부의 JSON을 파싱하고 일반 텍스트나 코드 블록을 표시하는 대신 대화 내에서 풍부한 대화형 UI 구성 요소를 즉시 렌더링합니다.

어떻게 작동하나요?

모델이 dsh-ui 펜스를 출력 – UI 구성 요소(예: 테이블, 차트, 플롯, 퀴즈, 미디어 플레이어)의 JSON 설명입니다. 모델은 이 JSON을 토큰 단위로 스트리밍할 수 있습니다.
GenUI 클라이언트가 펜스를 감지 브라우저 DOM에서 JSON을 화이트리스트에 대해 검증하고 React 구성 요소 트리를 마운트합니다.
자산은 지연 로드 – ECharts, Mermaid 또는 Three.js와 같은 무거운 라이브러리는 해당 구성 요소가 나타날 때만 가져옵니다.
로컬 우선 상호 작용(테이블 정렬, 슬라이더 드래그, 퀴즈 응답)은 전적으로 브라우저에서 처리되어 LLM으로의 추가 왕복 없이 서브 밀리초 피드백을 제공합니다.
양방향 작업 루프 – UI 요소는 action 페이로드를 전달할 수 있습니다. 사용자가 버튼을 클릭하면 페이로드가 LLM으로 다시 전송되어 추론을 계속하고 새 UI 펜스를 보낼 수 있습니다.
우아한 폴백 – 플러그인이 설치되지 않았거나 JSON 형식이 잘못된 경우 펜스는 일반 Markdown 코드 블록으로 표시되므로 채팅이 중단되지 않습니다.

주요 기능 ("기능 매트릭스")

영역	제공 기능
스트리밍 및 실시간 마운트	모델이 스트리밍함에 따라 UI가 점진적으로 나타나며 전체 응답을 기다릴 필요가 없습니다.
30개 이상의 구성 요소 생태계	통계 카드, 정렬 가능한 테이블, 타임라인, 코드 차이, 파일 트리 탐색기, ECharts 차트, 라이브 슬라이더가 있는 함수 플롯, Mermaid 다이어그램, 3D 모델, 오디오/비디오 플레이어, KaTeX 수학, 퀴즈 등.
로컬 우선 응답성	정렬, 필터링, 슬라이더 드래그, 탭 전환 및 퀴즈 채점이 브라우저에서 즉시 수행됩니다.
양방향 작업 이벤트 루프	버튼은 구조화된 이벤트를 모델로 보낼 수 있어 폐쇄 루프 대화가 가능합니다.
영구 작업 공간 및 템플릿	페이지 새로 고침을 유지하는 도크 패널로, 내장 시나리오 템플릿과 업적 배지가 있습니다.
샌드박싱 및 자가 복구	엄격한 JSON 화이트리스트, `eval` 없음, 잘못된 노드 자동 복구, 수정을 위한 모델에 대한 동일 턴 피드백.

사용자 빠른 시작

# 플러그인 설치 (pnpm 필요)
dsh plugin --profile web add @changfenhuang/dsh-genui

DSH 웹 서비스를 다시 시작하고 브라우저를 하드 새로 고침합니다.

새 채팅에서 다음과 같이 요청합니다:

dsh-ui를 사용하여 정렬 가능한 서비스 테이블이 있는 통계 대시보드를 그려주세요.

응답은 일반 코드 스니펫 대신 정렬 가능한 열, 필터 상자, 진행 링 등이 있는 대화형 대시보드로 표시됩니다.

예제 UI 사양

{
  "title": "Q3 2026 임원 개요",
  "items": [
    {
      "type": "row",
      "items": [
        {"type": "stat", "label": "총 수익", "value": "¥128,430", "delta": "+12.4%", "spark": [40,55,60,85,120]},
        {"type": "stat", "label": "완료된 주문", "value": "1,024", "delta": "-3.1%", "spark": [90,85,80,75,70]},
        {"type": "progress", "label": "분기 목표", "value": 82, "variant": "ring"}
      ]
    }
  ]
}

모델이 이 블록을 스트리밍하면 GenUI는 세 개의 통계 카드, 진행 링 및 행 레이아웃을 렌더링합니다. 모두 클릭 가능하고 테마를 인식합니다.

누가 사용해야 하나요?

제품 관리자 / 분석가: 자연어 쿼리에서 즉시 시각적 대시보드를 얻고자 하는 분.
DSH 기반 어시스턴트를 구축하는 개발자: 일반 텍스트보다 더 풍부한 UI가 필요한 분.
교육자: 채팅 기반 학습 흐름에 퀴즈, 플롯 및 미디어를 직접 포함할 수 있습니다.

개발 및 기여

리포지토리를 클론하고 pnpm install을 실행한 다음 dsh plugin --profile web add link:$PWD로 플러그인을 로컬 DSH 프로필에 연결합니다.
프로젝트에는 전체 테스트 스위트(pnpm run test)와 Chrome을 헤드리스로 실행하는 시각적 엔드투엔드 검사가 포함되어 있습니다.
내보낸 유형(GenuiBlock, processGenuiSpec)을 사용하면 모든 React 앱에 렌더러를 포함할 수 있습니다.

라이선스

MIT – 자유롭게 사용, 수정 및 재배포할 수 있습니다.