• CODE
  • RENDER
  • PREVIEW
  • HUMAN

How to generate responsive email layouts with your AI

Connect MJML to your agent to turn text descriptions into production-ready email code. Once connected, you just describe the layout you want.

Ask AI about this page

Short answer

How can I make responsive emails using AI?

You describe the structure, columns, or content you need in plain English. Your agent uses the MJML tool to write the markup and render the final HTML. You get valid, responsive code ready for your email service provider.

The results you get

What your agent produces

Depending on your prompt, your agent delivers different technical assets.

CODE

Valid MJML markup

The agent writes the MJML source code based on your layout requirements. You can copy this directly into your editor.

RENDER

Ready-to-use HTML

The agent converts the markup into standard HTML. This is the version you actually upload to your email platform.

PREVIEW

Visual layout check

The agent renders the code so you can see how the columns and images stack on different screens.

HUMAN

Manual refinements

You review the generated code to tweak specific colors, padding, or branding that requires a human eye.

The workflow

What your AI does when the description arrives.

The agent acts as a bridge between your ideas and the MJML syntax.

  1. Interpret layout

    Your agent reads your description of columns, sections, and text blocks to understand the intended structure.

    render_mjml

  2. Write markup

    The agent translates those structural requirements into clean, valid MJML code.

    render_mjml

  3. Convert to HTML

    The agent runs the markup through a renderer to produce the final HTML output.

    render_mjml

  4. Verify responsiveness

    The agent ensures the resulting code follows responsive rules so it looks right on mobile and desktop.

    render_mjml

Try it

Copy these to start.

Use these prompts to kick off your first email layout.

Starting points

Swap the bracketed details for your specific brand colors or content needs.

MJML Connector

You're all set. Choose your MCP client and follow the setup instructions.

Connector linkhttps://edge.vinkius.com/vk_preview_LwlmmoPeznMVTkYs7MAzFYiK3XjrkSp7oDHD4F4u/mcp

Claude Desktop

Follow the steps below to connect in seconds.

  1. 1In Claude Desktop, open Settings → Connectors.
  2. 2Click “Add custom connector” and paste the connector link above as the remote MCP server URL.
  3. 3Click Add and start a new chat — MJML capabilities are ready to use.
Configuration · claude_desktop_config.jsonCopy
{
  "mcpServers": {
    "mjml-email-markup-mcp": {
      "url": "https://edge.vinkius.com/vk_preview_LwlmmoPeznMVTkYs7MAzFYiK3XjrkSp7oDHD4F4u/mcp"
    }
  }
}
Copy into chat04

  • Create an MJML layout for a newsletter with a hero image, two columns for text, and a footer.

  • Generate a responsive email template using a dark blue background and white text for a product announcement.

  • Build a single-column MJML layout for a welcome email that includes a button and a social media icon section.

  • Write the MJML code for a promotional email with a large header and a three-column grid for featured products.

  • Claude
  • ChatGPT
  • Cursor
  • VS Code
  • Windsurf
  • Claude Code
  • JetBrains
  • Cline

Start here

Connect MJML once, then ask.

One connection gives your agent the ability to write and render email code. You can find the full setup instructions on the Connector page.

Connect MJML to your AI

FAQ

How this task behaves

  • 01

    Can the AI edit my existing HTML files?

    No. The agent creates new MJML and HTML files based on your instructions; it does not modify files on your local drive.

  • 02

    Does the AI handle image hosting?

    No. You must provide the URLs for your images in your prompt so the agent can include them in the markup.

  • 03

    Will the email work in Outlook?

    Yes, because the agent uses MJML to generate the HTML, which is specifically designed to handle Outlook's rendering quirks.

  • 04

    Can the AI send the email for me?

    No. The agent only produces the code and the rendered HTML. You still need to upload that code to your email service provider to send it.

  • 05

    Does the agent decide the brand colors?

    No. The agent follows the specific color and styling instructions you provide in your prompt.

  • More questions about MJML? The Connector page answers them. See everything the MJML Connector can do

Connect MJML to Claude, Cursor, ChatGPT & more