Slidev MCP Server

Slidev MCP Server

Enables AI agents to create professional Slidev presentations and export them to PDF directly through natural language commands. Supports multiple themes, code syntax highlighting, and various slide layouts for business, technical, and educational content.

Category
Visit Server

README

๐ŸŽจ Slidev MCP Server

AI-powered presentation creation and PDF export via Model Context Protocol

License: MIT Node.js Model Context Protocol Tests

Transform ideas into professional presentations instantly. Create beautiful Slidev presentations and export to PDF through AI agents like Claude Desktop, n8n workflows, and any MCP-compatible client.


๐ŸŽฌ Demo

What it looks like in action:

<!-- TODO: Add demo GIF showing:

  • Creating a presentation in Claude Desktop
  • The resulting Slidev presentation
  • PDF export process --> Demo GIF coming soon - showing complete workflow from AI chat to PDF

Real-world examples:

  • Business presentation โ†’ Create "Q4 Results" in 30 seconds
  • Technical documentation โ†’ GraphQL API Guide with code blocks
  • Educational content โ†’ JavaScript Fundamentals course slides

Try it live: Claude Desktop Setup | n8n Workflows


๐ŸŽฏ Why Slidev MCP Server?

The Problem: Creating professional presentations is time-consuming. Switching between AI chat and presentation tools breaks workflow. Existing solutions lack AI integration.

The Solution:

  • โœ… Create presentations directly in AI chat (Claude, n8n workflows, custom clients)
  • โœ… Instant PDF export with professional quality
  • โœ… Professional themes (Apple Basic, Default, and custom)
  • โœ… Code syntax highlighting for technical content
  • โœ… No context switching - everything in your AI workflow

Perfect for:

  • ๐Ÿ“Š Business professionals creating client presentations
  • ๐Ÿ‘ฉโ€๐Ÿ’ป Developers documenting technical concepts
  • ๐ŸŽ“ Educators preparing course materials
  • ๐Ÿค– AI workflow automation (n8n, Zapier, etc.)

๐Ÿš€ Quick Start

Option 1: Claude Desktop (Recommended)

  1. Clone the repository:

    git clone https://github.com/raykuonz/slidev-mcp-server.git
    cd slidev-mcp-server
    npm install
    npm run setup  # Auto-installs PDF dependencies
    
  2. Add to Claude Desktop config (~/Library/Application Support/Claude/claude_desktop_config.json on macOS):

    {
      "mcpServers": {
        "slidev": {
          "command": "node",
          "args": ["/full/path/to/slidev-mcp-server/src/index.js"]
        }
      }
    }
    
  3. Restart Claude Desktop and start creating:

    "Create a 5-slide presentation about AI trends in 2024 with apple-basic theme"
    

Option 2: Development Setup

git clone https://github.com/raykuonz/slidev-mcp-server.git
cd slidev-mcp-server
npm install
npm run setup  # Auto-installs PDF dependencies
npm start      # Start STDIO server

Dependencies auto-installed:

  • Node.js 18+ โœ…
  • Playwright (for PDF export) โœ…
  • Slidev CLI โœ…

Test it works:

npm test
# โœ… 59 tests passing in ~0.232 seconds

โœจ Features

๐ŸŽจ Presentation Creation

  • Atomic Operations: Build complete presentations in one command
  • Smart Templates: Business, technical, educational layouts
  • Theme Support: Apple Basic, Default, and custom themes
  • Content Types: Text, code blocks, images, tables, math equations

๐Ÿ“„ PDF Export

  • Cross-directory support: Works from any execution context
  • Dependency auto-detection: Handles missing Playwright/Slidev automatically
  • Export options: Slide ranges, click animations, dark mode
  • High-quality output: Vector graphics and sharp text rendering

๐Ÿค– AI Integration

  • Claude Desktop: Native MCP integration
  • n8n Workflows: Automated presentation generation
  • VS Code: Direct integration via MCP extension
  • Custom Clients: Standard MCP protocol support

๐Ÿ›ก๏ธ Production Ready

  • 59 comprehensive tests: Unit, integration, and workflow testing
  • Error handling: Graceful degradation with helpful messages
  • Performance: Optimized for large presentations (20+ slides)
  • Cross-platform: Windows, macOS, Linux support

๐Ÿ“ฆ Installation

Method 1: Git Clone (Current)

git clone https://github.com/raykuonz/slidev-mcp-server.git
cd slidev-mcp-server
npm install
npm run setup  # Auto-installs PDF dependencies

Method 2: NPM (Coming Soon)

npm install -g slidev-mcp-server

Dependencies

  • Node.js 18+ (Required)
  • Playwright (Auto-installed for PDF export)
  • @slidev/cli (Auto-installed)
  • @slidev/theme-apple-basic (Auto-installed)

