myaidev-method/MCP_INTEGRATION.md

Comprehensive development framework with SPARC methodology for AI-assisted software development, multi-platform publishing (WordPress, PayloadCMS, Astro, Docusaurus, Mintlify), and Coolify deployment

# 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)