nakkas MCP Server: Animated SVG Generation for AI Coding Agents

What is the nakkas MCP server?

nakkas is a Model Context Protocol server that lets an AI assistant build animated SVG graphics from a declarative JSON config. The name is an old Turkish word for painter, and the server ships as a single rendering engine.

Typical jobs are logos, icons, loading spinners, GitHub README banners, badges and generative art. The agent decides every detail in the config, and nakkas does the drawing.

How the render loop works

1. The agent writes an SVGConfig object with a canvas, optional defs, elements and animations, then calls render_svg.
2. nakkas returns a PNG preview and an artifact id such as art-1, plus design warnings when it finds problems.
3. The agent looks at the preview, edits the config and renders again.
4. When the result is right, save writes the stored artifact to disk as SVG or PNG.

Where the output can run

The README says the SVG uses CSS keyframes and SMIL, with no JavaScript, so it works inside GitHub README images and anywhere an img tag renders SVG. External fonts and click handlers only work in inline SVG on a web page.

Who it suits

• Developers who want animated logos, spinners or banners without opening a vector editor.
• Teams that need motion assets for READMEs and docs, where scripts are stripped.
• Anyone comparing animation helpers. Related: an animation vocabulary skill and a motion craft skill.

Skip it if

• You need photographic or raster editing. The output is declarative vector graphics.
• You need SMIL motion verified in a preview. The filmstrip option samples CSS animation only.
• You want a full page layout. Related: a canvas design skill.

Use it with UiChemy

nakkas only produces the SVG file. UiChemy is a separate step for the page around it: Composer is an AI visual editor that writes real HTML, CSS and JS inside Elementor or Gutenberg. Click Get Started on uichemy.com.

Connect nakkas MCP Server: Animated SVG Generation for AI Coding Agents to your AI client

npx -y nakkas@latest

1. Add the server to your client

   Paste the config above into the MCP settings of Cursor, Zed or another client. Claude Desktop uses the same block in its claude_desktop_config.json file.

2. Or use the Claude Code command

   Run claude mcp add nakkas npx nakkas@latest to register the server from the terminal.

3. Ask for a graphic

   Try a prompt such as a loading spinner with a draw-on stroke that loops every 1.5 seconds.

4. Build from source if you prefer

   Clone the repository, run npm install && npm run build, and use dist/index.js as the server command.

Client configuration

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

Endpoints and ports

What you can do with it

• One config, many designsA single render_svg call covers shapes, text, groups, gradients, filters, clip paths, masks, patterns and markers.
• Preview on every renderEach render returns a PNG, so the model can critique its own work and revise instead of designing blind.
• Token-cheap iterationThe SVG stays on the server as an artifact, and preview and save address it by id, so revision loops skip the SVG text.
• Filmstrip motion checkSetting frames to a value from 2 to 10 returns one image sampling the CSS animation at that many points in time.
• Design warningsRenders can flag too many concurrent animations, content past the viewport, low contrast text by WCAG ratio, and overlapping text.
• Generators and filtersRadial, arc, grid, scatter and path groups place copies of a child, and 15 filter presets include glow, neon, glitch and emboss.
• Parametric curvesBuilt in functions draw rose, heart, star, lissajous, spiral, superformula, epitrochoid, hypotrochoid and wave shapes.
• Local and keylessThere is no cloud API and no API key. The server runs on your machine.

Tools it exposes

Frequently asked questions