What can you do with this server?

Create and manage Marp presentations using AI through natural language commands. * Initialize presentation projects - Set up complete project structure with directories, custom themes, and template files using project path, name, and title * Generate slide content - Create individual slides with 7 academic layout types: title, section, content, table, multi-column, figure (background images), and image (centered images) * List available layouts - View all slide layouts with their descriptions and accepted parameters * Customize themes - Modify colors, fonts, and layouts through CSS customization * Preview and export - View presentations in VS Code and export to PDF, HTML, or PowerPoint formats * Compatible with MCP-enabled applications - Works with Claude Code, Cursor, Cline and other tools

Which integrations are available for this server?

Includes pre-configured academic_custom.css theme with custom fonts, color schemes, table styles, and multi-column layouts for presentations Automatically generates .gitignore files as part of presentation project initialization References GitHub repository for the MCP server source code and contribution Built using JavaScript/Node.js and distributed as an npm package Generates presentation slides as Markdown files with Marp-specific syntax and formatting Distributed as an npm package with installation options via npx, global, or local installation

How do I use Marp MCP Server?

1. Click on "Install Server". 2. Wait a few minutes for the server to deploy. Once ready, it will show a "Started" state. 3. In the chat, type @ followed by the MCP server name and your instructions, e.g., "@Marp MCP Server create a presentation about AI trends with a title slide and three list slides" That's it! The server will respond to your query, and you can continue using it as needed. Here is a step-by-step guide with screenshots.

Marp MCP Server

by masaki39

Overview Schema Related Servers Score Discussions

TypeScript

Local

Marp MCP Server

NPM Downloads

TIP

This package includes aClaude 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.

Related MCP server: Slidev MCP Server

🛠️ 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, delete, or move slides using slide IDs (ID-based operations)
`batch_manage_slides`	Apply multiple slide operations in one call (single file read/write)
`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
`generate_agenda`	Auto-generate an agenda slide; adds numbered icons to section slides for view-transition morphing (HTML only)
`add_image_transition`	Insert a full-screen background image slide before a target slide and tag images for view-transition morphing (HTML only)

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

📐 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. Add sidebarTitle/sidebarItems to show a sidebar panel on the right side.
`list`	Bullet point list with optional citations
`table`	Table with maroon header. Write the table in standard markdown format.
`two-column`	Two-column panel layout. Use panelStyle='comparison' to highlight right panel (maroon) vs left panel (gray) for conventional vs proposed comparisons.
`image-right`	Content on left, image on right (60:40 split)
`image-center`	Centered image slide. Set figNumber to switch to figure-caption mode (renders 'Fig. X.' label with optional source attribution).
`key-message`	Conclusion or key takeaway box with maroon highlight
`methodology`	Method step flow diagram (use 'Label
`statistics`	Academic statistics display with maroon numbers (use 'Number

`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

💡 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

Install Server

license - permissive license

quality

maintenance

How are these scores calculated?

Maintenance

–Maintainers

–Response time

2wRelease cycle

6Releases (12mo)

Commit activity

Issues opened vs closed

Resources

Need Help?

Related Servers

Tools

Latest Blog Posts

Lightport: Open-Sourcing Glama's AI Gateway
By punkpeye on April 27, 2026.
open source
OpenAI
Tool Definition Quality Score (TDQS)
By punkpeye on April 3, 2026.
mcp
The Hackers Who Tracked My Sleep Cycle
By punkpeye on March 26, 2026.
security

MCP directory API

We provide all the information about MCP servers via our MCP API.

curl -X GET 'https://glama.ai/api/mcp/v1/servers/masaki39/marp-mcp'

If you have feedback or need assistance with the MCP directory API, please join our Discord server

Marp MCP Server

⚙️ Setup

Claude Code

Other MCP clients

Setting server default theme/style

External styles via marp-cli config

🛠️ Tools

Per-call theme/style override

🎨 Example

📐 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

Image morphing transitions (HTML only)

🔧 Development

Working with Examples

📄 License

🔗 Links

Maintenance

Resources

Tools

Latest Blog Posts

MCP directory API

`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