Labsco
LouisChanCLY logo

Napkin.AI MCP Server

★ 10

from LouisChanCLY

MCP Server for dynamically generating infographics using Napkin.AI

🔥🔥🔥✓ VerifiedAccount requiredAdvanced setup
#email#automation#slack#notion#database#cloud#git

Napkin AI MCP Server Banner

Disclaimer: This is an unofficial, community-maintained MCP server for Napkin AI. It is not affiliated with, endorsed by, or officially supported by Napkin AI or Second Layer, Inc. For official Napkin AI products and support, please visit napkin.ai.

API Compatibility: Tested with Napkin AI API v1.1.16. Newer API versions may introduce breaking changes.

An MCP (Model Context Protocol) server for generating infographics and visuals using the Napkin AI API. This server enables AI assistants like Claude to generate professional visuals from text content.

Features

  • Visual Generation: Generate SVG, PNG, or PPT visuals from text content
  • Multiple Visual Types: Mindmaps, flowcharts, timelines, comparisons, and more (see gallery)
  • Async Handling: Automatic polling for Napkin AI's async generation
  • Multi-Storage Support: Save generated visuals to:
    • Local filesystem
    • Amazon S3 (or S3-compatible services)
    • Google Drive
    • Slack
    • Notion
    • Telegram
    • Discord
  • Flexible Configuration: Environment variables or JSON config file
  • Full TypeScript Support: Comprehensive type definitions with Zod validation
  • Automatic Retries: Exponential backoff for transient failures (429, 5xx)
  • Debug Logging: Set NAPKIN_DEBUG=true for troubleshooting
  • Dry-Run Mode: Validate requests without calling the API
  • CLI Help: Run with --help for usage information

Integration Guides

Claude Desktop

Add to your Claude Desktop configuration file:

macOS: ~/Library/Application Support/Claude/claude_desktop_config.json

Windows: %APPDATA%\Claude\claude_desktop_config.json

{
  "mcpServers": {
    "napkin-ai": {
      "command": "npx",
      "args": ["-y", "napkin-ai-mcp"],
      "env": {
        "NAPKIN_API_KEY": "your-api-key-here"
      }
    }
  }
}

With local storage enabled:

{
  "mcpServers": {
    "napkin-ai": {
      "command": "npx",
      "args": ["-y", "napkin-ai-mcp"],
      "env": {
        "NAPKIN_API_KEY": "your-api-key-here",
        "NAPKIN_STORAGE_TYPE": "local",
        "NAPKIN_STORAGE_LOCAL_DIR": "/Users/yourname/napkin-visuals"
      }
    }
  }
}

After updating the config, restart Claude Desktop.

Claude Code (CLI)

Add to your Claude Code MCP settings:

Global config: ~/.claude/settings.json Project config: .claude/settings.json

{
  "mcpServers": {
    "napkin-ai": {
      "command": "npx",
      "args": ["-y", "napkin-ai-mcp"],
      "env": {
        "NAPKIN_API_KEY": "your-api-key-here",
        "NAPKIN_STORAGE_TYPE": "local",
        "NAPKIN_STORAGE_LOCAL_DIR": "./visuals"
      }
    }
  }
}

Or run the CLI command:

claude mcp add napkin-ai -- npx -y napkin-ai-mcp

Then set the environment variable:

export NAPKIN_API_KEY="your-api-key-here"

Cursor

Add to your Cursor MCP configuration:

File: ~/.cursor/mcp.json

{
  "mcpServers": {
    "napkin-ai": {
      "command": "npx",
      "args": ["-y", "napkin-ai-mcp"],
      "env": {
        "NAPKIN_API_KEY": "your-api-key-here",
        "NAPKIN_STORAGE_TYPE": "local",
        "NAPKIN_STORAGE_LOCAL_DIR": "./visuals"
      }
    }
  }
}

Windsurf

Add to your Windsurf MCP configuration:

File: ~/.windsurf/mcp.json

{
  "mcpServers": {
    "napkin-ai": {
      "command": "npx",
      "args": ["-y", "napkin-ai-mcp"],
      "env": {
        "NAPKIN_API_KEY": "your-api-key-here"
      }
    }
  }
}

VS Code with Continue

Add to your Continue configuration:

File: ~/.continue/config.json

{
  "experimental": {
    "modelContextProtocolServers": [
      {
        "transport": {
          "type": "stdio",
          "command": "npx",
          "args": ["-y", "napkin-ai-mcp"],
          "env": {
            "NAPKIN_API_KEY": "your-api-key-here"
          }
        }
      }
    ]
  }
}

