MJML MCP Server

Instructions

Implementation Reference

• index.js:367-388 (handler)

  Main handler function that parses input using GenerateTemplateSchema, generates MJML template via getTemplate helper, optionally saves to outputPath, and returns structured response with the MJML content.
  async handleGenerateTemplate(args) { const parsed = GenerateTemplateSchema.parse(args); log.info(`Generating template: ${parsed.template}`); const template = this.getTemplate(parsed.template, parsed.variables, parsed.customColors, parsed.customFonts); const saveResult = await this.saveOutput(template, parsed.outputPath); return { content: [ { type: 'text', text: JSON.stringify({ success: true, template: parsed.template, mjml: template, saved: saveResult, }, null, 2), }, ], }; }
• index.js:52-61 (schema)

  Zod schema defining input parameters for the generate_template tool: required template type (enum), optional variables, custom colors/fonts, and output path.
  const GenerateTemplateSchema = z.object({ template: z.enum([ 'newsletter', 'welcome', 'promotional', 'transactional', 'password-reset', 'verification', 'announcement', 'invitation' ]).describe('Template type'), variables: z.record(z.string()).optional().describe('Template variables to replace'), customColors: z.record(z.string()).optional().describe('Custom color scheme'), customFonts: z.record(z.string()).optional().describe('Custom fonts'), outputPath: z.string().optional().describe('Save template to file path'), });
• index.js:211-240 (registration)

  Tool registration in ListToolsRequestHandler, providing name, description, and inputSchema mirroring the Zod schema for MCP tool discovery.
  name: 'generate_template', description: 'Generate pre-built email templates', inputSchema: { type: 'object', properties: { template: { type: 'string', enum: ['newsletter', 'welcome', 'promotional', 'transactional', 'password-reset', 'verification', 'announcement', 'invitation'], description: 'Template type', }, variables: { type: 'object', description: 'Template variables to replace', }, customColors: { type: 'object', description: 'Custom color scheme', }, customFonts: { type: 'object', description: 'Custom fonts', }, outputPath: { type: 'string', description: 'Save template to file path', }, }, required: ['template'], }, },
