arikusi/nakkas

arikusi/nakkas

от arikusi
Nakkas - MCP сервер, который даёт ИИ возможность создавать анимированные SVG: от простых иконок до сложной инфографики. Сервер генерирует чистый SVG с CSS и SMIL анимациями без внешних зависимостей, работая локально.

nakkas

MCP server that turns AI into an SVG artist.
One rendering engine. AI decides everything.

npm version downloads license Marketplace

Officially listed on the MCP Registry, Glama, LobeHub, and PulseMCP.

Official MCP Registry LobeHub Ask DeepWiki

Glama Badge

nakkaş means painter/artist in Turkish (old).

"make a neon terminal logo with animated binary digits"
  → AI constructs JSON config
  → nakkas renders to animated SVG
  → clean animated SVG output

Why

  • One tool, infinite designs. render_svg takes a JSON config. AI fills in everything.
  • AI-native schema. Every field has .describe() annotations so the model knows what to do.
  • Pure declarative SVG. CSS @keyframes + SMIL animations, no JavaScript.
  • Zero external deps. No cloud API, no API keys. Runs locally.

Install

Claude Desktop

Add to your config file:

  • macOS: ~/Library/Application Support/Claude/claude_desktop_config.json
  • Linux: ~/.config/Claude/claude_desktop_config.json
  • Windows: %APPDATA%\Claude\claude_desktop_config.json
{
  "mcpServers": {
    "nakkas": {
      "command": "npx",
      "args": ["-y", "nakkas@latest"]
    }
  }
}
preview

Преобразует содержимое SVG в PNG-изображение, чтобы ИИ мог визуально проверить результат. **Когда использовать:** - render_svg уже возвращает изображение для предпросмотра по умолчанию; вызывайте этот инструмент, чтобы повторно просмотреть сохранённый артефакт с другой шириной, или для предпросмотра SVG, который не получен от render_svg. - Прекращайте итерации, когда визуальный результат соответствует замыслу. **Входные данные:** передайте ЛИБО artifact (идентификатор из render_svg, например "art-1" - предпочтительно, не нужно повторно отправлять SVG), ЛИБО content (строка с сырым SVG). **Поведение:** - Возвращает PNG-изображение (base64), отрендеренное из SVG. - Фон прозрачный по умолчанию. - CSS-анимации и SMIL рендерятся как статический снимок (t=0) - движение не захватывается. **Ширина:** - Опустите ширину, чтобы использовать собственную объявленную ширину/viewBox SVG. - Передайте ширину, чтобы масштабировать результат (полезно для маленьких SVG, которым нужен увеличенный предпросмотр).

Preview SVG

Преобразует содержимое SVG в PNG-изображение, чтобы ИИ мог визуально проверить результат. **Когда использовать:** - render_svg уже возвращает изображение для предпросмотра по умолчанию; вызывайте этот инструмент, чтобы повторно просмотреть сохранённый артефакт с другой шириной, или для предпросмотра SVG, который не получен от render_svg. - Прекращайте итерации, когда визуальный результат соответствует замыслу. **Входные данные:** передайте ЛИБО artifact (идентификатор из render_svg, например "art-1" - предпочтительно, не нужно повторно отправлять SVG), ЛИБО content (строка с сырым SVG). **Поведение:** - Возвращает PNG-изображение (base64), отрендеренное из SVG. - Фон прозрачный по умолчанию. - CSS-анимации и SMIL рендерятся как статический снимок (t=0) - движение не захватывается. **Ширина:** - Опустите ширину, чтобы использовать собственную объявленную ширину/viewBox SVG. - Передайте ширину, чтобы масштабировать результат (полезно для маленьких SVG, которым нужен увеличенный предпросмотр).

Параметры

  • artifactstring

    Artifact id returned by render_svg (e.g. "art-1"). Preferred over content.

  • contentstring

    SVG string to render as PNG. Only needed when no artifact id exists.

  • formatenum

    Content format; auto-detected from content if omitted

    svghtml
  • widthnumber

    Render width in pixels; defaults to SVG's own declared width

render_svg

