nakkas — Claude Code MCP server: what it does, how to install
Builds animated SVG graphics from declarative JSON configurations. Sends PNG previews back to the AI for fast visual tweaks.
claude mcp add nakkas -- npx -y nakkasWhat nakkas 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.
What it helps with
- 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 for the agent
- 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
How to install nakkas
Platform CLI
claude mcp add nakkas -- npx -y nakkasPlatform CLI
codex mcp add nakkas -- npx -y nakkasConfig file
{
"mcpServers": {
"nakkas": {
"command": "npx",
"args": [
"-y",
"nakkas"
]
}
}
}Config file
{
"servers": {
"nakkas": {
"type": "stdio",
"command": "npx",
"args": [
"-y",
"nakkas"
]
}
}
}Platform CLI
gemini mcp add nakkas npx -y nakkasStep by step, with commands for each platform: How to add an MCP server to Claude Code, Codex, Cursor, VS Code, Gemini CLI and more
Questions about nakkas
How to install nakkas in Claude Code?
Run claude mcp add nakkas -- npx -y nakkas in your terminal. The tool launches via npx without manual repo cloning.
What makes nakkas token-efficient during design loops?
It holds the generated markup on the server as an artifact and returns only a PNG preview image with an ID. The model reviews the render without passing lengthy SVG strings through the conversation context.
How does nakkas handle existing files when saving?
The save tool checks the target path before writing. If a conflicting file is present, it increments a numeric suffix to prevent data loss.
