spa-reader-mcp
This server renders JavaScript Single Page Applications (SPAs) using a headless Chromium browser, enabling content extraction and screenshot capture.
Extract SPA content as Markdown: Render JavaScript-heavy pages and extract clean, LLM-ready Markdown with optional YAML frontmatter (title, author, excerpt).
Capture screenshots: Take PNG screenshots of rendered pages with configurable viewport dimensions (320–3840px width, 240–2160px height) and full-page capture support.
Wait for dynamic content: Specify CSS selectors to wait for before extraction or screenshot, ensuring content is fully rendered.
Authentication & custom requests: Inject cookies and custom HTTP headers to access protected or API-gated content.
Configure timeouts: Set navigation timeouts (1–120 seconds) to control rendering wait time.
Security: Built-in SSRF protection (blocks private/loopback IPs), HTTP/HTTPS-only scheme restriction, selector injection prevention, and 100KB content size cap.
Click on "Install Server".
Wait a few minutes for the server to deploy. Once ready, it will show a "Started" state.
In the chat, type
@followed by the MCP server name and your instructions, e.g., "@spa-reader-mcpextract the article content from https://react.dev/blog"
That's it! The server will respond to your query, and you can continue using it as needed.
Here is a step-by-step guide with screenshots.
spa-reader-mcp
MCP server that renders JavaScript SPA pages and extracts Markdown via headless Chromium.
Traditional scrapers fail on SPAs because content is rendered client-side. This tool launches Playwright, waits for JS to finish, then extracts clean Markdown using Readability + Turndown.
Install
npx playwright install chromiumClaude Desktop
{
"mcpServers": {
"spa-reader": {
"command": "npx",
"args": ["-y", "spa-reader-mcp"]
}
}
}Claude Code
claude mcp add spa-reader -- npx -y spa-reader-mcpRelated MCP server: crawl-mcp-server
Tools
spa_read
Render a page and extract content as Markdown.
Parameter | Type | Default | Description |
| string | — | URL to read (required) |
| string | — | CSS selector to wait for |
| number | 30000 | Timeout in ms |
| boolean | true | Add YAML frontmatter |
| array | — | Cookies for auth |
| object | — | Custom HTTP headers |
spa_screenshot
Capture a PNG screenshot after JS rendering.
Parameter | Type | Default | Description |
| string | — | URL to capture (required) |
| string | — | CSS selector to wait for |
| number | 30000 | Timeout in ms |
| number | 1280 | Viewport width |
| number | 720 | Viewport height |
| boolean | false | Full page capture |
| array | — | Cookies for auth |
| object | — | Custom HTTP headers |
Security
SSRF protection: blocks private/loopback IPs
Only
http:andhttps:schemes allowedSelector injection prevention
Content capped at 100KB
Dev
pnpm install && pnpm build
pnpm testLicense
MIT
Available Tools
2 toolsspa_readB
Render a JavaScript SPA page and extract its content as LLM-ready Markdown. Uses a headless browser to execute JavaScript, then extracts the main article content.
| Name | Required | Description | Default |
|---|---|---|---|
| url | Yes | The URL of the SPA page to read | |
| waitForSelector | No | CSS selector to wait for before extraction | |
| waitTimeout | No | Navigation timeout in ms (default: 30000) | |
| includeMetadata | No | Include title/author/excerpt as YAML frontmatter (default: true) | |
| cookies | No | Cookies to inject before page load (e.g., session tokens) | |
| headers | No | Custom HTTP headers (e.g., Authorization) |
TDQS
Does the description disclose side effects, auth requirements, rate limits, or destructive behavior?
With no annotations provided, the description carries the full burden of behavioral disclosure. It mentions using a headless browser and extracting main article content, but lacks critical details such as whether this is a read-only operation, potential performance impacts (e.g., timeouts, resource usage), error handling, or authentication requirements (though headers/cookies parameters hint at this). The description is insufficient for a tool with complex behavior involving browser automation.
Agents need to know what a tool does to the world before calling it. Descriptions should go beyond structured annotations to explain consequences.
Is the description appropriately sized, front-loaded, and free of redundancy?
The description is front-loaded with the core purpose in the first sentence and adds implementation detail in the second. Both sentences are relevant and non-redundant, though it could be slightly more structured (e.g., explicitly separating purpose from method). No wasted words, making it efficient for an agent to parse.
Shorter descriptions cost fewer tokens and are easier for agents to parse. Every sentence should earn its place.
Given the tool's complexity, does the description cover enough for an agent to succeed on first attempt?
Given the tool's complexity (headless browser execution, 6 parameters, no output schema, and no annotations), the description is incomplete. It lacks information on return values (e.g., format of extracted Markdown, error responses), behavioral constraints (e.g., rate limits, side effects), and does not compensate for the absence of annotations. This leaves significant gaps for an agent to use the tool effectively.
Complex tools with many parameters or behaviors need more documentation. Simple tools need less. This dimension scales expectations accordingly.
Does the description clarify parameter syntax, constraints, interactions, or defaults beyond what the schema provides?
Schema description coverage is 100%, so the schema already documents all parameters thoroughly. The description adds no additional parameter semantics beyond what the schema provides, such as explaining how 'waitForSelector' relates to content extraction or typical use cases for cookies/headers. The baseline score of 3 reflects adequate but minimal value added over the schema.
Input schemas describe structure but not intent. Descriptions should explain non-obvious parameter relationships and valid value ranges.
Does the description clearly state what the tool does and how it differs from similar tools?
The description clearly states the specific action ('Render a JavaScript SPA page and extract its content as LLM-ready Markdown') and distinguishes it from the sibling tool spa_screenshot by focusing on content extraction rather than visual capture. It specifies the method ('Uses a headless browser to execute JavaScript') and the target resource ('SPA page').
Agents choose between tools based on descriptions. A clear purpose with a specific verb and resource helps agents select the right tool.
Does the description explain when to use this tool, when not to, or what alternatives exist?
The description implies usage for SPA pages with JavaScript-rendered content, but does not explicitly state when to use this tool versus alternatives like spa_screenshot or other non-SPA reading tools. No exclusions or prerequisites are mentioned, leaving the agent to infer the context from the tool name and description alone.
Agents often have multiple tools that could apply. Explicit usage guidance like "use X instead of Y when Z" prevents misuse.
spa_screenshotB
Take a screenshot of a JavaScript SPA page after rendering. Uses a headless browser to execute JavaScript and capture the visual output as PNG.
| Name | Required | Description | Default |
|---|---|---|---|
| url | Yes | The URL to screenshot | |
| waitForSelector | No | CSS selector to wait for before capturing | |
| waitTimeout | No | Navigation timeout in ms (default: 30000) | |
| width | No | Viewport width in pixels (default: 1280) | |
| height | No | Viewport height in pixels (default: 720) | |
| fullPage | No | Capture full scrollable page (default: false) | |
| cookies | No | Cookies to inject before screenshot | |
| headers | No | Custom HTTP headers |
TDQS
Does the description disclose side effects, auth requirements, rate limits, or destructive behavior?
With no annotations provided, the description carries the full burden of behavioral disclosure. It mentions the headless browser method and PNG output format, but lacks critical details like authentication requirements, rate limits, error conditions, or whether the operation is idempotent. For a complex tool with 8 parameters, this is insufficient.
Agents need to know what a tool does to the world before calling it. Descriptions should go beyond structured annotations to explain consequences.
Is the description appropriately sized, front-loaded, and free of redundancy?
The description is perfectly concise with two sentences that directly communicate the tool's purpose and method. Every word earns its place with zero redundancy or unnecessary elaboration.
Shorter descriptions cost fewer tokens and are easier for agents to parse. Every sentence should earn its place.
Given the tool's complexity, does the description cover enough for an agent to succeed on first attempt?
For a complex tool with 8 parameters, no annotations, and no output schema, the description is incomplete. It lacks information about return values, error handling, performance characteristics, and operational constraints that would help an agent use it effectively.
Complex tools with many parameters or behaviors need more documentation. Simple tools need less. This dimension scales expectations accordingly.
Does the description clarify parameter syntax, constraints, interactions, or defaults beyond what the schema provides?
Schema description coverage is 100%, so the schema already documents all parameters thoroughly. The description adds no parameter-specific information beyond what's in the schema, maintaining the baseline score of 3 for adequate but not enhanced parameter documentation.
Input schemas describe structure but not intent. Descriptions should explain non-obvious parameter relationships and valid value ranges.
Does the description clearly state what the tool does and how it differs from similar tools?
The description clearly states the specific action ('Take a screenshot'), target resource ('JavaScript SPA page'), and method ('Uses a headless browser to execute JavaScript and capture the visual output as PNG'). It distinguishes from the sibling tool 'spa_read' by focusing on visual capture rather than content reading.
Agents choose between tools based on descriptions. A clear purpose with a specific verb and resource helps agents select the right tool.
Does the description explain when to use this tool, when not to, or what alternatives exist?
The description provides no guidance on when to use this tool versus alternatives, nor does it mention any prerequisites or exclusions. It simply states what the tool does without contextual usage information.
Agents often have multiple tools that could apply. Explicit usage guidance like "use X instead of Y when Z" prevents misuse.
Tool Schema Changelog
Recent tool additions, removals, and schema changes observed during successful MCP inspections. Dates show when Glama detected each change.
2 tool updates
v1.0.0- First observed
spa_read - First observed
spa_screenshot
TDQS
The two tools have clearly distinct purposes: spa_read extracts textual content as Markdown for LLM processing, while spa_screenshot captures visual output as PNG for screenshots. There is no overlap in functionality or ambiguity about which tool to use for a given task.
Both tools follow a consistent 'spa_' prefix pattern with descriptive suffixes (read, screenshot), indicating they belong to the same domain and operate on SPA pages. The naming is uniform, predictable, and clearly communicates each tool's function.
With only 2 tools, the server feels thin for a general-purpose SPA reader domain, as it lacks operations like navigation, interaction simulation, or performance monitoring. However, it covers the core tasks of content extraction and screenshot capture adequately for basic use.
The tools provide essential read-only capabilities for SPAs (extracting content and screenshots), but there are notable gaps: no ability to interact with pages (e.g., click buttons, fill forms), navigate beyond initial URLs, or handle dynamic content beyond rendering. This limits advanced agent workflows.
Maintenance
Resources
Unclaimed servers have limited discoverability.
Looking for Admin?
If you are the server author, to access and configure the admin panel.
Related MCP Connectors
MCP server for web extraction and rendering via AceDataCloud WebExtrator
One MCP for the Web. Easily search, crawl, navigate, and extract websites without getting blocked.…
The Remote MCP server acts as a standardized bridge between LLM applications (like Claude, ChatGPT, and Cursor) and external services, enabling AI agents to access external tools and resources. Its primary capability is providing a centralized search tool to discover other MCP servers and their respective tools. Unlike local implementations, it runs remotely with OAuth authentication and permission controls for security.
Hosted MCP server: convert PDFs to clean, LLM-ready Markdown with tables, formulas and OCR.
Related MCP Servers
- AlicenseBqualityFmaintenanceAn MCP server that retrieves web page content using Playwright headless browser, capable of extracting main content and converting to Markdown format.34,9761,079MIT
- FlicenseNot gradedqualityNot gradedmaintenanceAn MCP server for web content extraction that converts HTML pages into clean, LLM-optimized Markdown using Mozilla's Readability. It supports batch processing, intelligent multi-page crawling, and configurable caching while respecting robots.txt standards.15-
- AlicenseAqualityCmaintenanceAn MCP server that fetches web pages and extracts clean, AI-friendly Markdown content using Mozilla Readability. It provides secure web access for LLMs with built-in SSRF protection and automated content cleaning for improved context retrieval and summarization.1284MIT
- AlicenseNot gradedqualityDmaintenanceAn MCP server that scrapes content from web pages, including JavaScript-heavy sites, and converts it into high-quality Markdown. It leverages Playwright for headless browser automation and Pypandoc for clean content conversion.Apache 2.0
Latest Blog Posts
- Who's Calling? MCP Hosts Are an Identity Blind Spot (And the Spec Knows It)By Om-Shree-0709 on .mcpAgent IdentityOAuth 2.1
- Your AI Chatbot Just Exposed Your CEO's Salary to an InternBy Om-Shree-0709 on .Agent IdentityMCP SecurityOAuth Delegation
- Why MCP Servers Need Execution Sandboxing (And Why Your Current Stack Isn't Enough)By Om-Shree-0709 on .Agentic AiPrompt InjectionWebAssembly
MCP directory API
We provide all the information about MCP servers via our MCP API.
curl -X GET 'https://glama.ai/api/mcp/v1/servers/XXO47OXX/spa-reader-mcp'
If you have feedback or need assistance with the MCP directory API, please join our Discord server