El servidor MCP que maneja un editor SVG de verdad

No es otro generador de archivos

Muchos servidores MCP pueden escribir un archivo SVG. Eso es una sola llamada sin retroalimentación: el modelo adivina las coordenadas y luego tú abres el resultado en otro lado para descubrir qué salió mal. El servidor de Rayzia le da al agente un ciclo completo de observar y actuar. get_state lee la escena: la selección, el id y el cuadro delimitador de cada objeto, las pinturas, la herramienta activa y la vista actual. get_render devuelve un PNG del lienzo para que el modelo pueda ver su propio trabajo.

Como las acciones pasan por el motor real, el agente no se limita a emitir marcado. Coloca texto sobre un trazado, aplica deformaciones de envolvente, vierte degradados y ejecuta los mismos efectos de trazado en vivo que aplicarías a mano. Cada verbo semántico es un solo paso de deshacer, y un lote de pasos queda como un solo deshacer, así que un movimiento equivocado se corrige con un Ctrl+Z.

El ciclo también funciona a la inversa. El panel de Asistente de IA del editor tiene un proveedor Claude Code (local): los prompts que escribes ahí llegan al agente mediante wait_for_prompt, y el panel narra cada operación en vivo mientras el agente trabaja. Al terminar, publica una respuesta breve con reply_to_user.

Las herramientas

Nueve herramientas cubren todo el ciclo. get_catalog es el mapa: devuelve los verbos semánticos con sus esquemas de parámetros, 533 comandos crudos, 69 efectos y 57 herramientas, para que el agente descubra lo que el editor puede hacer en vez de alucinar una API.

Inicio rápido: conecta Claude Code en cinco pasos

1. Abre el panel de IA. En el editor en rayzia.com/vector/, abre el panel de Asistente de IA y haz clic en el engranaje de ajustes.
2. Elige Claude Code (local). Selecciónalo en la lista de proveedores; este proveedor no necesita clave de API.
3. Copia el SKILL.md. El panel genera un skill con el servidor completo incrustado, más el token de capacidad de tu navegador y el puerto del puente; cópialo o descárgalo y entrégaselo a Claude Code.
4. Deja que Claude Code registre el servidor. Guarda el archivo del servidor y lo agrega como 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. Haz clic en Conectar. El punto de estado se pone verde; escribe directamente en Claude Code, o chatea desde el panel pidiéndole a Claude Code que escuche los prompts del panel de Rayzia.

El servidor es un solo archivo, de código abierto en github.com/RayziaOfficial/rayzia-mcp. Otros clientes MCP lo usan mediante una entrada estándar .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 diseño

El servidor es un único archivo de Node sin dependencias de npm (solo módulos integrados de Node 16+), y se enlaza a 127.0.0.1, así que nunca es accesible desde fuera de tu máquina. Cada operación lleva un token de capacidad generado una vez por navegador, y el editor rechaza cualquier operación con un token que no coincida, de modo que un proceso local malicioso que ocupe el puerto no puede manejar tu lienzo.

Las operaciones de archivo y de documento (guardar, abrir, nuevo e importar) están bloqueadas en el límite del motor. Conectarse es opcional desde el lado del editor, y también funciona con el editor https desplegado: el puente responde al preflight de Private Network Access de Chrome para que la página pueda alcanzar el servidor en loopback.

Si quieres vectores hechos con IA sin la fontanería de desarrollador, el asistente integrado en el editor lo cubre con tu propia cuenta de Claude o GPT: mira el generador de SVG con IA.

MCP de Rayzia: preguntas frecuentes