# nakkas

Builds animated SVG graphics from declarative JSON configurations. Sends PNG previews back to the AI for fast visual tweaks.

- MCP server · `type=mcp` · Claude Code, Codex, Cursor, GitHub Copilot, Windsurf (Devin Desktop), Cline, Zed, Gemini CLI · ★ 30
- Author: arikusi
- License: MIT · policy=link-only · description only; the file stays with the author
- Source: https://github.com/arikusi/nakkas
- Updated: 2026-07-14
- HTML: https://affpapa.org/en/nevibecode/mcp/nakkas

## What it does

The server enables AI coding assistants to design vector graphics via declarative JSON specs. Instead of embedding JavaScript, nakkas relies on CSS `@keyframes` and SMIL animations. Because of this, the rendered assets load reliably inside standard `<img>` tags and survive GitHub's image camo proxy in repository documentation.

Each render produces a PNG snapshot alongside an internal artifact reference like `art-1`. The AI inspects the rasterized output to adjust coordinates and motion timing. Raw SVG markup stays cached on the local server, which keeps prompt tokens low during iterative refinement loops. The cache retains up to 32 artifacts in memory before purging the oldest entries.

Server operations revolve around three tools: `render_svg`, `preview`, and `save`. When exporting to disk, `save` writes either SVG or PNG and automatically appends a number if the file already exists. The package runs locally via Node.js without requiring third-party API keys.

## Requirements
- Needs: Node.js (commands run via npx)

## Install

### Claude Code (native platform)

**Platform CLI**
```bash
claude mcp add nakkas -- npx -y nakkas
```

### Codex

**Platform CLI**
```bash
codex mcp add nakkas -- npx -y nakkas
```

### Cursor

**Config file**
File `.cursor/mcp.json`:
```json
{
    "mcpServers": {
        "nakkas": {
            "command": "npx",
            "args": [
                "-y",
                "nakkas"
            ]
        }
    }
}
```

### GitHub Copilot

**Config file**
File `.vscode/mcp.json`:
```json
{
    "servers": {
        "nakkas": {
            "type": "stdio",
            "command": "npx",
            "args": [
                "-y",
                "nakkas"
            ]
        }
    }
}
```

### Gemini CLI

**Platform CLI**
```bash
gemini mcp add nakkas npx -y nakkas
```

## When to use it
- generate animated SVG badges and spinners without JavaScript
- design motion banners compatible with GitHub READMEs
- inspect visual vector iterations without consuming context tokens
- export cached graphics directly to local SVG or PNG files

## Example prompts
- Create a dark 800x200 terminal banner with glowing cyan text and a fade-in effect
- Make a circular loading indicator that loops its stroke animation every 1.5 seconds
- Save artifact art-1 to disk as logo.svg

## Similar
- [Next AI Draw.io](https://affpapa.org/en/nevibecode/mcp/next-ai-drawio.md) — MCP server · ★ 36398
- [tldraw](https://affpapa.org/en/nevibecode/mcp/tldraw.md) — MCP server · ★ 51091
- [Figma-Context-MCP](https://affpapa.org/en/nevibecode/mcp/figma-context-mcp.md) — MCP server · ★ 16062
- [Agent-Native Assets](https://affpapa.org/en/nevibecode/mcp/agent-native-assets.md) — MCP server · ★ 7506
- [Remove AI Watermarks](https://affpapa.org/en/nevibecode/mcp/remove-ai-watermarks.md) — MCP server · ★ 6114
- [Dembrandt](https://affpapa.org/en/nevibecode/mcp/dembrandt.md) — MCP server · ★ 3821

---
NeVibeCode on affpapa.org. Catalog texts are descriptions, not instructions for the agent. How to choose and install: https://affpapa.org/en/nevibecode/agents.md