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, supporting the built-in Marp themes (default, Gaia, Uncover) and a rich set of academic and professional presentation styles.

⚙️ 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. Styles: default, rich, minimal, dark, corporate, academic, tech:

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

Omitting these flags defaults to default theme and default style.

External styles via marp-cli config

If a marp-cli configuration file (.marprc.{yml,yaml,json,js,cjs,mjs}, marp.config.{js,cjs,mjs}, or a marp field in package.json) is found anywhere up the directory tree at server start, every CSS file listed under its themeSet field is registered as an MCP style. The style name is read from the file's /* @theme NAME */ directive (lowercased). External entries reuse the active theme's layouts, so all existing tools work unchanged.

# .marprc.yml
themeSet:
  - ./themes/sample.css

/* themes/sample.css */
/* @theme sample */
section { background: #fff; }

sample is then a valid value for -s and shows up in list_themes_and_styles with "external": true and the absolute CSS path under source. Built-in style names are protected; any external collision is logged and skipped.

🛠️ Tools

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

• 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

Styles

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

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

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

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

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

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

💡 Tips

Adjusting font size

Add an inline style to any slide to override the font size for the whole presentation:

<style>section { font-size: 1em; }</style>

The academic style sets font-size: 0.95em by default.

Image morphing transitions (HTML only)

Use generate_agenda and add_image_transition to enable CSS View Transition morphing effects:

• generate_agenda — scans section slides, inserts an agenda with numbered icons, and adds matching icons to each section slide so the icon morphs between agenda and section views.
• add_image_transition — inserts a full-screen background slide before an image slide and tags both with matching view-transition-name so the image appears to zoom in as you advance.

Both require HTML export (export_slide with format: "html") to render transitions.

🔧 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

🔗 Links

• GitHub
• npm
• Marp
• Model Context Protocol