Skip to main content
Glama

WebSee MCP Server

by 1AQuantum
GitHub
TypeScript
MIT License
OverviewInspectNewEndpointsSchemaRelated ServersReviewsScore
Need Help?View Source CodeReport Issue

WebSee MCP Server

Advanced frontend debugging intelligence for AI assistants via the Model Context Protocol (MCP).

MCP TypeScript Status

Overview

WebSee is a production-ready MCP server that provides AI assistants with powerful frontend debugging capabilities through 36 specialized tools organized into 6 modular skills. It uses Playwright for browser automation combined with source map intelligence to provide deep insights into React, Vue, Angular, and Svelte applications.

Key Features

  • 36 Specialized Tools - Component inspection, network analysis, source maps, build intelligence, error resolution

  • 6 Modular Skills - Progressive disclosure from high-level workflows to granular operations

  • Framework Support - React (full), Vue (good), Angular (moderate), Svelte (basic)

  • Source Map Intelligence - Resolve minified code to original source with Webpack, Vite, Rollup support

  • Browser Automation - Powered by Playwright with Chromium, Firefox, or WebKit

  • Production Ready - 100% test coverage, 1.6s average response time

Quick Start

Installation

npm install websee-mcp-server

Configuration

Claude Code

Create .mcp.json in your project root:

{ "mcpServers": { "websee": { "command": "node", "args": ["node_modules/websee-mcp-server/dist/mcp-server.js"], "env": { "BROWSER": "chromium", "HEADLESS": "true" } } } }

VS Code

Create .vscode/mcp.json:

{ "servers": { "websee": { "command": "node", "args": ["${workspaceFolder}/node_modules/websee-mcp-server/dist/mcp-server.js"], "env": { "BROWSER": "chromium", "HEADLESS": "true" } } } }

Cursor

Create .cursor/mcp.json:

{ "mcpServers": { "websee": { "command": "node", "args": ["./node_modules/websee-mcp-server/dist/mcp-server.js"], "env": { "BROWSER": "chromium", "HEADLESS": "true" } } } }

Usage

Once configured, AI assistants can use WebSee tools directly:

Use debug_frontend_issue to investigate https://example.com Focus on the login form Capture a screenshot

Available Skills

Workflow Layer (6 tools)

High-level tools for comprehensive analysis:

  • debug_frontend_issue - Multi-faceted debugging (console, components, network, errors)

  • analyze_performance - Performance analysis across all dimensions

  • inspect_component_state - Component state and props inspection

  • trace_network_requests - Network request tracing with source code

  • analyze_bundle_size - JavaScript bundle analysis and optimization

  • resolve_minified_error - Error resolution with source maps

Granular Layer (30 tools)

Specialized tools organized by category:

Component Intelligence (8 tools)

  • component_tree, component_get_props, component_get_state, component_find_by_name

  • component_get_source, component_track_renders, component_get_context, component_get_hooks

Network Intelligence (6 tools)

  • network_get_requests, network_get_by_url, network_get_timing

  • network_trace_initiator, network_get_headers, network_get_body

Source Intelligence (7 tools)

  • source_map_resolve, source_map_get_content, source_trace_stack

  • source_find_definition, source_get_symbols, source_map_bundle, source_coverage_map

Build Intelligence (5 tools)

  • build_get_manifest, build_get_chunks, build_find_module

  • build_get_dependencies, build_analyze_size

Error Intelligence (4 tools)

  • error_resolve_stack, error_get_context, error_trace_cause, error_get_similar

Skills Documentation

Comprehensive skill guides available in skills/ directory:

Prerequisites

Required

  • Node.js 16+ and npm

  • One of: Chromium, Firefox, or WebKit (installed automatically with Playwright)

Optional (Enhanced Functionality)

  • React DevTools - For component intelligence (6/8 tools)

  • Source Maps - For source intelligence (all 7 tools)

  • Build Artifacts - For build intelligence (stats.json or manifest.json)

Common Use Cases

Debug Production Error

1. error_resolve_stack → Get enhanced stack trace 2. source_map_resolve → Navigate to original code 3. component_get_state → Check component state 4. Fix the issue

Optimize Performance

1. analyze_performance → Identify bottlenecks 2. network_get_timing → Find slow requests 3. build_analyze_size → Optimize bundle size 4. component_track_renders → Reduce re-renders

Component Debugging

1. component_tree → Understand hierarchy 2. component_get_props → Verify inputs 3. component_get_state → Check internal state 4. network_get_requests → See API calls

Bundle Analysis

1. build_analyze_size → Get size breakdown 2. build_get_chunks → Analyze chunks 3. build_get_dependencies → Find duplicates 4. Implement code splitting

Framework Support

Framework

Component Tools

Success Rate

DevTools Required

React

8/8 (100%)

100%

Yes (6/8 tools)

Vue

6/8 (75%)

90%

Yes

Angular

5/8 (63%)

70%

Yes

Svelte

4/8 (50%)

50%

Optional

Build Tool Support

Build Tool

Source Maps

Build Artifacts

Support Level

Webpack 4/5

✅ Full

stats.json

✅ Full

