@liangshanli/mcp-server-browser A tool that allows Curosr to analyze the latest modern documents

Showcase Built for Cursor
1

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! :rocket:

:open_book: 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.

:light_bulb: Are You Also Troubled by This?

When using AI programming tools, you throw an official doc link at it, but the AI:

  • :cross_mark: Tells you “Cannot access the webpage content”
  • :cross_mark: Sees only an empty HTML shell and “Loading…”
  • :cross_mark: 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.

:sparkles: 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.”

:hammer_and_wrench: Quick Installation

Just a few steps to give your AI the power to read modern documentation!

Global Installation (Recommended)

npm install -g @liangshanli/mcp-server-browser

Use npx (No Install)

npx @liangshanli/mcp-server-browser

:laptop: Editor Integration

Cursor Editor Configuration

  1. Create .cursor/mcp.json file in your project root:
{
  "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:
{
  "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

{
  "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.

:glowing_star: 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.

:link: Start Your AI-Enhanced Development Journey Now!

Project Address: 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.”