PostNord UI Engine MCP

📦 Generic UI Engine for PostNord Components - Enables LLMs to render any PostNord-branded web component dynamically.

✨ Philosophy

This MCP server acts as a UI Capability Engine. Instead of having hardcoded tools for every use case (like "track package"), it exposes two powerful primitives:

1. Discovery (list_components): Tells the LLM what UI components are available (Button, Tracker, Card, etc.) and their schemas.
2. Rendering (render_component): Takes JSON properties from the LLM and renders the live component.

The LLM acts as the "Frontend Developer", deciding which component to use and how to map data to it.

🚀 Quick Start

# Install and run with npx
npx postnord-ui-mcp

# Or in HTTP mode for testing
npm start -- --http

🎮 Usage Flow

1. Discovery

The LLM asks: "What PostNord components can I use?" You call list_components. Result: A registry of components with schemas (e.g., <pn-button appearance="...">).

2. Orchestration

The LLM receives data (e.g., from an API) and decides to render a UI. Example: Tracking Data -> Shipment Tracker

The LLM calls render_component:

{
  "component": "pn-progress-tracker",
  "props": {
    "vertical": true
  },
  "slot_content": "<pn-progress-step title='Ordered' completed></pn-progress-step>..."
}

3. Rendering

The MCP returns a live HTML preview of the component using @postnord/web-components.

📦 Tools

list_components

Returns a list of all available PostNord web components, their descriptions, properties, and usage examples.

render_component

Renders a specific component. | Parameter | Type | Description | |-----------|------|-------------| | component | string | Tag name (e.g., pn-button) | | props | object | JSON object of properties | | slot_content | string | Inner HTML/Text content | | output_path | string | Optional: Save HTML to file |

📄 License

MIT