setup mcp claude desktop

Claude Desktop MCP Setup — Baseworks Team

This file covers how to configure Claude Desktop so it can read/write the Obsidian vault, take visual page previews (for web design work), and delete vault files safely. Keep this in sync any time the config changes.

What Each MCP Does

MCP	What it gives Claude
`filesystem`	Read, write, list, search files inside the Obsidian vault
`playwright`	Take visual screenshots of URLs and locally generated HTML — used for web design previews
`filesystem-delete`	Safely delete files inside the vault (vault roots are protected)
`openmemory-local`	Patrick’s local memory server — skip this on other machines
`MCP_DOCKER`	Docker-based tools (neo4j memory, YouTube transcripts) — skip on other machines

Prerequisites

Make sure these are installed before you start:

Node.js (v18 or later): https://nodejs.org/ — run node --version to check
Claude Desktop: https://claude.ai/download
Obsidian vault cloned locally — see SETUP-KSENIA.md if you haven’t done this yet

Step 1 — Back Up Your Existing Config (Do This First)

Before editing anything, create a dated backup so you can roll back if needed.

Open Terminal and run:

cp ~/Library/Application\ Support/Claude/claude_desktop_config.json \
   ~/Library/Application\ Support/Claude/claude_desktop_config.backup-$(date +%Y-%m-%d).json

To restore from backup if something goes wrong:

# List your backups to find the right date
ls ~/Library/Application\ Support/Claude/claude_desktop_config.backup-*.json

# Replace YYYY-MM-DD with the date of the backup you want
cp ~/Library/Application\ Support/Claude/claude_desktop_config.backup-YYYY-MM-DD.json \
   ~/Library/Application\ Support/Claude/claude_desktop_config.json

Then quit Claude Desktop (Cmd+Q) and reopen it.

Step 2 — Edit the Config File

Open the config file in a text editor:

Mac path:

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

You can open it quickly from Terminal:

open -a TextEdit ~/Library/Application\ Support/Claude/claude_desktop_config.json

Or use VS Code:

code ~/Library/Application\ Support/Claude/claude_desktop_config.json

Step 3 — Add the MCP Servers

Replace YOUR_USERNAME with your actual Mac username (run whoami in Terminal to find it).

Minimum setup (filesystem + playwright):

{
  "mcpServers": {
    "filesystem": {
      "command": "npx",
      "args": [
        "-y",
        "@modelcontextprotocol/server-filesystem",
        "/Users/YOUR_USERNAME/Obsidian"
      ]
    },
    "playwright": {
      "command": "npx",
      "args": [
        "-y",
        "@playwright/mcp@latest"
      ]
    }
  }
}

This covers:

Full read/write access to your Obsidian vault
Visual page previews for web design work

If you already have other MCP servers in your config, just add the filesystem and playwright blocks inside the existing mcpServers object — don’t replace the whole file.

Step 4 — Restart Claude Desktop

Quit fully (Cmd+Q) and reopen. New MCP servers only load on startup.

Step 5 — Test It

Test filesystem access:

“List the files at the root of my Obsidian vault”

Claude should list folders like baseworks-kb-shared-brain and lessons.

Test Playwright:

“Take a screenshot of https://baseworks.com and show me what it looks like”

Claude should return a visual screenshot inline.

What You Can Do Once Set Up

Obsidian / knowledge base:

“Read the file at 02-areas/teaching/_index.md”
“Search the vault for files about client onboarding”
“Save this content to 00-inbox/my-note.md”

Web design previews:

“Take a screenshot of this URL: https://baseworks.com/services”
“Generate an HTML mockup for this page layout and show me a preview”
“Compare how this page looks now vs. the redesign we discussed”

Troubleshooting

MCP server not loading

Make sure Node.js is installed: node --version
Make sure you fully quit and relaunched Claude Desktop (not just closed the window)

“Permission denied” or path errors

Double-check YOUR_USERNAME is replaced with your actual username
Make sure your Obsidian vault is at ~/Obsidian/ — adjust the path if it’s somewhere else

Playwright downloads browsers on first run

The first time Playwright is used it may download Chromium (a few hundred MB). This is normal. Let it complete.

Config wiped after a Claude Desktop update

Claude Desktop updates can sometimes reset your config. Use the backup from Step 1 to restore it.

Changes to vault files not appearing in Obsidian

Click another file in Obsidian and back, or restart Obsidian — it doesn’t always auto-refresh

Patrick’s Full Config (for reference)

Patrick’s machine has additional MCP servers beyond the minimum setup. These are machine-specific and don’t need to be replicated on other machines.

