JSON 캔버스 MCP 서버

공식 사양 에 따라 JSON Canvas 파일을 처리하는 도구를 제공하는 모델 컨텍스트 프로토콜(MCP) 서버 구현입니다. 이 서버를 사용하면 무한한 Canvas 데이터 구조를 생성, 수정 및 검증할 수 있습니다.

개요

JSON Canvas MCP 서버는 JSON Canvas 1.0 사양의 완전한 구현을 제공하여 다음을 가능하게 합니다.

무한 캔버스 데이터의 생성 및 조작
모든 노드 유형(텍스트, 파일, 링크, 그룹) 지원
스타일링 및 라벨을 사용한 엣지 연결
사양에 대한 검증
구성 가능한 출력 경로

Related MCP server: Canvas MCP Server V2.0

구성 요소

자원

서버는 다음과 같은 리소스를 제공합니다.

canvas://schema : 캔버스 파일 검증을 위한 JSON 스키마
canvas://examples : 다양한 기능을 보여주는 예시 캔버스 파일
canvas://templates : 새로운 캔버스를 생성하기 위한 템플릿

도구

노드 작업

노드 생성
- 지원되는 모든 유형의 새 노드를 만듭니다.
- 입력:
  - type (문자열): 노드 유형("텍스트", "파일", "링크", "그룹")
  - properties (객체): 노드별 속성
    - 공통: id , x , y , width , height , color
    - 유형별: text , file , url 등
- 반환: 노드 객체 생성됨
업데이트_노드
- 기존 노드의 속성 업데이트
- 입력:
  - id (문자열): 업데이트할 노드 ID
  - properties (객체): 업데이트할 속성
- 반환: 업데이트된 노드 객체
삭제_노드
- 노드와 연결된 에지를 제거합니다.
- 입력:
  - id (문자열): 삭제할 노드 ID
- 반환: 성공 확인

엣지 운영

크리에이트_에지
- 노드 사이에 새로운 에지를 만듭니다
- 입력:
  - id (문자열): 고유한 에지 식별자
  - fromNode (문자열): 소스 노드 ID
  - toNode (문자열): 대상 노드 ID
  - fromSide (선택적 문자열): 시작 측면("top", "right", "bottom", "left")
  - toSide (선택적 문자열): 끝 쪽
  - color (선택적 문자열): 가장자리 색상
  - label (선택적 문자열): Edge 레이블
- 반환: 생성된 에지 객체
업데이트_에지
- 기존 모서리 속성 업데이트
- 입력:
  - id (문자열): 업데이트할 Edge ID
  - properties (객체): 업데이트할 속성
- 반환: 업데이트된 에지 객체
삭제_가장자리
- 모서리 제거
- 입력:
  - id (문자열): 삭제할 Edge ID
- 반환: 성공 확인

캔버스 운영

유효성 검사_캔버스
- 사양에 맞춰 캔버스 검증
- 입력:
  - canvas (객체): 검증할 Canvas 데이터
- 반환: 오류가 있는 검증 결과
내보내기_캔버스
- 캔버스를 다양한 형식으로 내보내기
- 입력:
  - format (문자열): 대상 형식("json", "svg", "png")
  - canvas (객체): 내보낼 캔버스 데이터
- 반환: 요청된 형식으로 캔버스를 내보냈습니다.

Claude Desktop과 함께 사용

도커

claude_desktop_config.json 에 다음을 추가하세요:

지엑스피1

자외선

{ "mcpServers": { "jsoncanvas": { "command": "uv", "args": [ "--directory", "/path/to/jsoncanvas", "run", "mcp-server-jsoncanvas" ], "env": { "OUTPUT_PATH": "./output" } } } }

구성

서버는 환경 변수를 사용하여 구성할 수 있습니다.

OUTPUT_PATH : 캔버스 파일이 저장될 디렉토리(기본값: "./output")
FORMAT : 캔버스 파일의 기본 출력 형식(기본값: "json")

건물

도커 빌드

docker build -t mcp/jsoncanvas .

로컬 빌드

# Install uv if not already installed curl -LsSf https://astral.sh/uv/install.sh | sh # Create virtual environment and install dependencies uv venv source .venv/bin/activate # On Windows: .venv\Scripts\activate uv pip install -e . # Run tests pytest

사용 예

캔버스 만들기

from jsoncanvas import Canvas, TextNode, Edge # Create nodes title = TextNode( id="title", x=100, y=100, width=400, height=100, text="# Hello Canvas\n\nThis is a demonstration.", color="#4285F4" ) info = TextNode( id="info", x=600, y=100, width=300, height=100, text="More information here", color="2" # Using preset color ) # Create canvas canvas = Canvas() canvas.add_node(title) canvas.add_node(info) # Connect nodes edge = Edge( id="edge1", from_node="title", to_node="info", from_side="right", to_side="left", label="Connection" ) canvas.add_edge(edge) # Save canvas canvas.save("example.canvas")