Marp MCP Server

[!TIP] This package includes a Claude Code Skill. After installing, Claude Code can create Marp presentations via the /marp command using the built-in CLI — no MCP server configuration required!

Auto-updating plugin install:

/plugin marketplace add masaki39/marp-mcp
/plugin install marp@marp-mcp

An MCP server for creating and editing Marp presentations with AI assistance. This MCP server allows LLMs to edit Markdown files according to a specified layout, and now supports the default Marp theme along with Gaia, Uncover, and the Academic in this repository.

Setup

Add to your MCP client configuration:

{
  "mcpServers": {
    "marp-mcp": {
      "command": "npx",
      "args": ["-y", "@masaki39/marp-mcp@latest"]
    }
  }
}

Theme selection

Use -t or --theme args for theme selection. Choose from default, gaia, uncover, or academic:

{
  "command": "npx",
  "args": [
    "-y",
    "@masaki39/marp-mcp@latest",
    "-t",
    "default"]
}

Tools

| Tool | Description | |------|-------------| | list_layouts | List all available slide layouts with parameters and descriptions | | generate_slide_ids | Generate slide IDs for every slide | | manage_slide | Insert, replace, or delete slides using slide IDs (ID-based operations) | | set_frontmatter | Ensure marp, theme, header, and paginate frontmatter fields are present | | read_slide | Read slide content by ID or list all slides with their IDs and positions |

Style selection

Use -s or --style args for style selection. Choose from default, rich, minimal, dark, corporate, academic. Styles are designed for the default theme:

{
  "command": "npx",
  "args": [
    "-y",
    "@masaki39/marp-mcp@latest",
    "-s",
    "rich"]
}

Available Layouts

Default theme

| Layout | Description | |--------|-------------| | title | Title slide with heading and content | | section | Section break slide with centered title and subtitle | | list | List slide with bullet points (max 8 items) | | table | Table slide with description (max 7 rows) | | image-right | Slide with image on right and content list (allows more explanation than image-center) | | image-center | Slide with centered image (fixed h:350) |

Styles

rich — Rich visual style with cards, timelines, grids, gradients, and more

| Layout | Description | |--------|-------------| | title | Hero title slide with dark gradient background | | section | Section divider slide with gradient background | | list | List slide with bullet points | | table | Rich table slide with styled header and zebra stripes | | image-right | Rich image-right slide with content on left and image on right (60:40 split) | | image-center | Rich centered image slide with rounded corners and shadow | | image-split | Image on the left with content list on the right (40:60 split) | | timeline | Vertical timeline with labeled events (use 'Label: Description' format) | | card-grid | Grid of cards with icon, title, and description (use 'Icon|Title|Description' format) | | statistics | Statistics display with large numbers and labels (use 'Number|Label' format) | | highlight-box | Centered gradient message box for key takeaways or announcements | | two-column-panel | Two-column layout with styled panels, optional accent highlight on one panel | | three-column-panel | Three-column layout with styled panels (use 'Title|Content' format) | | image-comparison | Two images side by side with labels for comparison | | content | Free-form markdown content slide | | quote | Quote slide with attribution | | process | Horizontal process flow with numbered steps and arrows | | two-column | Simple two-column layout with headings and lists | | big-statement | Large impactful statement slide with bold centered text | | sidebar | Main content with sidebar for supplementary info, definitions, or references | | progress-bar | Horizontal progress bars for metrics visualization (use 'Label|Value|MaxValue' format) | | chart-bar | Pure CSS horizontal bar chart for data visualization (use 'Label|Value' format) | | timeline-horizontal | Horizontal timeline with labeled events (use 'Label: Description' format) | | pull-quote | Decorative impact quote with large quotation marks, centered layout | | bento-grid | Bento Box modular grid for mixed content (use 'Size|Title|Content' format, Size: small/medium/large) |

minimal — Clean, flat design with typography focus and minimal decoration

| Layout | Description | |--------|-------------| | title | Clean black title slide with white text | | section | Simple black section divider slide | | content | Pure markdown content slide | | list | Simple bullet list slide | | table | Minimal table with black header and clean borders | | image-right | Text on left, image on right (60:40 split), clean design | | image-center | Centered image slide, clean and minimal | | quote | Quote slide with left border accent, no extra decoration | | two-column | Two-column layout with a thin divider line | | big-statement | Large impactful statement slide with bold centered text | | statistics | Minimal statistics display with black numbers and thin underline (use 'Number|Label' format) | | highlight-box | Minimal message box for key takeaways | | pull-quote | Minimal decorative impact quote with large quotation marks |

