MJML MCP Server

Instructions

Implementation Reference

• index.js:390-404 (handler)

  Handler function that parses arguments using the schema, retrieves component information via helper, and returns formatted JSON content block.
  async handleGetComponentInfo(args) { const parsed = GetComponentInfoSchema.parse(args); log.info(`Getting component info: ${parsed.component || 'all'} (${parsed.category})`); const info = this.getComponentInfo(parsed.component, parsed.category); return { content: [ { type: 'text', text: JSON.stringify(info, null, 2), }, ], }; }
• index.js:63-66 (schema)

  Zod schema defining input parameters for the get_component_info tool: optional component name and category filter.
  const GetComponentInfoSchema = z.object({ component: z.string().optional().describe('Specific component name (optional)'), category: z.enum(['all', 'standard', 'advanced', 'structural']).optional().default('all').describe('Component category'), });
• index.js:241-259 (registration)

  Tool registration in the ListTools response, specifying name, description, and input schema.
  { name: 'get_component_info', description: 'Get MJML component reference and documentation', inputSchema: { type: 'object', properties: { component: { type: 'string', description: 'Specific component name (optional)', }, category: { type: 'string', enum: ['all', 'standard', 'advanced', 'structural'], description: 'Component category', default: 'all', }, }, }, },
• index.js:275-276 (registration)

  Dispatch case in CallToolRequestHandler switch statement routing to the handler.
  case 'get_component_info': return await this.handleGetComponentInfo(args);
• index.js:743-886 (helper)

  Supporting method containing the comprehensive MJML components database and logic to filter/retrieve info by component or category.
  getComponentInfo(component = null, category = 'all') { const components = { standard: { 'mj-text': { description: 'Text component for displaying text content', attributes: { 'font-family': 'Font family', 'font-size': 'Font size', 'color': 'Text color', 'align': 'Text alignment (left, center, right)', 'padding': 'Padding around the text', }, example: '<mj-text>Hello World!</mj-text>', }, 'mj-button': { description: 'Button component for calls to action', attributes: { 'background-color': 'Button background color', 'color': 'Text color', 'href': 'Link URL', 'border-radius': 'Button border radius', 'font-size': 'Font size', }, example: '<mj-button href="#">Click me</mj-button>', }, 'mj-image': { description: 'Image component for displaying images', attributes: { 'src': 'Image URL', 'alt': 'Alt text', 'width': 'Image width', 'height': 'Image height', 'border-radius': 'Image border radius', }, example: '<mj-image src="https://example.com/image.jpg" />', }, 'mj-divider': { description: 'Divider component for creating horizontal lines', attributes: { 'border-width': 'Border width', 'border-color': 'Border color', 'padding': 'Padding around the divider', }, example: '<mj-divider border-color="#cccccc" />', }, 'mj-spacer': { description: 'Spacer component for adding vertical space', attributes: { 'height': 'Spacer height', }, example: '<mj-spacer height="20px" />', }, }, structural: { 'mj-section': { description: 'Section component for creating rows', attributes: { 'background-color': 'Section background color', 'padding': 'Section padding', 'full-width': 'Make section full width', 'direction': 'Layout direction (ltr, rtl)', }, example: '<mj-section background-color="#ffffff"><mj-column></mj-column></mj-section>', }, 'mj-column': { description: 'Column component for creating columns within sections', attributes: { 'width': 'Column width', 'background-color': 'Column background color', 'padding': 'Column padding', 'border': 'Column border', }, example: '<mj-column width="50%"><mj-text>Hello</mj-text></mj-column>', }, 'mj-wrapper': { description: 'Wrapper component for grouping sections', attributes: { 'background-color': 'Wrapper background color', 'padding': 'Wrapper padding', 'full-width': 'Make wrapper full width', }, example: '<mj-wrapper><mj-section></mj-section></mj-wrapper>', }, }, advanced: { 'mj-navbar': { description: 'Navigation bar component', attributes: { 'background-color': 'Navbar background color', 'align': 'Navbar alignment', 'padding': 'Navbar padding', }, example: '<mj-navbar><mj-navbar-link href="#">Home</mj-navbar-link></mj-navbar>', }, 'mj-social': { description: 'Social media icons component', attributes: { 'align': 'Social icons alignment', 'padding': 'Social icons padding', 'icon-size': 'Icon size', }, example: '<mj-social><mj-social-element name="facebook" href="#" /></mj-social>', }, 'mj-table': { description: 'Table component for displaying tabular data', attributes: { 'cellspacing': 'Cell spacing', 'cellpadding': 'Cell padding', 'width': 'Table width', 'align': 'Table alignment', }, example: '<mj-table><tr><td>Cell 1</td><td>Cell 2</td></tr></mj-table>', }, 'mj-carousel': { description: 'Image carousel component', attributes: { 'align': 'Carousel alignment', 'border-radius': 'Carousel border radius', 'icon-width': 'Navigation icon width', }, example: '<mj-carousel><mj-carousel-image src="image1.jpg" /></mj-carousel>', }, }, }; if (component) { for (const [cat, comps] of Object.entries(components)) { if (comps[component]) { return { component, category: cat, ...comps[component], }; } } return { error: `Component '${component}' not found` }; } if (category !== 'all') { return components[category] || {}; } return components; }