JSON 캔버스 MCP 서버

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

개요

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

• 무한 캔버스 데이터의 생성 및 조작

• 모든 노드 유형(텍스트, 파일, 링크, 그룹) 지원

• 스타일링 및 라벨을 사용한 엣지 연결

• 사양에 대한 검증

• 구성 가능한 출력 경로

Related MCP server: MCP REST API Server

구성 요소

자원

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

• 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")

특허

이 MCP 서버는 MIT 라이선스에 따라 라이선스가 부여됩니다. 즉, MIT 라이선스의 약관에 따라 소프트웨어를 자유롭게 사용, 수정 및 배포할 수 있습니다. 자세한 내용은 프로젝트 저장소의 LICENSE 파일을 참조하세요.