Environment Setup

Complete these steps once when first onboarding to the MCP workflow. You do not need to repeat them for each project.

Prerequisites

Prerequisite	Install Command	Notes
Node.js v18+	brew install node	Required by Shopify CLI and MCP servers
pnpm	npm install -g pnpm	Default package manager for all Dev MCP projects
Shopify CLI	pnpm add -g @shopify/cli	Theme development and deployment
Claude Code	brew install claude-code	Also available via npm install -g @anthropic-ai/claude-code
Figma Desktop App	figma.com/downloads	The browser version does not work for MCP — you must use the desktop app
Entire.io	brew install entireio/tap/entire	Links Claude Code conversations to git commits for traceability

Note

Your Claude subscription is included as part of your DotCollective work account — sign in with your @dotcollective.com.au email address. If you do not have access, reach out to your Technical Lead or Head of Engineering.

Configure your Dev MCP API key

Add a system-wide environment variable to your shell configuration. If you don’t have a .zshrc file, create one:

touch ~/.zshrc && open ~/.zshrc

Add this line:

export DC_MCP_API_KEY="YOUR_API_KEY"

Replace YOUR_API_KEY with the key provided by your Technical Lead, then reload your shell:

source ~/.zshrc

Initialise Dev MCP in your Sites folder

The Dev MCP server should be initialised within your local Sites folder (e.g. ~/Sites). This allows the setup command to scaffold new projects directly.

cd ~/Sites

Create a .mcp.json file in your Sites folder:

{
  "mcpServers": {
    "dev-mcp": {
      "type": "sse",
      "url": "https://dev.mcp.dotcollective.com.au/sse",
      "headers": {
        "x-api-key": "${DC_MCP_API_KEY}"
      }
    }
  }
}

Once initialised, running the setup command from within ~/Sites will automatically create new project directories with the full Skeleton theme, .mcp.json and all configuration files.

Enable Figma Desktop MCP

1. Open the Figma desktop app and open a design file.
2. Switch to Dev Mode (Shift+D or toggle in the bottom toolbar).
3. In the right sidebar (Inspect panel), find the MCP server section.
4. Click Enable desktop MCP server.
5. Set Images to download (not local).

The server runs locally at http://127.0.0.1:3845/mcp. You need Figma open with a design file loaded and Dev Mode enabled whenever you start a Claude Code session that requires design context.

Note

Your Figma dev seat is included as part of your DotCollective work account — sign in with your @dotcollective.com.au email address. If you do not have access, reach out to your Technical Lead or Head of Engineering.

Troubleshooting Figma 403 errors

• Ensure the Figma desktop app is open with a design file loaded
• Confirm the MCP server is enabled in the Inspect panel
• Restart both the Figma desktop app and Claude Code
• Verify you have edit access to the Figma file (not just view access)

Install Entire.io

Entire.io links your Claude Code conversations to git commits, giving full traceability from code changes back to the AI session that produced them. It runs as a background hook — no workflow changes required.

brew install entireio/tap/entire

After installation, enable it in each project:

cd ~/Sites/<project-name>
entire enable

This creates an .entire/ directory in the project root. The settings.json file should be committed (shared project settings), while settings.local.json is gitignored (per-machine state).

Note

The /setup command enables Entire.io automatically during project scaffolding. You only need to run entire enable manually if setting up a project without the MCP setup command, or if the .entire/ directory is missing.

How it works

When enabled, Entire.io runs a SessionStart hook that links the current Claude Code conversation to your next git commit. On commit, the conversation context is attached to the commit metadata — visible in the Entire.io dashboard and linkable from PR reviews.

Verifying it works

After enabling, start a new Claude Code session. You should see a startup message:

Powered by Entire:
  This conversation will be linked to your next commit.

If this message does not appear, check that entire --version runs successfully and re-run entire enable.

Optional, recommended applications

App	Purpose
Warp	Modern terminal with AI integration — ideal for managing multiple Claude Code sessions and split panes
Zed or VS Code	IDE for reviewing and browsing files outside of Claude Code. Either is fine — use whichever you prefer