AI导哈

PDF和HTML渲染服务

一个基于Model Context Protocol的服务，用于渲染PDF、HTML、URL和图像截图，专为AI编码助手提供视觉反馈而设计。

  • by LarsenClose
  • TypeScript
  • 本地部署
  • 更新于
在 GitHub 查看 LarsenClose/render-mcp

使用说明

渲染mcp

A. 模型上下文协议 将PDF、HTML、URL和图像呈现为屏幕截图的服务器。专门为AI编码助手提供渲染工件的视觉反馈而构建。

特性

  • 暖浏览器单例 --Playwright Chromium在请求之间保持运行，消除了冷启动延迟
  • 原生PDF渲染 --用途 pdftoppm （poppler）用于快速、准确的PDF光栅化（每页约100ms，无需浏览器）
  • 图像传递 --直接读取PNG、JPEG、GIF、WebP文件
  • JPEG截图 --浏览器截图使用JPEG质量80，输出比PNG小5-10倍（相同的令牌成本）
  • API安全输出 --3.5 MB输出保护确保base64保持在API的5 MB图像限制之下
  • 按请求隔离 --每个浏览器渲染都会得到一个新的 BrowserContext，已关闭 finally
  • 单程往返 --一个工具调用直接在上下文中返回图像

工具

工具 描述 浏览器？ 格式
render_pdf 将PDF页面渲染为PNG 否 PNG
render_html 将HTML字符串或文件渲染为JPEG 是 JPEG
render_url 导航到URL并截图 是 JPEG
render_image 将图像文件读取为base64 否 本机

安装

先决条件

  • Node.js>=20
  • pdftoppm （poppler-utils）用于PDF渲染
# macOS
brew install poppler

# Ubuntu/Debian
sudo apt-get install poppler-utils

来源

git clone https://github.com/LarsenClose/render-mcp.git
cd render-mcp
pnpm install
pnpm exec playwright install chromium
pnpm build

克劳德代码

添加到您的Claude Code MCP配置中：

claude mcp add --scope user --transport stdio render node /path/to/render-mcp/dist/index.js

或手动添加到 ~/.claude.json:

{
  "mcpServers": {
    "render": {
      "type": "stdio",
      "command": "node",
      "args": ["/path/to/render-mcp/dist/index.js"]
    }
  }
}

重启Claude Code后，这些工具可用 mcp__render__render_pdf, mcp__render__render_html, mcp__render__render_url，以及 mcp__render__render_image.

工具参考

render_pdf

使用pdftoppm将PDF页面渲染为PNG图像。

参数 类型 默认值 说明
path string 必需 PDF文件的绝对路径
page number 1 页码（1-索引）
dpi number 300 决议（72-600）

render_html

将HTML内容或HTML文件渲染为PNG屏幕截图。

参数 类型 默认值 说明
html string -- 要呈现的HTML字符串
path string -- HTML文件的绝对路径
width number 1280 视口宽度（像素）
height number 720 视口高度（像素）
fullPage boolean false 捕获完整的可滚动页面

正是其中之一 html 或 path 必须提供。

render_url

导航到URL并返回PNG屏幕截图。

参数 类型 默认值 说明
url string 需要 URL才能导航到
width number 1280 视口宽度（像素）
height number 720 视口高度（像素）
fullPage boolean false 捕获完整的可滚动页面
waitUntil string "load" 导航事件： load, domcontentloaded, networkidle, commit

render_image

读取图像文件并将其作为base64返回。

参数 类型 默认值 说明
path string 必需 图像文件的绝对路径

支持：PNG、JPEG、GIF、WebP。人类API不支持将SVG作为图像块--使用 render_html 以光栅化SVG。

建筑

render-mcp (stdio transport)
|-- Warm Playwright Chromium (lazy singleton, auto-reconnect)
|-- PDF rendering via pdftoppm (no browser, ~100ms/page)
|-- Image passthrough (direct fs.readFile + base64)
'-- 3.5 MB output guard (keeps base64 under Anthropic's 5 MB API limit)

关键设计决策：

  • chromium.launch() 单例（非 launchPersistentContext)支持多个孤立的上下文
  • 新 BrowserContext 根据请求，已关闭 finally 完全隔离
  • 处理程序的依赖注入允许使用模拟进行单元测试
  • pdftoppm 用于基于浏览器的PDF渲染，以提高速度和准确性

发展

pnpm install
pnpm exec playwright install chromium

pnpm test              # Run all tests
pnpm test:unit         # Unit tests only
pnpm test:integration  # Integration tests (InMemoryTransport)
pnpm test:e2e          # E2E tests (stdio subprocess)
pnpm test:coverage     # Tests with coverage report

pnpm typecheck         # TypeScript type checking
pnpm lint              # ESLint
pnpm format:check      # Prettier
pnpm build             # Compile to dist/

许可证

麻省理工学院

相关 MCP