# @liangshanli/mcp-server-browser A tool that allows Curosr to analyze the latest modern documents **URL:** \ **Category:** Built for Cursor\ **Created:** [December 31, 2025, 3:43am UTC](https://forum.cursor.com/t/liangshanli-mcp-server-browser-a-tool-that-allows-curosr-to-analyze-the-latest-modern-documents/147697 "2025-12-31T03:43:50Z")\ **Posts on this page:** 2\ **Page:** 1
**Author:** ![lili](https://avatars.discourse-cdn.com/v4/letter/l/b38774/32.png) [@lili](https://forum.cursor.com/u/lili)\ **Post date:** [December 31, 2025, 3:43am UTC](https://forum.cursor.com/t/liangshanli-mcp-server-browser-a-tool-that-allows-curosr-to-analyze-the-latest-modern-documents/147697/1 "2025-12-31T03:43:50Z")
# End AI Blindness! Equip Cursor/Claude with 4K Vision: Real-Time Headless Rendering for Vue/React Docs—Bridging the Gap Between AI and Modern Web Content to Eliminate Hallucinations! 🚀 ## 📖 Preface: The “Documentation Gap” Crisis in the AI Era In 2025, we are in the golden age of AI programming. Tools like **Cursor** , **Claude Desktop** , and **GitHub Copilot** have become the “second brain” for countless developers. However, even the most powerful models (like Claude 3.5 Sonnet or GPT-4o) face a fatal embarrassment: **their understanding of the modern frontend ecosystem often suffers from a severe “gap.”** You’ve likely encountered this: you want AI to help you write a complex form for **TDesign** , or integrate the latest components from **Element Plus**. You excitedly send the official doc URL to the AI, expecting code in seconds. Instead, the response is often: “Sorry, I cannot access this webpage content,” or worse—it relies on two-year-old data to write code with deprecated APIs, leaving you to spend hours debugging manually. ### Why Does AI Go “Blind”? The core conflict is: **Documentation evolves much faster than AI’s “crawling capability.”** Modern technical docs (like Vue, React, Svelte, etc.) almost exclusively use Single Page Application (SPA) or SSR with hydration architectures. This means when you open a page, the browser first receives a nearly empty HTML shell and a bunch of complex JavaScript. The content is rendered in real-time by the browser after loading. **Traditional AI crawling tools (like simple HTTP requests) can only see that “empty HTML shell.”** For AI, it sees a wasteland: no Prop descriptions, no method lists, no example code. Consequently, AI falls back on outdated knowledge from its training phase. This is exactly where code hallucinations are born. ### Thus, MCP Browser Server Was Born We realized that to truly unleash AI productivity, we must give it a pair of “high-definition glasses” to see the rendered webpage just like a human developer. **MCP Browser Server** is not just another simple crawler. It’s a professional-grade tool based on the **Model Context Protocol (MCP)**, integrated with the powerful **Playwright** headless browser engine. Its mission is clear: **Break down the walls of dynamic webpages and provide AI with real-time, authentic, and structured technical documentation context.** * * * ## 💡 Are You Also Troubled by This? When using AI programming tools, you throw an official doc link at it, but the AI: - ❌ Tells you “Cannot access the webpage content” - ❌ Sees only an empty HTML shell and “Loading…” - ❌ Starts “hallucinating” based on old knowledge, writing buggy code **The reason is simple:** Modern docs are mostly built with Vue, React, or other SPA frameworks. Content is rendered dynamically in the browser, which traditional simple crawling tools cannot see. * * * ## ✨ Solution: MCP Browser Server **MCP Browser Server** is designed specifically for this! It solves the “AI web reading blind spot.” Using **Playwright** headless browser technology, it acts just like a human: 1. **Real Rendering** : Fully runs JavaScript on the page, waiting for Vue/React components to finish loading. 2. **Deep Parsing** : Captures the fully rendered DOM tree, presenting the latest API definitions, Props descriptions, and example code to the AI. 3. **Auto-Archiving** : Saves captured pages as local HTML, building your own “local documentation library.” * * * ## 🛠 Quick Installation Just a few steps to give your AI the power to read modern documentation! ### Global Installation (Recommended) ```bash npm install -g @liangshanli/mcp-server-browser ``` ### Use npx (No Install) ```bash npx @liangshanli/mcp-server-browser ``` * * * ## 💻 Editor Integration ### Cursor Editor Configuration 1. Create `.cursor/mcp.json` file in your project root: ```json { "mcpServers": { "browser-docs": { "command": "npx", "args": ["-y", "@liangshanli/mcp-server-browser"], "env": { "CHROME_PATH": "C:\\Program Files\\Google\\Chrome\\Application\\chrome.exe", "TOOL_PREFIX": "browser", "PROJECT_NAME": "DocsAnalyzer" } } } } ``` ### VS Code Configuration 1. Install the MCP extension for VS Code 2. Create `.vscode/settings.json` file: ```json { "mcp.servers": { "browser-docs": { "command": "npx", "args": ["-y", "@liangshanli/mcp-server-browser"], "env": { "CHROME_PATH": "C:\\Program Files\\Google\\Chrome\\Application\\chrome.exe", "TOOL_PREFIX": "browser", "PROJECT_NAME": "DocsAnalyzer" } } } } ``` ### Multiple Instances Support You can configure multiple browser server instances with different `TOOL_PREFIX` and `PROJECT_NAME` to isolate tools and storage directories. This is useful when managing documentation for different projects. **Example: Cursor Editor Configuration** ```json { "mcpServers": { "vue-docs": { "command": "npx", "args": ["-y", "@liangshanli/mcp-server-browser"], "env": { "CHROME_PATH": "C:\\Program Files\\Google\\Chrome\\Application\\chrome.exe", "TOOL_PREFIX": "vue", "PROJECT_NAME": "VueNext" } }, "react-docs": { "command": "npx", "args": ["-y", "@liangshanli/mcp-server-browser"], "env": { "CHROME_PATH": "C:\\Program Files\\Google\\Chrome\\Application\\chrome.exe", "TOOL_PREFIX": "react", "PROJECT_NAME": "ReactFiber" } } } } ``` **Benefits of Multiple Instances:** - **Tool Isolation** : Tools will be prefixed (e.g., `vue_browser_get_content`, `react_browser_get_content`). - **Storage Isolation** : HTML files and logs are stored in separate directories (e.g., `./.setting.vue/`, `./.setting.react/`). - **Project Branding** : Each instance has its own name in tool descriptions for better identification. * * * ## 🌟 Why is it a Must-Have for Developers? - **Zero API Misinterpretation** : Let AI read the latest documentation directly, rejecting outdated hallucinated knowledge. - **Structured Understanding** : AI can easily identify tables, code blocks, and component hierarchies within the documentation. - **Continuous Evolution** : Supports `wait_until` parameters (like `networkidle`) to ensure even the slowest heavy documentation is perfectly captured. - **Multi-Instance Support** : Configure a `vue-docs` instance for Vue projects and a `react-docs` instance for React projects without interference. * * * ## 🔗 Start Your AI-Enhanced Development Journey Now! Project Address: [https://github.com/liliangshan/mcp-server-browser.git](https://github.com/liliangshan/mcp-server-browser.git) **Stop letting AI “feel the elephant blindly”—give it the high-definition glasses of MCP Browser Server! Let coding return from “pure imagination” to “seeking truth from facts.”** ---
**Author:** ![system](https://sea3.discourse-cdn.com/cursor1/user_avatar/forum.cursor.com/system/32/99069_2.png) [@system](https://forum.cursor.com/u/system)\ **Post date:** [March 31, 2026, 3:44am UTC](https://forum.cursor.com/t/liangshanli-mcp-server-browser-a-tool-that-allows-curosr-to-analyze-the-latest-modern-documents/147697/2 "2026-03-31T03:44:03Z")
Closed on March 31, 2026, 3:44am UTC This topic was automatically closed 90 days after the last reply. New replies are no longer allowed.