@reactslides/mcp-server

A Model Context Protocol (MCP) server for AI-assisted ReactSlides presentation creation.

Overview

This MCP server enables AI assistants (like Claude, ChatGPT, and other LLMs) to help create and manage ReactSlides presentations. It provides tools for creating presentations, adding/editing slides, applying themes, and exporting to various formats.

Quick Start

The fastest way to get started is with VS Code + Cline or Claude Desktop:

Option 1: VS Code + Cline (Recommended)

1. Install Cline extension
2. Add to VS Code settings (Cmd/Ctrl + , → search "Cline: MCP Servers" → Edit settings.json):

{
  "cline.mcpServers": {
    "reactslides": {
      "command": "npx",
      "args": ["@reactslides/mcp-server"]
    }
  }
}

3. Open Cline and ask: "Create a ReactSlides presentation about React hooks"

Option 2: Claude Desktop

1. Edit ~/Library/Application Support/Claude/claude_desktop_config.json (macOS) or %APPDATA%\Claude\claude_desktop_config.json (Windows)
2. Add:

{
  "mcpServers": {
    "reactslides": {
      "command": "npx",
      "args": ["@reactslides/mcp-server"]
    }
  }
}

3. Restart Claude Desktop and ask: "Create a presentation about TypeScript"

Installation

npm install @reactslides/mcp-server
# or
pnpm add @reactslides/mcp-server

Integration Guides

With Claude Desktop

Add to your Claude Desktop configuration (claude_desktop_config.json):

{
  "mcpServers": {
    "reactslides": {
      "command": "npx",
      "args": ["@reactslides/mcp-server"]
    }
  }
}

With VS Code AI Extensions

The MCP server works with popular VS Code AI extensions for in-editor presentation creation.

With Cline (formerly Claude Dev)

Cline is a VS Code extension that brings Claude AI directly into your editor.

Installation:

1. Install the Cline extension from the VS Code marketplace
2. Open VS Code Settings (Cmd/Ctrl + ,)
3. Search for "Cline: MCP Servers"
4. Click "Edit in settings.json"
5. Add the ReactSlides MCP server:

{
  "cline.mcpServers": {
    "reactslides": {
      "command": "npx",
      "args": ["@reactslides/mcp-server"]
    }
  }
}

Usage:

• Open Cline sidebar (Cmd/Ctrl + Shift + P → "Cline: Open")
• Ask: "Create a ReactSlides presentation about TypeScript best practices"
• Cline will use the MCP tools to scaffold and build your presentation

With Continue

Continue is an open-source AI coding assistant for VS Code.

Installation:

1. Install Continue from the VS Code marketplace
2. Open the Continue config file (Cmd/Ctrl + Shift + P → "Continue: Open config.json")
3. Add the MCP server under the experimental section:

{
  "experimental": {
    "modelContextProtocol": true,
    "mcpServers": {
      "reactslides": {
        "command": "npx",
        "args": ["@reactslides/mcp-server"]
      }
    }
  }
}

Usage:

• Open Continue sidebar (Cmd/Ctrl + L)
• Ask: "Add a slide comparing React hooks"
• Continue will generate the appropriate ReactSlides code

With GitHub Copilot Chat

GitHub Copilot Chat doesn't directly support MCP, but you can use the MCP server's tools as context for better suggestions.

Setup:

1. Install GitHub Copilot and Copilot Chat extensions
2. Reference the ReactSlides documentation in chat context
3. Use specific prompts that mention component names

Example Prompts:

@workspace Create a new ReactSlides presentation with a TitleSlide and ContentSlide using the Presentation component

@workspace Add a slide with ProcessFlowChart showing the deployment pipeline

With Cursor

Cursor is an AI-first code editor based on VS Code.

Installation:

1. Open Cursor Settings (Cmd/Ctrl + ,)
2. Go to "Features" → "MCP Servers"
3. Add ReactSlides MCP server:

{
  "mcpServers": {
    "reactslides": {
      "command": "npx",
      "args": ["@reactslides/mcp-server"]
    }
  }
}

Usage:

• Press Cmd/Ctrl + K to open Cursor chat
• Ask: "Create a presentation about our product features"
• Cursor will leverage the MCP tools to generate slides

With OpenAI API

The MCP server can be used with OpenAI's function calling by converting the tools to OpenAI function format:

import OpenAI from 'openai';

const openai = new OpenAI();

