Low-Code UI MCP Server

This project provides a Python MCP server that inspects runtime data and returns UI instructions compatible with the low-code renderer in C:\Users\gregg\development\low-code\low-code\packages\ui.

The server is designed around the instruction types documented in C:\Users\gregg\development\low-code\low-code\README.md:

• label
• list
• table
• card
• accordion
• carousel

What It Does

The exposed MCP tool, suggest_ui_instructions, accepts a data object and returns:

• instruction: a renderer-ready UIInstruction or UIInstruction[]
• analysis: the component decisions made for each field
• notes: a short explanation of the heuristics used

Example selection behavior:

• arrays of primitive values become list
• small arrays of objects become carousel
• medium arrays of objects become accordion
• large, flat arrays of objects become table
• nested objects become card

Install

cd C:\Users\gregg\development\mcp
python -m venv .venv
.venv\Scripts\Activate.ps1
python -m pip install -e .

Run

cd C:\Users\gregg\development\mcp
.venv\Scripts\Activate.ps1
low-code-ui-mcp

You can also run it directly:

python -m low_code_ui_mcp

Run with HTTP REST transport instead of stdio:

python -m low_code_ui_mcp --transport http --host 127.0.0.1 --port 8000

When running in HTTP mode:

• health check: GET /health
• non-blocking suggestion endpoint: POST /api/v1/suggest-ui-instructions

Example request:

Invoke-RestMethod -Method Post -Uri "http://127.0.0.1:8000/api/v1/suggest-ui-instructions" -ContentType "application/json" -Body (@{
  data = @{
    title = "Quarterly Summary"
    highlights = @("Revenue up 12%", "Churn down 3%")
    products = @(
      @{ name = "Alpha"; owner = "Team A"; score = 92 },
      @{ name = "Beta"; owner = "Team B"; score = 88 }
    )
  }
} | ConvertTo-Json -Depth 20)

MCP Tool

suggest_ui_instructions

Parameters:

• data: the object to analyze
• carousel_max_items: maximum object-array size that still prefers carousel
• table_min_items: minimum object-array size that starts preferring table
• table_max_columns: maximum distinct object keys that still counts as a flat table
• max_depth: recursion limit for nested instruction generation

Example request payload:

{
  "data": {
    "title": "Quarterly Summary",
    "highlights": ["Revenue up 12%", "Churn down 3%"],
    "products": [
      { "name": "Alpha", "owner": "Team A", "score": 92 },
      { "name": "Beta", "owner": "Team B", "score": 88 }
    ],
    "accounts": [
      { "name": "Acme", "region": "NA", "status": "Active" },
      { "name": "Globex", "region": "EU", "status": "Active" },
      { "name": "Initech", "region": "APAC", "status": "Paused" },
      { "name": "Umbrella", "region": "NA", "status": "Active" },
      { "name": "Soylent", "region": "EU", "status": "Pilot" },
      { "name": "Wonka", "region": "NA", "status": "Active" },
      { "name": "Hooli", "region": "APAC", "status": "Active" },
      { "name": "Stark", "region": "NA", "status": "Active" }
    ]
  }
}

Example response shape:

{
  "instruction": [
    { "type": "label", "field": "title", "label": "Title" },
    { "type": "list", "field": "highlights", "label": "Highlights" },
    {
      "type": "carousel",
      "field": "products",
      "label": "Products",
      "contents": [
        { "type": "label", "field": "name", "label": "Name" },
        { "type": "label", "field": "owner", "label": "Owner" },
        { "type": "label", "field": "score", "label": "Score" }
      ]
    },
    { "type": "table", "field": "accounts", "label": "Accounts" }
  ]
}

Heuristics

• Primitive fields render as label
• Arrays of primitives render as list
• Empty arrays default to list
• Arrays of objects render as:
  • carousel when item count is small
  • accordion when item count is medium or the objects are more nested
  • table when the array is large and the objects are flat enough for columns
• Nested objects render as card with child instructions inferred from the nested fields