myaidev-method 0.2.2 → 0.2.4

package/MCP_INTEGRATION.md

@@ -0,0 +1,373 @@
+# MCP Server Integration Guide
+
+MyAIDev Method includes three optional MCP (Model Context Protocol) servers that provide advanced orchestration, testing, and WordPress integration capabilities.
+
+## Available MCP Servers
+
+### 1. SPARC Orchestrator MCP Server
+
+**Purpose**: Workflow automation and orchestration for the 5-phase SPARC methodology
+
+**Command**: `npx myaidev-sparc-orchestrator`
+
+**MCP Tools**:
+- `sparc_orchestrate` - Orchestrate complete 5-phase SPARC workflow
+- `sparc_status` - Get status of current workflow execution
+- `sparc_phase_execute` - Execute a single SPARC phase with configuration
+- `sparc_workflow_history` - Get history of workflow executions
+- `sparc_task_results` - Get detailed results from completed workflows
+
+**Use Cases**:
+- Automated development workflow execution
+- Multi-phase project coordination
+- Workflow state persistence and tracking
+- Sequential, parallel, or adaptive execution strategies
+
+**Example Usage**:
+```javascript
+// Use in Claude Code with MCP enabled
+mcp__myaidev_sparc__sparc_orchestrate({
+  task: "Build user authentication system",
+  strategy: "sequential",
+  phases: ["architecture", "implementation", "testing", "review", "documentation"],
+  options: {
+    techStack: "nextjs,payloadcms,mongodb",
+    testFramework: "jest",
+    testDriven: true,
+    focusSecurity: true
+  }
+})
+```
+
+**Workflow Persistence**:
+- Workflows stored in `~/.myaidev-method/workflows/`
+- Task results in `~/.myaidev-method/tasks/`
+- JSON format for easy inspection and debugging
+
+### 2. Chrome DevTools MCP Server
+
+**Purpose**: Browser automation, testing, and debugging via Chrome DevTools Protocol
+
+**Command**: `npx chrome-devtools-mcp`
+
+**Installation**:
+```bash
+npm install -g chrome-devtools-mcp
+```
+
+**MCP Tools**:
+- `cdp_connect` - Connect to Chrome DevTools Protocol
+- `cdp_navigate` - Navigate browser to URL
+- `cdp_screenshot` - Take screenshot of current page
+- `cdp_evaluate` - Execute JavaScript in browser context
+- `cdp_network_monitor` - Monitor network requests/responses
+- `cdp_console_logs` - Capture browser console logs
+
+**Use Cases**:
+- End-to-end testing of web applications
+- Visual regression testing with screenshots
+- Network performance analysis
+- JavaScript execution and debugging
+- Console log capture for error tracking
+
+**Example Usage**:
+```javascript
+// Connect to browser
+mcp__chrome_devtools__cdp_connect({ port: 9222 })
+
+// Navigate and test
+mcp__chrome_devtools__cdp_navigate({ url: "http://localhost:3000" })
+mcp__chrome_devtools__cdp_evaluate({
+  expression: "document.querySelector('h1').textContent"
+})
+mcp__chrome_devtools__cdp_screenshot({
+  path: "test-results/homepage.png"
+})
+```
+
+**Testing Integration**:
+Works seamlessly with the `dev-tester` agent for comprehensive testing:
+- Unit tests (Jest, Mocha, Pytest)
+- Integration tests (browser automation)
+- Visual tests (screenshots)
+- Performance tests (network monitoring)
+
+### 3. WordPress MCP Server
+
+**Purpose**: Enhanced WordPress REST API operations with session management
+
+**Command**: `npx myaidev-mcp-server`
+
+**MCP Tools**:
+- `wp_session_create` - Create session for tracking operations
+- `wp_session_status` - Get session information and history
+- `wp_memory_store` - Store data in memory for persistence
+- `wp_memory_retrieve` - Retrieve stored data from memory
+- `wp_memory_list` - List all stored data in namespace
+- `wp_health_check` - Comprehensive health check of WordPress site
+- `wp_get_site_info` - Get WordPress site statistics and version
+- `wp_create_post` - Create WordPress post/page with tracking
+- `wp_update_post` - Update existing WordPress post
+- `wp_delete_post` - Delete WordPress post (move to trash)
+- `wp_list_posts` - Get posts with filtering options
+- `wp_batch_publish` - Publish multiple posts from markdown files
+
+**Environment Variables**:
+```bash
+WORDPRESS_URL=https://your-site.com
+WORDPRESS_USERNAME=your-username
+WORDPRESS_APP_PASSWORD=your-app-password
+WORDPRESS_USE_GUTENBERG=true
+```
+
+**Use Cases**:
+- Automated content publishing workflows
+- WordPress site health monitoring
+- Batch content operations
+- Session-based operation tracking
+- Memory persistence for multi-step operations
+
+## Claude Code MCP Configuration
+
+To enable these MCP servers in Claude Code, add them to your MCP settings:
+
+### Method 1: Manual Configuration
+
+Edit `~/.config/claude/mcp_settings.json`:
+
+```json
+{
+  "mcpServers": {
+    "myaidev-sparc": {
+      "command": "npx",
+      "args": ["myaidev-sparc-orchestrator"]
+    },
+    "chrome-devtools": {
+      "command": "npx",
+      "args": ["chrome-devtools-mcp"]
+    },
+    "myaidev-wordpress": {
+      "command": "npx",
+      "args": ["myaidev-mcp-server"],
+      "env": {
+        "WORDPRESS_URL": "https://your-site.com",
+        "WORDPRESS_USERNAME": "your-username",
+        "WORDPRESS_APP_PASSWORD": "your-app-password"
+      }
+    }
+  }
+}
+```
+
+### Method 2: Using Claude Code CLI
+
+```bash
+# Add SPARC Orchestrator
+claude mcp add myaidev-sparc npx myaidev-sparc-orchestrator
+
+# Add Chrome DevTools
+claude mcp add chrome-devtools npx chrome-devtools-mcp
+
+# Add WordPress MCP
+claude mcp add myaidev-wordpress npx myaidev-mcp-server
+```
+
+## Integration Workflows
+
+### Complete Development Workflow
+
+Using SPARC Orchestrator + Chrome DevTools + WordPress MCP for end-to-end development:
+
+```bash
+# 1. Orchestrate complete development workflow
+/myai-sparc-workflow "Build blog with authentication"
+
+# 2. During testing phase, use Chrome DevTools for browser testing
+# The dev-tester agent will automatically use Chrome DevTools MCP if available
+
+# 3. After completion, publish content using WordPress MCP
+/myai-wordpress-publish "blog-post.md" --status publish
+```
+
+### Testing Workflow
+
+Chrome DevTools integration with SPARC testing phase:
+
+```bash
+# 1. Run architecture and implementation phases
+/myai-dev-architect "Design blog system"
+/myai-dev-code "Implement blog features"
+
+# 2. Run testing with Chrome DevTools integration
+/myai-dev-test "Test blog functionality" --integration
+
+# The tester agent will:
+# - Run unit tests (Jest/Mocha)
+# - Launch browser via Chrome DevTools MCP
+# - Execute integration tests
+# - Capture screenshots for visual verification
+# - Monitor network performance
+# - Collect console logs
+```
+
+### Publishing Workflow
+
+WordPress MCP for batch publishing:
+
+```bash
+# 1. Create content
+/myai-content-writer "10 Best Practices" --word_count 1500
+
+# 2. Create session for tracking
+# (WordPress MCP handles this automatically)
+
+# 3. Publish with tracking
+/myai-wordpress-publish "article.md" --status draft
+
+# 4. Check session status
+# Access via WordPress MCP wp_session_status tool
+```
+
+## npm Scripts
+
+The package includes convenient npm scripts for MCP servers:
+
+```bash
+# Start SPARC Orchestrator MCP server
+npx myaidev-sparc-orchestrator
+
+# Start WordPress MCP server
+npx myaidev-mcp-server
+
+# Or use npm scripts (from package root)
+npm run mcp:sparc       # SPARC Orchestrator
+npm run mcp:start       # WordPress MCP
+npm run mcp:health      # Health check
+npm run mcp:status      # Status check
+```
+
+## Advanced Features
+
+### SPARC Orchestrator Strategies
+
+**Sequential Strategy**:
+- Executes phases one at a time
+- Waits for each phase to complete before proceeding
+- Best for: Standard development, learning the methodology
+
+**Parallel Strategy**:
+- Executes independent phases concurrently
+- Review and documentation can run in parallel after testing
+- Best for: Large projects, time-sensitive deadlines
+
+**Adaptive Strategy**:
+- Intelligently routes tasks based on dependencies
+- Optimizes execution based on available resources
+- Best for: Complex projects, experienced teams
+
+### Chrome DevTools Network Monitoring
+
+Monitor API calls, performance, and errors:
+
+```javascript
+// Start network monitoring
+mcp__chrome_devtools__cdp_network_monitor({
+  captureRequests: true,
+  captureResponses: true
+})
+
+// Navigate and interact
+mcp__chrome_devtools__cdp_navigate({ url: "http://localhost:3000" })
+mcp__chrome_devtools__cdp_evaluate({
+  expression: "document.querySelector('button').click()"
+})
+
+// Review network data for API calls, timing, errors
+```
+
+### WordPress Session Management
+
+Track multi-step publishing workflows:
+
+```javascript
+// Create session
+mcp__myaidev_wordpress__wp_session_create({
+  purpose: "Batch blog publishing",
+  metadata: { batch_id: "2025-01-15" }
+})
+
+// Store workflow state in memory
+mcp__myaidev_wordpress__wp_memory_store({
+  key: "publishing_queue",
+  value: ["post1.md", "post2.md", "post3.md"]
+})
+
+// Publish with session tracking
+mcp__myaidev_wordpress__wp_batch_publish({
+  files: ["post1.md", "post2.md", "post3.md"],
+  status: "draft"
+})
+
+// Check session status
+mcp__myaidev_wordpress__wp_session_status()
+```
+
+## Troubleshooting
+
+### SPARC Orchestrator Issues
+
+**Problem**: Workflow not starting
+- **Solution**: Check `~/.myaidev-method/workflows/` exists and is writable
+- **Solution**: Verify Node.js version >= 18.0.0
+
+**Problem**: Phase execution fails
+- **Solution**: Check phase configuration in workflow JSON
+- **Solution**: Verify all required tools are available (read, write, bash, etc.)
+
+### Chrome DevTools Issues
+
+**Problem**: Cannot connect to browser
+- **Solution**: Start Chrome with remote debugging: `chrome --remote-debugging-port=9222`
+- **Solution**: Verify port 9222 is not in use
+
+**Problem**: Screenshots not saving
+- **Solution**: Check output directory exists and is writable
+- **Solution**: Verify Chrome has screen capture permissions
+
+### WordPress MCP Issues
+
+**Problem**: Authentication fails
+- **Solution**: Verify WordPress Application Password is correct
+- **Solution**: Check WordPress REST API is enabled
+- **Solution**: Verify URL includes https:// protocol
+
+**Problem**: Session data not persisting
+- **Solution**: Check `~/.myaidev-method/` directory permissions
+- **Solution**: Verify disk space is available
+
+## Best Practices
+
+1. **Start Simple**: Use slash commands before MCP orchestration
+2. **Test Incrementally**: Enable one MCP server at a time
+3. **Monitor Resources**: MCP servers consume memory, monitor usage
+4. **Use Sessions**: WordPress MCP sessions help track multi-step operations
+5. **Browser Testing**: Start browser with debugging enabled before using Chrome DevTools MCP
+6. **Workflow Persistence**: Review workflow JSON files for debugging
+7. **Error Handling**: MCP tools return detailed error messages, read them carefully
+
+## Documentation References
+
+- **SPARC Methodology**: See [DEV_WORKFLOW_GUIDE.md](./DEV_WORKFLOW_GUIDE.md)
+- **WordPress Publishing**: See [PUBLISHING_GUIDE.md](./PUBLISHING_GUIDE.md)
+- **Chrome DevTools Protocol**: https://chromedevtools.github.io/devtools-protocol/
+- **MCP Specification**: https://modelcontextprotocol.io/
+
+## Support
+
+For issues with MCP servers:
+- GitHub Issues: https://github.com/myaione/myaidev-method/issues
+- Chrome DevTools MCP: https://github.com/ChromeDevTools/chrome-devtools-mcp
+
+For general MyAIDev Method support:
+- Documentation: https://github.com/myaione/myaidev-method
+- User Guide: [USER_GUIDE.md](./USER_GUIDE.md)