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
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
Click on "Install Server".
Wait a few minutes for the server to deploy. Once ready, it will show a "Started" state.
In the chat, type
@followed by the MCP server name and your instructions, e.g., "@Marp MCP Servercreate 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
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-mcpAn 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 all available slide layouts with parameters and descriptions |
| Generate slide IDs for every slide |
| Insert, replace, or delete slides using slide IDs (ID-based operations) |
| Ensure |
| 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 slide with heading and content |
| Section break slide with centered title and subtitle |
| List slide with bullet points (max 8 items) |
| Table slide with description (max 7 rows) |
| Slide with image on right and content list (allows more explanation than image-center) |
| Slide with centered image (fixed h:350) |
Styles
rich — Rich visual style with cards, timelines, grids, gradients, and more
Layout | Description | ||
| Hero title slide with dark gradient background | ||
| Section divider slide with gradient background | ||
| List slide with bullet points | ||
| Rich table slide with styled header and zebra stripes | ||
| Rich image-right slide with content on left and image on right (60:40 split) | ||
| Rich centered image slide with rounded corners and shadow | ||
| Image on the left with content list on the right (40:60 split) | ||
| Vertical timeline with labeled events (use 'Label: Description' format) | ||
| Grid of cards with icon, title, and description (use 'Icon | Title | Description' format) |
| Statistics display with large numbers and labels (use 'Number | Label' format) | |
| Centered gradient message box for key takeaways or announcements | ||
| Two-column layout with styled panels, optional accent highlight on one panel | ||
| Three-column layout with styled panels (use 'Title | Content' format) | |
| Two images side by side with labels for comparison | ||
| Free-form markdown content slide | ||
| Quote slide with attribution | ||
| Horizontal process flow with numbered steps and arrows | ||
| Simple two-column layout with headings and lists | ||
| Large impactful statement slide with bold centered text | ||
| Main content with sidebar for supplementary info, definitions, or references | ||
| Horizontal progress bars for metrics visualization (use 'Label | Value | MaxValue' format) |
| Pure CSS horizontal bar chart for data visualization (use 'Label | Value' format) | |
| Horizontal timeline with labeled events (use 'Label: Description' format) | ||
| Decorative impact quote with large quotation marks, centered layout | ||
| Bento Box modular grid for mixed content (use 'Size | Title | Content' format, Size: small/medium/large) |
minimal — Clean, flat design with typography focus and minimal decoration
Layout | Description | |
| Clean black title slide with white text | |
| Simple black section divider slide | |
| Pure markdown content slide | |
| Simple bullet list slide | |
| Minimal table with black header and clean borders | |
| Text on left, image on right (60:40 split), clean design | |
| Centered image slide, clean and minimal | |
| Quote slide with left border accent, no extra decoration | |
| Two-column layout with a thin divider line | |
| Large impactful statement slide with bold centered text | |
| Minimal statistics display with black numbers and thin underline (use 'Number | Label' format) |
| Minimal message box for key takeaways | |
| Minimal decorative impact quote with large quotation marks |
dark — Dark mode style with indigo and emerald accents, developer-friendly
Layout | Description | ||
| Dark title slide with indigo-violet gradient | ||
| Dark section divider with slate-to-indigo gradient | ||
| Free-form markdown content slide on dark background | ||
| Bullet list slide on dark background | ||
| Dark table with indigo header | ||
| Dark card grid with icon, title, and description (use 'Icon | Title | Description' format) |
| Dark vertical timeline with indigo-to-emerald gradient line (use 'Label: Description' format) | ||
| Dark statistics display with large indigo numbers (use 'Number | Label' format) | |
| Text on left, image on right on dark background (60:40 split) | ||
| Terminal-style command display on dark background (prefix lines with '$ ' for commands) | ||
| Dark quote slide with attribution | ||
| Dark centered image slide | ||
| Dark horizontal process flow with numbered steps and arrows | ||
| Dark two-column layout with panels | ||
| Dark large impactful statement slide with bold centered text | ||
| Dark gradient message box for key takeaways or announcements | ||
| Dark horizontal progress bars for metrics visualization (use 'Label | Value | MaxValue' format) |
| Dark CSS horizontal bar chart for data visualization (use 'Label | Value' format) | |
| Dark horizontal timeline with labeled events (use 'Label: Description' format) | ||
| Side-by-side code comparison (Before/After or two languages) |
corporate — Professional business style with navy color scheme, structured layouts
Layout | Description | ||
| Professional navy gradient title slide | ||
| Corporate navy-to-sky section divider slide | ||
| Standard business content slide with markdown | ||
| Business bullet list slide | ||
| Business table with navy header and clean rows | ||
| Two-column comparison layout with navy-accented panels | ||
| Three-column layout with sky-accented panels | ||
| Business metrics display with large navy numbers (use 'Number | Label' format) | |
| Horizontal business process flow with numbered steps | ||
| Agenda slide with numbered items and optional duration (use 'Item name | Duration' format) | |
| Text on left, image on right, professional business style (60:40 split) | ||
| Navy key message box for important announcements or takeaways | ||
| Corporate quote slide with attribution | ||
| Corporate centered image slide | ||
| Corporate large impactful statement slide with bold centered text | ||
| Main content with sidebar for supplementary info or references | ||
| Corporate horizontal progress bars for metrics visualization (use 'Label | Value | MaxValue' format) |
| Corporate CSS horizontal bar chart for data visualization (use 'Label | Value' format) | |
| Corporate decorative impact quote with large quotation marks | ||
| 2x2 matrix for SWOT, risk analysis, or priority grids |
academic — Academic conference presentation style with maroon color scheme, structured for scholarly talks
Layout | Description | |
| Academic title slide with author, affiliation, and date | |
| Maroon section divider with optional number | |
| Free-form markdown content slide | |
| Bullet point list with optional citations | |
| Table with maroon header | |
| Two-column panel layout for comparisons or parallel content | |
| Content on left, image on right (60:40 split) | |
| Centered image with description | |
| Figure with numbered caption and source attribution | |
| Conclusion or key takeaway box with maroon highlight | |
| Method step flow diagram (use 'Label | Description' format for steps) |
| Side-by-side comparison (e.g., conventional vs proposed method) | |
| Academic statistics display with maroon numbers (use 'Number | Label' format) |
| Main content with sidebar for definitions, notes, or references | |
| Results table with best-value highlighting (prefix cell with * to highlight) |
Example
Rendered samples (GitHub Pages):
Development
Working with Examples
Generate markdown examples:
npm run examples:generateGenerate HTML files locally:
npm run examples:htmlPreview examples with live reload (recommended for testing):
npm run examples:server
# Open http://localhost:8080 in your browserNote: HTML files are automatically generated and deployed to GitHub Pages by CI/CD. They are not committed to git.
License
MIT License