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

Mở project trong VS Code
Nhấn F5 để chạy Extension Development Host
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

Web Viewer MCP Server