HTML to PDF in VS Code

Convert HTML and URLs to PDF from GitHub Copilot agent mode in VS Code with the html-pdf.com remote MCP server. Your key stays in a secure prompt.

Quick answer. Add the remote MCP server https://html-pdf.com/mcp to .vscode/mcp.json with the header Authorization: Bearer <your key>, start it, and ask Copilot in Agent mode for a PDF. The full config is below.

One-click install

This is the fastest way to connect. Add html-pdf to VS Code opens VS Code with the server filled in.

VS Code then asks you to log in to html-pdf.com (OAuth), so you don't need to copy a key. New accounts get 100 free credits. Prefer a key in mcp.json? Follow the steps below instead.

Get an API key

For the manual config you need a key. Get one by email at https://html-pdf.com/login, or with one request:

curl -X POST https://html-pdf.com/v1/signup \
  -H "Content-Type: application/json" \
  -d '{"email": "you@example.com"}'

The key is shown once. Open the link we email you to confirm your address, which adds the 100 free credits. 1 credit = 1 PDF page, and no card is needed.

Connect

This config connects Copilot to the html-pdf.com tools. Create .vscode/mcp.json in your workspace:

{
  "servers": {
    "html-pdf": {
      "type": "http",
      "url": "https://html-pdf.com/mcp",
      "headers": { "Authorization": "Bearer ${input:html-pdf-key}" }
    }
  },
  "inputs": [
    {
      "id": "html-pdf-key",
      "type": "promptString",
      "description": "html-pdf.com API key",
      "password": true
    }
  ]
}

VS Code asks for the key the first time the server starts and stores it securely, so the file is safe to commit. Click Start above the server entry in mcp.json, then open Copilot Chat in Agent mode. The html-pdf tools appear in the tools picker.

Try it

You don't write any code. Ask the agent things like these.

• "Convert docs/handbook.html to an A4 PDF with page numbers in the footer."
• "Generate a PDF of https://example.com with screen styles and give me the link."
• "Render invoice.html and tell me if it fits on one page."

The tool returns a download link valid for 24 hours, the number of pages and your remaining credits.

Tips

These options help with layout and cost.

• Page breaks: break-before: page between sections and break-inside: avoid for tables and cards.
• Page numbers: footer_html with <span class="pageNumber"></span> / <span class="totalPages"></span>. Also set a margin so the footer has space.
• Use max_pages to avoid surprises with generated content. Over the limit means the render fails, and failed renders are free.
• From your code: the same options work on POST https://html-pdf.com/v1/pdf. Add "response": "url" for JSON with a 24h link.

Troubleshooting

Most problems come from the config file or the stored key.

• Server stays stopped: open the Output panel, select the MCP server log, and check the error. Usually it's a JSON typo or a missing type: "http".
• Wrong key saved: run MCP: List Servers, pick html-pdf and restart it, or clear the stored input so VS Code prompts again.
• 403 email_not_confirmed: the email behind the key isn't confirmed yet. Click the link we emailed you (it adds the 100 free credits), then try again.
• Tools not offered: make sure Copilot Chat is in Agent mode and the tools are checked in the tools picker.

FAQ

How do I add an MCP server in VS Code?

Create .vscode/mcp.json with a server entry of type: "http" and the server URL, then click Start above the entry. The tools then show up in Copilot Chat's Agent mode.

Is it safe to commit mcp.json with my API key?

Yes, with the setup above. The key is collected through a promptString input and stored securely by VS Code, so it never appears in the file.

Is there a free tier?

Yes. New accounts get 100 free credits once, with no card. Each credit is one PDF page, and purchased credits never expire.

Does the PDF support page numbers?

Yes. Ask the agent for page numbers in the footer, or pass footer_html with pageNumber and totalPages spans and a margin.

Full reference: API docs · MCP server