Verify Installation

node src/index.js  # Should start the MCP server
npm test          # Run comprehensive test suite

๐Ÿ›  Usage

Basic Presentation Creation

In Claude Desktop:

Create a technical presentation about GraphQL with:
- Cover slide with title "GraphQL Fundamentals"
- What is GraphQL slide
- Benefits vs REST API slide
- Code example showing a query
- Conclusion slide

Use the apple-basic theme and export to PDF.

Result: Complete presentation with PDF in seconds โœจ

Advanced Features

Business Presentation with Data:

{
  "name": "Q4-results-2024",
  "theme": "apple-basic",
  "title": "Q4 2024 Results",
  "author": "Your Name",
  "slides": [
    {
      "layout": "cover",
      "title": "Q4 2024 Results",
      "content": "Record-breaking quarter"
    },
    {
      "layout": "two-cols",
      "title": "Key Metrics",
      "content": "Revenue growth and market expansion"
    }
  ]
}

n8n Workflow Integration

// n8n HTTP Request Node - MCP Tool Call
{
  "method": "POST",
  "url": "http://localhost:3002/mcp/tool/build_complete_presentation",
  "body": {
    "name": "automated-report",
    "title": "Weekly Analytics Report",
    "slides": [/* dynamic content from previous nodes */]
  }
}

Available Tools

Tool Description Use Case
build_complete_presentation Create full presentation Complete slide decks
create_complete_slide Add single slide Incremental building
export_to_pdf Generate PDF Final deliverable
get_presentation_state View current status Debugging/workflow

Available Scripts

Script Command Purpose
STDIO Server npm start For Claude Desktop integration
HTTP Server npm run start:http For web-based clients
SSE Server npm run start:sse For real-time streaming
Simple API npm run start:simple Basic HTTP API
MCP Inspector npm run test:inspector Debug MCP tools

โš™๏ธ Configuration

MCP Client Setup

Claude Desktop

{
  "mcpServers": {
    "slidev": {
      "command": "node",
      "args": ["/full/path/to/slidev-mcp-server/src/index.js"],
      "env": {
        "SLIDEV_THEME": "apple-basic",
        "EXPORT_QUALITY": "high"
      }
    }
  }
}

VS Code MCP Extension

{
  "mcp.servers": {
    "slidev": {
      "command": "node",
      "args": ["/full/path/to/slidev-mcp-server/src/index.js"]
    }
  }
}

Environment Variables

SLIDEV_THEME=apple-basic              # Default theme
EXPORT_FORMAT=pdf                     # Export format
LOG_LEVEL=info                        # Logging level
PRESENTATIONS_DIR=./presentations     # Output directory

Custom Themes

  1. Install theme: npm install @slidev/theme-your-theme
  2. Use in presentations: "theme": "your-theme"
  3. Available themes: Slidev Theme Gallery

๐Ÿ”ง Troubleshooting

Common Issues

"playwright-chromium not found"

# Solution: Install PDF dependencies
npm run install-pdf
# or manually:
npm install -D playwright-chromium

"Command not found: slidev"

# Solution: Install Slidev CLI
npm install -D @slidev/cli
# or use the setup script:
npm run setup

"Cannot find presentation file"

The server looks for presentations in multiple locations:

  • ./presentations/ (project directory)
  • ~/presentations/ (home directory)
  • Current working directory

PDF export fails in n8n

n8n runs in a different environment. The server handles this automatically by:

  • Detecting execution context
  • Using absolute paths
  • Installing dependencies in the correct location

MCP Server not connecting to Claude Desktop

  1. Check the path in your Claude Desktop config is absolute
  2. Restart Claude Desktop after config changes
  3. Test the server runs manually: node src/index.js

Performance Tips

  • Use build_complete_presentation instead of individual slides
  • Limit presentations to <50 slides for optimal performance
  • Use standard themes for faster rendering

Testing

npm test              # Run all 59 tests
npm run test:watch    # Development mode
npm run test:coverage # Generate coverage report

Getting Help

  • ๐Ÿ› Issues - Bug reports and feature requests
  • ๐Ÿ’ฌ Discussions - Community support
  • ๐Ÿ“– Documentation - Complete guides and API reference

๐Ÿค Contributing

We welcome contributions! This project thrives because of community involvement.

Quick Start for Contributors

git clone https://github.com/raykuonz/slidev-mcp-server.git
cd slidev-mcp-server
npm install
npm test          # Run test suite (59 tests)
npm run test:watch  # Development mode

How to Contribute

  • ๐Ÿ› Bug Reports: Open an issue
  • โœจ Feature Requests: Start a discussion
  • ๐Ÿ“ Documentation: Help improve our docs
  • ๐Ÿงช Testing: Add test cases or improve coverage
  • ๐ŸŽจ Themes: Create new Slidev themes

