rendercheck — Claude Code MCP server: what it does, how to install
Runs local in-process OCR on screenshots to confirm users can actually read the rendered text. Helpful when an AI agent needs to verify UI edits without network calls.
claude mcp add rendercheck -- npx -y @rendercheck/sdkWhat rendercheck does
DOM assertions miss visual bugs. Elements stay in the DOM tree even when hidden under floating layers or rendered in low contrast. RenderCheck inspects PNG or JPEG screenshots with in-process Tesseract.js on WebAssembly, verifying what actually appears on the screen.
The integration exposes two stdio tools: verify_text for visual assertions and read_text for raw extraction. Only English language assets come bundled inside the package. Other alphabets require downloading a separate .traineddata file and setting langPath accordingly.
Environment setup requires Node 18+. The tool keeps an offline counter in ~/.rendercheck/usage.jsonl, which you can suppress with RENDERCHECK_NO_USAGE_LOG=1.
What it helps with
- confirm rendered screen text matches requirements after frontend edits
- detect low-contrast text using WCAG ratios directly on screenshots
- spot overlapping elements that hide text despite valid DOM nodes
- extract visible text locally without sending images to cloud APIs
Example prompts for the agent
- Use
verify_textoncheckout.pngto confirm "Total: $14.00" is clearly legible. - Call
read_textto extract all visible strings fromscreen.png. - Check if the text "Pay now" inside
dialog.pngsatisfies a minimum contrast ratio of 4.5.
How to install rendercheck
Platform CLI
claude mcp add rendercheck -- npx -y @rendercheck/sdkPlatform CLI
codex mcp add rendercheck -- npx -y @rendercheck/sdkConfig file
{
"mcpServers": {
"rendercheck": {
"command": "npx",
"args": [
"-y",
"@rendercheck/sdk"
]
}
}
}Config file
{
"servers": {
"rendercheck": {
"type": "stdio",
"command": "npx",
"args": [
"-y",
"@rendercheck/sdk"
]
}
}
}Platform CLI
gemini mcp add rendercheck npx -y @rendercheck/sdkStep by step, with commands for each platform: How to add an MCP server to Claude Code, Codex, Cursor, VS Code, Gemini CLI and more
Questions about rendercheck
How do I install rendercheck in Claude Code?
Run claude mcp add rendercheck -- npx -y @rendercheck/sdk in your terminal.
What does rendercheck do?
It provides local OCR via WebAssembly to verify that screenshot text is truly legible and formatted correctly. This allows coding agents to inspect visual output rather than trusting the DOM tree.
Does rendercheck send screenshots to external servers?
Everything runs on your computer inside the Node runtime. It requires no network requests or external API credentials for English text recognition.
