LayoutPilot MCP Server
OfficialClick 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., "@LayoutPilot MCP ServerGenerate a modern dashboard with sidebar navigation"
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.
LayoutPilot MCP Server
An MCP (Model Context Protocol) server that exposes LayoutPilot's AI UI generation capabilities as tools.
Features
generate_ui - Generate full UI layouts with AI
generate_component - Generate individual UI components
open_layoutpilot - Open LayoutPilot with optional pre-filled prompt
Related MCP server: mendix-mcp-server
Installation
npm installUsage
With Claude Desktop
Add to your Claude Desktop config (%APPDATA%\Claude\claude_desktop_config.json on Windows):
{
"mcpServers": {
"layoutpilot": {
"command": "node",
"args": ["C:\\Users\\survi\\New folder (3)\\src\\index.js"]
}
}
}Standalone
npm startTools
generate_ui
Generate a full UI layout.
Parameters:
prompt(required): Description of the UI to generateauto_submit(optional): Auto-start generation (default: true)
Example:
Generate a modern dashboard with sidebar navigationgenerate_component
Generate a single UI component.
Parameters:
prompt(required): Description of the componentauto_submit(optional): Auto-start generation (default: true)
Example:
Create an animated pricing card with hover effectsopen_layoutpilot
Open LayoutPilot in browser.
Parameters:
prompt(optional): Pre-fill the prompt field
License
MIT
Available Tools
3 toolsgenerate_componentB
Generate a single UI component using LayoutPilot AI. Returns a URL that opens LayoutPilot in component mode with your prompt ready to generate reusable component code.
| Name | Required | Description | Default |
|---|---|---|---|
| prompt | Yes | Description of the component to generate (e.g., 'Animated pricing card with hover effects') | |
| auto_submit | No | Whether to automatically start generating when the URL is opened. Defaults to true. |
TDQS
Does the description disclose side effects, auth requirements, rate limits, or destructive behavior?
No annotations are provided, so the description carries the transparency burden. It discloses that the tool returns a URL (not actual code) and that LayoutPilot opens in component mode. However, it doesn't clarify whether generation is async, whether the URL embeds the prompt fully, or what happens if auto_submit is false - these behavioral details are unresolved.
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?
Two sentences, both informative, with the key purpose and output stated upfront. The return value is clearly communicated in the first sentence. Minor redundancy with input schema details (auto_submit default) but overall efficient.
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?
No output schema exists, so the description must convey return format - it does state 'Returns a URL'. With no annotations, the tool carries needs more behavioral disclosure for a generation tool, but for a simple 2-param 'returns a URL' tool, the description is reasonably adequate. It does not explain the difference from generate_ui which is a notable gap.
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?
Schema description coverage is 100%, so both parameters are documented in the schema. The description reinforces that the prompt is a component description, but adds little beyond the schema. It mentions the prompt is 'ready to generate' in the return behavior but doesn't elaborate on auto_submit semantics beyond the schema's default.
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 uses a specific verb+resource ('Generate a single UI component using LayoutPilot AI') and clearly states the output (a URL opening LayoutPilot in component mode). It distinguishes itself from siblings by emphasizing 'single component' and 'component mode', though it doesn't explicitly contrast with generate_ui or open_layoutpilot.
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?
The description implies when to use it (generating a single UI component) but doesn't explicitly state when not to use it or what to use instead (e.g., generate_ui for full UI screens). No exclusions or alternatives are named, leaving the distinction from the sibling generate_ui ambiguous.
Agents often have multiple tools that could apply. Explicit usage guidance like "use X instead of Y when Z" prevents misuse.
generate_uiB
Generate a full UI layout using LayoutPilot AI. Returns a URL that opens LayoutPilot with your prompt ready to generate production-ready UI code using Gemini 3.0 Flash.
| Name | Required | Description | Default |
|---|---|---|---|
| prompt | Yes | Description of the UI to generate (e.g., 'Modern dashboard with sidebar navigation and analytics cards') | |
| auto_submit | No | Whether to automatically start generating when the URL is opened. Defaults to true. |
TDQS
Does the description disclose side effects, auth requirements, rate limits, or destructive behavior?
No annotations are provided, so the description carries the behavioral disclosure burden. It mentions returning a URL and notes it uses Gemini 3.0 Flash, which is helpful. However, it doesn't disclose potential side effects — that opening the URL may trigger external generation activity (auto_submit), or that auto_submit defaults to true meaning generation starts immediately. While auto_submit is documented in the schema, the description could have flagged the external-service interaction more clearly.
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?
The description is a single sentence, which is appropriately brief, but it's somewhat dense and runs long, packing multiple ideas (generates UI, returns URL, opens LayoutPilot, uses Gemini 3.0 Flash). The sentence is front-loaded with the core purpose but could be split for readability. No wasted words, but the structure could be cleaner.
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?
For a relatively simple 2-parameter tool with 100% schema coverage and no output schema, this is nearly complete. The description explains the mechanism (returns a URL that opens LayoutPilot) and the technology. However, it doesn't clarify what the returned URL's relationship to sibling open_layoutpilot is, and doesn't explain what the agent should expect once the URL is opened (does generation happen automatically? For how long?). The auto_submit interaction could bridge some of this but isn't referenced in the description.
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?
Schema description coverage is 100%, so the schema already documents both parameters well — the prompt example ('Modern dashboard with sidebar navigation...') and auto_submit's default behavior. Given high coverage, the baseline is 3. The description adds value by clarifying 'full UI layout' as the scope of the prompt and 'production-ready UI code' as the outcome, reinforcing what the prompt parameter produces. Nothing more needed since coverage is complete.
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 clearly states the tool generates a full UI layout using LayoutPilot AI and returns a URL. The verb 'generate' plus resource 'full UI layout' is specific. However, it doesn't distinguish itself from sibling tools generate_component or open_layoutpilot — notably, open_layoutpilot could plausibly behave similarly (opening LayoutPilot with a prompt). The mention of 'production-ready UI code using Gemini 3.0 Flash' adds useful specificity about output.
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?
The description states it generates a full UI and returns a URL, but gives no guidance on when to choose this over generate_component (for components) or open_layoutpilot (which also seems LayoutPilot-related). There's no explicit 'when not to use' or alternative naming. The context implies a full-layout use case versus component-level, but this is never stated directly.
Agents often have multiple tools that could apply. Explicit usage guidance like "use X instead of Y when Z" prevents misuse.
open_layoutpilotA
Open LayoutPilot in the browser. Optionally provide a prompt to pre-fill the input field.
| Name | Required | Description | Default |
|---|---|---|---|
| prompt | No | Optional prompt to pre-fill in LayoutPilot |
TDQS
Does the description disclose side effects, auth requirements, rate limits, or destructive behavior?
No annotations are provided, so the description carries full burden. It states the primary action (open in browser) and the optional prompt behavior. However, it doesn't disclose what happens after opening — does it return navigation info? Does it fail if browser unavailable? What does 'open' return? Some behavioral context is missing for an unannotated tool.
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?
Two concise sentences, zero waste. Every word earns its place: primary action stated first, optional behavior second. Clean and front-loaded.
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?
This is a simple tool — one optional param, no output schema, no nested objects. Given the low complexity, the description is reasonably complete for its scope. However, it doesn't clarify its relationship to the sibling generation tools (generate_ui, generate_component), which could help an agent decide whether to open LayoutPilot or call the generation tools directly.
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?
Schema coverage is 100% — the single 'prompt' param is described in both the schema ('Optional prompt to pre-fill in LayoutPilot') and the description ('Optionally provide a prompt to pre-fill the input field'). The description adds minimal value beyond schema, essentially restating it. Baseline 3 is appropriate since schema does the heavy lifting.
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?
Clear verb+resource: 'Open LayoutPilot in the browser.' Names the tool explicitly and states a specific action (open in browser). The optional prompt pre-fill detail adds secondary functionality. However, it doesn't distinguish from siblings (generate_ui, generate_component) — the 'opening' action vs 'generating' action is implied but not contrasted.
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?
The description implies this opens LayoutPilot as opposed to generating output directly, which distinguishes it contextually from siblings. But there's no explicit when-to-use vs when-not-to-use guidance, no mention of prerequisites (e.g., browser availability), and no alternatives named. Usage is implied rather than stated.
Agents often have multiple tools that could apply. Explicit usage guidance like "use X instead of Y when Z" prevents misuse.
Tool Schema Changelog
Recent tool additions, removals, and schema changes observed during successful MCP inspections.
3 tool updates
v1.0.0- First observed
generate_component - First observed
generate_ui - First observed
open_layoutpilot
TDQS
Scored across 3 tools
generate_ui and generate_component are reasonably distinct (full layout vs. single component), but open_layoutpilot overlaps significantly with both since it also accepts a prompt and opens the same tool. An agent could easily select open_layoutpilot when it intends a specific generation mode.
All three tools use snake_case with a clear 'generate_' and 'open_' verb prefix followed by a noun, maintaining a consistent verb_noun pattern. Minor deviation is that open_layoutpilot uses the tool name as the object while the others use the output type.
Three tools is on the low end but appropriate for a thin wrapper that primarily generates URLs to an external service. It feels slightly thin since there are no supporting operations, but the scope is intentionally narrow.
The tools only cover generation (full layout and component) plus a general open. There are notable gaps: no update, preview, iterate on existing layouts, manage versions, or retrieve generated results. Agents have no way to act on output beyond following a URL, creating dead ends for common workflows.
Maintenance
Related MCP Connectors
Use AI models for chat, image, and video generation from Claude Code and other MCP hosts.
Give any MCP-compatible AI assistant a builder for live, hosted web tools and workflows.
Set up and run an in-product AI assistant: widgets, knowledge, MCP connections, usage.
List, read, edit, and deploy your GenMB AI-generated apps from any MCP client.
Related MCP Servers
- AlicenseNot gradedqualityDmaintenanceEnables AI-driven embedded development: generate, build, flash, and debug firmware using natural language commands through MCP.MIT
- FlicenseNot gradedqualityCmaintenanceEnables AI agents to read and modify Mendix application models through MCP tools for creating modules, entities, pages, microflows, deploying, and querying runtime data.1-
- AlicenseNot gradedqualityBmaintenanceEnables AI coding agents to visually build and run AI generation pipelines on a canvas by adding, wiring, and executing nodes via MCP tools.Apache 2.0
- AlicenseNot gradedqualityAmaintenanceEnables AI tools to read the Roblox Studio game tree, edit scripts, insert models, and run playtests via the Studio MCP interface.16 npmMIT