# 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
```bash
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`):
```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`:
```typescript
const webviewProvider = new WebviewProvider(context.extensionUri, {
viewType: 'your.viewType',
title: 'Your Title',
mediaFolder: 'media',
});
```
## License
MIT
