Whimsical MCP Server

MCP server for creating whimsical boards from an LLM context

Catalog onlyCatalog onlySTDIO

Overview

Whimsical MCP Server is a Model Context Protocol (MCP) server that allows users to create Whimsical diagrams programmatically by integrating with Whimsical's API to generate diagrams from Mermaid markup.

To use the Whimsical MCP Server, clone the repository, install the dependencies, and build the project. Then, configure your MCP Client to point to the server's dist folder.

Create Whimsical diagrams using Mermaid markup generated by the MCP Client (e.g., Claude, Windsurf). - Returns both the Whimsical diagram URL and a base64 encoded image for further iteration on the original markup.

Automatically generating system architecture diagrams for documentation.
Creating flowcharts and other visual representations of data programmatically.
Integrating with other tools to enhance diagram creation workflows.

Add to your AI client

Use these steps to connect Whimsical MCP Server in Cursor, Claude, VS Code, and other MCP-compatible apps. The same JSON appears in the Use with menu above for one-click copy.

Cursor

Add this to your .cursor/mcp.json file in your project root, then restart Cursor.

.cursor/mcp.json

{
  "mcpServers": {
    "whimsical-mcp-server-brockreece": {
      "command": "npx",
      "args": [
        "-y",
        "@modelcontextprotocol/server-whimsical-mcp-server-brockreece"
      ]
    }
  }
}

Claude Desktop

Add this server entry to the mcpServers object in your Claude Desktop config, then restart the app.

~/Library/Application Support/Claude/claude_desktop_config.json (macOS) or %APPDATA%\Claude\claude_desktop_config.json (Windows)

{
  "mcpServers": {
    "whimsical-mcp-server-brockreece": {
      "command": "npx",
      "args": [
        "-y",
        "@modelcontextprotocol/server-whimsical-mcp-server-brockreece"
      ]
    }
  }
}

Claude Code

Add this to your project's .mcp.json file. Claude Code will detect it automatically.

.mcp.json (project root)

{
  "mcpServers": {
    "whimsical-mcp-server-brockreece": {
      "command": "npx",
      "args": [
        "-y",
        "@modelcontextprotocol/server-whimsical-mcp-server-brockreece"
      ]
    }
  }
}

VS Code (Copilot)

Add this to your .vscode/mcp.json file. Requires the GitHub Copilot extension with MCP support enabled.

.vscode/mcp.json

{
  "servers": {
    "whimsical-mcp-server-brockreece": {
      "type": "stdio",
      "command": "npx",
      "args": [
        "-y",
        "@modelcontextprotocol/server-whimsical-mcp-server-brockreece"
      ]
    }
  }
}

Windsurf

Add this to your Windsurf MCP config file, then restart Windsurf.

~/.codeium/windsurf/mcp_config.json

{
  "mcpServers": {
    "whimsical-mcp-server-brockreece": {
      "command": "npx",
      "args": [
        "-y",
        "@modelcontextprotocol/server-whimsical-mcp-server-brockreece"
      ]
    }
  }
}

Cline

Open Cline settings, navigate to MCP Servers, and add this server configuration.

Cline MCP Settings (via UI)

{
  "mcpServers": {
    "whimsical-mcp-server-brockreece": {
      "command": "npx",
      "args": [
        "-y",
        "@modelcontextprotocol/server-whimsical-mcp-server-brockreece"
      ]
    }
  }
}

FAQ

Can I use this server with any MCP Client?

Yes! The server is designed to work with any MCP Client that can generate Mermaid markup.

Is there a demo available?

Yes! A demo of a complex system architecture diagram created using this server is available in the documentation.

What programming language is this project built with?

The Whimsical MCP Server is built using TypeScript.

Developer tools