MUP — Model UI Protocol

繁體中文

대화형 UI를 LLM 채팅에 도입 — 개발자가 아닌 사람도 에이전트 AI를 경험할 수 있도록.

현재 버전: 0.2.11 | 프로토콜: mup/2026-03-17

데모

Slides — AI가 실시간으로 프레젠테이션 제작

Claude가 차트, 표, 테마를 갖춘 전체 슬라이드 덱을 함수 호출만으로 만듭니다.

PDF to Presentation — AI가 논문을 읽고 발표

Claude가 PDF에서 AlexNet 논문을 읽고, Markdown 노트를 작성하고, 인간-AI 협업으로 그림을 캡처하고, 차트와 표가 포함된 19개 슬라이드 프레젠테이션을 만든 다음, 새 패널 내 읽기 모드에서 슬라이드별로 발표합니다 — 모두 실시간 내레이션과 함께.

Sound Pad — AI가 처음부터 트랙 작곡

브라우저 합성 16개 악기, 샘플 0개. Claude가 일렉트로 스윙 트랙을 레이어별로 작곡하고, 각 섹션 전환에 맞춰 이벤트 기반 내레이션을 제공합니다.

Related MCP server: MCP Kkebi

MUP란 무엇인가?

MUP는 LLM 채팅 인터페이스 안에 살아 있는 대화형 UI 컴포넌트입니다.

시각적 인터페이스와 호출 가능한 함수를 함께 묶습니다. 사용자는 버튼을 클릭해 조작하고, LLM은 함수 호출로 조작합니다. 양쪽 모두 상대방의 작업을 실시간으로 확인할 수 있습니다.

가장 단순한 MUP는 단일 .html 파일 하나입니다 — 빌드 단계도, 프레임워크도, SDK도 필요 없습니다.

왜?

에이전트 AI는 강력하지만, 오늘날 텍스트 명령과 개발자 도구 뒤에 갇혀 있습니다. 대부분의 사람들은 이를 경험하지 못합니다.

MUP는 이를 바꿉니다. 클릭 가능한 시각적 UI를 채팅 안에 바로 넣어, 누구나 프롬프트 한 줄 작성 없이 에이전트 기능을 사용할 수 있게 합니다.

핵심 아이디어

• 공유 함수. 함수는 LLM(도구로) 또는 사용자(UI를 통해)가 호출할 수 있습니다. 양쪽 모두 동일한 코드를 통해 동일한 상태를 조작합니다.

• LLM은 오케스트레이터. MUP는 서로 통신하지 않습니다. LLM이 출력을 읽고 다음 작업을 결정합니다.

• 그냥 HTML. 매니페스트를 작성하고, 함수를 등록하고, 끝. 단일 파일을 배포하세요.

사용 가능한 MUP

• Chat — 기본 내장, 항상 사용 가능

• Slides — 차트, 표, 테마, 읽기 모드, 내보내기를 갖춘 프레젠테이션 편집기 (데모)

• PDF Reader — 페이지 텍스트 추출 및 영역 선택/캡처가 가능한 PDF 뷰어

• Markdown — 주석 및 문서 관리 기능을 갖춘 Markdown 작업 공간

• Sound Pad — 시퀀서, 트랙별 볼륨, 이벤트 시스템을 갖춘 16패드 신디사이저 (데모)

• Chord Pad — 5가지 신스 보이스, 코드 진행, 멜로디 재생을 갖춘 음악 이론 키보드

• Diagram — 여러 레이아웃 알고리즘을 갖춘 자동 레이아웃 노드-엣지 다이어그램(플로우차트, 마인드맵, 아키텍처)

• Star Map — 별자리, 황도, 은하수를 갖춘 위치 기반 대화형 별 지도

• Voice — 음성 합성 및 인식 (Jarvis 모드)

• Notes — 그룹, 스타일, 내보내기를 갖춘 스티커 메모 작업 공간

• Pixel Art — 도형, ASCII 패턴, 채우기, PNG 내보내기를 갖춘 픽셀 캔버스

• Timer — 이벤트 기반 완료를 갖춘 카운트다운 타이머 / 스톱워치

• Progress — 작업 진행 상황 추적

• 더 많은 예시는 archive/examples/에서 확인 (게임, 생산성 등)

집중 개발

Claude로 단일 MUP를 반복적으로 구축하려면 (.html 편집 → Chrome 핫 리로드 → 사용자 상호작용 → 채널이 Claude로 푸시 → 반복), mup-mini-mcp-server를 참조하세요 — 정확히 하나의 MUP만 로드하고 핫 리로드, WebSocket 브리지, 채널 푸시 같은 기본 배관만 제공하는 스캐폴딩 스타일의 형제 프로젝트입니다. 카탈로그도, 그리드도, 추가 기능도 없습니다.

문서

• 스펙 — 프로토콜 정의: 매니페스트, 함수, 수명 주기, 오류 처리

• 설계 철학 — MUP가 이렇게 설계된 이유와 의도적으로 제외한 것들

• 예제 — 워크스루가 포함된 예제 MUP

설치

npm (권장)

npm install -g mup-mcp-server

또는 직접 실행:

npx mup-mcp-server --mups-dir ./my-mups

MCP Server Registry에서도 사용 가능합니다.

소스에서

git clone https://github.com/Ricky610329/mup.git
cd mup/mup-mcp-server
npm install && npm run build

시작하기

Claude Code 사용 (권장)

claude mcp add --transport stdio --scope user mup -- npx mup-mcp-server

Claude Code를 다시 시작하세요. 브라우저 창이 http://localhost:3200에서 열립니다. MUPs 패널을 사용하여 MUP .html 파일 폴더를 로드하거나, 기본 제공 Chat 위젯으로 시작하세요.

실시간 채널 모드

MUP는 채널 알림을 통해 상호작용을 Claude의 대화에 직접 푸시할 수 있습니다. 활성화하려면:

claude --dangerously-load-development-channels server:mup

이를 통해 MUP가 사용자 작업을 실시간으로 Claude에 전달할 수 있습니다. 이 플래그가 없어도 모든 MUP 기능은 작동합니다 — 상호작용은 푸시 대신 폴링으로 전달될 뿐입니다.

Claude Desktop 사용

claude_desktop_config.json에 추가:

{
  "mcpServers": {
    "mup": {
      "command": "npx",
      "args": ["mup-mcp-server"]
    }
  }
}

빠른 예제

<script type="application/mup-manifest">
{
  "name": "Counter",
  "description": "A counter. User clicks +/-, LLM can set or read the value.",
  "functions": [
    {
      "name": "setCount",
      "description": "Set the counter to a specific value",
      "inputSchema": {
        "type": "object",
        "properties": { "value": { "type": "number" } },
        "required": ["value"]
      }
    },
    {
      "name": "getCount",
      "description": "Get the current counter value",
      "inputSchema": { "type": "object", "properties": {} }
    }
  ]
}
</script>

이것을 MUP 호환 호스트에 넣으면 작동합니다.

아키텍처

┌──────────────────────────────────────────┐
│             MUP (.html file)             │
│        manifest + UI + functions         │
└──────────────────┬───────────────────────┘
                   │ loaded by
                   ▼
            ┌──────────────┐
            │  MCP Server  │
            │ (Claude Code │
            │  / Desktop)  │
            └──────┬───────┘
                   │ WebSocket
                   ▼
      ┌─────────────────────────────┐
      │        Browser Panel        │
      │  (MUP grid + Chat widget   │
      │   + workspace manager)     │
      └─────────────────────────────┘

스타 기록

라이선스

MIT