# Mcp2web > Build MCP servers that serve HTML/CSS web UIs via the mcp2web protocol - Skill: `wvides/mcp2web` (Agent Skill, multi-file: 4 files) - Install (CLI): `npx skillmds@latest add wvides/mcp2web` - Raw SKILL.md: https://api.skillmd.com/api/skills/wvides/mcp2web/raw - Safety review: pending - Works with: Claude Code, Claude.ai, OpenAI Codex - Category: Web & Frontend - Author: wvides (https://skillmd.com/u/wvides) - Updated: 2026-09-22 - Page: https://skillmd.com/skills/wvides/mcp2web --- # mcp2web — Building Web UI MCP Servers ## Protocol Overview mcp2web is a protocol standard for MCP servers that serve HTML/CSS web UIs. An Electron mini-browser connects to these servers and renders their HTML content. ### URI Schemes - **Resources**: `mcp2web:///` — HTML pages served as MCP resources with `mimeType: "text/html"` - **Tool Actions**: `mcp2web-tool://` — used as `
` attributes to trigger MCP tool calls ### How It Works 1. MCP server registers resources (HTML pages) and tools (form handlers) 2. Electron browser connects via stdio, lists resources, renders them in a sandboxed iframe 3. Links (``) trigger resource reads 4. Forms (``) trigger tool calls 5. Tool responses containing HTML are rendered as new pages ## Project Scaffolding When creating a new mcp2web server, use this structure: ``` my-server/ ├── package.json ├── tsconfig.json └── src/ ├── pages.ts # HTML page template functions └── server.ts # MCP server setup, resources, tools ``` ### package.json ```json { "type": "module", "dependencies": { "@modelcontextprotocol/sdk": "^1.12.1", "zod": "^3.24.4" }, "devDependencies": { "typescript": "^5.8.3" }, "scripts": { "build": "tsc", "start": "node dist/server.js" } } ``` ### tsconfig.json ```json { "compilerOptions": { "target": "ES2022", "module": "NodeNext", "moduleResolution": "NodeNext", "outDir": "dist", "rootDir": "src", "strict": true, "esModuleInterop": true, "skipLibCheck": true }, "include": ["src/**/*"] } ``` ## Resource Pattern Register HTML pages as MCP resources: ```typescript import { McpServer } from "@modelcontextprotocol/sdk/server/mcp.js"; const server = new McpServer({ name: "my-server", version: "1.0.0" }); server.resource("page-name", "mcp2web://my-server/page-name", async (uri) => ({ contents: [{ uri: uri.href, mimeType: "text/html", text: myPageFunction() }] })); ``` ## Tool Pattern Register form handlers as MCP tools: ```typescript import { z } from "zod"; server.tool("submit-form", { field1: z.string(), field2: z.string() }, async ({ field1, field2 }) => ({ content: [{ type: "text", text: successPageFunction(field1, field2) }] })); ``` ## HTML/CSS Guidelines ### MUST follow: - All CSS must be inline (`