Development Workflow

  1. Fork the repository
  2. Create feature branch: git checkout -b feature/amazing-feature
  3. Run tests: npm test
  4. Commit changes: git commit -m 'Add amazing feature'
  5. Push branch: git push origin feature/amazing-feature
  6. Open a Pull Request

Code of Conduct

We follow the Contributor Covenant. Please be respectful and inclusive.


๐Ÿงฐ Tech Stack

Core Technologies

  • Node.js 18+ - Runtime environment
  • JavaScript ES Modules - Modern module system
  • Model Context Protocol - AI integration standard
  • Slidev - Presentation framework by Anthony Fu
  • Playwright - PDF export engine

MCP Integration

  • @modelcontextprotocol/sdk ^1.17.1 - Official MCP SDK
  • Zod ^3.25.76 - Schema validation
  • Express ^4.18.2 - HTTP server framework
  • Transport Protocols: STDIO, HTTP, SSE

Testing Framework

  • Jest - Testing framework
  • 59 comprehensive tests - Unit, integration, and workflow
  • Mock infrastructure - Isolated, fast testing
  • 0.232s execution time - Lightning fast feedback

Architecture

โ”Œโ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”    โ”Œโ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”    โ”Œโ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”
โ”‚   MCP Client    โ”‚    โ”‚  Slidev MCP      โ”‚    โ”‚   Slidev CLI    โ”‚
โ”‚ (Claude/n8n/VS)โ”‚โ—„โ”€โ”€โ–บโ”‚     Server       โ”‚โ—„โ”€โ”€โ–บโ”‚   + Playwright  โ”‚
โ”‚                 โ”‚    โ”‚                  โ”‚    โ”‚                 โ”‚
โ””โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”˜    โ””โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”˜    โ””โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”˜
                              โ”‚
                              โ–ผ
                       โ”Œโ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”
                       โ”‚  File System     โ”‚
                       โ”‚ (presentations/) โ”‚
                       โ””โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”˜

๐Ÿ“„ License

This project is licensed under the MIT License - see the LICENSE file for details.

What this means:

  • โœ… Commercial use allowed
  • โœ… Modification allowed
  • โœ… Distribution allowed
  • โœ… Private use allowed
  • โŒ No liability or warranty

๐Ÿ™Œ Credits & Acknowledgments

Built With

Inspiration

This project was inspired by the need for seamless AI-powered presentation creation and the amazing possibilities of the Model Context Protocol ecosystem.

Special Thanks

  • @antfu for creating the incredible Slidev framework
  • Anthropic for developing the Model Context Protocol
  • The MCP Community for inspiration, feedback, and collaboration

Made with โค๏ธ for the AI and presentation community

If this project helped you, please consider giving it a โญ star on GitHub!

Recommended Servers

playwright-mcp

playwright-mcp

A Model Context Protocol server that enables LLMs to interact with web pages through structured accessibility snapshots without requiring vision models or screenshots.

Official
Featured
TypeScript
Magic Component Platform (MCP)

Magic Component Platform (MCP)

An AI-powered tool that generates modern UI components from natural language descriptions, integrating with popular IDEs to streamline UI development workflow.

Official
Featured
Local
TypeScript
Audiense Insights MCP Server

Audiense Insights MCP Server

Enables interaction with Audiense Insights accounts via the Model Context Protocol, facilitating the extraction and analysis of marketing insights and audience data including demographics, behavior, and influencer engagement.

Official
Featured
Local
TypeScript
VeyraX MCP

VeyraX MCP

Single MCP tool to connect all your favorite tools: Gmail, Calendar and 40 more.

Official
Featured
Local
graphlit-mcp-server

graphlit-mcp-server

The Model Context Protocol (MCP) Server enables integration between MCP clients and the Graphlit service. Ingest anything from Slack to Gmail to podcast feeds, in addition to web crawling, into a Graphlit project - and then retrieve relevant contents from the MCP client.

Official
Featured
TypeScript
Kagi MCP Server

Kagi MCP Server

An MCP server that integrates Kagi search capabilities with Claude AI, enabling Claude to perform real-time web searches when answering questions that require up-to-date information.

Official
Featured
Python
E2B

E2B

Using MCP to run code via e2b.

Official
Featured
Neon Database

Neon Database

MCP server for interacting with Neon Management API and databases

Official
Featured
Exa Search

Exa Search

A Model Context Protocol (MCP) server lets AI assistants like Claude use the Exa AI Search API for web searches. This setup allows AI models to get real-time web information in a safe and controlled way.

Official
Featured
Qdrant Server

Qdrant Server

This repository is an example of how to create a MCP server for Qdrant, a vector search engine.

Official
Featured