{
  "mcpServers": {
    "filesystem": {
      "command": "npx",
      "args": ["-y", "@modelcontextprotocol/server-filesystem", "/Users/vboy/Obsidian"]
    },
    "playwright": {
      "command": "npx",
      "args": ["-y", "@playwright/mcp@latest"]
    },
    "filesystem-delete": {
      "command": "node",
      "args": ["/Users/vboy/.claude/mcp-servers/filesystem-delete.mjs", "/Users/vboy/Obsidian"]
    },
    "openmemory-local": {
      "command": "npx",
      "args": ["-y", "supergateway", "--sse", "http://localhost:8765/mcp/claude/sse/vboy"]
    },
    "MCP_DOCKER": {
      "command": "docker",
      "args": ["mcp", "gateway", "run"]
    }
  },
  "preferences": {
    "menuBarEnabled": true,
    "chromeExtensionEnabled": false,
    "quickEntryDictationShortcut": "capslock",
    "coworkScheduledTasksEnabled": false,
    "sidebarMode": "code"
  }
}

Web Design Mockup Workflow

This section covers how to build HTML mockups for new Baseworks pages using Claude Code, with live browser preview and git tracking.

How it works

Claude Code writes HTML files into the mockups folder
A local live-reload server watches that folder and auto-refreshes your browser on every save
You describe changes → Claude edits the file → browser updates instantly (similar to Lovable)
All mockup files are git-tracked in baseworks-changelog

Mockups folder (git-tracked)

~/Documents/baseworks-changelog/sites/baseworks.com/mockups/

All mockup files live here. This folder is part of the p-oancia/baseworks-changelog repo, so every mockup is version-controlled alongside site changes.

Base stylesheet — always include this

Every mockup should start with:

<link rel="stylesheet" href="baseworks-tokens.css">

baseworks-tokens.css contains all CSS variables, fonts, layout utilities, and button styles extracted directly from baseworks.com. It lives in the same mockups folder. Using it means mockups automatically inherit the real site’s colours, typography, and spacing — no guessing.

Key tokens at a glance:

Token	Value	Use for
`--global-palette1`	`#39c3f0`	Cyan — primary accent
`--global-palette3`	`#1A202C`	Dark bg
`--global-palette4`	`#2D3748`	Body text
`--color-header-bg`	`#3c3c3c`	Header bg
`--color-accent-lime`	`#a9f838`	Active nav highlight
`--font-body`	Roboto	Body copy
`--font-accent`	Jost	Headings
`--font-display`	Oswald	Display / large type
`--global-content-width`	`1290px`	Max page width

See index.html in the mockups folder for a full visual preview of all tokens.

Starting the live-reload server

Run this once in Terminal before a mockup session (leave the Terminal window open while working):

npx browser-sync start \
  --server ~/Documents/baseworks-changelog/sites/baseworks.com/mockups \
  --files "~/Documents/baseworks-changelog/sites/baseworks.com/mockups/**/*" \
  --no-notify

Then open http://localhost:3001 in your browser. Any file saved to the mockups folder will auto-refresh the page.

To stop the server: close the Terminal window, or press Ctrl+C.

Starting a mockup session in Claude Code Desktop

Start the live-reload server (above)
Open Claude Code Desktop → start a new session → choose Local

Set the working directory to:

/Users/YOUR_USERNAME/Documents/baseworks-changelog

Paste this into the chat to orient Claude:

“Read /Users/YOUR_USERNAME/Documents/baseworks-changelog/CLAUDE-INSTRUCTIONS.md. Then build a mockup in sites/baseworks.com/mockups/ using baseworks-tokens.css as the base stylesheet. The live reload server is running at http://localhost:3001.”

Replace YOUR_USERNAME with your Mac username (whoami in Terminal to check).

Important: If Claude Code says it can’t find the path or mentions /home/..., it has connected to the remote server instead of your local machine. Start a fresh session and choose Local again.

Referencing the stylesheet (for Patrick)

Patrick’s exact path:

/Users/vboy/Documents/baseworks-changelog/sites/baseworks.com/mockups/baseworks-tokens.css

Prompt to use at the start of any mockup session:

“Read /Users/vboy/Documents/baseworks-changelog/CLAUDE-INSTRUCTIONS.md. I want to build a mockup for [describe page]. Work in /Users/vboy/Documents/baseworks-changelog/sites/baseworks.com/mockups/ and use baseworks-tokens.css as the base stylesheet. Live reload is running at http://localhost:3001.”

Images in mockups

Claude Code can’t pull images directly from Google Drive or Canva. Options:

Local assets — download images to mockups/assets/ and reference by relative path: <img src="assets/photo.jpg">
Live site images — reference existing images already on baseworks.com by their full URL
Placeholders — Claude can use CSS placeholder blocks or services like https://placehold.co/800x400 while the real image is pending

After a mockup session — commit your work

cd ~/Documents/baseworks-changelog
git add sites/baseworks.com/mockups/
git commit -m "Add mockup: [brief description]"
git push

Last updated: 2026-02-26