Skip to content

Enhancement: Auto-configure Chrome DevTools MCP for Claude Code in devchrome-mcp installer #1

@darrensperling

Description

@darrensperling

Summary

The DevChrome MCP web app installer successfully creates the browser launcher, but doesn't automatically configure the Chrome DevTools MCP server for Claude Code integration. This requires manual configuration after installation.

Current Behavior

When installing DevChrome MCP via jomarchy --profiles:

✅ DevChrome MCP browser launcher is installed at ~/.local/bin/devchrome-mcp
✅ Desktop entry is created at ~/.local/share/applications/devchrome-mcp.desktop
✅ Browser launches with remote debugging on port 9222

❌ Claude Code MCP server is not configured to connect to DevChrome

Expected Behavior

After installing DevChrome MCP, Claude Code should be automatically configured to connect to it without manual intervention.

The Missing Piece

The chrome-devtools-mcp server needs to be added to Claude Code's MCP configuration. Currently this must be done manually:

```bash
claude mcp add chrome-devtools npx chrome-devtools-mcp@latest -- --browserUrl http://127.0.0.1:9222
```

Proposed Solution

Add automatic MCP configuration to the end of scripts/install/devchrome-mcp.sh:

```bash

Configure Chrome DevTools MCP for Claude Code

echo -e "${BLUE}→${NC} Configuring Claude Code MCP integration..."
if command -v claude &> /dev/null; then
if claude mcp add chrome-devtools npx chrome-devtools-mcp@latest -- --browserUrl http://127.0.0.1:9222 2>/dev/null; then
echo -e "${GREEN}✓${NC} Chrome DevTools MCP configured for Claude Code"
else
echo -e "${YELLOW}!${NC} Could not auto-configure Claude Code MCP"
echo " Run manually: claude mcp add chrome-devtools npx chrome-devtools-mcp@latest -- --browserUrl http://127.0.0.1:9222"
fi
else
echo -e "${YELLOW}!${NC} Claude Code not found - MCP configuration skipped"
echo " Install Claude Code, then run: claude mcp add chrome-devtools npx chrome-devtools-mcp@latest -- --browserUrl http://127.0.0.1:9222"
fi
```

This configuration adds the following to the user's .claude.json:

```json
{
"mcpServers": {
"chrome-devtools": {
"type": "stdio",
"command": "npx",
"args": [
"chrome-devtools-mcp@latest",
"--browserUrl",
"http://127.0.0.1:9222"
],
"env": {}
}
}
}
```

Benefits

After this enhancement, users can:

  1. Run jomarchy --profiles and install DevChrome MCP
  2. Launch DevChrome MCP
  3. Restart Claude Code
  4. Immediately use commands like "take a screenshot" or "list all open tabs"

This makes it a true one-command installation with zero manual configuration.

Testing

Tested successfully with:

  • Arch Linux
  • Claude Code CLI
  • Node.js v24.9.0
  • chrome-devtools-mcp@latest

References

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions