다국어 지원 개선 및 언어 전환 로직 최적화

- UI에 번역이 없는 경우 홈페이지로 리디렉션하는 메시지 추가
- 언어 전환 로직 개선: 페이지 타입에 따라 적절한 URL 생성
- CSS 스타일링 업데이트: 고정 헤더 및 콘텐츠 영역 마진 조정
- Highlight.js 추가 및 초기화 스크립트 작성으로 코드 하이라이팅 지원
- 번역이 없는 언어 옵션에 대한 시각적 표시 추가

Author: realcoding2003

_posts/2025-06-05-mcp-easy-install-with-existing-mcp-en.md

@@ -0,0 +1,215 @@
+---
+layout: post
+title: "Easy MCP Installation Using Existing MCPs - Practical Guide for Installing Playwright MCP"
+date: 2025-06-05 14:30:00 +0900
+categories: [Tips, Development]
+tags: [mcp, playwright, automation, installation, filesystem, desktop-commander, beginner]
+author: "Kevin Park"
+excerpt: "Learn practical methods for Claude to automatically install new MCPs using already installed filesystem and desktop-commander MCPs."
+lang: en
+---
+
+# Easy MCP Installation Using Existing MCPs - Practical Guide for Installing Playwright MCP
+
+## 🎯 Summary
+
+**By leveraging already installed MCPs like filesystem and desktop-commander, Claude can directly install new MCP servers without manual installation.**
+
+### Core Installation Command
+
+```
+Request to Claude:
+"Install playwright MCP server and add it to the configuration file"
+```
+
+### Automated Process
+- **Automatic Configuration File Editing**: Edit claude_desktop_config.json using filesystem MCP
+- **Automatic Dependency Installation**: Execute NPX commands via desktop-commander
+- **Configuration Validation**: Content verification and syntax checking
+- **Restart Guidance**: Claude Desktop restart guide
+
+### Installing Multiple MCPs at Once
+```
+"Install and configure GitHub, Google Drive, and Playwright MCPs all at once"
+```
+
+---
+
+## 📚 Detailed Explanation
+
+### Why Use Existing MCPs
+
+When you already have MCPs like filesystem and desktop-commander installed, Claude can directly:
+- Access the file system to modify configuration files
+- Execute terminal commands to install packages
+- Validate configurations and troubleshoot issues
+
+All these processes can be automated.
+
+### Actual Installation Process
+
+#### Step 1: Request Installation from Claude
+
+```
+"Install playwright-mcp. Also automatically modify the configuration file"
+```
+
+Tasks Claude automatically performs:
+1. Read current claude_desktop_config.json file
+2. Add playwright MCP configuration
+3. Verify dependencies with NPX
+4. Save configuration file
+
+#### Step 2: Automatic Configuration File Modification
+
+Claude uses filesystem MCP to modify as follows:
+
+```json
+{
+  "mcpServers": {
+    "filesystem": {
+      "command": "npx",
+      "args": ["-y", "@modelcontextprotocol/server-filesystem", "/Users/username/Documents"]
+    },
+    "desktop-commander": {
+      "command": "npx", 
+      "args": ["-y", "@executeautomation/desktop-commander-mcp"]
+    },
+    "playwright": {
+      "command": "npx",
+      "args": ["@playwright/mcp@latest"]
+    }
+  }
+}
+```
+
+#### Step 3: Dependency Installation Verification
+
+Claude executes via desktop-commander:
+```bash
+npx @playwright/mcp@latest --help
+```
+
+### Recommended MCP Server List
+
+Useful MCPs you can request Claude to install all at once:
+
+```
+"Install all of the following MCPs:
+- GitHub MCP (code repository management)
+- Google Drive MCP (file synchronization)
+- Slack MCP (message management)
+- Brave Search MCP (web search)
+- Playwright MCP (browser automation)"
+```
+
+### Installation Validation Methods
+
+#### Automatic Validation Request
+```
+"Check if the installed MCPs are working properly"
+```
+
+Validation performed by Claude:
+1. Configuration file JSON syntax checking
+2. Test execution of each MCP server
+3. Verify required dependency installation
+4. Check permission settings
+
+#### Manual Validation Method
+1. Completely restart Claude Desktop
+2. Click "Allow for This Chat" in new chat
+3. Simple test request: "Show me the file list in the current directory"
+
+### Practical Usage Tips
+
+#### 1. Project-Specific MCP Configuration
+
+```
+"Recommend and install MCPs suitable for the current project"
+```
+
+Web Development Project:
+- Playwright (browser testing)
+- GitHub (code management)
+- Filesystem (file operations)
+
+Data Analysis Project:
+- Filesystem (data file access)
+- Google Drive (data synchronization)
+- Desktop Commander (script execution)
+
+#### 2. Batch Installation Script
+
+```
+"Configure MCP environment with the following setup:
+1. Development MCPs: GitHub, Filesystem, Playwright
+2. Business MCPs: Slack, Google Drive, Calendar
+3. Utility MCPs: Desktop Commander, Brave Search"
+```
+
+#### 3. Configuration Backup and Restore
+
+```
+"Backup current MCP configuration"
+"Apply backed up MCP configuration to a new computer"
+```
+
+### Troubleshooting Guide
+
+#### Common Issues
+
+**1. NPX Cache Issues**
+```
+"Clear NPX cache and reinstall MCP"
+```
+
+**2. Permission Issues**
+```
+"Check and fix MCP configuration file permissions"
+```
+
+**3. Port Conflicts**
+```
+"Check ports in use and change MCP port"
+```
+
+#### Advanced Troubleshooting
+
+**Configuration File Recovery**
+```
+"The MCP configuration file is corrupted. Please restore from backup"
+```
+
+**Selective MCP Deactivation**
+```
+"Temporarily disable only the Playwright MCP"
+```
+
+### Performance Optimization Tips
+
+#### 1. Keep Only Necessary MCPs Active
+```json
+{
+  "mcpServers": {
+    // Keep only frequently used ones
+    "filesystem": { ... },
+    "playwright": { ... }
+    // Comment out unused MCPs
+    // "heavy-mcp": { ... }
+  }
+}
+```
+
+#### 2. Resource Usage Monitoring
+```
+"Check resource usage of currently running MCP servers"
+```
+
+## Conclusion
+
+Using existing MCP tools makes installing new MCPs very simple. Since Claude automates everything from file system access to dependency installation, developers can focus on actually using the features instead of complex installation processes.
+
+**Key Tip**: Simply request "install it" and Claude will automatically install and complete the configuration in the optimal way.
+
+**Next Steps**: Build workflow automation using the installed MCPs.