Developer Tools MCP Servers (Code Execution, Figma, Design-to-Code)

The most productive AI-assisted development environments go far beyond code completion. They give the AI the ability to execute code, translate designs, enforce quality standards, run tests, and manage deployment pipelines. Developer tools MCP servers make this possible by connecting AI assistants to the entire toolchain that professional developers use daily.

The practical impact is significant. Teams using comprehensive developer tool MCP servers report 2-5x faster feature delivery, 60% reduction in context-switching, and substantially higher code quality through automated lint-and-test cycles.

Developer tools MCP servers extend AI coding assistants beyond text generation into the full development workflow -- executing code, generating designs to code, running linters, managing CI/CD pipelines, and testing applications. They transform AI assistants from suggestion engines into active development partners that can write, run, test, and deploy code.

This guide covers every major category of developer tools MCP servers: code execution environments, design tools, code quality tools, testing frameworks, and CI/CD integrations.

Code Execution MCP Servers

Code execution servers let AI assistants run code and see results in real time, enabling interactive development and debugging workflows.

E2B Code Interpreter

E2B provides cloud-based sandboxed code execution:

{
  "mcpServers": {
    "e2b": {
      "command": "npx",
      "args": ["-y", "mcp-server-e2b"],
      "env": {
        "E2B_API_KEY": "your_api_key"
      }
    }
  }
}

Available Tools:

Supported Languages: Python, JavaScript, TypeScript, R, Julia, and more.

Example Workflow:

User: "Analyze this CSV data and create a visualization"

Claude's workflow:
1. upload_file("data.csv") — upload the data
2. install_package("pandas matplotlib seaborn")
3. execute_code("""
   import pandas as pd
   import matplotlib.pyplot as plt
   import seaborn as sns

   df = pd.read_csv('data.csv')
   print(df.describe())
   print(df.head())
   """) — explore the data
4. execute_code("""
   fig, ax = plt.subplots(figsize=(10, 6))
   sns.barplot(data=df, x='category', y='revenue', ax=ax)
   plt.title('Revenue by Category')
   plt.savefig('chart.png')
   """) — create visualization
5. download_file("chart.png") — retrieve the chart

Docker-Based Code Execution

For self-hosted code execution:

{
  "mcpServers": {
    "code-runner": {
      "command": "npx",
      "args": ["-y", "mcp-server-code-runner"],
      "env": {
        "DOCKER_SOCKET": "/var/run/docker.sock",
        "MAX_EXECUTION_TIME": "30",
        "MAX_MEMORY_MB": "512"
      }
    }
  }
}

Safety Features:

• Runs code in isolated Docker containers
• Configurable time and memory limits
• No network access by default
• Temporary containers destroyed after execution
• No filesystem access outside the container

REPL MCP Server

For lightweight, interactive code execution:

{
  "mcpServers": {
    "repl": {
      "command": "npx",
      "args": ["-y", "mcp-server-repl"]
    }
  }
}

Features:

• Persistent session state (variables carry over between executions)
• Support for Node.js/TypeScript REPL
• Fast startup for quick iterations
• Useful for prototyping and experimentation

Design Tools MCP Servers

Figma MCP Server

The Figma MCP server bridges design and development:

{
  "mcpServers": {
    "figma": {
      "command": "npx",
      "args": ["-y", "mcp-server-figma"],
      "env": {
        "FIGMA_PERSONAL_ACCESS_TOKEN": "figd_your_token"
      }
    }
  }
}

Available Tools:

Design-to-Code Workflow

The most powerful Figma MCP workflow is translating designs into code:

User: "Generate React components from this Figma design"

Claude's workflow:
1. get_file(file_key) — get the design file structure
2. get_components() — identify reusable components
3. get_styles() — extract design tokens (colors, typography, spacing)
4. For each component:
   a. get_file_nodes(node_id) — get detailed component structure
   b. Analyze layout (flex, grid, absolute positioning)
   c. Extract text content, images, and interactive elements
   d. Generate React component with Tailwind CSS
