Fixes and improvement (#393)

* The -i flag has been removed from the `_run_command_cross_platform` function in `setup/components/mcp.py`. * fix: Prevent installer from hanging during MCP installation The SuperClaude installer was hanging during the installation of MCP components on non-Windows systems. This was caused by the use of an interactive shell (`-i`) when executing the `claude mcp add` command. The interactive shell would attempt to read from standard input, causing the process to be suspended by the shell. This commit fixes the issue by removing the `-i` flag from the `_run_command_cross_platform` function in `setup/components/mcp.py`. This ensures that the installation process runs non-interactively and completes without hanging. * fix: Add 'cmd /c' for Windows and refactor shell execution This commit resolves an issue with `npx` command execution on Windows by prepending `cmd /c` to the command. It also refactors the shell command execution for non-Windows systems to use the `executable` argument in `subprocess.run` for a cleaner and more robust implementation. * fix: Add 'cmd /c' for Windows and refactor shell execution This commit resolves an issue with `npx` command execution on Windows by prepending `cmd /c` to the command. It also refactors the shell command execution for non-Windows systems to use the `executable` argument in `subprocess.run` for a cleaner and more robust implementation. * docs: Update Chrome DevTools MCP documentation This commit updates the documentation for the Chrome DevTools MCP server to be more comprehensive and consistent with the existing documentation structure. The file `SuperClaude/MCP/MCP_Chrome-DevTools.md` has been updated with detailed information about the server's purpose, triggers, and usage examples. * docs: Update documentation for Chrome DevTools MCP This commit updates the main README.md and the MCP servers user guide to include information about the new Chrome DevTools MCP server. The documentation has been updated to reflect the new server count and provide details about the new server's functionality. ---------
2025-12-17 09:46:06 +00:00 · 2025-09-26 18:27:19 +05:30 · 2025-09-26 18:27:19 +05:30 · b2e93a587a
commit b2e93a587a
parent 297bdd1062
4 changed files with 69 additions and 10 deletions
--- a/Docs/User-Guide/mcp-servers.md
+++ b/Docs/User-Guide/mcp-servers.md
@ -2,7 +2,7 @@

 ## Overview

-MCP (Model Context Protocol) servers extend Claude Code's capabilities through specialized tools. SuperClaude integrates 7 MCP servers and provides Claude with instructions on when to activate them based on your tasks.
+MCP (Model Context Protocol) servers extend Claude Code's capabilities through specialized tools. SuperClaude integrates 8 MCP servers and provides Claude with instructions on when to activate them based on your tasks.

 ### 🔍 Reality Check
 - **What MCP servers are**: External Node.js processes that provide additional tools
@ -18,6 +18,7 @@ MCP (Model Context Protocol) servers extend Claude Code's capabilities through s
 - **morphllm-fast-apply**: Pattern-based code transformations
 - **serena**: Semantic code understanding and project memory
 - **tavily**: Web search and real-time information retrieval
+- **chrome-devtools**: Performance analysis and debugging

 ## Quick Start

@ -34,6 +35,7 @@ MCP (Model Context Protocol) servers extend Claude Code's capabilities through s
 | Multi-file edits, refactoring | **morphllm-fast-apply** |
 | Large projects, sessions | **serena** |
 | `/sc:research`, `latest`, `current` | **tavily** |
+| `performance`, `debug`, `LCP` | **chrome-devtools** |

 ## Server Details

@ -138,6 +140,20 @@ export MORPH_API_KEY="your_key_here"
 export TAVILY_API_KEY="tvly-your_api_key_here"
 ```

+### chrome-devtools 📊
+**Purpose**: Performance analysis, debugging, and real-time browser inspection
+**Triggers**: Performance auditing, debugging layout issues (e.g., CLS), slow loading times (LCP), console errors, network requests
+**Requirements**: Node.js 16+, no API key
+
+```bash
+# Automatic activation
+/sc:debug "page is loading slowly"
+# → Enables performance analysis with Chrome DevTools
+
+# Manual activation
+/sc:analyze --performance "homepage"
+```
+
 **Capabilities:**
 - **Web Search**: Comprehensive searches with ranking and filtering
 - **News Search**: Time-filtered current events and updates
@ -187,6 +203,10 @@ export TAVILY_API_KEY="tvly-your_api_key_here"
      "command": "npx",
      "args": ["-y", "tavily-mcp@latest"],
      "env": {"TAVILY_API_KEY": "${TAVILY_API_KEY}"}
+    },
+    "chrome-devtools": {
+      "command": "npx",
+      "args": ["-y", "chrome-devtools-mcp@latest"]
    }
  }
 }
@ -282,6 +302,7 @@ echo 'export TAVILY_API_KEY="your_key"' >> ~/.bashrc
 - **Complex Analysis**: sequential-thinking + context7 + serena
 - **Deep Research**: tavily + sequential-thinking + serena + playwright
 - **Current Events**: tavily + context7 + sequential-thinking
+- **Performance Tuning**: chrome-devtools + sequential-thinking + playwright

 ## Integration

--- a/README.md
+++ b/README.md
@ -61,7 +61,7 @@

 | **Commands** | **Agents** | **Modes** | **MCP Servers** |
 |:------------:|:----------:|:---------:|:---------------:|
-| **25** | **15** | **7** | **7** |
+| **25** | **15** | **7** | **8** |
 | Slash Commands | Specialized AI | Behavioral | Integrations |

 Use the new `/sc:help` command to see a full list of all available commands.
@ -227,7 +227,7 @@ pip install --break-system-packages SuperClaude
 <td width="50%">

 ### 🔧 **MCP Server Integration**
-**7 powerful servers** working together:
+**8 powerful servers** working together:
 - **Context7** → Up-to-date documentation
 - **Sequential** → Complex analysis
 - **Magic** → UI component generation
@ -235,6 +235,7 @@ pip install --break-system-packages SuperClaude
 - **Morphllm** → Bulk transformations
 - **Serena** → Session persistence
 - **Tavily** → Web search for deep research
+- **Chrome DevTools** → Performance analysis

 </td>
 <td width="50%">
--- a/SuperClaude/MCP/MCP_Chrome-DevTools.md
+++ b/SuperClaude/MCP/MCP_Chrome-DevTools.md
@ -0,0 +1,32 @@
+# Chrome DevTools MCP Server
+
+**Purpose**: Performance analysis, debugging, and real-time browser inspection
+
+## Triggers
+- Performance auditing and analysis requests
+- Debugging of layout issues (e.g., CLS)
+- Investigation of slow loading times (e.g., LCP)
+- Analysis of console errors and network requests
+- Real-time inspection of the DOM and CSS
+
+## Choose When
+- **For deep performance analysis**: When you need to understand performance bottlenecks.
+- **For live debugging**: To inspect the runtime state of a web page and debug live issues.
+- **For network analysis**: To inspect network requests and identify issues like CORS errors.
+- **Not for E2E testing**: Use Playwright for end-to-end testing scenarios.
+- **Not for static analysis**: Use native Claude for code review and logic validation.
+
+## Works Best With
+- **Sequential**: Sequential plans a performance improvement strategy → Chrome DevTools analyzes and verifies the improvements.
+- **Playwright**: Playwright automates a user flow → Chrome DevTools analyzes the performance of that flow.
+
+## Examples
+```
+"analyze the performance of this page" → Chrome DevTools (performance analysis)
+"why is this page loading slowly?" → Chrome DevTools (performance analysis)
+"debug the layout shift on this element" → Chrome DevTools (live debugging)
+"check for console errors on the homepage" → Chrome DevTools (live debugging)
+"what network requests are failing?" → Chrome DevTools (network analysis)
+"test the login flow" → Playwright (browser automation)
+"review this function's logic" → Native Claude (static analysis)
+```
--- a/setup/components/mcp.py
+++ b/setup/components/mcp.py
@ -76,6 +76,13 @@ class MCPComponent(Component):
                "required": False,
                "api_key_env": "TAVILY_API_KEY",
                "api_key_description": "Tavily API key for web search (get from https://app.tavily.com)"
+            },
+            "chrome-devtools": {
+                "name": "chrome-devtools",
+                "description": "Chrome DevTools debugging and performance analysis",
+                "install_method": "npm",
+                "install_command": "npx -y chrome-devtools-mcp@latest",
+                "required": False
            }
        }
    
@ -104,18 +111,16 @@ class MCPComponent(Component):
            CompletedProcess result
        """
        if platform.system() == "Windows":
-            # Windows: Use list format with shell=True
-            return subprocess.run(cmd, shell=True, **kwargs)
+            # On Windows, wrap command in 'cmd /c' to properly handle commands like npx
+            cmd = ["cmd", "/c"] + cmd
+            return subprocess.run(cmd, **kwargs)
        else:
            # macOS/Linux: Use string format with proper shell to support aliases
            cmd_str = " ".join(shlex.quote(str(arg)) for arg in cmd)

-            # Use the user's shell with interactive mode to load aliases
+            # Use the user's shell to execute the command, supporting aliases
            user_shell = os.environ.get('SHELL', '/bin/bash')
-
-            # Execute command with user's shell in interactive mode to load aliases
-            full_cmd = f"{user_shell} -i -c {shlex.quote(cmd_str)}"
-            return subprocess.run(full_cmd, shell=True, env=os.environ, **kwargs)
+            return subprocess.run(cmd_str, shell=True, env=os.environ, executable=user_shell, **kwargs)
    
    def validate_prerequisites(self, installSubPath: Optional[Path] = None) -> Tuple[bool, List[str]]:
        """Check prerequisites"""