Skillget

marp-mcp

mcp
SUMMARY

MCP server that lets AI agents build and edit Marp slide decks via structured tools.

README.md

Marp MCP Server

NPM Downloads

[!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_themes_and_styles List all available themes and styles with descriptions and layout counts
list_layouts List all available slide layouts with parameters and descriptions
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 or PDF using marp-cli

Style selection

Use -s or --style args for style selection. Choose from default, rich, minimal, dark, corporate, academic, tech. 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)
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

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
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

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

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)

tech — Modern tech/startup style with violet-cyan gradient accents, strong typography for product demos and engineering talks

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

Example

Rendered samples (GitHub Pages):

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

Yorumlar (0)

Sonuc bulunamadi