5. Generate a design tokens file (colors, spacing, typography)
6. Write all files using the filesystem server

Example Generated Code:

// Generated from Figma component "ProductCard"
interface ProductCardProps {
  title: string
  price: number
  imageUrl: string
  rating: number
}

export function ProductCard({ title, price, imageUrl, rating }: ProductCardProps) {
  return (
    <div className="rounded-xl border border-gray-200 p-4 shadow-sm hover:shadow-md transition-shadow">
      <img
        src={imageUrl}
        alt={title}
        className="w-full h-48 object-cover rounded-lg"
      />
      <h3 className="mt-3 text-lg font-semibold text-gray-900">{title}</h3>
      <div className="flex items-center justify-between mt-2">
        <span className="text-xl font-bold text-blue-600">${price}</span>
        <div className="flex items-center gap-1">
          <StarIcon className="h-4 w-4 text-yellow-400" />
          <span className="text-sm text-gray-600">{rating}</span>
        </div>
      </div>
    </div>
  )
}

Design Token Extraction

Figma MCP servers can extract design tokens for design system consistency:

{
  "colors": {
    "primary": "#2563EB",
    "primary-dark": "#1D4ED8",
    "secondary": "#7C3AED",
    "text-primary": "#111827",
    "text-secondary": "#6B7280",
    "background": "#FFFFFF",
    "surface": "#F9FAFB"
  },
  "spacing": {
    "xs": "4px",
    "sm": "8px",
    "md": "16px",
    "lg": "24px",
    "xl": "32px"
  },
  "typography": {
    "heading-1": { "size": "32px", "weight": 700, "lineHeight": "40px" },
    "heading-2": { "size": "24px", "weight": 600, "lineHeight": "32px" },
    "body": { "size": "16px", "weight": 400, "lineHeight": "24px" }
  }
}

Code Quality and Linting MCP Servers

ESLint MCP Server

{
  "mcpServers": {
    "eslint": {
      "command": "npx",
      "args": ["-y", "mcp-server-eslint"],
      "env": {
        "ESLINT_CONFIG_PATH": "/path/to/project/.eslintrc"
      }
    }
  }
}

Available Tools:

Workflow:

User: "Check the code quality of my React components"

Claude's workflow:
1. lint_directory("src/components/") — run ESLint
2. Analyze results: errors, warnings, fixable issues
3. fix_file() for auto-fixable issues
4. For remaining issues, explain the problems and suggest fixes
5. Generate a code quality report

Prettier MCP Server

For code formatting:

{
  "mcpServers": {
    "prettier": {
      "command": "npx",
      "args": ["-y", "mcp-server-prettier"]
    }
  }
}

Capabilities:

• Format code files according to Prettier configuration
• Check formatting without modifying files
• Support for multiple languages (JS, TS, CSS, HTML, JSON, Markdown)
• Respect project-level .prettierrc configuration

Testing Framework MCP Servers

Jest/Vitest MCP Server

{
  "mcpServers": {
    "jest": {
      "command": "npx",
      "args": ["-y", "mcp-server-jest"],
      "env": {
        "PROJECT_ROOT": "/path/to/project"
      }
    }
  }
}

Available Tools:

Test-Driven Development Workflow:

User: "Write tests for the UserService class and make them pass"

Claude's workflow:
1. (Filesystem) read UserService source code
2. Write test file: UserService.test.ts
3. (Jest) run_test_file("UserService.test.ts") — run initial tests
4. Review failures
5. (Filesystem) update UserService implementation
6. (Jest) run_test_file("UserService.test.ts") — verify fixes
7. Repeat until all tests pass
8. (Jest) get_coverage() — check coverage metrics

Pytest MCP Server

For Python projects:

{
  "mcpServers": {
    "pytest": {
      "command": "python",
      "args": ["-m", "mcp_server_pytest"],
      "env": {
        "PROJECT_ROOT": "/path/to/python/project"
      }
    }
  }
}

CI/CD MCP Servers

GitHub Actions MCP Integration

GitHub Actions status is available through the GitHub MCP server, which provides:

Jenkins MCP Server