Vite 2/3/4

✅ Full

manifest.json

✅ Full

Rollup

✅ Good

Partial

⚠️ Partial

esbuild

✅ Partial

No

⚠️ Partial

Parcel

✅ Partial

Partial

⚠️ Partial

Performance

Based on comprehensive testing with 100+ test cases:

  • Average Response Time: 1.6s

  • Test Pass Rate: 100%

  • Tool Coverage: 36/36 tools

  • Production Ready: ✅ Yes

Tool Category

Response Time

Success Rate

Workflow

2.0s

100%

Component

1.2s

100%*

Network

2.6s

100%

Source

1.5s

100%*

Build

1.3s

100%*

Error

1.1s

100%

* With prerequisites (DevTools, source maps, build artifacts)

Environment Variables

Configure via .env file or environment:

# Browser Selection BROWSER=chromium # chromium, firefox, or webkit # Headless Mode HEADLESS=true # true for headless, false for headed # Project Root PROJECT_ROOT=. # Path to project root

Compatibility

✅ Claude Code - Full support ✅ VS Code - Full support via MCP extension ✅ Cursor - Full support (36 tools < 40 tool limit)

Architecture

WebSee MCP Server ├── Workflow Layer (6 tools) │ └── High-level, multi-faceted analysis ├── Granular Layer (30 tools) │ ├── Component Intelligence (8 tools) │ ├── Network Intelligence (6 tools) │ ├── Source Intelligence (7 tools) │ ├── Build Intelligence (5 tools) │ └── Error Intelligence (4 tools) └── Core Services ├── BrowserManager (Playwright) ├── SourceMapResolver ├── ComponentTracker ├── NetworkTracer └── BuildArtifactManager

Development

Build from Source

# Clone repository git clone https://github.com/1aq/websee-mcp-server.git cd websee-mcp-server # Install dependencies npm install # Build npm run build # Test npm test

Project Structure

websee-mcp-server/ ├── src/ # TypeScript source code │ ├── mcp-server.ts # Main MCP server │ ├── browser-manager.ts # Playwright wrapper │ ├── source-map-resolver.ts │ ├── component-tracker.ts │ ├── network-tracer.ts │ ├── build-artifact-manager.ts │ └── tools/ # Tool implementations ├── skills/ # Skill documentation ├── dist/ # Compiled JavaScript ├── package.json ├── tsconfig.json └── README.md

Troubleshooting

"Browser not found"

Install Playwright browsers:

npx playwright install chromium

"DevTools required"

Install framework DevTools:

"Source maps not available"

Enable source maps in your build:

Webpack:

module.exports = { devtool: 'source-map' };

Vite:

export default { build: { sourcemap: true } };

"Component not found"

  • Verify selector matches actual DOM element

  • Wait for component to mount

  • Use component_find_by_name to locate component

  • Check if element is a framework component (not plain HTML)

Security Considerations

Production Deployment

  • Source Maps: Use hidden-source-map in Webpack to prevent public access

  • DevTools: Only enable for debugging, not for all users

  • Environment Variables: Never commit sensitive data to .env

  • CORS: Configure properly for cross-origin requests

Best Practices

  • Run in headless mode in CI/CD pipelines

  • Use specific selectors to avoid unintended matches

  • Enable source maps only in staging/development

  • Review component state for sensitive data before logging

Contributing

We welcome contributions! Please see our contributing guidelines.

License

MIT License - see LICENSE file for details.

Support

Acknowledgments

Built with:

Version: 1.0.0 Status: ✅ Production Ready Test Coverage: 100% Tools: 36 Skills: 6

This server cannot be installed

-
security - not tested
A
license - permissive license
-
quality - not tested

How are these scores calculated?

local-only server

The server can only run on the client's local machine because it depends on local resources.

Provides AI assistants with advanced frontend debugging capabilities through 36 specialized tools for inspecting React/Vue/Angular/Svelte applications. Uses Playwright browser automation and source map intelligence to analyze components, network requests, bundle optimization, and resolve production errors.

  1. Overview
    1. Key Features
  2. Quick Start
    1. Installation
    2. Configuration
    3. Usage
  3. Available Skills
    1. Workflow Layer (6 tools)
    2. Granular Layer (30 tools)
  4. Skills Documentation
    1. Prerequisites
      1. Required
      2. Optional (Enhanced Functionality)
    2. Common Use Cases
      1. Debug Production Error
      2. Optimize Performance
      3. Component Debugging
      4. Bundle Analysis
    3. Framework Support
      1. Build Tool Support
        1. Performance
          1. Environment Variables
            1. Compatibility
              1. Architecture
                1. Development
                  1. Build from Source
                  2. Project Structure
                2. Troubleshooting
                  1. "Browser not found"
                  2. "DevTools required"
                  3. "Source maps not available"
                  4. "Component not found"
                3. Security Considerations
                  1. Production Deployment
                  2. Best Practices
                4. Contributing
                  1. License
                    1. Support
                      1. Acknowledgments

                        New MCP Servers

                        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/1AQuantum/websee-mcp-server'

                        If you have feedback or need assistance with the MCP directory API, please join our Discord server