Skip to main content
Glama

SVG Editor

MCP-приложение для редактирования SVG-схем, предназначенное для Wisp Science и Claude Science.

Ключевые возможности: в диалоге открывается научная SVG-схема, которую можно редактировать вручную (выделение, перетаскивание, смена цвета/текста/шрифта) или задавать устно / печатать (отправлять хост-ассистенту или выполнять простые команды прямо на месте).

Оно упаковано по тем же соглашениям, что и Motif / Ketcher:

  • .claude-plugin/plugin.json + .mcp.json + skills/*/SKILL.md

  • Готовый stdio MCP (без npm install при установке)

  • ui://svg-editor/editor.html (text/html;profile=mcp-app)

  • Если хост не запускает live-приложение, используется svg_create_artifact как автономный HTML

Как это работает

  1. Ассистент вызывает svg_open_editor (можно передать SVG-текст). Wisp / Claude Science открывает редактор в центральной панели.

  2. Вы выделяете элементы на холсте и меняете их свойства; состояние выделения через ui/update-model-context попадает в следующий шаг диалога.

  3. Нижняя панель команд:

    • применить локально: локальный синтаксис (изменить заголовок, сменить цвет, скрыть легенду, изменить размер шрифта, сдвиг)

    • отправить ассистенту: ui/message, а модель через svg_inspect + svg_apply делает точечные хирургические правки

  4. Не перерисовывайте всю схему заново. Пути и геометрия данных по умолчанию остаются без изменений.

Related MCP server: inkscape-mcp

Разработка

Требуется Node.js 20.19+ (рекомендуется 22+).

npm install
npm test
npm run preview    # 浏览器里单独预览编辑器
npm run build      # UI + server + dist-plugin zip
node dist/svg-editor-mcp.mjs   # stdio MCP

Установка в Wisp Science

  1. npm run build

  2. Откройте Настройки → Плагины → Установить плагин и выберите svg-editor-for-wisp-science.zip

  3. Для удалённой установки используйте SHA-256 из svg-editor-for-wisp-science.checksums.json

  4. Включите плагин для текущего проекта и нажмите Использовать в новой сессии

Wisp открывает MCP-приложение как промежуточную вкладку и пересылает tools/call (включая доступный только приложению svg_commit), пока App всё ещё привязан к исходному MCP-соединению.

Установка в Claude Science

Загрузите dist-plugin/ или zip как плагин Claude (та же структура каталогов, что и Motif for Claude Science). После разрешения локального MCP вызывайте:

  • svg_open_editor — live-редактор

  • svg_create_artifact — резервный автономный HTML

Инструменты

Инструмент

Назначение

svg_open_editor

Открыть live-редактор

svg_inspect

Перечислить редактируемые элементы

svg_apply

Выполнить структурированные хирургические правки

svg_get

Получить текущий SVG

svg_undo / svg_redo

Отмена / повтор на уровне документа

svg_create_artifact

Экспортировать автономный HTML

svg_commit

Только приложение: записать ручные правки обратно

Селекторы: #id, [data-se-id="e12"], text:精确, text:~部分, простой CSS.

Безопасность

  • Удаляются <script>, foreignObject, атрибуты событий и «javascript:»-URL

  • UI работает в iframe с script-only и непрозрачным origin; CSP запрещает внешние сети

  • Максимальный размер схемы — 2 MB

Related MCP Connectors

Related MCP Servers