Click on "Deploy Server".
Wait a few minutes for the server to deploy. Once ready, it will show a "Started" state.
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.
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
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
Related MCP server: MCP UI Glue Code Generator
cd C:\Users\gregg\development\mcp
python -m venv .venv
.venv\Scripts\Activate.ps1
python -m pip install -e .cd C:\Users\gregg\development\mcp
.venv\Scripts\Activate.ps1
low-code-ui-mcpYou can also run it directly:
python -m low_code_ui_mcpRun with HTTP REST transport instead of stdio:
python -m low_code_ui_mcp --transport http --host 127.0.0.1 --port 8000When 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)suggest_ui_instructionsParameters:
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" }
]
}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
Suggest @workspace/ui renderer instructions for a JSON-like object.
| Name | Required | Description | Default |
|---|---|---|---|
| data | Yes | ||
| carousel_max_items | No | ||
| table_min_items | No | ||
| table_max_columns | No | ||
| max_depth | No |
| Name | Required | Description |
|---|---|---|
No output parameters | ||
Does the description disclose side effects, auth requirements, rate limits, or destructive behavior?
Zero annotations provided, so the description carries full disclosure burden. It fails to clarify whether this is a pure function (likely), what 'instructions' entail (schema? config?), or how the parameters influence UI selection (carousel vs table thresholds). The mention of '@workspace/ui renderer' hints at the domain but doesn't explain behavioral traits.
Agents need to know what a tool does to the world before calling it. Descriptions should go beyond structured annotations to explain consequences.
Is the description appropriately sized, front-loaded, and free of redundancy?
While the single sentence is front-loaded, it is inappropriately concise given the tool's complexity (5 parameters, nested objects, output schema). The brevity creates underspecification; the description wastes its opportunity to explain the tuning parameters or output format.
Shorter descriptions cost fewer tokens and are easier for agents to parse. Every sentence should earn its place.
Given the tool's complexity, does the description cover enough for an agent to succeed on first attempt?
Inadequate for a tool with 5 parameters, 0% schema coverage, and no annotations. The description omits the logic governing UI component selection (when carousel vs table vs other), the nature of the returned instructions, and the purpose of the threshold parameters. Even with an output schema, the input semantics require elaboration.
Complex tools with many parameters or behaviors need more documentation. Simple tools need less. This dimension scales expectations accordingly.
Does the description clarify parameter syntax, constraints, interactions, or defaults beyond what the schema provides?
With 0% schema description coverage, the description must compensate for five undocumented parameters. It only implicitly references the 'data' parameter via 'JSON-like object', completely omitting the four configuration parameters (carousel_max_items, table_min_items, etc.) which clearly control rendering heuristics. Barely above tautology.
Input schemas describe structure but not intent. Descriptions should explain non-obvious parameter relationships and valid value ranges.
Does the description clearly state what the tool does and how it differs from similar tools?
The description states the core action ('Suggest') and target ('@workspace/ui renderer instructions'), but 'instructions' remains vague and '@workspace/ui' assumes domain knowledge without explanation. It adequately identifies the input as a 'JSON-like object' but lacks specificity about what the tool actually produces.
Agents choose between tools based on descriptions. A clear purpose with a specific verb and resource helps agents select the right tool.
Does the description explain when to use this tool, when not to, or what alternatives exist?
No guidance provided on when to use this versus manual UI configuration or other rendering approaches. No mention of prerequisites (e.g., whether the data needs specific structures) or when the suggestions are inappropriate.
Agents often have multiple tools that could apply. Explicit usage guidance like "use X instead of Y when Z" prevents misuse.
Recent tool additions, removals, and schema changes observed during successful MCP inspections.
v0.1.0suggest_ui_instructionsScored across 1 tool
With only one tool, there is no possibility of ambiguity or overlap between tools, as there are no other tools to compare it to. The tool's purpose is clearly defined and stands alone without any confusion.
Since there is only a single tool, it inherently maintains consistency with itself. The naming follows a clear verb_noun pattern (suggest_ui_instructions), which is straightforward and predictable.
A single tool is too few for a server named 'Low-Code UI MCP Server', which implies a broader domain of UI-related operations. This minimal set feels thin and inadequate for covering potential needs like creating, updating, or rendering UI components.
The tool surface is severely incomplete for a UI-focused server, as it only offers suggestion capabilities without any tools for actual creation, modification, or execution of UI elements. This leaves significant gaps that will likely cause agent failures in handling full UI workflows.
Provides UX capabilities to enhance the design output and understanding of AI systems.
The AI that understands raw data: Schema over your tables and databases, as MCP tools.
Live React design-system APIs, patterns, and code validation so AI agents build real UI, not slop.
Data-ontology maps of your business systems, served to AI agents over MCP.