Cline (VS Code Extension)

Add to your Cline MCP settings in VS Code:

  1. Open VS Code settings
  2. Search for "Cline MCP"
  3. Add the server configuration:
{
  "napkin-ai": {
    "command": "npx",
    "args": ["-y", "napkin-ai-mcp"],
    "env": {
      "NAPKIN_API_KEY": "your-api-key-here"
    }
  }
}

Available Tools

Once configured, your AI assistant will have access to these tools:

ToolDescription
generate_visualSubmit a visual generation request (async)
check_statusCheck the status of a generation request
download_visualDownload a generated visual as base64
generate_and_waitGenerate and wait for completion
generate_and_saveGenerate and save to configured storage
list_stylesGet information about available styles
verify_api_keyVerify your API key is valid and working

Example Prompts

Once configured, try these prompts with your AI assistant:

  • "Create a mindmap visualising the key concepts of machine learning"
  • "Generate a flowchart showing the user registration process"
  • "Make a timeline of major events in the history of computing"
  • "Create an infographic comparing REST vs GraphQL APIs"

Tool Parameters

generate_visual / generate_and_wait / generate_and_save

ParameterTypeDescription
contentstringRequired. Text content to visualise
formatstringOutput format: svg, png, or ppt (default: svg)
dry_runbooleanValidate request without calling API (default: false)
contextstringAdditional context for generation (not shown in visual)
languagestringBCP 47 language tag (e.g., en-GB). Default: en
style_idstringNapkin AI style identifier. See styles
visual_idstringRegenerate a specific visual layout with new content
visual_idsstring[]Array of visual IDs (length must match number_of_visuals)
visual_querystringVisual type: mindmap, flowchart, timeline, etc.
visual_queriesstring[]Array of visual queries (length must match number_of_visuals)
number_of_visualsnumberVariations to generate (1-4, default: 1)
transparent_backgroundbooleanUse transparent background (default: false)
color_modestringlight, dark, or both (default: light)
widthnumberWidth in pixels (PNG only, 100-10000)
heightnumberHeight in pixels (PNG only, 100-10000)
orientationstringauto, horizontal, vertical, or square
text_extraction_modestringauto, rewrite, or preserve (default: auto)
sort_strategystringrelevance, random, or variation (default: relevance)

Note: visual_id/visual_ids and visual_query/visual_queries are mutually exclusive.

Example Output

Here are some examples of visuals generated using this MCP server. Each example shows the input text and the resulting visual.

Mind Map

Input text:

# Benefits of Visual Communication

## Speed

- Processed 60,000x faster than text
- Instant pattern recognition

## Retention

- 80% of what we see is remembered
- Only 20% of text is retained

## Engagement

- 94% more views than text-only
- Higher social sharing rates

Parameters: format: "svg", visual_query: "mindmap", language: "en-GB"

View generated visual

Mind Map Example

Flowchart

Input text:

# User Registration Flow

1. User clicks "Sign Up" button
2. Enter email address
3. System validates email format
4. If invalid, show error message
5. If valid, send verification email
6. User clicks verification link
7. Create password
8. Validate password strength
9. If strong, create account
10. Redirect to dashboard

Parameters: format: "svg", visual_query: "flowchart", language: "en-GB"

View generated visual

Flowchart Example

Timeline

Input text:

# History of Artificial Intelligence

## 1950

Alan Turing publishes "Computing Machinery and Intelligence"

## 1956

The term "Artificial Intelligence" is coined

## 1997

IBM's Deep Blue defeats world chess champion

## 2016

AlphaGo defeats Go world champion Lee Sedol

## 2022

ChatGPT launches, bringing LLMs to the mainstream

Parameters: format: "svg", visual_query: "timeline", language: "en-GB"

View generated visual

Timeline Example

See more examples at the Napkin AI Gallery.

Visual Query Types

  • mindmap - Mind map visualisations
  • flowchart - Process flows and diagrams
  • timeline - Chronological events
  • comparison - Side-by-side comparisons
  • hierarchy - Organisational structures
  • cycle - Cyclical processes
  • list - Bulleted or numbered lists
  • matrix - Grid-based comparisons

Development

# Clone the repository
git clone https://github.com/LouisChanCLY/napkin-ai-mcp.git
cd napkin-ai-mcp

# Install dependencies
npm install

# Run in development mode
npm run dev

# Run tests
npm test

# Build for production
npm run build

API Reference