Claude Code subagent imported from byronwade/local.thorbis.com (.claude/agents/MCP-INTEGRATION-SUMMARY.md). Copyright stays with the author.

MCP Integration Summary for Thorbis Agents

Overview

All Thorbis Claude Code agents have been successfully enhanced with MCP (Model Context Protocol) server integrations. This provides real-time capabilities for documentation retrieval, browser testing, and data persistence.

MCP Servers Integrated

1. Context7 (Documentation & Code Examples)

• Purpose: Provides up-to-date library documentation and code patterns
• Usage: Add "use context7" or "use library /library-id" to prompts
• API Key: Required for higher rate limits (get from context7.com/dashboard)

2. Playwright MCP (Browser Testing & Validation)

• Purpose: Real-time browser automation for testing UI, accessibility, and performance
• Capabilities: Screenshots, accessibility trees, console monitoring, network analysis
• Configuration: Supports headless mode, viewport sizing, and vision capabilities

3. Supabase MCP (Data Persistence)

• Purpose: Database operations for storing audit results and configurations
• Features: SQL execution, migrations, logging, security advisors
• Use Cases: Storing audit results, tracking violations, managing configurations

Agent MCP Capabilities

Accessibility & UX Agent

• Context7: WCAG guidelines, React accessibility patterns, jest-axe docs
• Playwright: Keyboard navigation testing, screen reader validation, contrast checking
• Supabase: Store accessibility audit results and user preferences

Design System Agent

• Context7: shadcn/ui patterns, Tailwind docs, Radix UI primitives
• Playwright: Visual regression testing, dark mode validation, forbidden element detection
• Supabase: Track design violations and audit history

Performance Agent

• Context7: Next.js optimization, React Server Components, Edge Functions
• Playwright: Core Web Vitals measurement, bundle size analysis, TTI monitoring
• Supabase: Performance metrics storage and trend analysis

Component Reuse Agent

• Context7: React composition patterns, component library docs
• Playwright: Component consistency validation across industries
• Supabase: Track component duplication violations

API Conventions Agent

• Context7: API design patterns, tRPC, Zod validation
• Playwright: API endpoint testing, CORS validation, rate limit checking
• Supabase: API usage logging and endpoint management

Additional Enhanced Agents

• Development Workflow Agent: Git operations, build process validation
• Industry Routing Agent: URL pattern validation, prefetch testing
• RBAC Agent: Permission testing, role validation
• Scalability Agent: Database schema validation, cache testing
• Monorepo Structure Agent: Import validation, dependency checking
• Page Archetypes Agent: No-dialog validation, inline panel testing
• Code Hygiene Agent: Dead code detection, file evolution tracking

Key MCP Functions Used

Context7 Functions

// Get library documentation
getLibraryDocs({
  context7CompatibleLibraryID: '/vercel/next.js',
  topic: 'server components',
  tokens: 10000
})

Playwright Functions

// Browser automation
mcp__playwright__browser_navigate({ url })
mcp__playwright__browser_snapshot() // Accessibility tree
mcp__playwright__browser_resize({ width, height })
mcp__playwright__browser_take_screenshot({ fullPage: true })
mcp__playwright__browser_console_messages()
mcp__playwright__browser_evaluate({ function: "() => {...}" })
mcp__playwright__browser_network_requests()

Supabase Functions

// Database operations
mcp__supabase__execute_sql({ project_id, query, params })
mcp__supabase__apply_migration({ project_id, name, query })
mcp__supabase__get_logs({ project_id, service })
mcp__supabase__get_advisors({ project_id, type })

Configuration Requirements

Ensure all three MCP servers are configured in your client:

{
  "mcpServers": {
    "context7": {
      "command": "npx",
      "args": ["@context7/mcp@latest", "--api-key", "YOUR_API_KEY"]
    },
    "playwright": {
      "command": "npx",
      "args": [
        "@playwright/mcp@latest",
        "--headless",
        "--caps", "vision,pdf",
        "--viewport-size", "1920,1080"
      ]
    },
    "supabase": {
      "command": "npx",
      "args": ["@supabase/mcp@latest"]
    }
  }
}

Benefits of MCP Integration

1. Real-time Documentation: Always access the latest library docs and patterns
2. Automated Testing: Validate UI, accessibility, and performance in real-time
3. Data Persistence: Track violations, store audit results, monitor trends
4. Cross-Industry Validation: Ensure consistency across all industry implementations
5. Continuous Monitoring: Detect issues as they occur, not after deployment

Usage Examples

Complete Audit Workflow

// 1. Get latest docs
const docs = "Next.js 14 patterns use context7"

// 2. Test implementation
await mcp__playwright__browser_navigate({ url })
const metrics = await measurePerformance()

// 3. Store results
await mcp__supabase__execute_sql({
  project_id,
  query: "INSERT INTO audits ...",
  params: [url, metrics]
})

Industry Validation

for (const industry of ['hs', 'rest', 'auto', 'ret']) {
  // Test each industry implementation
  await validateIndustry(industry)
}

Next Steps

1. Install MCP servers in your Claude Code client
2. Configure API keys and settings
3. Run agents with MCP capabilities enabled
4. Monitor audit results in Supabase
5. Use Context7 for all documentation needs

All agents are now MCP-enhanced and ready for advanced real-time validation and monitoring!