Skip to main content
Glama
hohuuduc

Web Viewer MCP Server

by hohuuduc
OverviewSchemaRelated ServersScoreDiscussions
TypeScript
Local

Web Viewer - VS Code Extension Template

VS Code extension template để hiển thị webview với tích hợp MCP Server cho AI agent.

Tính năng

  • 📱 Web Viewer: Hiển thị HTML/SPA trong VS Code tab

  • 🤖 MCP Server: Standalone server cho AI agent (Claude, Cursor, Gemini)

  • 🔧 Tools: Open, close, navigate, click, input, get state

  • 📦 Resources: State, DOM structure

Cài đặt

npm install npm run build

Scripts

Script

Mô tả

npm run build

Build tất cả (webview + extension)

npm run build:webview

Build webview bằng Vite

npm run dev:webview

Watch mode cho webview

npm run compile

Compile TypeScript extension

Chạy Extension

  1. Mở project trong VS Code

  2. Nhấn F5 để chạy Extension Development Host

  3. Chạy command Open Web viewer từ Command Palette

MCP Server

Tools

Tool

Mô tả

web_open

Mở tab Web viewer

web_close

Đóng tab Web viewer

web_navigate

Navigate đến route

web_click

Click element theo CSS selector

web_input

Nhập text vào input field

web_get_state

Lấy state hiện tại

Resources

URI

Mô tả

spa://state

Current state (URL, title, forms, links)

spa://dom

DOM structure

Sử dụng với AI Agent

Cấu hình MCP

Thêm vào MCP config (ví dụ mcp_config.json):

{ "mcpServers": { "web-viewer": { "command": "node", "args": ["<path-to-project>/out/mcp/mcp-server.js"] } } }

Kiến trúc

AI Agent <--stdio--> MCP Server (node) <--HTTP:54321--> VS Code Extension <--postMessage--> Webview

Cấu trúc Project

├── media/ # Build output (Vite) │ ├── index.html │ ├── styles.css │ └── bundle.js ├── src/ │ ├── extension.ts # Entry point + business logic │ ├── core/ # Generic modules │ │ ├── ViewerProvider.ts # Configurable webview │ │ └── HttpBridge.ts # HTTP command router │ ├── mcp/ │ │ └── mcp-server.ts # Standalone MCP server │ ├── spa/ │ │ └── tools/ │ │ └── index.ts # Tool definitions │ └── webview/ # Webview source (Vite) │ ├── index.html │ ├── styles.scss │ ├── bridge.ts │ └── main.ts ├── vite.config.ts ├── tsconfig.json └── package.json

Customization

Thay đổi UI

Sửa files trong src/webview/, sau đó chạy npm run build:webview

Thêm MCP Tools

Sửa src/spa/tools/index.ts và src/mcp/mcp-server.ts

Thay đổi Config

Sửa src/extension.ts:

const webviewProvider = new WebviewProvider(context.extensionUri, { viewType: 'your.viewType', title: 'Your Title', mediaFolder: 'media', });

License

MIT

This server cannot be installed

-
security - not tested
F
license - not found
-
quality - not tested

How are these scores calculated?

Resources

New MCP Servers

Latest Blog Posts

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/hohuuduc/MCP'

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