실제 SVG 에디터를 조작하는 MCP 서버

또 하나의 파일 생성기가 아닙니다

SVG 파일을 써 주는 MCP 서버는 많습니다. 하지만 그것은 피드백 없는 도구 호출 한 번일 뿐입니다: 모델이 좌표를 추측하고, 결과는 다른 곳에서 열어 봐야 무엇이 잘못됐는지 알 수 있습니다. Rayzia의 서버는 그 대신 에이전트에게 완전한 관찰-행동 루프를 제공합니다. get_state 는 장면을 읽습니다: 선택 상태, 각 객체의 id와 바운딩 박스, 페인트, 활성 도구와 현재 뷰. get_render 는 캔버스의 PNG를 반환하므로 모델이 자기 작업을 직접 볼 수 있습니다.

동작이 실제 엔진을 통해 실행되기 때문에 에이전트는 마크업을 출력하는 데 그치지 않습니다. 패스 위에 텍스트를 배치하고, 엔벨로프 워프를 적용하고, 그레이디언트를 붓고, 손으로 적용하는 것과 같은 라이브 패스 이펙트를 실행합니다. 시맨틱 동사 하나가 실행 취소 한 단계이고, 여러 단계 배치도 실행 취소 한 번으로 묶이므로 잘못된 조작은 Ctrl+Z 한 번이면 되돌릴 수 있습니다.

이 루프는 반대 방향으로도 작동합니다. 에디터의 AI 어시스턴트 패널에는 Claude Code (local) 프로바이더가 있어, 거기에 입력한 프롬프트가 다음을 통해 에이전트에 전달됩니다: wait_for_prompt. 에이전트가 작업하는 동안 패널이 각 작업을 실시간으로 중계하고, 작업이 끝나면 다음으로 짧은 답장을 보냅니다: reply_to_user.

도구 목록

열두 개의 도구가 전체 루프를 담당합니다. get_catalog 은 지도 역할을 합니다: 파라미터 스키마가 포함된 시맨틱 동사, 533개의 raw 명령, 69개의 이펙트, 57개의 도구를 반환하므로 에이전트가 API를 지어내는 대신 에디터가 할 수 있는 일을 직접 확인합니다.

Agent Marks를 쓰면 사용자는 프롬프트를 쓰는 대신 캔버스에 영역을 그려서 에이전트에게 일을 맡깁니다. 실행은 mark와 함께 wait_for_prompt로 도착합니다. Rayzia는 명령을 실행할 때마다 바뀐 내용을 mark가 준 영역과 비교합니다. 가장자리를 넘은 것과 mark가 주지 않은 것을 바꾼 것 모두, 그 명령에 대한 응답과 사용자의 캔버스에 즉시 표시되고, 사용자는 그 변경만 따로 되돌릴 수 있습니다. 잘라내는 것도, 막는 것도 없습니다. mark는 문서, 내보내기, 공유 링크에 들어가지 않습니다.

퀵스타트: 다섯 단계로 Claude Code 연결하기

1. AI 패널을 엽니다. rayzia.com의 에디터/editor/에서 AI 어시스턴트 패널을 열고 설정 톱니바퀴를 클릭합니다.
2. Claude Code (local)을 선택합니다. Providers 목록에서 선택하세요; 이 프로바이더는 API 키가 필요 없습니다.
3. SKILL.md를 복사합니다. 패널이 서버 전체가 포함된 스킬을 생성합니다. 여기에는 브라우저의 capability 토큰과 브리지 포트도 들어 있으니, 복사하거나 다운로드해서 Claude Code에 전달하세요.
4. Claude Code가 서버를 등록하게 합니다. 서버 파일을 저장하고 MCP 서버로 추가합니다:

   claude mcp add rayzia \
     --env AI_MCP_PORT=<port> --env AI_MCP_TOKEN=<token> \
     -- node /absolute/path/to/rayzia-mcp-server.mjs

5. Connect를 클릭합니다. 상태 표시등이 초록색으로 바뀝니다; Claude Code에서 직접 입력하거나, Claude Code에 'Rayzia 패널 프롬프트를 대기하라'고 지시한 뒤 패널에서 대화하세요.

서버는 단일 파일이며 다음에서 오픈 소스로 공개되어 있습니다: github.com/RayziaOfficial/rayzia-mcp. 다른 MCP 클라이언트는 표준 .mcp.json 항목을 통해 사용합니다:

{
  "mcpServers": {
    "rayzia": {
      "command": "node",
      "args": ["/absolute/path/to/rayzia-mcp-server.mjs"],
      "env": { "AI_MCP_PORT": "8765", "AI_MCP_TOKEN": "<token>" }
    }
  }
}

설계부터 로컬

서버는 npm 의존성이 전혀 없는 단일 Node 파일이며(Node 16+ 내장 모듈만 사용) 127.0.0.1에 바인딩되므로, 서버가 여러분의 컴퓨터 밖에서 접근되는 일은 없습니다. 모든 작업에는 브라우저마다 한 번 생성되는 capability 토큰이 붙고, 에디터는 토큰이 일치하지 않는 작업을 거부하므로, 해당 포트를 점유한 악성 로컬 프로세스가 캔버스를 조작할 수 없습니다.

파일 및 문서 작업(저장, 열기, 새로 만들기, 가져오기)은 엔진 경계에서 차단 목록으로 막혀 있습니다. 연결은 에디터 쪽에서 옵트인으로만 이루어지며, 배포된 https 에디터에서도 작동합니다: 브리지가 Chrome의 Private Network Access 프리플라이트에 응답하므로 페이지가 루프백 서버에 접근할 수 있습니다.

개발자용 설정 없이 AI로 벡터를 만들고 싶다면, 에디터 내장 어시스턴트가 여러분의 Claude 또는 GPT 계정으로 그 역할을 합니다: AI SVG 생성기.

Rayzia MCP: 자주 묻는 질문