// Example: Using the create_presentation tool
const response = await openai.chat.completions.create({
  model: "gpt-4",
  messages: [
    { role: "user", content: "Create a presentation about React best practices" }
  ],
  functions: [
    {
      name: "create_presentation",
      description: "Creates a new ReactSlides presentation project",
      parameters: {
        type: "object",
        properties: {
          name: { type: "string", description: "Name of the presentation project" },
          template: { 
            type: "string", 
            enum: ["minimal", "corporate", "developer", "creative", "markdown"],
            description: "Template to use"
          },
          mode: {
            type: "string",
            enum: ["react", "markdown"],
            description: "Presentation mode"
          }
        },
        required: ["name"]
      }
    }
  ],
  function_call: "auto"
});

With Anthropic Claude API

import Anthropic from '@anthropic-ai/sdk';

const anthropic = new Anthropic();

const response = await anthropic.messages.create({
  model: "claude-sonnet-4-20250514",
  max_tokens: 1024,
  tools: [
    {
      name: "add_slide",
      description: "Generates code to add a new slide to a ReactSlides presentation",
      input_schema: {
        type: "object",
        properties: {
          slideId: { type: "string", description: "Unique identifier for the slide" },
          layout: { 
            type: "string",
            enum: ["default", "centered", "split", "title", "image", "code"],
            description: "Layout preset for the slide"
          },
          title: { type: "string", description: "Title for the slide" },
          content: { type: "string", description: "Main content of the slide" }
        },
        required: ["slideId"]
      }
    }
  ],
  messages: [
    { role: "user", content: "Add a slide about performance optimization tips" }
  ]
});

With Other LLMs (Ollama, LM Studio, etc.)

For local LLMs that support function calling:

// Example with Ollama
const response = await fetch('http://localhost:11434/api/chat', {
  method: 'POST',
  body: JSON.stringify({
    model: 'llama3',
    messages: [
      { role: 'user', content: 'Create a slide about API design' }
    ],
    tools: [
      {
        type: 'function',
        function: {
          name: 'add_slide',
          description: 'Add a new slide to the presentation',
          parameters: {
            type: 'object',
            properties: {
              slideId: { type: 'string' },
              title: { type: 'string' },
              content: { type: 'string' }
            }
          }
        }
      }
    ]
  })
});

Practical Examples

Here are real-world examples of using the MCP server with AI assistants:

Example 1: Creating a Tech Talk Presentation

Prompt to AI:

Create a ReactSlides presentation about "TypeScript Best Practices" with:
1. A title slide
2. A slide with 5 key principles
3. A code example slide
4. A comparison slide (Do's vs Don'ts)
5. A conclusion slide

What the AI will do:

1. Use create_presentation to scaffold the project
2. Use add_slide multiple times to create each slide with appropriate layouts
3. Use get_presentation_info to look up component usage
4. Generate proper TypeScript code with all necessary imports

Example 2: Adding Interactive Process Flow

Prompt to AI:

Add a slide showing our deployment process with ProcessFlowChart component.
Steps: Code Review → Tests → Staging → Production

AI Response: The AI will generate code like:

<Slide id="deployment-process">
  <SlideContent layout="centered">
    <Heading level={2}>Deployment Pipeline</Heading>
    <ProcessFlowChart
      nodes={[
        { id: "review", label: "Code Review", color: "#3b82f6" },
        { id: "tests", label: "Run Tests", color: "#8b5cf6" },
        { id: "staging", label: "Deploy to Staging", color: "#ec4899" },
        { id: "prod", label: "Production", color: "#10b981" }
      ]}
      connections={[
        { from: "review", to: "tests" },
        { from: "tests", to: "staging" },
        { from: "staging", to: "prod" }
      ]}
      direction="horizontal"
    />
  </SlideContent>
</Slide>

Example 3: Applying Themes and Exporting

Prompt to AI:

Apply the corporate theme and export this presentation to PDF

AI Actions:

1. Use apply_theme with theme: "corporate"
2. Use export_presentation with format: "pdf"
3. Provide instructions for running the export commands

Example 4: Converting from PowerPoint

Prompt to AI:

Import my existing PowerPoint presentation from quarterly-review.pptx
and convert it to ReactSlides format

AI Actions:

1. Use import_presentation with from: "pptx"
2. Provide instructions for the import command
3. Suggest improvements using ReactSlides components

Available Tools

create_presentation

Creates a new ReactSlides presentation project with specified configuration.

Parameters:

• name (required): Project name
• template: Template choice (minimal, corporate, developer, creative, markdown)
• mode: react or markdown
• title: Presentation title
• author: Author name
• aspectRatio: 16:9, 4:3, or 21:9

