O servidor MCP que controla um editor SVG de verdade

Não é mais um gerador de arquivos

Muitos servidores MCP conseguem escrever um arquivo SVG. Isso é uma única chamada de ferramenta sem feedback: o modelo chuta as coordenadas e depois você abre o resultado em outro lugar para descobrir o que deu errado. O servidor da Rayzia dá ao agente um ciclo completo de observar e agir. get_state lê a cena: a seleção, o id e a caixa delimitadora de cada objeto, as pinturas, a ferramenta ativa e a visualização atual. get_render retorna um PNG do canvas para que o modelo possa ver o próprio trabalho.

Como as ações passam pelo motor real, o agente não fica limitado a emitir marcação. Ele coloca texto em um caminho, aplica distorções de envelope, despeja gradientes e executa os mesmos efeitos de caminho ao vivo que você aplicaria à mão. Cada verbo semântico é um único passo de desfazer, e um lote de passos vira um único desfazer, então um movimento errado está a um Ctrl+Z de distância.

O ciclo também funciona ao contrário. O painel Assistente de IA do editor tem um provedor Claude Code (local): os prompts que você digita ali chegam ao agente por meio de wait_for_prompt, e o painel narra cada operação ao vivo enquanto o agente trabalha. Ao terminar, ele publica uma resposta curta de volta com reply_to_user.

As ferramentas

Nove ferramentas cobrem o ciclo inteiro. get_catalog é o mapa: retorna os verbos semânticos com esquemas de parâmetros, 533 comandos brutos, 69 efeitos e 57 ferramentas, para que o agente descubra o que o editor pode fazer em vez de alucinar uma API.

Início rápido: conecte o Claude Code em cinco passos

1. Abra o painel de IA. No editor em rayzia.com/vector/, abra o painel Assistente de IA e clique na engrenagem de configurações.
2. Escolha Claude Code (local). Selecione-o na lista de Provedores; esse provedor não precisa de chave de API.
3. Copie o SKILL.md. O painel gera uma skill com o servidor inteiro embutido, além do token de capacidade do seu navegador e da porta da ponte; copie ou baixe e entregue ao Claude Code.
4. Deixe o Claude Code registrar o servidor. Ele salva o arquivo do servidor e o adiciona como um servidor MCP:

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

5. Clique em Conectar. O ponto de status fica verde; digite direto no Claude Code, ou converse pelo painel dizendo ao Claude Code para 'escutar os prompts do painel da Rayzia'.

O servidor é um único arquivo, de código aberto em github.com/RayziaOfficial/rayzia-mcp. Outros clientes MCP usam o servidor por meio de uma entrada padrão .mcp.json :

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

Local por design

O servidor é um único arquivo Node sem nenhuma dependência do npm (apenas recursos nativos do Node 16+), e ele escuta em 127.0.0.1, então nunca fica acessível de fora da sua máquina. Cada operação carrega um token de capacidade gerado uma vez por navegador, e o editor rejeita qualquer operação com token incompatível, então um processo local malicioso ocupando a porta não consegue controlar seu canvas.

Operações de arquivo e documento (salvar, abrir, novo e importar) ficam bloqueadas na fronteira do motor. A conexão é opcional do lado do editor e também funciona com o editor https em produção: a ponte responde ao preflight de Private Network Access do Chrome para que a página alcance o servidor de loopback.

Se você quer vetores feitos por IA sem o encanamento de desenvolvedor, o assistente dentro do editor cobre isso com sua própria conta Claude ou GPT: veja o gerador de SVG com IA.

MCP da Rayzia: perguntas frequentes