dark — Dark mode style with indigo and emerald accents, developer-friendly

| Layout | Description | |--------|-------------| | title | Dark title slide with indigo-violet gradient | | section | Dark section divider with slate-to-indigo gradient | | content | Free-form markdown content slide on dark background | | list | Bullet list slide on dark background | | table | Dark table with indigo header | | card-grid | Dark card grid with icon, title, and description (use 'Icon|Title|Description' format) | | timeline | Dark vertical timeline with indigo-to-emerald gradient line (use 'Label: Description' format) | | statistics | Dark statistics display with large indigo numbers (use 'Number|Label' format) | | image-right | Text on left, image on right on dark background (60:40 split) | | terminal | Terminal-style command display on dark background (prefix lines with '$ ' for commands) | | quote | Dark quote slide with attribution | | image-center | Dark centered image slide | | process | Dark horizontal process flow with numbered steps and arrows | | two-column | Dark two-column layout with panels | | big-statement | Dark large impactful statement slide with bold centered text | | highlight-box | Dark gradient message box for key takeaways or announcements | | progress-bar | Dark horizontal progress bars for metrics visualization (use 'Label|Value|MaxValue' format) | | chart-bar | Dark CSS horizontal bar chart for data visualization (use 'Label|Value' format) | | timeline-horizontal | Dark horizontal timeline with labeled events (use 'Label: Description' format) | | code-comparison | Side-by-side code comparison (Before/After or two languages) |

corporate — Professional business style with navy color scheme, structured layouts

| Layout | Description | |--------|-------------| | title | Professional navy gradient title slide | | section | Corporate navy-to-sky section divider slide | | content | Standard business content slide with markdown | | list | Business bullet list slide | | table | Business table with navy header and clean rows | | two-column | Two-column comparison layout with navy-accented panels | | three-column | Three-column layout with sky-accented panels | | statistics | Business metrics display with large navy numbers (use 'Number|Label' format) | | process | Horizontal business process flow with numbered steps | | agenda | Agenda slide with numbered items and optional duration (use 'Item name|Duration' format) | | image-right | Text on left, image on right, professional business style (60:40 split) | | highlight-box | Navy key message box for important announcements or takeaways | | quote | Corporate quote slide with attribution | | image-center | Corporate centered image slide | | big-statement | Corporate large impactful statement slide with bold centered text | | sidebar | Main content with sidebar for supplementary info or references | | progress-bar | Corporate horizontal progress bars for metrics visualization (use 'Label|Value|MaxValue' format) | | chart-bar | Corporate CSS horizontal bar chart for data visualization (use 'Label|Value' format) | | pull-quote | Corporate decorative impact quote with large quotation marks | | quadrant | 2x2 matrix for SWOT, risk analysis, or priority grids |

academic — Academic conference presentation style with maroon color scheme, structured for scholarly talks

| Layout | Description | |--------|-------------| | title | Academic title slide with author, affiliation, and date | | section | Maroon section divider with optional number | | content | Free-form markdown content slide | | list | Bullet point list with optional citations | | table | Table with maroon header | | two-column | Two-column panel layout for comparisons or parallel content | | image-right | Content on left, image on right (60:40 split) | | image-center | Centered image with description | | figure-caption | Figure with numbered caption and source attribution | | key-message | Conclusion or key takeaway box with maroon highlight | | methodology | Method step flow diagram (use 'Label|Description' format for steps) | | comparison | Side-by-side comparison (e.g., conventional vs proposed method) | | statistics | Academic statistics display with maroon numbers (use 'Number|Label' format) | | sidebar | Main content with sidebar for definitions, notes, or references | | results-table | Results table with best-value highlighting (prefix cell with * to highlight) |

Example

Rendered samples (GitHub Pages):

• Academic theme
• Default theme
• Gaia theme
• Uncover theme
• Default theme, rich style
• Default theme, minimal style
• Default theme, dark style
• Default theme, corporate style
• Default theme, academic style

Development

Working with Examples

Generate markdown examples:

npm run examples:generate

Generate HTML files locally:

npm run examples:html

Preview examples with live reload (recommended for testing):

npm run examples:server
# Open http://localhost:8080 in your browser

Note: HTML files are automatically generated and deployed to GitHub Pages by CI/CD. They are not committed to git.

License

MIT License

Links

• GitHub
• npm
• Marp
• Model Context Protocol