Visual Studio Code (VS Code)

Visual Studio Code, most commonly known as VS Code, is a development environment powered by GitHub Copilot AI that lets you easily build and debug modern web and cloud applications.

In this guide, you’ll learn how to integrate it with with the Mailtrap MCP which allows you to, amongst other things, perform the following actions:

• Connect Mailtrap to your project

• Perform Sandbox operations

• Validate email templates

• Forward email templates to your teammates

Prerequisites

Before you start, make sure to:

• Set up your sending domain (this takes approximately 5 minutes).

• Install the latest Node.js version since Mailtrap MCP is implemented as a Node.js command line utility.

Step 1. Add Mailtrap MCP config to VSC

To add Mailtrap MCP to VS Code, you can use the quick install link or follow these steps:

• Open VS Code and navigate to Settings.

• Search for MCP in the settings search bar.

• Tick the Chat > MCP: Enabled option.

• Click Edit in settings.json.

You can also open the settings.json file by typing Preferences: Open User Settings (JSON) in the Command Palette.

Once you open settings.json, insert the following code snippet into the file:

{
  "mcpServers": {
    "mailtrap": {
      "command": "npx",
      "args": ["-y", "mcp-mailtrap"],
      "env": {
        "MAILTRAP_API_TOKEN": "your_mailtrap_api_token",
        "DEFAULT_FROM_EMAIL": "[email protected]",
        "MAILTRAP_ACCOUNT_ID": "your_account_id",
        "MAILTRAP_TEST_INBOX_ID": "your_test_inbox_id"
      }
    }
  }
}

Step 2. Insert Mailtrap credentials

Next, all you need to do is replace the following values in the settings.json file:

• MAILTRAP_API_TOKEN – Required for all functionality, used to authenticate API requests, which you can copy/paste from the credentials tab.

• DEFAULT_FROM_EMAIL – Required for email sending. Make sure the email’s domain matches your own domain from the Sending Domains tab in Mailtrap.

You can find these credentials in your Mailtrap account by navigating to Sending Domains → Integration → API.

• MAILTRAP_ACCOUNT_ID – This is required for template management purposes. You can find the account ID under Settings → Account Settings.

• MAILTRAP_TEST_INBOX_ID – If you need sandbox email functionality, you can find this ID in your Sandbox.

Once you insert your Mailtrap credentials, make sure to refresh the page or reopen VS Code.

VS Code + Mailtrap MCP server use cases

Connect Mailtrap to your project

You can prompt the VS Code AI to integrate Mailtrap into your project with a prompt like this one:

Integrate Mailtrap into my project, so that it can send emails through the Mailtrap email API. Additionally, safely store the Mailtrap credentials from the MCP configuration into an .env file

VS Code agent will then go through the Mailtrap documentation, integrate the email API, and safely store your credentials in a .env file. Then, you can proceed to test the configuration. For instance, here’s our contact form email in our Gmail inbox we used as our to address:

And here is the same email in the Mailtrap Email Logs:

Sandbox operations

While you’re reviewing your email-sending code in VS Code and working in a staging environment using Sandbox, you might want to try to trigger the logic to see if it works correctly or simply to verify the behavior, test emails, etc.

You can do all of this from VS Code, which you can prompt so you can:

• Verify what the code actually does without switching to the Mailtrap UI and back to the IDE

• Inspect basic message metadata

• Use the returned message ID to request full message details (content, headers, etc.), and more.

Template validation

Using a Mailtrap template ID in your code, but you’re not sure whether it’s the correct one? Just request the list of available templates in your Mailtrap account from the VS Code AI:

Not satisfied with the subject line of your template? Use a prompt such as this one to edit it:

Sending emails to your teammate

You can also ask your teammates’ opinion on an email design or a template you’re working in your Sandbox by prompting the VS Code, no need to leave the editor. For instance: