Stencil MCP Server

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

Stack: Node.js · ES modules · Stencil Core 4.x · TypeScript · Hono · MCP SDK

Port: 3003

MCP Tools

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

How It Works

Same template-project approach as the Lit server:

Copy a pre-seeded template/ project (Stencil + Tailwind, node_modules pre-installed) to a temp directory
Generate Stencil component source files from the YAML spec into the project
Run npm run build via shell (Stencil CLI compiles, 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.

YAML Spec Format

Same format as the Lit server — name, components with props, state, templates, styles. Both servers accept equivalent input and differ only in output target.

Output

A ZIP archive ready for npm distribution, containing compiled native web component .js files and Tailwind-generated CSS split into Shadow DOM and document-root layers.

Light-Rail Architecture

Generated components follow the Light-Rail pattern: one registered custom element at the feature boundary, all internal elements rendered as Stencil functional components (first-class framework feature) 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

Stencil is the framework-agnostic production target — output works in React, Vue, Angular, or plain HTML without adapter shims. Complements Lit: same YAML input, different component runtime. The use of stencil-store makes it well-suited for components with shared cross-component state.

See research-yaml-platform for platform architecture.