masaki39/marp-mcp
3.3
If you are the rightful owner of marp-mcp and would like to certify it and/or have it hosted online, please leave a comment on the right or send an email to dayong@mcphub.com.
The Marp MCP Server is designed to facilitate the creation and editing of Marp presentations with AI assistance, supporting various themes and layouts.
Tools
4
Resources
0
Prompts
0
Marp MCP Server
[!TIP] This package includes a . After installing, Claude Code can create Marp presentations via the
/marpcommand 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 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 |
statistics | Statistics display with large numbers and labels (use 'Number |
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 |
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 |
chart-bar | Pure CSS horizontal bar chart for data visualization (use 'Label |
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 |
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 |
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 |
timeline | Dark vertical timeline with indigo-to-emerald gradient line (use 'Label: Description' format) |
statistics | Dark statistics display with large indigo numbers (use 'Number |
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 |
chart-bar | Dark CSS horizontal bar chart for data visualization (use 'Label |
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 |
process | Horizontal business process flow with numbered steps |
agenda | Agenda slide with numbered items and optional duration (use 'Item name |
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 |
chart-bar | Corporate CSS horizontal bar chart for data visualization (use 'Label |
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 |
comparison | Side-by-side comparison (e.g., conventional vs proposed method) |
statistics | Academic statistics display with maroon numbers (use 'Number |
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