# 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](https://insiders.vscode.dev/redirect/mcp/install?name=html-pdf&config=%7B%22type%22%3A%22http%22%2C%22url%22%3A%22https%3A%2F%2Fhtml-pdf.com%2Fmcp%22%7D)** 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:

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

```json
{
  "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](https://html-pdf.com/docs) · [MCP server](https://html-pdf.com/mcp)