{
  "mcpServers": {
    "jenkins": {
      "command": "npx",
      "args": ["-y", "mcp-server-jenkins"],
      "env": {
        "JENKINS_URL": "https://jenkins.company.com",
        "JENKINS_USER": "ai-service",
        "JENKINS_API_TOKEN": "your_token"
      }
    }
  }
}

Capabilities:

• List and trigger builds
• View build logs and test results
• Manage build parameters
• Monitor pipeline stages

CI/CD Workflow Example

User: "My CI pipeline is failing. Help me debug it."

Claude's workflow:
1. (GitHub) list_workflow_runs(status="failure") — find failing runs
2. (GitHub) get_workflow_run_logs(run_id) — read failure logs
3. Identify the failing step and error message
4. (Filesystem) read the relevant source/config files
5. Diagnose the issue (e.g., missing dependency, test failure)
6. (Filesystem) write the fix
7. (Git) commit and push the fix
8. (GitHub) Monitor the new CI run

Package Management MCP Servers

npm/yarn MCP Server

{
  "mcpServers": {
    "npm": {
      "command": "npx",
      "args": ["-y", "mcp-server-npm"]
    }
  }
}

Capabilities:

• Search npm registry for packages
• Get package metadata (versions, dependencies, downloads)
• Check for outdated dependencies
• Analyze dependency trees for security vulnerabilities
• Compare package alternatives

Dependency Management Workflow

User: "Audit our project dependencies for security issues"

Claude's workflow:
1. Read package.json and package-lock.json
2. Run npm audit equivalent via MCP tools
3. Identify vulnerable packages and severity levels
4. Search for fixed versions or alternative packages
5. Generate a remediation plan with updated versions
6. Create a PR with the dependency updates

API Development MCP Servers

OpenAPI/Swagger MCP Server

{
  "mcpServers": {
    "openapi": {
      "command": "npx",
      "args": ["-y", "mcp-server-openapi"],
      "env": {
        "OPENAPI_SPEC_URL": "https://api.example.com/openapi.json"
      }
    }
  }
}

Capabilities:

• Read and parse OpenAPI specifications
• List available endpoints
• Generate API client code
• Test API endpoints
• Validate request/response schemas

Database Schema MCP Servers

Tools like Prisma MCP and Drizzle MCP integrate with ORM schema management:

{
  "mcpServers": {
    "prisma": {
      "command": "npx",
      "args": ["-y", "mcp-server-prisma"],
      "env": {
        "PRISMA_SCHEMA_PATH": "/path/to/schema.prisma"
      }
    }
  }
}

Developer Tools Comparison

Security Considerations

Code Execution Safety

• Always sandbox: Use containers, VMs, or cloud sandboxes for code execution
• Resource limits: Set CPU, memory, and time limits on code execution
• Network isolation: Disable outbound network access unless explicitly needed
• File system restrictions: Limit what the executing code can access
• No secrets exposure: Ensure environment variables and secrets are not accessible to executed code

API Token Management

• Use separate API tokens for MCP servers with minimal permissions
• Rotate tokens regularly (every 90 days)
• Store tokens in environment variables, not config files
• Audit token usage through platform dashboards

Code Review Before Execution

For sensitive environments, implement a human-in-the-loop before code execution:

1. AI generates the code
2. Code is presented for human review
3. Human approves or modifies
4. Code is executed in the sandbox

The Complete Developer Workflow

Combining developer tools MCP servers creates an end-to-end development experience:

Development Lifecycle with MCP:

1. Design Phase
   └── Figma MCP: Extract designs and generate code

2. Development Phase
   ├── Filesystem MCP: Read/write source files
   ├── Code Execution MCP: Run and test code
   └── ESLint/Prettier MCP: Enforce code quality

3. Testing Phase
   ├── Jest/Pytest MCP: Run unit tests
   ├── Playwright MCP: Run E2E tests
   └── Code Execution MCP: Test edge cases

4. Review Phase
   ├── GitHub MCP: Create PR, manage reviews
   └── ESLint MCP: Automated code review

