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

Orbital system: rings of dots rotating at different speeds around a breathing sun, with a comet trailing its tail Lissajous curve drawing itself stroke by stroke over a dot grid

Both drawn by an AI through nakkas, one JSON config each, iterated against its own PNG previews. Pure CSS animation, no JavaScript.

Nakkas is an MCP (Model Context Protocol) server that lets AI assistants like Claude create animated SVG graphics from a declarative JSON config: logos, icons, loading spinners, GitHub README banners, badges, and generative art. It renders CSS @keyframes and SMIL animations with no JavaScript, so the output works inside GitHub READMEs and anywhere an <img> tag renders SVG. Every render comes back as a PNG preview plus a server-side artifact id, so the AI sees its own work immediately and iterates without the SVG text ever passing through its context window.

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
  → AI previews the PNG, critiques, revises
  → clean animated SVG output

Часто задаваемые вопросы

Инструменты были проиндексированы:
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, которым нужен увеличенный предпросмотр).

Предварительный просмотр SVG

Параметры
  • artifactstring

    Идентификатор артефакта, возвращаемый render_svg (например, «art-1»). Предпочтительнее, чем content.

  • contentstring

    Строка SVG для рендеринга в PNG. Нужна только при отсутствии идентификатора артефакта.

  • formatenum

    Формат содержимого; определяется автоматически из содержимого, если не указан

  • widthnumber

    Отрисовывает ширину в пикселях; по умолчанию используется собственная объявленная ширина SVG.

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,…)

Рендерит SVG

Параметры
  • animationsobject[]
  • canvasobjectобязательный
  • defsobject
  • elementsunknown[]обязательный
  • 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. Фактический путь сохранения возвращается в ответе.

Сохраняет содержимое

Параметры
  • artifactstring

    Идентификатор артефакта, возвращаемый render_svg (например, «art-1»). Предпочтительнее, чем content.

  • contentstring

    Необработанный контент для сохранения. Нужен только тогда, когда контент не был получен из render_svg.

  • formatenum

    Формат вывода. 'auto' определяет формат по расширению файла (.svg сохраняет как текст, .png рендерит в изображение). 'svg' сохраняет содержимое как UTF-8 текстовый файл. 'png' рендерит SVG-содержимое в PNG-изображение перед сохранением.

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

    Путь к файлу для сохранения. Каталог должен уже существовать. Если файл уже существует, перед расширением добавляется числовой счётчик: design.svg становится design-1.svg, затем design-2.svg и так далее. Фактический сохранённый путь возвращается в ответе.

  • widthnumber

    Для растровых форматов (например, PNG): ширина рендеринга в пикселях. По умолчанию берутся собственные заявленные размеры исходного контента.

0.5.0основная
0.4.0
0.3.1
0.3.0
0.2.0
0.1.7
0.1.6
0.1.5
0.1.4
0.1.3
0.1.2
0.1.1
0.1.0

Выберите клиент, чтобы установить arikusi/nakkas:

Любой клиент

Конфиг добавления MCP сервера стандартный, обычно он не меняется вообще, поэтому подходит практически к любому ИИ клиенту, поддерживающему MCP.

{
  "mcpServers": {
    "arikusi-nakkas-72t99a4ora": {
      "command": "npx",
      "args": [
        "-y",
        "nakkas@latest"
      ]
    }
  }
}
CursorCursor

Перейдите по ссылке и сервер автоматически будет добавлен в Cursor. Либо откройте/создайте файл ~/.cursor/mcp.json(%USERPROFILE%\.cursor\mcp.json на Windows) и добавьте конфиг сервера:

{
  "mcpServers": {
    "arikusi-nakkas-72t99a4ora": {
      "command": "npx",
      "args": [
        "-y",
        "nakkas@latest"
      ]
    }
  }
}
VS Code

Создайте .vscode/mcp.json в проекте (ключ верхнего уровня — servers):

{
  "servers": {
    "arikusi-nakkas-72t99a4ora": {
      "type": "stdio",
      "command": "npx",
      "args": [
        "-y",
        "nakkas@latest"
      ]
    }
  }
}

Либо добавьте сервер через терминал:

code --add-mcp "{\"name\":\"arikusi-nakkas-72t99a4ora\",\"type\":\"stdio\",\"command\":\"npx\",\"args\":[\"-y\",\"nakkas@latest\"]}"
ClaudeClaude Desktop

Откройте Settings → Developer → Edit Config — это откроет файл claude_desktop_config.json:

  • macOS: ~/Library/Application Support/Claude/claude_desktop_config.json
  • Windows: %APPDATA%\Claude\claude_desktop_config.json

Впишите сервер и полностью перезапустите Claude Desktop:

