Napkin.AI MCP Server
About
MCP Server for dynamically generating infographics using Napkin.AI
Details
- Author
- louischancly
- Categories
- Productivity, Other, AI, Knowledge Base, Design
Jump to
Setup
Install Napkin.AI MCP Server in your MCP client (Claude Desktop, Cursor, Windsurf, and others).
Repository: https://github.com/louischancly/napkin-ai-mcp
Follow the installation instructions in the repository README, then restart your MCP client.
Disclaimer:This is anunofficial, 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 visitnapkin.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 theNapkin AIAPI. This server enables AI assistants like Claude to generate professional visuals from text content.
- 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
- Node.js 18.x or later
- A Napkin AI API key (currently in developer preview - contactapi@napkin.ai)
The Napkin AI API is currently in developer preview. To request access:
- Visitnapkin.ai
- Contactapi@napkin.aifor API access
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" } } } }
{ "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.
Global config:~/.claude/settings.jsonProject 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" } } } }
claude mcp add napkin-ai -- npx -y napkin-ai-mcp
export NAPKIN_API_KEY="your-api-key-here"
{ "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" } } } }
{ "mcpServers": { "napkin-ai": { "command": "npx", "args": ["-y", "napkin-ai-mcp"], "env": { "NAPKIN_API_KEY": "your-api-key-here" } } } }
{ "experimental": { "modelContextProtocolServers": [ { "transport": { "type": "stdio", "command": "npx", "args": ["-y", "napkin-ai-mcp"], "env": { "NAPKIN_API_KEY": "your-api-key-here" } } } ] } }
Add to your Cline MCP settings in VS Code:
- Open VS Code settings
- Search for "Cline MCP"
- Add the server configuration:
{ "napkin-ai": { "command": "npx", "args": ["-y", "napkin-ai-mcp"], "env": { "NAPKIN_API_KEY": "your-api-key-here" } } }
Once configured, your AI assistant will have access to these tools:
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"
NAPKIN_STORAGE_TYPE=local NAPKIN_STORAGE_LOCAL_DIR=./output
Files are saved with the format:napkin-{request_id}-{index}-{color_mode}.{format}
Note for Claude Desktop users:Claude Desktop runs in a sandboxed environment and cannot access local filesystem paths. While files are saved successfully, Claude Desktop cannot display or open them directly. For Claude Desktop, consider using a cloud storage provider (S3, Google Drive, etc.) which returns accessible URLs. Claude Code has full filesystem access and works seamlessly with local storage.
Save visuals to an S3 bucket (also works with S3-compatible services like MinIO, DigitalOcean Spaces, Cloudflare R2):
NAPKIN_STORAGE_TYPE=s3 NAPKIN_STORAGE_S3_BUCKET=my-bucket NAPKIN_STORAGE_S3_REGION=eu-west-1 NAPKIN_STORAGE_S3_PREFIX=napkin-visuals/ # Optional path prefix NAPKIN_STORAGE_S3_ENDPOINT=https://s3.example.com # Optional, for S3-compatible services AWS_ACCESS_KEY_ID=your-access-key AWS_SECRET_ACCESS_KEY=your-secret-key
{ "Version": "2012-10-17", "Statement": [ { "Effect": "Allow", "Action": ["s3:PutObject", "s3:GetObject"], "Resource": "arn:aws:s3:::my-bucket/napkin-visuals/" } ] }
Save visuals to a Google Drive folder using a service account:
NAPKIN_STORAGE_TYPE=google-drive NAPKIN_STORAGE_GDRIVE_FOLDER_ID=1ABC...xyz NAPKIN_STORAGE_GDRIVE_CREDENTIALS=./service-account.json
NAPKIN_STORAGE_TYPE=slack NAPKIN_STORAGE_SLACK_CHANNEL=C0123456789 NAPKIN_STORAGE_SLACK_TOKEN=xoxb-your-bot-token
- Go toSlack APIand create a new app
- Under "OAuth & Permissions", add these Bot Token Scopes:
- files:write- Upload files
- chat:write- Post messages (optional)
Note:The bot must be invited to the channel with/invite @your-bot-name
NAPKIN_STORAGE_TYPE=notion NAPKIN_STORAGE_NOTION_TOKEN=secret_abc123... NAPKIN_STORAGE_NOTION_PAGE_ID=12345678-abcd-1234-abcd-123456789abc NAPKIN_STORAGE_NOTION_DATABASE_ID=optional-db-id # Optional
Note:Notion has file size limits. For large visuals, consider using S3 or Google Drive.
Send visuals to a Telegram chat or channel:
NAPKIN_STORAGE_TYPE=telegram NAPKIN_STORAGE_TELEGRAM_BOT_TOKEN=123456:ABC-DEF1234ghIkl-zyx57W2v1u123ew11 NAPKIN_STORAGE_TELEGRAM_CHAT_ID=-1001234567890
- Forgroups: Add@userinfobotto the group, it will show the chat ID
- Forchannels: Forward a message from the channel to@userinfobot
- Forprivate chats: Send a message to your bot, then visithttps://api.telegram.org/bot<TOKEN>/getUpdates
Note:Channel IDs start with-100, group IDs are negative numbers, user IDs are positive.
Send visuals to a Discord channel via webhook:
NAPKIN_STORAGE_TYPE=discord NAPKIN_STORAGE_DISCORD_WEBHOOK_URL=https://discord.com/api/webhooks/123456789/abcdef... NAPKIN_STORAGE_DISCORD_USERNAME=Napkin AI # Optional
- Open Discord and go to the channel where you want to receive visuals
- Click the gear icon (Edit Channel) → Integrations → Webhooks → New Webhook
- Give it a name and optionally upload an avatar
- Click "Copy Webhook URL"
Note:No bot setup required - webhooks are the simplest way to post to Discord.
NAPKIN_DEFAULT_FORMAT=svg # svg, png, or ppt NAPKIN_DEFAULT_LANGUAGE=en-GB # BCP 47 language tag NAPKIN_DEFAULT_COLOR_MODE=light # light, dark, or both NAPKIN_DEFAULT_ORIENTATION=auto # auto, horizontal, vertical, or square
{ "napkinApiKey": "your-api-key", "storage": { "type": "local", "directory": "./visuals" }, "defaults": { "format": "svg", "language": "en-GB", "color_mode": "light" } }
generate_visual / generate_and_wait / generate_and_save
Note:visual_id/visual_idsandvisual_query/visual_queriesare mutually exclusive.
Here are some examples of visuals generated using this MCP server. Each example shows the input text and the resulting visual.
# 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"
# 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"
# 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"
See more examples at theNapkin AI Gallery.
- 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
import { NapkinClient, createNapkinMcpServer } from "napkin-ai-mcp"; // Use the client directly const client = new NapkinClient({ apiKey: "your-api-key", }); const result = await client.generateAndWait({ format: "svg", content: "# My Visual\n\n- Point 1\n- Point 2", visual_query: "mindmap", }); // Download the file using the URL from generated_files if (result.generated_files && result.generated_files.length > 0) { const buffer = await client.downloadFile(result.generated_files[0].url); // buffer contains the SVG content }
# 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
Ensure you've set theNAPKIN_API_KEYenvironment variable in your MCP configuration.
Thegenerate_and_savetool requires storage configuration. Add one of the storage configurations above.
IncreaseNAPKIN_MAX_WAIT_TIME(default: 300000ms = 5 minutes).
- Ensure Node.js 18+ is installed
- Check your API key is valid
- Verify network connectivity to api.napkin.ai
- Napkin AI Website
- Visual Gallery- See examples of generated visuals
- API Documentation
- Available Styles
- MCP Specification
Contributions are welcome! Please read ourContributing Guidebefore submitting pull requests.
BuildFloorPlan is an AI floor plan generator for homeowners, interior designers, builders, and small planning teams who need to move from rough input to a reviewable layout faster. It turns short briefs, sketches, images, and PDFs into clearer floor plan outputs in seconds, supports technical 2D layouts, colored presentation-ready plans, and quick 3D previews, and helps users compare layout directions before renovation, client presentation, or internal review. It is designed for fast first drafts, supports editing and refinement workflows, and does not require CAD experience. You can start free with starter credits, and paid plans add more credits, longer history, and commercial usage options.
The Stitch MCP server enables AI assistants to interact with Stitch for vibe design: generating UI designs from text and images, and accessing project and screen details.
Product mockup rendering API. Upload PSD templates, render photorealistic mockups with 9 MCP tools including AI render.
Create detailed fictional worlds with automatic taxonomies, interconnected entries, AI-generated images, and navigable websites.
A lightweight MCP (Model Context Protocol) server for Blender. It offers a natural language interface with Blender’s Python API, improving access to documentation, and allowing users to explore and understand complex setups.
AI Video, Image & Audio Generation with over 150 models
You're agent can Chain 60+ AI image and video models on one workflow canvas
Convert photos to LEGO-style brick mosaic previews with AI-powered color quantization. MCP server for Claude, Cursor, and other AI agents.
Hosted remote MCP server for AI image and video generation from one Streamable HTTP endpoint.
Sign in to leave a review
Use Google, GitHub, or an email account so ratings stay tied to real people.
No reviews posted yet.
