M
MCP Directory CURATED DIRECTORY
911 MCP servers indexed
中文
← Back to directory
N

Nakkas MCP Server

Community
MCP server that turns AI into an SVG artist. One rendering engine, AI decides everything.
How to install ↓ Compare GitHub source repository ↗
Category
Dev Tools #38 of 438
Stars
★ 30 Popular
Transport
stdio (local process)
Runtime
Node.js 18+
Credentials
No credential needed
License
MIT
Last commit
Tools
3
66FMRS · C

Nakkas is an innovative and feature-rich MCP server that provides an efficient workflow for AI-driven animated SVG generation. Its unique feature is the iterative optimization through PNG previews and artifact IDs, reducing context window clutter. The server is highly configurable, supporting a wide range of element types and animations, but users should be aware of limitations such as lack of nested groups, external font support, and JavaScript on GitHub. Overall, it's a high-quality tool suitable for developers looking to leverage AI for vector graphics.

Strongest · Documentation 17/20 Weakest · Reliability 11/20

Reliability
11/20
Security and permissions
13/20
Maintenance
11/20
Documentation
17/20
Setup experience
14/20
Why each score
Reliability 11/20
The README describes a clean three-tool workflow (render_svg/preview/save), field-level validation errors, reference-integrity checks, and claims 397 tests plus a browser ground-truth CI cross-check. However, all of this is declarative evidence: no source files, CI workflows, or test contents were supplied, so the init handshake, tool-behavior consistency, and test claims cannot be statically verified. The README itself admits real edge failures (SDK -32602 on first call). Per calibration rules, without verifiable file-level execution evidence the score stays at or below 12.
Security and permissions 13/20
No red-line risks: runs locally, no cloud API, no keys, no exfiltration surface. But the save tool writes to an arbitrary user-supplied outputPath (only an anti-overwrite counter, no path scoping or confirmation), and the image element accepts external hrefs, creating an unaddressed remote-resource loading surface. No malware, fabricated results, or destructive defaults found, so above the red-line band, but least-privilege scoping and confirmation of side effects are incomplete.
Maintenance 11/20
MIT license, semver 0.5.0, npm package matches the repo, listed on the official MCP Registry, and the README shows active self-maintenance (v0.3.0 bugfix narrative, dogfooding ritual). Missing evidence: commit/release cadence, issue response, dependency update policy, and any security-response channel (no SECURITY.md evidence). Governance signals are thin, so a mid score.
Documentation 17/20
Documentation is a clear strength: install for three clients plus local dev, full SVGConfig structure, complete element-type and filter-preset tables, animation examples, a compatibility matrix, explicit limitation disclosures (GitHub camo restrictions, SMIL not sampled, external fonts unavailable), a detailed troubleshooting section, and a testing-methodology writeup. Deductions: cost/performance limits only partly disclosed (the 32-artifact cap is noted) and documented behavior cannot be statically cross-checked against implementation.
Setup experience 14/20
Setup is very clear: a single npx -y nakkas@latest line connects Claude Desktop, Claude Code, Cursor, and Zed, with per-platform config paths and local-dev instructions; zero external deps and no keys required. Deductions: reliance on npx pulling from npm (supply-chain/network trust undiscussed) and the npm/registry version match cannot be statically verified, so not full marks; the 15-point cap without executable evidence also applies.

Static review · not runListed 2026-09-08

Read the FMRS scoring method →

Fit and risk

What it can accessWrites / deletes local files

Best for

  • Users of MCP-enabled AI assistants like Claude, Cursor, or Zed
  • Projects needing animated SVGs without JavaScript
  • Those embedding animations on GitHub or web pages
  • Designers aiming to quickly prototype and iterate generated vector graphics

Not for

  • SVG applications requiring JavaScript interactivity (e.g., onclick)
  • Scenarios depending on external fonts (GitHub won't load them)
  • Long-term persistence of artifacts (they live only for the server process, capped at 32)
  • Complex nested group structures (nested groups are not supported)

Required permissions

  • Local file system write access (for the save tool)
  • Access to network to load images if URLs are specified
  • Running a local server process (stdio transport)

Risks and side effects

  • The save tool can overwrite files (though it appends a counter to avoid overwriting)
  • Designs may not render correctly on GitHub if they use scripts or external fonts
  • Large or complex animations may result in large output sizes
  • MCP client serialization quirks may cause validation errors

Setup

Before you start

Runtime：Node.js 18+

Add to your Claude Desktop 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"]
}
}
}

Using Claude Code CLI:

claude mcp add nakkas npx nakkas@latest

Or clone and build locally from GitHub.

claude_desktop_config.json 
{
  "mcpServers": {
    "nakkas": {
      "command": "npx",
      "args": [
        "-y",
        "nakkas@latest"
      ]
    }
  }
}

Shown for Claude Desktop. Other clients may use a different file or key (VS Code uses "servers") — the configurator below converts it.

.vscode/mcp.json
{
  "servers": {
    "nakkas": {
      "command": "npx",
      "args": [
        "-y",
        "nakkas@latest"
      ]
    }
  }
}

Goes in your project's .vscode/mcp.json (VS Code uses a "servers" key).

Terminal
claude mcp add nakkas -- npx -y nakkas@latest

Run it in a terminal; replace any <…> placeholders with your own values first.

Generate and validate client config

Check that it works

After adding nakkas to your client config (npx -y nakkas@latest) and restarting, the tools render_svg, preview, and save should appear in the client's tool list; alternatively run `claude mcp add nakkas npx nakkas@latest` and check the connection.

Troubleshooting

  1. MCP error -32602: Check gradient types (use 'linearGradient' or 'radialGradient' not 'linear' or 'radial'), keyframe offsets must be numbers or 'from'/'to', colors must be hex, every element must have a 'type' field.
  2. Blank preview: Ensure elements have fill or stroke, coordinates are within canvas, and filters are properly defined.
  3. Animations not working on GitHub: Avoid script and event handlers, stick to generic fonts, and avoid CSS @import.
  4. Large output: Reduce steps for parametric curves, use minify: true.

Things to try

Once connected, you can ask your AI assistant things like:

  • Make an animated SVG: dark terminal frame (800×200), glowing cyan text 'NAKKAS', neon glow filter, fade-in on load.
  • Create a loading spinner: a circle with a draw-on stroke animation that loops every 1.5 seconds.
  • Make a profile badge (400×120): blue-to-purple gradient, white username text, drop shadow, subtle pulse animation.
  • Save artifact art-1 to ./design.svg.

Tools 3

render_svg writes
Takes SVGConfig JSON, returns a PNG preview + artifact id (+ design analysis warnings).
preview read-only
Re-renders a stored artifact (or raw SVG) to PNG at any width.
save writes
Saves a stored artifact (or raw content) to disk as SVG (text) or PNG (raster).

Use cases

Create animated SVG graphics: logos, icons, loading spinners, generative art
Generate GitHub README banners and badges
Create data visualizations (e.g., animated bar charts)
Rapidly iterate designs: render → preview → revise → save

Supported clients

Claude Desktop
Claude Code
CursorPartial support
ZedPartial support

Listed from the project's documentation, not tested by this site.

Overview

Nakkas is an MCP 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.

Similar servers

Context7 80 · B

Upstash's official server providing up-to-date third-party library docs for AI coding assistants

★ 63.3k · Tools 2 Compare with this →
Compare with other MCP servers

Source revision de074a44b849 Data synced 2026-10-19 Read the FMRS scoring method