{
  "mcpServers": {
    "arikusi-nakkas-72t99a4ora": {
      "command": "npx",
      "args": [
        "-y",
        "nakkas@latest"
      ]
    }
  }
}
Claude CodeClaude Code

Добавьте сервер одной командой в терминале:

claude mcp add arikusi-nakkas-72t99a4ora -- npx -y nakkas@latest

Либо через JSON-конфиг:

claude mcp add-json arikusi-nakkas-72t99a4ora "{\"command\":\"npx\",\"args\":[\"-y\",\"nakkas@latest\"]}"
CodexCodex

Добавьте сервер командой в терминале:

codex mcp add arikusi-nakkas-72t99a4ora -- npx -y nakkas@latest

Либо вручную в ~/.codex/config.toml(%USERPROFILE%\.codex\config.toml на Windows):

[mcp_servers.arikusi-nakkas-72t99a4ora]
command = "npx"
args = ["-y", "nakkas@latest"]
PerplexityPerplexity

MCP доступен подписчикам Perplexity Pro / Max / Enterprise. Локальные серверы — только в приложении для macOS.

  1. Откройте Настройки аккаунта → Connectors.
  2. Установите вспомогательное приложение PerplexityXPC (один раз).
  3. Нажмите Add Connector → вкладка Simple.
  4. В поле Server Name укажите arikusi/nakkas, а в поле команды запуска — строку ниже:
npx -y nakkas@latest

Нажмите Save и дождитесь статуса Running.

WindsurfWindsurf

Откройте Windsurf Settings → Cascade → MCP Servers или отредактируйте файл ~/.codeium/windsurf/mcp_config.json:

{
  "mcpServers": {
    "arikusi-nakkas-72t99a4ora": {
      "command": "npx",
      "args": [
        "-y",
        "nakkas@latest"
      ]
    }
  }
}
ClineCline

В панели Cline нажмите иконку MCP Servers → Configure → Configure MCP Servers (или отредактируйте ~/.cline/mcp.json) и добавьте сервер:

{
  "mcpServers": {
    "arikusi-nakkas-72t99a4ora": {
      "command": "npx",
      "args": [
        "-y",
        "nakkas@latest"
      ],
      "disabled": false,
      "autoApprove": []
    }
  }
}
Continue

Создайте файл в .continue/mcpServers/ (например arikusi-nakkas-72t99a4ora.yaml) или добавьте блок в config.yaml. MCP работает только в режиме agent:

mcpServers:
  - name: arikusi-nakkas-72t99a4ora
    command: npx
    args:
      - "-y"
      - "nakkas@latest"
Zed

Выполните agent: add context server или откройте настройки (zed: open settings file) и добавьте сервер в объект context_servers:

{
  "context_servers": {
    "arikusi-nakkas-72t99a4ora": {
      "command": "npx",
      "args": [
        "-y",
        "nakkas@latest"
      ]
    }
  }
}

Похожие MCP-сервера

GenWaveLLC/svgmaker-mcp

GenWaveLLC/svgmaker-mcp

от genwavellc

SVGMaker MCP сервер на базе ИИ: генерирует, редактирует и конвертирует SVG по текстовому описанию. Подходит дизайнерам и разработчикам: создавайте векторную графику, редактируйте естественным языко...

TypeScript⭐ 88
delmas41/gradusnotation

delmas41/gradusnotation

от delmas41

Рендерит нотную запись (SVG, MusicXML, MIDI), валидирует партитуры, ищет по базе теории музыки и анализирует гармонию. Полезен AI-агентам, работающим с музыкой без графического интерфейса.

JavaScript⭐ 3
botmonster/image2svg-mcp

botmonster/image2svg-mcp

от botmonster

MCP-сервер для конвертации растровых изображений в SVG. Работает с PNG, JPG, WEBP, принимает base64 или URL, даёт полный контроль над параметрами векторизации. Идеален для автоматизации дизайна и п...

Python⭐ 10
r-huijts/rijksmuseum-mcp

r-huijts/rijksmuseum-mcp

от r-huijts

MCP-сервер для доступа к коллекции Рейксмузеума: поиск картин, подробные детали и изображения, коллекции и временные шкалы художников. Помогает AI-моделям изучать искусство.

JavaScript⭐ 72
mikechao/metmuseum-mcp

mikechao/metmuseum-mcp

от mikechao

MCP сервер для доступа к коллекции Метрополитен Музея. Ищите произведения искусства через естественные запросы, получайте изображения и детали объектов. Полезен искусствоведам, разработчикам и любителям искусства.

TypeScript⭐ 35
molanojustin/smithsonian-mcp

molanojustin/smithsonian-mcp

от molanojustin

MCP-сервер для AI-ассистентов, открывающий доступ к 3+ миллионам объектов Смитсоновского института. Поиск, детальная информация о предметах, изображения и данные о выставках через единый протокол. ...

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

Лука Никитин