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