How do I use Low-Code UI MCP Server?

1. Click on "Install Server". 2. Wait a few minutes for the server to deploy. Once ready, it will show a "Started" state. 3. In the chat, type @ followed by the MCP server name and your instructions, e.g., "@Low-Code UI MCP Server suggest UI instructions for this list of customer records" That's it! The server will respond to your query, and you can continue using it as needed. Here is a step-by-step guide with screenshots.

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

Low-Code UI MCP Server

Low-Code UI MCP Server

What It Does

Install

Run

MCP Tool

`suggest_ui_instructions`

Heuristics

Resources

Looking for Admin?

Latest Blog Posts

MCP directory API