Marp
MCP server for Marp presentation management with custom theme support
Ask AI about Marp
Powered by Claude Β· Grounded in docs
I know everything about Marp. Ask me about installation, configuration, usage, or troubleshooting.
0/500
Reviews
Documentation
Marp MCP Server
[!TIP] This package includes a Claude Code Skill. 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 Academic in this repository.
βοΈ Setup
Claude Code
Option 1 β CLI, user scope (recommended):
claude mcp add marp-mcp -- npx -y @masaki39/marp-mcp@latest
Option 2 β CLI, project scope (shareable with team via .mcp.json):
claude mcp add --scope project marp-mcp -- npx -y @masaki39/marp-mcp@latest
Option 3 β Manual config (~/.claude/settings.json or .mcp.json):
{
"mcpServers": {
"marp-mcp": {
"command": "npx",
"args": ["-y", "@masaki39/marp-mcp@latest"]
}
}
}
Other MCP clients
{
"mcpServers": {
"marp-mcp": {
"command": "npx",
"args": ["-y", "@masaki39/marp-mcp@latest"]
}
}
}
Setting server default theme/style
Use -t / --theme and -s / --style args to set the server-wide default. Choose from themes: default, gaia, uncover, academic. Styles: default, rich, minimal, dark, corporate, academic, tech:
{
"mcpServers": {
"marp-mcp": {
"command": "npx",
"args": ["-y", "@masaki39/marp-mcp@latest", "-t", "default", "-s", "academic"]
}
}
}
Omitting these flags defaults to default theme and default style.
π οΈ Tools
| Tool | Description |
|---|---|
list_themes_and_styles | List all available themes and styles; shows current server defaults |
list_layouts | List available slide layouts for a theme/style combination |
create_presentation | Create a new presentation with frontmatter and title slide in one step |
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 |
generate_slide_ids | Generate stable UUIDs for every slide (safe to re-run) |
export_slide | Export to HTML, PDF, or PPTX using marp-cli |
Per-call theme/style override
list_layouts, manage_slide, and set_frontmatter accept optional theme and style parameters to override the server default for a single call. This lets one server instance handle all theme/style combinations without restarting:
{ "theme": "gaia", "style": "rich" }
Omit either parameter to fall back to the server default.
π¨ 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
- Default theme, tech style
π Available Layouts
Default theme
Show layouts
| 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) |
content | Standard content slide with heading and free-form markdown body (supports bullets with -, bold with **, code with backticks) |
Styles
rich β Rich visual style with cards, timelines, grids, gradients, and more
Show layouts
| 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
Show layouts
| 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 |
agenda | Clean agenda slide with numbered items and optional time durations (use 'Item name |
comparison | Side-by-side comparison with explicit left/right titles and list items, separated by a thin divider |
dark β Dark mode style with indigo and emerald accents, developer-friendly
Show layouts
| 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) |
code-showcase | Code block with language badge, optional explanation text, and optional highlight bullet points |
corporate β Professional business style with navy color scheme, structured layouts
Show 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
Show layouts
| 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) |
tech β Modern tech/startup style with violet-cyan gradient accents, strong typography for product demos and engineering talks
Show layouts
| Layout | Description |
|---|---|
title | Gradient title slide with optional tagline and event/company name |
section | Dark full-bleed section divider with cyan eyebrow label and bold heading |
content | Standard content slide with heading and free-form markdown body, accented with a violet left border |
list | Bullet list slide with violet arrow markers and thin dividers between items |
two-column | Two-panel layout with violet top borders, ideal for comparing options or features |
statistics | Large gradient metric numbers with optional trend indicators. Use 'Value |
quote | Stylized pull quote with violet left border, large quote mark, and attribution |
highlight-box | Alert/callout box with color-coded variants: 'info' (cyan), 'warning' (amber), 'success' (green) |
feature-grid | Grid of feature cards, each with an icon, title, and description. Use 'Icon |
roadmap | Horizontal milestone timeline with status indicators. Use 'Phase |
π§ Development
Working with Examples
Generate markdown examples:
pnpm run examples:generate
Generate HTML files locally:
pnpm run examples:html
Preview examples with live reload (recommended for testing):
pnpm 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