Преобразует анимированный SVG из JSON-конфига. ИИ управляет всеми параметрами дизайна. **Рабочий процесс:** render_svg возвращает PNG-превью результата и идентификатор артефакта — оцените изображение, исправьте конфиг, снова отрендерьте. Итерируйте как минимум 3 раза перед финализацией. Текст SVG остаётся на сервере: передайте идентификатор артефакта в save (и в preview для другой ширины). **Параметры вывода (форма ответа, не содержимое):** {"svg":false,"preview":true,"previewWidth":800,"minify":false,"frames":4} — все необязательны. minify:true сжимает пробелы в сохранённом SVG. frames:N (2-10) заменяет статическое превью на один кадр-плёнку, сэмплирующую CSS-анимации в N моментов времени — используйте для проверки движения (направление вращения, тайминг, easing), так как одно превью показывает только t=0. SMIL не сэмплируется. **Типы элементов:** rect, circle, ellipse, line, polyline, polygon, path, image, text, textPath, group, use, radial-group, arc-group, grid-group, scatter-group, path-group, parametric **Группы-паттерны (для повторяющихся дизайнов):** radial-group (круговое: cx, cy, radius, count), arc-group (дуга: cx, cy, radius, count, startAngle, endAngle), grid-group (матрица: cols, rows, colSpacing, rowSpacing), scatter-group (случайное: width, height, count, seed), path-group (вдоль ломаной: waypoints, count). Каждая принимает ОДИН дочерний элемент. Дочерний элемент рисуется в локальном начале координат и, при rotateChildren true (по умолчанию), поворачивается так, чтобы локальная ось +x была направлена наружу от центра: рисуйте спицы, лучи и лепестки длинными вдоль оси x, никогда вдоль оси y, иначе они отобразятся как кольцо из хорд. **Параметрические кривые (поле fn):** rose, heart, lissajous, spiral, star, superformula, epitrochoid, hypotrochoid, wave. Размер задаётся полем "scale". Сервер вычисляет координаты. **defs:** градиенты (линейные/радиальные, SMIL-анимированные остановки), фильтры (пресеты: glow, neon, blur, drop-shadow, glitch, chromatic-aberration, noise, outline, inner-shadow, emboss + ещё 5), clipPaths, masks, patterns (заливки-плитки), markers (наконечники стрелок: triangle, arrow,…)

Render SVG

Преобразует анимированный SVG из JSON-конфига. ИИ управляет всеми параметрами дизайна. **Рабочий процесс:** render_svg возвращает PNG-превью результата и идентификатор артефакта — оцените изображение, исправьте конфиг, снова отрендерьте. Итерируйте как минимум 3 раза перед финализацией. Текст SVG остаётся на сервере: передайте идентификатор артефакта в save (и в preview для другой ширины). **Параметры вывода (форма ответа, не содержимое):** {"svg":false,"preview":true,"previewWidth":800,"minify":false,"frames":4} — все необязательны. minify:true сжимает пробелы в сохранённом SVG. frames:N (2-10) заменяет статическое превью на один кадр-плёнку, сэмплирующую CSS-анимации в N моментов времени — используйте для проверки движения (направление вращения, тайминг, easing), так как одно превью показывает только t=0. SMIL не сэмплируется. **Типы элементов:** rect, circle, ellipse, line, polyline, polygon, path, image, text, textPath, group, use, radial-group, arc-group, grid-group, scatter-group, path-group, parametric **Группы-паттерны (для повторяющихся дизайнов):** radial-group (круговое: cx, cy, radius, count), arc-group (дуга: cx, cy, radius, count, startAngle, endAngle), grid-group (матрица: cols, rows, colSpacing, rowSpacing), scatter-group (случайное: width, height, count, seed), path-group (вдоль ломаной: waypoints, count). Каждая принимает ОДИН дочерний элемент. Дочерний элемент рисуется в локальном начале координат и, при rotateChildren true (по умолчанию), поворачивается так, чтобы локальная ось +x была направлена наружу от центра: рисуйте спицы, лучи и лепестки длинными вдоль оси x, никогда вдоль оси y, иначе они отобразятся как кольцо из хорд. **Параметрические кривые (поле fn):** rose, heart, lissajous, spiral, star, superformula, epitrochoid, hypotrochoid, wave. Размер задаётся полем "scale". Сервер вычисляет координаты. **defs:** градиенты (линейные/радиальные, SMIL-анимированные остановки), фильтры (пресеты: glow, neon, blur, drop-shadow, glitch, chromatic-aberration, noise, outline, inner-shadow, emboss + ещё 5), clipPaths, masks, patterns (заливки-плитки), markers (наконечники стрелок: triangle, arrow,…)

Параметры

  • canvasobjectобязательный
  • defsobject
  • elementsarrayобязательный
  • animationsobject[]
  • outputobject
save

