npm package: @reactslides/mcp-server
Description: MCP (Model Context Protocol) server for AI-assisted ReactSlides presentation creation
Latest version: 0.0.11

# @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](https://marketplace.visualstudio.com/items?itemName=saoudrizwan.claude-dev)
2. Add to VS Code settings (Cmd/Ctrl + , → search "Cline: MCP Servers" → Edit settings.json):

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

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

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

## Installation

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

```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](https://github.com/cline/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:

```json
{
  "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](https://continue.dev) 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:

```json
{
  "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](https://cursor.sh) 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:

```json
{
  "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:

```typescript
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

```typescript
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:

```typescript
// 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:
```tsx
<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](https://reactslides.dev/docs)
- **Issues:** [GitHub Issues](https://github.com/reactslides/monorepo/issues)
- **Discussions:** [GitHub Discussions](https://github.com/reactslides/monorepo/discussions)
- **MCP Protocol:** [Model Context Protocol](https://modelcontextprotocol.io)

## Development

```bash
# Build
pnpm build

# Run tests
pnpm test

# Development mode
pnpm dev
```

## License

MIT