5. Deploy Phase
   ├── CI/CD MCP: Monitor build pipeline
   └── Cloud Provider MCP: Manage deployment

For a complete walkthrough, see our MCP in Software Development guide.

Debugging MCP Servers

Debugging MCP Server Connections

If a developer tool server is not working as expected:

1. Check the server is running: Look for the server process in your system monitor
2. Verify configuration: Ensure the JSON config has correct command and args
3. Test manually: Run the server command directly in your terminal to see error output
4. Check API credentials: Verify tokens and API keys are valid and have required permissions
5. Review server logs: Most MCP servers output logs to stderr which your client may capture
6. Use MCP Inspector: The official MCP Inspector tool lets you test tool calls independently

Common Developer Tool Server Issues

Monitoring and Observability MCP Servers

Sentry MCP Server

Error monitoring through MCP:

{
  "mcpServers": {
    "sentry": {
      "command": "npx",
      "args": ["-y", "mcp-server-sentry"],
      "env": {
        "SENTRY_AUTH_TOKEN": "your_token",
        "SENTRY_ORG": "your-org"
      }
    }
  }
}

Available Tools:

Debugging Workflow:

User: "What are the top errors in production this week?"

Claude's workflow:
1. (Sentry) list_issues(project="api", sort="freq", period="7d")
2. For each top issue:
   a. (Sentry) get_issue(id) — stack trace and context
   b. (Filesystem) Read the relevant source file
3. Analyze root causes and suggest fixes
4. Prioritize by frequency and impact

Datadog MCP Server

For comprehensive monitoring data access:

{
  "mcpServers": {
    "datadog": {
      "command": "npx",
      "args": ["-y", "mcp-server-datadog"],
      "env": {
        "DD_API_KEY": "your_api_key",
        "DD_APP_KEY": "your_app_key"
      }
    }
  }
}

Capabilities:

• Query metrics (CPU, memory, latency, error rates)
• View active monitors and alerts
• Search logs
• List and manage dashboards
• Check APM traces

Docker and Container MCP Servers

Docker MCP Server

{
  "mcpServers": {
    "docker": {
      "command": "npx",
      "args": ["-y", "mcp-server-docker"],
      "env": {
        "DOCKER_HOST": "unix:///var/run/docker.sock"
      }
    }
  }
}

Available Tools:

Use Cases:

• Debugging containerized applications by reading logs
• Inspecting container configurations for issues
• Monitoring resource usage across containers
• Analyzing multi-container application architectures

Database Schema Tools

Prisma MCP Server

For projects using Prisma ORM:

{
  "mcpServers": {
    "prisma": {
      "command": "npx",
      "args": ["-y", "mcp-server-prisma"],
      "env": {
        "PRISMA_SCHEMA_PATH": "/path/to/schema.prisma"
      }
    }
  }
}

Capabilities:

• Read and parse Prisma schema files
• Suggest schema modifications
• Generate migration SQL from schema changes
• Analyze relationships between models
• Generate TypeScript types from schema

Schema Comparison and Migration

AI assistants can use database MCP servers alongside schema tools to:

1. Compare schemas: Read the ORM schema and database schema, identify discrepancies
2. Generate migrations: Propose migration steps to synchronize schema and database
3. Impact analysis: Before a migration, analyze which application code would be affected
4. Rollback planning: Generate rollback scripts alongside forward migrations

Performance Profiling MCP Servers

Lighthouse MCP Server

For web performance analysis:

{
  "mcpServers": {
    "lighthouse": {
      "command": "npx",
      "args": ["-y", "mcp-server-lighthouse"]
    }
  }
}

Capabilities:

• Run Lighthouse audits on web pages
• Get performance scores (FCP, LCP, CLS, TBT)
• Accessibility audit results
• SEO audit results
• Best practices compliance

Performance Optimization Workflow:

User: "Audit our landing page performance and fix the issues"

Claude's workflow:
1. (Lighthouse) audit("https://example.com")
2. Analyze results:
   - Performance: 72/100
   - Key issues: large images, render-blocking CSS, unused JavaScript