Сохраняет отрисованный контент на диск. Учитывает формат: сохраняет как текст или отрисовывает в растровое изображение. ВАЖНО: Используйте это ТОЛЬКО ПОСЛЕ итераций по дизайну с preview-изображениями render_svg. Не сохраняйте при первом отрисовывании. Сначала просмотрите и доработайте. **Ввод:** передайте ЛИБО артефакт (id из render_svg, например "art-1" - предпочтительно, без повторной отправки SVG), ЛИБО контент (сырую строку). **Определение формата:** - 'auto' (по умолчанию): определяет формат по расширению файла. .svg сохраняет как текст, .png отрисовывает в изображение. - 'svg': сохраняет контент как текстовый файл в UTF-8 - 'png': отрисовывает контент (предположительно SVG) в PNG-изображение, затем сохраняет его Если файл уже существует, перед расширением добавляется числовой счетчик, чтобы предотвратить перезапись: design.svg становится design-1.svg, затем design-2.svg. Фактический путь сохранения возвращается в ответе.

Save Content

Сохраняет отрисованный контент на диск. Учитывает формат: сохраняет как текст или отрисовывает в растровое изображение. ВАЖНО: Используйте это ТОЛЬКО ПОСЛЕ итераций по дизайну с preview-изображениями render_svg. Не сохраняйте при первом отрисовывании. Сначала просмотрите и доработайте. **Ввод:** передайте ЛИБО артефакт (id из render_svg, например "art-1" - предпочтительно, без повторной отправки SVG), ЛИБО контент (сырую строку). **Определение формата:** - 'auto' (по умолчанию): определяет формат по расширению файла. .svg сохраняет как текст, .png отрисовывает в изображение. - 'svg': сохраняет контент как текстовый файл в UTF-8 - 'png': отрисовывает контент (предположительно SVG) в PNG-изображение, затем сохраняет его Если файл уже существует, перед расширением добавляется числовой счетчик, чтобы предотвратить перезапись: design.svg становится design-1.svg, затем design-2.svg. Фактический путь сохранения возвращается в ответе.

Параметры

  • artifactstring

    Artifact id returned by render_svg (e.g. "art-1"). Preferred over content.

  • contentstring

    Raw content to save. Only needed when the content did not come from render_svg.

  • outputPathstringобязательный

    File path to save to. The directory must already exist. If the file already exists, a numeric counter is appended before the extension: design.svg becomes design-1.svg, then design-2.svg, and so on. The actual saved path is returned in the response.

  • formatenum

    Output format. 'auto' infers from file extension (.svg saves as text, .png renders to image). 'svg' saves content as a UTF-8 text file. 'png' renders SVG content to a PNG image before saving.

    autosvgpng
  • widthnumber

    For raster formats (png): render width in pixels. Defaults to the source content's own declared dimensions.

Другие проверенные MCP-сервера

metorial/metorial

metorial/metorial

официальный

Metorial — open-source identity and access layer для AI-агентов. Он подключает агентов к реальным системам, обеспечивая единую аутентификацию, RBAC и полную наблюдаемость. Упрощает разработку и пов...

TypeScript3317
higress-group/higress-ops-mcp-server

higress-group/higress-ops-mcp-server

официальный

Higress OPS MCP сервер управляет конфигурацией и мониторингом API-шлюза Higress через агентный поток на LangGraph. Помогает DevOps-инженерам автоматизировать работу с Higress Console API.

Python23
bram2w/baserow

bram2w/baserow

официальный

Baserow: open-source платформа для создания баз данных, приложений и AI-агентов без кода. Её AI-помощник Kuma строит рабочие процессы и дашборды на естественном языке, автоматизируя рутину.

Python5364
crystaldba/postgres-mcp

crystaldba/postgres-mcp

MCP сервер для Postgres, который помогает AI-агентам и разработчикам повышать производительность: диагностика здоровья БД, тюнинг индексов, explain plans и безопасное выполнение SQL. Ускоряет разра...

Python3081
makenotion/notion-mcp-server

makenotion/notion-mcp-server

официальный

Notion MCP сервер даёт AI-агентам прямой доступ к Notion через API: читайте и редактируйте страницы в Markdown, делайте запросы к данным. Разработчики используют этот MCP инструмент для интеграции помощников с заметками и проектами, экономя токены.

TypeScript4540
mrkrsl/web-search-mcp

mrkrsl/web-search-mcp

MCP сервер для веб-поиска локальных LLM без API-ключей. Использует Bing, Brave и DuckDuckGo для поиска и извлечения содержимого страниц. Включает три инструмента: глубокий поиск с контентом, быстрые выдержки и загрузку одной страницы. Совместим с LM Studio и LibreChat.

TypeScript1034
© Каталог MCP, 2026. Все права защищены.
Проект не аффилирован с Anthropic и любыми упомянутыми продуктами.
Все названия и торговые марки принадлежат их владельцам.
Контакты для связи: hi@mcp-katalog.ru

Лука Никитин