Web Viewer MCP Server
This server does not currently have a deployable release on Glama. Follow the repository's setup instructions to install and configure it for your MCP client, including any required credentials and local dependencies.
Web Viewer - VS Code Extension Template
VS Code extension template for displaying webview with MCP Server integration for AI agents.
Features
š± Web Viewer: Display HTML/SPA in VS Code tab
š¤ MCP Server: Standalone server for AI agents (Claude, Cursor, Gemini)
š§ Tools: Open, close, navigate, click, input, scroll, get state
š¦ Resources: State, DOM structure
ā” 2-file tool addition: Only modify 2 files to add new tools
š Auto MCP Config: Automatically registers in VS Code's mcp.json on install
Installation
From VSIX (Recommended)
Download
web-viewer-0.0.1.vsixIn VS Code:
Ctrl+Shift+Pā "Extensions: Install from VSIX..."Select the VSIX file
Reload VS Code
MCP server is automatically configured! āØ
From Source
npm install
npm run buildScripts
Script | Description |
| Build all (webview + extension + MCP bundle) |
| Build webview with Vite |
| Bundle MCP server with esbuild |
| Watch mode for webview |
| Compile TypeScript extension |
Running the Extension
Open project in VS Code
Press
F5to launch Extension Development HostExtension auto-starts (onStartupFinished)
Run command
Open Web viewerfrom Command Palette
MCP Server
Auto Configuration
When you install the extension, it automatically adds the MCP server to:
Windows:
%APPDATA%\Code\User\mcp.jsonmacOS:
~/Library/Application Support/Code/User/mcp.jsonLinux:
~/.config/Code/User/mcp.json
You can also manually trigger this with: Ctrl+Shift+P ā "Web viewer: Update MCP Configuration"
Tools
Tool | Description |
| Open Web viewer tab |
| Close Web viewer tab |
| Navigate to route |
| Click element by CSS selector |
| Input text into form field |
| Scroll page (y pixels) |
| Get current state |
Resources
URI | Description |
| Current state (URL, title, forms, links) |
| DOM structure |
Project Structure
āāā media/ # Build output (Vite)
āāā src/
ā āāā extension.ts # Entry point
ā āāā core/ # Generic modules (don't modify)
ā ā āāā ViewerProvider.ts
ā ā āāā HttpBridge.ts
ā ā āāā McpConfigUpdater.ts # Auto-update mcp.json
ā āāā mcp/
ā ā āāā mcp-server.ts # MCP server (don't modify)
ā āāā tools/
ā ā āāā index.ts # ā Tool schemas
ā āāā webview/
ā āāā bridge.ts # Core handlers (don't modify)
ā āāā main.ts # ā Custom handlers
āāā vite.config.ts
āāā package.jsonAdding New Tools (2 files only)
1. Schema: src/tools/index.ts
{
name: 'web_scroll',
description: 'Scroll page by pixels',
inputSchema: {
type: 'object',
properties: {
y: { type: 'number', description: 'Pixels to scroll' },
},
required: ['y'],
},
},2. Handler: src/webview/main.ts
registerHandler('scroll', (payload: { y: number }) => {
window.scrollBy(0, payload.y);
return true;
});Note: Tool name
web_scrollā handler namescroll(prefixweb_is auto-stripped)
3. Build
npm run buildPackaging VSIX
# Build and package
npm run build
npx @vscode/vsce package --allow-missing-repository
# Install locally
code --install-extension web-viewer-0.0.1.vsixArchitecture
AI Agent <--stdio--> MCP Server <--HTTP:54321--> VS Code Extension <--postMessage--> Webview
| | |
tools/index.ts extension.ts bridge.ts
(auto-forward) (defaultHandler) main.tsCommands
Command | Description |
| Open the webview panel |
| Manually update mcp.json |
License
MIT
This server cannot be deployed
Related MCP Connectors
Control a real browser from AI agents: navigate, click, type, screenshot, read the page.
Stealth web automation for AI agents. Login, signup, navigate, screenshot.
Stealth web automation for AI agents. Login, signup, navigate, screenshot.
AI-powered web automation. Navigate websites using AI agents for one page or a thousand
