MCP Server Architecture for Frontend Tooling

// Example: Claude can now do this through MCP
"Generate TypeScript interfaces from the GraphQL schema, 
update the component props, run the type checker, 
and fix any remaining type errors"

┌─────────────┐    ┌─────────────┐    ┌─────────────┐
│ Claude Code │◄──►│ MCP Server  │◄──►│ Your Tools  │
│             │    │ (Your Code) │    │ (npm, tsc,  │
│             │    │             │    │  jest, etc) │
└─────────────┘    └─────────────┘    └─────────────┘

frontend-mcp-server/
├── package.json
├── src/
│   ├── server.ts
│   ├── tools/
│   │   ├── typescript.ts
│   │   ├── testing.ts
│   │   └── bundler.ts
│   └── types.ts
└── tsconfig.json

// src/server.ts
import { Server } from '@modelcontextprotocol/sdk/server/index.js'
import { StdioServerTransport } from '@modelcontextprotocol/sdk/server/stdio.js'

class FrontendMCPServer {
  private server: Server

  constructor() {
    this.server = new Server({
      name: 'frontend-toolchain',
      version: '1.0.0',
    }, {
      capabilities: {
        tools: {},
        resources: {},
        prompts: {}
      }
    })

    this.setupHandlers()
  }

  private setupHandlers() {
    // Tool discovery
    this.server.setRequestHandler(ListToolsRequestSchema, async () => ({
      tools: [
        {
          name: 'typescript_check',
          description: 'Run TypeScript type checking',
          inputSchema: {
            type: 'object',
            properties: {
              files: { type: 'array', items: { type: 'string' } },
              strict: { type: 'boolean', default: false }
            }
          }
        },
        {
          name: 'generate_types',
          description: 'Generate TypeScript interfaces',
          inputSchema: {
            type: 'object',
            properties: {
              source: { type: 'string', enum: ['graphql', 'json-schema'] },
              input: { type: 'string' },
              outputPath: { type: 'string' }
            },
            required: ['source', 'input']
          }
        }
      ]
    }))
  }
}

// src/tools/typescript.ts
import { exec } from 'child_process'
import { promisify } from 'util'

const execAsync = promisify(exec)

export class TypeScriptTool {
  async runTypeCheck(files?: string[], strict = false): Promise<MCPToolResult> {
    try {
      const tscCommand = this.buildTypeCheckCommand(files, strict)
      const { stdout, stderr } = await execAsync(tscCommand)
      
      const diagnostics = this.parseTypeScriptOutput(stderr || stdout)
      
      return {
        content: [{
          type: 'text',
          text: `TypeScript check completed.
${diagnostics.length > 0 ? 
  `Found ${diagnostics.length} issues:
${diagnostics.join('
')}` : 
  'No type errors found! ✅'
}`
        }],
        isError: diagnostics.length > 0
      }
    } catch (error) {
      return {
        content: [{ 
          type: 'text', 
          text: `TypeScript check failed: ${error.message}` 
        }],
        isError: true
      }
    }
  }
}

// src/tools/testing.ts
export class TestingTool {
  async runTests(pattern?: string, coverage = false): Promise<MCPToolResult> {
    const command = this.buildTestCommand(pattern, coverage)
    
    try {
      const { stdout, stderr } = await execAsync(command)
      const results = this.parseTestResults(stdout)
      
      return {
        content: [{
          type: 'text',
          text: this.formatTestResults(results)
        }]
      }
    } catch (error) {
      return {
        content: [{ 
          type: 'text', 
          text: `Test execution failed: ${error.message}` 
        }],
        isError: true
      }
    }
  }

  async generateTestsForComponent(componentPath: string): Promise<MCPToolResult> {
    try {
      // Analyze component structure
      const analyzer = new ComponentAnalyzer()
      const componentInfo = await analyzer.analyze(componentPath)
      
      // Generate test template
      const testCode = this.generateTestTemplate(componentInfo)
      const testPath = componentPath.replace(/.tsx?$/, '.test.tsx')
      
      await fs.writeFile(testPath, testCode)
      
      return {
        content: [{
          type: 'text',
          text: `Generated test file: ${testPath}
          
Generated tests for:
${componentInfo.props.map(p => `- ${p.name} prop`).join('
')}
${componentInfo.methods.map(m => `- ${m.name} method`).join('
')}

Next steps:
1. Review generated tests
2. Add specific test cases
3. Run: npm test -- ${testPath}`
        }]
      }
    } catch (error) {
      return {
        content: [{ 
          type: 'text', 
          text: `Test generation failed: ${error.message}` 
        }],
        isError: true
      }
    }
  }
}

// Make project files accessible via @ mentions
this.server.setRequestHandler(ListResourcesRequestSchema, async () => ({
  resources: [
    {
      uri: 'file://src/components',
      name: 'React Components',
      description: 'All React components in the project',
      mimeType: 'text/typescript'
    },
    {
      uri: 'schema://api/v1',
      name: 'API Schema',
      description: 'OpenAPI specification for backend API',
      mimeType: 'application/json'
    }
  ]
}))

// Push notifications to Claude when files change
import chokidar from 'chokidar'

export class DevelopmentWatcher {
  constructor(private server: Server) {
    this.setupFileWatcher()
  }

  private setupFileWatcher() {
    const watcher = chokidar.watch(['src/**/*.{ts,tsx,js,jsx}'], {
      ignored: /node_modules/,
      persistent: true
    })

    watcher.on('change', async (filePath) => {
      const changeInfo = await this.analyzeFileChange(filePath)
      
      if (changeInfo.significant) {
        await this.server.notification({
          method: 'development/fileChanged',
          params: {
            file: filePath,
            change: changeInfo,
            suggestions: await this.generateSuggestions(changeInfo)
          }
        })
      }
    })
  }
}

export class SecureCommandExecutor {
  private allowedCommands = new Set([
    'npm test',
    'npx tsc',
    'npm run build',
    'npm run lint'
  ])

  async executeCommand(command: string, args: string[] = []): Promise<string> {
    // Validate command whitelist
    if (!this.allowedCommands.has(command)) {
      throw new Error(`Command not allowed: ${command}`)
    }

    // Sanitize arguments
    const sanitizedArgs = args.map(arg => this.sanitizeArgument(arg))
    
    // Use spawn instead of exec for better control
    return new Promise((resolve, reject) => {
      const child = spawn(command.split(' ')[0], [
        ...command.split(' ').slice(1),
        ...sanitizedArgs
      ], {
        stdio: 'pipe',
        timeout: 30000, // 30 second timeout
        cwd: this.getProjectRoot()
      })

      let stdout = ''
      child.stdout.on('data', (data) => { stdout += data })
      child.on('close', (code) => {
        if (code === 0) resolve(stdout)
        else reject(new Error('Command failed'))
      })
    })
  }
}

{
  "name": "frontend-mcp-server",
  "version": "1.0.0",
  "bin": {
    "frontend-mcp": "./dist/server.js"
  },
  "files": [
    "dist/",
    "README.md"
  ],
  "scripts": {
    "build": "tsc",
    "prepublishOnly": "npm run build"
  }
}

# Install globally via npm
npm install -g frontend-mcp-server

# Add to Claude Code (stdio)
claude mcp add --transport stdio frontend-tools -- frontend-mcp

# Or add to project scope for team sharing
claude mcp add --scope project --transport stdio frontend-tools -- npx frontend-mcp-server