3. (Filesystem) Read the page source code
4. Implement fixes:
   - Add lazy loading to images
   - Defer non-critical CSS
   - Code-split JavaScript bundles
5. (Lighthouse) Re-audit to verify improvements

Integrated Development Workflow Example

Here is a complete example of how developer tool MCP servers work together for a real feature implementation:

User: "Implement the dark mode feature from the Figma design in ticket LIN-456"

Phase 1: Research (5 minutes)
1. (Linear) Read ticket requirements and acceptance criteria
2. (Figma) Extract dark mode color palette and component variants
3. (Filesystem) Read current theme implementation

Phase 2: Implementation (15 minutes)
4. (Filesystem) Create design tokens file with dark mode colors
5. (Filesystem) Create ThemeProvider component with context
6. (Filesystem) Update CSS variables for dark mode
7. (Filesystem) Add theme toggle component
8. (ESLint) Lint new files for code quality
9. (Prettier) Format all changed files

Phase 3: Testing (10 minutes)
10. (Jest) Write and run unit tests for ThemeProvider
11. (Playwright) Write E2E tests for theme switching
12. (Playwright) Take screenshots in both light and dark mode
13. (Lighthouse) Run accessibility audit (contrast ratios in dark mode)

Phase 4: Delivery (5 minutes)
14. (Git) Commit changes to feature branch
15. (GitHub) Create PR with screenshots and test results
16. (Linear) Update ticket status to "In Review"
17. (Slack) Notify team of PR ready for review

Total: ~35 minutes for a complete feature with tests and documentation

Environment Management MCP Servers

Managing development environments is another area where MCP servers add significant value.

Dev Container MCP Server

For teams using containerized development environments:

{
  "mcpServers": {
    "devcontainer": {
      "command": "npx",
      "args": ["-y", "mcp-server-devcontainer"],
      "env": {
        "WORKSPACE_ROOT": "/path/to/workspace"
      }
    }
  }
}

Capabilities:

• Read and modify devcontainer.json configurations
• List available development container templates
• Manage container features and extensions
• Generate environment-specific configurations for different team members

Environment Variable Management

AI assistants can help manage environment configurations across different deployment stages. By combining filesystem and developer tool servers, teams can automate environment setup and validation:

User: "Verify that all required environment variables are configured
       for the staging deployment"

Claude's workflow:
1. (Filesystem) Read .env.example for required variables
2. (Filesystem) Read .env.staging for configured values
3. Compare and identify:
   - Missing variables that are required
   - Variables with placeholder values not yet configured
   - Variables that differ from production (intentional vs accidental)
4. Generate a configuration report with recommendations

Dependency Conflict Resolution

When projects encounter dependency conflicts, developer tool MCP servers help diagnose and resolve them systematically:

The AI can read package manifests, analyze dependency trees, and propose resolution strategies that minimize disruption to the existing codebase. This is particularly valuable for large monorepos where dependency changes can have cascading effects across multiple packages.

Build Pipeline Optimization

Developer tool MCP servers can analyze and optimize build configurations:

User: "Our Next.js build is taking 8 minutes. Help me optimize it."

Claude's workflow:
1. (Filesystem) Read next.config.js, package.json, tsconfig.json
2. (Filesystem) Analyze the project structure and page count
3. Identify optimization opportunities:
   - Enable SWC minification (faster than Terser)
   - Add modularizeImports for large UI libraries
   - Configure image optimization settings
   - Review and trim unused dependencies
   - Enable standalone output for smaller deployment bundles
4. Apply changes and measure improvement
5. (CI/CD) Compare build times before and after

This type of workflow demonstrates how developer tool MCP servers go beyond simple code editing to address the broader development experience, including build performance, environment consistency, and dependency health.

What to Read Next

• MCP in Software Development -- Complete development lifecycle with MCP
• Version Control MCP Servers -- Git, GitHub, and GitLab integration
• Browser & Automation Servers -- E2E testing with Playwright
• Browse Developer Tools Servers -- Find developer tools in our directory