Lit MCP Server

Production export target for the YAML-driven UI platform. Takes a declarative YAML spec, generates Lit component source files, and runs the Lit/Vite build toolchain to produce a deployable dist — no manual Lit boilerplate required.

Stack: Node.js · ES modules · Lit 4.x · Vite · Hono · MCP SDK

Port: 3004

MCP Tools

generate_components — generates and builds a Lit component from a YAML spec; accepts optional custom tag name and output path
validate_yaml — validates spec format before generation

How It Works

The server uses a template-project approach rather than an embedded compiler:

Copy a pre-seeded template/ project (Lit + Vite + Tailwind, node_modules pre-installed) to a temp directory
Generate Lit component source files from the YAML spec into the project
Run npm run build via shell (Vite builds, Tailwind CSS is generated as part of the build)
Zip the resulting dist/ folder and return the path

Icons are resolved via the SVG server (port 3002) before code generation — SVG markup is inlined directly into component source so the output has no runtime icon dependency.

Output

A ZIP archive ready for npm distribution, containing compiled Lit component .js files and Tailwind-generated CSS.

Light-Rail Architecture

Generated components follow the Light-Rail pattern: one registered custom element at the feature boundary, all internal elements rendered as functional components (plain functions returning TemplateResult) with no tag registration and no shadow DOM of their own. One shadow root, one Tailwind injection point, no internal tag pollution. This makes the output composable by default — safe to load alongside other features that may share design system internals.

Role in the Platform

Lit is the web-standards production target. Components use Shadow DOM for style encapsulation and work in any framework or plain HTML. Complements Stencil (same YAML input, different output format).

See research-yaml-platform for platform architecture.