Setting Up Eraser.io MCP with Claude — The Real Story (Dead Ends, Fixes & Final Solution)

General
, ,
1

Hey team :waving_hand:

I want to share something I went through recently — setting up the Eraser.io MCP to work with Claude. What seemed like a straightforward task turned into a real learning journey, and I want to document it properly so anyone on the team (or in this community) can do this without hitting the same walls I did.

This is not a polished “here’s the answer” post. This is the real story — including the dead ends, the confusion, the email from Eraser’s team that changed everything, and finally the clean working solution.

:brain: First, What Is MCP?

MCP (Model Context Protocol) is an open standard that lets Claude connect to external tools and services — like Eraser.io, Notion, GitHub, etc. — and use them inside a conversation.

In plain terms: instead of manually going to Eraser, creating a diagram, and copying it somewhere, you can just tell Claude “draw me an architecture diagram for this system” and Claude will use Eraser to create it — right from your chat. It’s like giving Claude hands to reach into other tools on your behalf.

:bullseye: The Goal

I wanted to set up the Eraser.io MCP so that:

  1. It works in VS Code (for the dev team)
  2. It works in Claude Desktop and claude.ai (for broader team use)
  3. Every team member could use it without needing individual setup steps

I started by reading the official Eraser MCP documentation.

The docs describe two ways to connect:

  • Via OAuth — connects as a specific user, uses that user’s Eraser account and AI credits
  • Via API Key — not tied to any user, charged at the team level

I went with API Key first. That seemed more “technical” and scalable. And that’s where the trouble started.

:red_circle: Attempt 1 — The API Key Route (and Why It Failed)

What I tried

The Eraser MCP documentation showed a local server setup using npx and an API key. I created the VS Code config file at .vscode/mcp.json:

{
  "inputs": [
    {
      "id": "eraser_api_key",
      "type": "promptString",
      "description": "Eraser API Key",
      "password": true
    }
  ],
  "servers": {
    "eraser": {
      "command": "npx",
      "args": ["-y", "@eraserlabs/eraser-mcp"],
      "env": {
        "ERASER_API_KEY": "${input:eraser_api_key}"
      }
    }
  }
}

I also tried setting this up in Claude Desktop by editing claude_desktop_config.json:

  • Windows: %APPDATA%\Claude\claude_desktop_config.json
  • Mac: ~/Library/Application Support/Claude/claude_desktop_config.json
{
  "mcpServers": {
    "eraser": {
      "command": "npx",
      "args": ["-y", "@eraserlabs/eraser-mcp"],
      "env": {
        "ERASER_API_KEY": "your_api_key_here"
      }
    }
  }
}

The problem

I went to Eraser’s settings to find the API key — and it simply wasn’t there. No API key section. No way to generate one.

I spent time thinking it was a config issue. But no — the API key feature is not available on all Eraser plans. On the Business plan, API keys are not provided. It’s a separate, chargeable feature at the team level.

:e_mail: The Email That Cleared Everything Up

I reached out to the Eraser team. Here’s what they told me:

"There seems to be some misunderstanding. There are 2 ways to use the MCP – via OAuth and via API key.

If you use OAuth, you’ll be connecting to the MCP server with a specific user’s account. And you’ll be using that specific user’s AI credits and file access limits. There’s no additional charge for this usage.

If you use the API key, that is not tied to any specific user and we’ll charge for usage at the team-level."

This was the turning point.

OAuth API Key
Tied to a person? :white_check_mark: Yes — each user’s own account :cross_mark: No — shared team-level
Extra charge? :white_check_mark: No — uses existing user credits :cross_mark: Yes — billed at team level
Available on our plan? :white_check_mark: Yes :cross_mark: No

OAuth was the right approach all along.

:green_circle: Attempt 2 — OAuth via VS Code (Working!)

Step 1 — Create the MCP config in your project

In the root of your project, create .vscode/mcp.json:

{
  "inputs": [],
  "servers": {
    "eraser": {
      "url": "https://app.eraser.io/api/mcp",
      "type": "http"
    }
  }
}

No API key. No local npm package. Just a URL.

Step 2 — Commit it to your repo

git add .vscode/mcp.json
git commit -m "Add Eraser MCP server config for VS Code"
git push

Every teammate who pulls the code gets the config automatically.

Step 3 — Authenticate

When you open the project in VS Code (with GitHub Copilot active), it prompts you to sign in to Eraser via your browser. Each person logs in with their own Eraser account. :white_check_mark: Done.

:warning: The Claude Desktop Adventure (Bonus Challenges)

Challenge 1 — Claude Desktop doesn’t use the VS Code config

The .vscode/mcp.json file has nothing to do with Claude Desktop. They are completely separate systems with separate config files. You’d need to configure MCP for Claude Desktop independently.

Challenge 2 — The .dxt Extension Created Duplicates

Eraser provides a .dxt extension for Claude Desktop. I installed it and it showed “running” — great! But I also still had the manual config entry, creating two Eraser entries with a warning icon.

Fix: Pick one method only. If you use the .dxt extension, remove the manual config entry. One source of truth = no conflicts.

Challenge 3 — .dxt Extension Still Needed an API Key

The extension was running but couldn’t actually create diagrams without an API key — which brings us back to the same dead end.

:white_check_mark: The Final Working Solution — claude.ai Integration (Best for Everyone)

The cleanest setup: add Eraser as an integration directly in claude.ai. No VS Code, no config files, no npm, no technical background needed.

Step-by-Step

Step 1 — Open Settings
Go to claude.ai → click your profile icon (top right) → Settings

Step 2 — Go to Integrations
Find the Integrations section → click “Add integration”

Step 3 — Enter the MCP Server URL
https://app.eraser.io/api/mcp → Click Connect.

Step 4 — Authenticate
A browser popup will open. Sign in with your own Eraser account and approve the connection. :white_check_mark:

Step 5 — Test It
Start a new conversation and try:

“Create an architecture diagram for a web app with a React frontend, Node.js backend, and PostgreSQL database.”

Claude will generate the diagram directly in your chat using Eraser. :tada:

:bar_chart: Summary — What Worked, What Didn’t

Approach Status Notes
VS Code — API Key via mcp.json :cross_mark: Failed API key not available on our plan
Claude Desktop — API Key via config :cross_mark: Failed Same reason
Claude Desktop — .dxt extension :warning: Partial Runs but still needs API key for auth
VS Code — OAuth via mcp.json :white_check_mark: Works Shareable via git, team-friendly
claude.ai — OAuth Integration :white_check_mark: Best No config needed, works for everyone

:light_bulb: Key Takeaways

  1. Check your Eraser plan first. API key access is a separate chargeable feature — not on all plans.
  2. OAuth is not a fallback — it’s the recommended approach for individual users. No extra charge, uses your own account.
  3. VS Code and Claude Desktop are completely separate. Config for one doesn’t carry to the other.
  4. Avoid duplicate MCP entries. Choose one method per tool or you’ll get conflicts.
  5. The claude.ai Integrations panel is the easiest entry point. Non-developers, start here.

:link: Useful Links

Hope this saves someone the same back-and-forth I went through. Drop any questions in the comments — happy to help! :raising_hands:

1 Like