VS Code / GitHub Copilot Integration

VS Code supports MCP servers through the GitHub Copilot extension, allowing you to generate PDFs and images directly in your development workflow.

Prerequisites

• VS Code with GitHub Copilot extension installed
• Node.js 18+ installed

Step 1: Enable MCP in VS Code

1. Open VS Code Settings (Ctrl+, or Cmd+,)
2. Search for github.copilot.chat.experimental.mcp
3. Enable the setting

Step 2: Configure MCP Server

Workspace Configuration

Create or edit .vscode/mcp.json in your workspace:

{
  "servers": {
    "pdfgenstudio": {
      "command": "npx",
      "args": ["-y", "@pdfgenstudio/mcp"],
      "env": {
        "PDFGENSTUDIO_API_KEY": "your-api-key-here"
      }
    }
  }
}

User Settings Configuration

Or add to your VS Code User Settings (settings.json):

{
  "github.copilot.chat.experimental.mcp": true,
  "mcp": {
    "servers": {
      "pdfgenstudio": {
        "command": "npx",
        "args": ["-y", "@pdfgenstudio/mcp"],
        "env": {
          "PDFGENSTUDIO_API_KEY": "your-api-key-here"
        }
      }
    }
  }
}

Using Local Installation

{
  "servers": {
    "pdfgenstudio": {
      "command": "node",
      "args": ["C:/path/to/pdfgenstudio-mcp/dist/index.js"],
      "env": {
        "PDFGENSTUDIO_API_KEY": "your-api-key-here"
      }
    }
  }
}

Usage

After configuration, you can use GitHub Copilot Chat to:

• Generate PDFs from templates
• Convert HTML to PDF
• Capture website screenshots
• Create documents from JSON designs

Example Prompts

Generate a PDF invoice using template ID "invoice-001" with this data:
{
  "customer": "Acme Corp",
  "items": [
    {"name": "Widget", "price": 29.99}
  ]
}

Convert this HTML to a PDF document:
<h1>Project Report</h1>
<p>Summary of project activities...</p>

Take a screenshot of https://github.com and save it as PNG