add_slide

Generates code to add a new slide to a presentation.

Parameters:

• slideId (required): Unique slide identifier
• layout: Layout preset (default, centered, split, title, image, code)
• title: Slide title
• content: Slide content
• notes: Speaker notes
• background: Background style
• position: Insert position

update_slide

Provides instructions for updating an existing slide.

Parameters:

• slideId (required): ID of the slide to update
• title: New title
• content: New content
• layout: New layout
• background: New background
• notes: Updated speaker notes

delete_slide

Provides instructions for removing a slide.

Parameters:

• slideId (required): ID of the slide to delete

list_slides

Provides instructions for listing all slides in a presentation.

Parameters:

• presentationPath: Path to the presentation file

apply_theme

Provides instructions for applying or changing the presentation theme.

Parameters:

• theme (required): Theme name (dark, light, corporate, creative, minimal)
• primaryColor: Primary color override
• backgroundColor: Background color override
• fontFamily: Font family override

export_presentation

Provides instructions for exporting the presentation.

Parameters:

• format (required): Export format (html, pdf, png, pptx)
• outputPath: Output directory
• quality: Export quality (low, medium, high)

get_presentation_info

Provides documentation about ReactSlides features.

Parameters:

• topic: Topic to get info about (components, layouts, navigation, markdown, theming, animations, all)

bundle_presentation

Creates a single self-contained HTML file for easy sharing.

Parameters:

• output: Output filename (default: presentation.html)
• minify: Minify output for smaller file size
• inlineAssets: Inline images as base64
• checkSize: Warn if output exceeds email limit (~25MB)

import_presentation

Import presentations from PowerPoint or Google Slides.

Parameters:

• from (required): Source format (pptx, google-slides)
• sourcePath: Path to PPTX file or Google Slides ID

comments

Manage slide comments and annotations.

Parameters:

• action (required): Action to perform (add, list, delete, resolve)
• slideId: Slide identifier
• commentId: Comment identifier (for delete/resolve)
• content: Comment text (for add)

Troubleshooting

MCP Server Not Found

Problem: AI assistant can't find the ReactSlides MCP server

Solutions:

1. Verify the server is installed: npm list @reactslides/mcp-server
2. Check your configuration path is correct
3. Restart the AI application (Claude Desktop, VS Code, etc.)
4. Try using the full path to npx: /usr/local/bin/npx (macOS) or C:\\Program Files\\nodejs\\npx.cmd (Windows)

Connection Errors

Problem: "Failed to connect to MCP server"

Solutions:

1. Ensure Node.js is installed: node --version (requires v20+)
2. Check network/firewall isn't blocking stdio communication
3. Try running directly: npx @reactslides/mcp-server
4. Check server logs in the AI application's console

Tools Not Showing Up

Problem: AI doesn't recognize ReactSlides tools

Solutions:

1. Verify config syntax is correct (valid JSON)
2. Restart the AI application completely
3. Check for typos in the server name or command
4. Test the server manually: echo '{"jsonrpc":"2.0","method":"tools/list","id":1}' | npx @reactslides/mcp-server

VS Code Extension Issues

Problem: Cline/Continue not loading MCP server

Solutions:

1. Open VS Code Settings (JSON) and verify config location
2. For Cline: Settings → Extensions → Cline → MCP Servers
3. For Continue: Cmd/Ctrl+Shift+P → "Continue: Open config.json"
4. Check Developer Tools console for errors (Help → Toggle Developer Tools)
5. Reload VS Code window: Cmd/Ctrl+Shift+P → "Reload Window"

Windows Path Issues

Problem: Command not found on Windows

Solutions:

1. Use full path: "command": "C:\\Program Files\\nodejs\\npx.cmd"
2. Or use PowerShell: "command": "pwsh", "args": ["-Command", "npx", "@reactslides/mcp-server"]
3. Ensure Node.js is in PATH environment variable

Permission Errors

Problem: Permission denied when running MCP server

Solutions:

1. Run with proper permissions (avoid using sudo)
2. Check npm global directory permissions
3. Use npx instead of global install
4. On macOS: sudo chown -R $(whoami) ~/.npm

Getting Help

• Documentation: ReactSlides Docs
• Issues: GitHub Issues
• Discussions: GitHub Discussions
• MCP Protocol: Model Context Protocol

Development

# Build
pnpm build

# Run tests
pnpm test

# Development mode
pnpm dev

License

MIT