• index.js:406-741 (helper)

  Helper method that selects predefined MJML email templates based on type, applies custom colors/fonts/default variables via replacement, and returns the final MJML string.
  getTemplate(type, variables = {}, customColors = {}, customFonts = {}) { const defaultColors = { primary: '#007bff', secondary: '#6c757d', success: '#28a745', danger: '#dc3545', warning: '#ffc107', info: '#17a2b8', light: '#f8f9fa', dark: '#343a40', }; const colors = { ...defaultColors, ...customColors }; const defaultFonts = { 'Lato': 'https://fonts.googleapis.com/css?family=Lato:300,400,700,900', 'Open Sans': 'https://fonts.googleapis.com/css?family=Open+Sans:300,400,600,700,800', }; const fonts = { ...defaultFonts, ...customFonts }; const defaultVars = { company_name: 'Your Company', company_logo: 'https://via.placeholder.com/150x50', unsubscribe_url: '#', website_url: '#', support_email: 'support@example.com', current_year: new Date().getFullYear(), ...variables, }; const templates = { newsletter: `<mjml> <mj-head> <mj-attributes> <mj-all font-family="Lato, sans-serif" /> <mj-section background-color="#ffffff" /> <mj-column padding="0" /> <mj-text font-size="14px" line-height="22px" color="#4a5568" /> <mj-button background-color="${colors.primary}" color="#ffffff" border-radius="4px" /> </mj-attributes> <mj-font name="Lato" href="${fonts['Lato']}" /> <mj-title>{{company_name}} Newsletter</mj-title> <mj-preview>Our latest updates and news</mj-preview> </mj-head> <mj-body background-color="#f7fafc"> <mj-section background-color="${colors.primary}" padding="40px 0"> <mj-column> <mj-text align="center" color="#ffffff" font-size="24px" font-weight="bold"> {{company_name}} Newsletter </mj-text> <mj-text align="center" color="#ffffff" font-size="16px" padding-top="10px"> {{newsletter_date}} </mj-text> </mj-column> </mj-section> <mj-section padding="40px 30px"> <mj-column> <mj-text font-size="28px" font-weight="bold" color="#2d3748" align="center"> {{main_title}} </mj-text> <mj-text align="center" padding-top="10px"> {{main_subtitle}} </mj-text> </mj-column> </mj-section> <mj-section padding="0 30px 40px"> <mj-column> <mj-image src="{{featured_image}}" width="100%" border-radius="8px" /> <mj-text padding-top="20px" font-size="18px" font-weight="600"> {{featured_title}} </mj-text> <mj-text padding-top="10px"> {{featured_content}} </mj-text> <mj-button href="{{featured_link}}" padding-top="20px"> Read More </mj-button> </mj-column> </mj-section> <mj-section background-color="#edf2f7" padding="40px 30px"> <mj-column> <mj-text font-size="20px" font-weight="bold" color="#2d3748" align="center"> More Updates </mj-text> </mj-column> </mj-section> <mj-section background-color="#edf2f7" padding="0 30px 40px"> <mj-column> <mj-text font-size="16px" font-weight="600"> {{update1_title}} </mj-text> <mj-text padding-top="5px" font-size="14px"> {{update1_content}} </mj-text> <mj-divider border-color="#cbd5e0" border-width="1px" padding="20px 0" /> <mj-text font-size="16px" font-weight="600"> {{update2_title}} </mj-text> <mj-text padding-top="5px" font-size="14px"> {{update2_content}} </mj-text> </mj-column> </mj-section> <mj-section background-color="${colors.dark}" padding="40px 30px"> <mj-column> <mj-social-element-mode> <mj-social facebook-url="{{facebook_url}}" twitter-url="{{twitter_url}}" instagram-url="{{instagram_url}}" /> </mj-social-element-mode> <mj-text align="center" color="#ffffff" font-size="12px" padding-top="20px"> © {{current_year}} {{company_name}}. All rights reserved. </mj-text> <mj-text align="center" color="#ffffff" font-size="12px" padding-top="10px"> <a href="{{unsubscribe_url}}" style="color: #ffffff; text-decoration: underline;">Unsubscribe</a> </mj-text> </mj-column> </mj-section> </mj-body> </mjml>`, welcome: `<mjml> <mj-head> <mj-attributes> <mj-all font-family="Open Sans, sans-serif" /> <mj-section background-color="#ffffff" /> <mj-column padding="0" /> <mj-text font-size="14px" line-height="22px" color="#4a5568" /> <mj-button background-color="${colors.success}" color="#ffffff" border-radius="6px" font-weight="600" /> </mj-attributes> <mj-font name="Open Sans" href="${fonts['Open Sans']}" /> <mj-title>Welcome to {{company_name}}!</mj-title> </mj-head> <mj-body background-color="#f7fafc"> <mj-section background-color="${colors.success}" padding="60px 0"> <mj-column> <mj-text align="center" color="#ffffff" font-size="36px" font-weight="bold"> Welcome! </mj-text> <mj-text align="center" color="#ffffff" font-size="18px" padding-top="10px"> We're excited to have you on board </mj-text> </mj-column> </mj-section> <mj-section padding="50px 30px"> <mj-column> <mj-text align="center" font-size="24px" font-weight="600" color="#2d3748"> Hi {{user_name}}, </mj-text> <mj-text align="center" padding-top="20px" font-size="16px"> Thank you for joining {{company_name}}! We're thrilled to have you as part of our community. </mj-text> <mj-text align="center" padding-top="15px" font-size="16px"> Your account has been successfully created and you're ready to start exploring all the amazing features we have to offer. </mj-text> </mj-column> </mj-section> <mj-section background-color="#f7fafc" padding="40px 30px"> <mj-column> <mj-text align="center" font-size="20px" font-weight="600" color="#2d3748"> Next Steps </mj-text> <mj-text align="center" padding-top="20px"> Here are a few things you can do to get started: </mj-text> </mj-column> </mj-section> <mj-section padding="0 30px 40px"> <mj-column width="50%"> <mj-text align="center" font-size="16px" font-weight="600" padding-bottom="10px"> ✓ Complete Your Profile </mj-text> <mj-text align="center" font-size="14px"> Add your personal information and preferences </mj-text> </mj-column> <mj-column width="50%"> <mj-text align="center" font-size="16px" font-weight="600" padding-bottom="10px"> ✓ Explore Features </mj-text> <mj-text align="center" font-size="14px"> Discover everything {{company_name}} can do </mj-text> </mj-column> </mj-section> <mj-section padding="0 30px 40px"> <mj-column> <mj-button href="{{dashboard_url}}" font-size="16px" padding="15px 30px"> Go to Dashboard </mj-button> </mj-column> </mj-section> <mj-section background-color="#edf2f7" padding="30px"> <mj-column> <mj-text align="center" font-size="14px" color="#718096"> If you have any questions, don't hesitate to contact our support team at <a href="mailto:{{support_email}}" style="color: ${colors.primary};">{{support_email}}</a> </mj-text> </mj-column> </mj-section> <mj-section background-color="${colors.dark}" padding="30px"> <mj-column> <mj-text align="center" color="#ffffff" font-size="12px"> © {{current_year}} {{company_name}}. All rights reserved. </mj-text> </mj-column> </mj-section> </mj-body> </mjml>`, promotional: `<mjml> <mj-head> <mj-attributes> <mj-all font-family="Lato, sans-serif" /> <mj-section background-color="#ffffff" /> <mj-column padding="0" /> <mj-text font-size="14px" line-height="22px" color="#4a5568" /> <mj-button background-color="${colors.danger}" color="#ffffff" border-radius="4px" font-weight="bold" /> </mj-attributes> <mj-font name="Lato" href="${fonts['Lato']}" /> <mj-title>🔥 Limited Time Offer from {{company_name}}</mj-title> <mj-preview>Don't miss out on these amazing deals!</mj-preview> </mj-head> <mj-body background-color="#000000"> <mj-section background-color="${colors.danger}" padding="20px 0"> <mj-column> <mj-text align="center" color="#ffffff" font-size="24px" font-weight="bold"> 🔥 FLASH SALE </mj-text> <mj-text align="center" color="#ffffff" font-size="18px" padding-top="5px"> {{discount_percentage}} OFF EVERYTHING </mj-text> <mj-text align="center" color="#ffffff" font-size="16px" padding-top="5px"> Ends in {{time_remaining}} </mj-text> </mj-column> </mj-section> <mj-section background-color="#ffffff" padding="40px 30px"> <mj-column> <mj-text align="center" font-size="28px" font-weight="bold" color="#2d3748"> {{promotion_title}} </mj-text> <mj-text align="center" padding-top="15px" font-size="16px"> {{promotion_description}} </mj-text> </mj-column> </mj-section> <mj-section background-color="#fff3cd" padding="20px 30px"> <mj-column> <mj-text align="center" font-size="18px" font-weight="600" color="#856404"> ⏰ Hurry! Limited Time Offer </mj-text> </mj-column> </mj-section> <mj-section padding="30px"> <mj-column> <mj-image src="{{product_image}}" width="100%" /> <mj-text align="center" font-size="20px" font-weight="bold" padding-top="20px"> {{product_name}} </mj-text> <mj-text align="center" padding-top="10px"> {{product_description}} </mj-text> <mj-text align="center" padding-top="10px"> <span style="text-decoration: line-through; color: #718096;">${{original_price}}</span> <span style="font-size: 24px; font-weight: bold; color: ${colors.danger};">${{sale_price}}</span> </mj-text> <mj-button href="{{shop_url}}" background-color="${colors.danger}" padding-top="20px"> Shop Now - {{discount_percentage}} OFF </mj-button> </mj-column> </mj-section> <mj-section background-color="#f8f9fa" padding="40px 30px"> <mj-column> <mj-text align="center" font-size="18px" font-weight="600" color="#2d3748"> Why Choose {{company_name}}? </mj-text> </mj-column> </mj-section> <mj-section background-color="#f8f9fa" padding="0 30px 40px"> <mj-column width="33%"> <mj-text align="center" font-size="16px" font-weight="600"> ✓ Free Shipping </mj-text> </mj-column> <mj-column width="33%"> <mj-text align="center" font-size="16px" font-weight="600"> ✓ 30-Day Returns </mj-text> </mj-column> <mj-column width="34%"> <mj-text align="center" font-size="16px" font-weight="600"> ✓ 24/7 Support </mj-text> </mj-column> </mj-section> <mj-section background-color="#343a40" padding="30px"> <mj-column> <mj-text align="center" color="#ffffff" font-size="12px"> © {{current_year}} {{company_name}}. All rights reserved. </mj-text> <mj-text align="center" color="#ffffff" font-size="12px" padding-top="10px"> <a href="{{unsubscribe_url}}" style="color: #ffffff; text-decoration: underline;">Unsubscribe</a> </mj-text> </mj-column> </mj-section> </mj-body> </mjml>`, }; let template = templates[type] || templates.newsletter; // Replace variables Object.entries(defaultVars).forEach(([key, value]) => { const regex = new RegExp(`{{${key}}}`, 'g'); template = template.replace(regex, value); }); return template; }