MCP Integration

MCP Server

Connect AI agents to Wirekitty via the Model Context Protocol.

Overview

Wirekitty provides a hosted Model Context Protocol (MCP) server that allows AI agents to programmatically create and receive wireframes directly within your workflow.

The server handles the communication between your AI agent and the Wirekitty editor, enabling a seamless "agentic" design loop where the AI proposes a UI, and you review or edit it in real-time.

Connection

SSE Endpoint

The Wirekitty MCP server is available via Server-Sent Events (SSE) at:

https://mcp.wirekitty.dev/sse

bash

Configuring Your Client

Select your platform to see specific connection instructions. VS Code Copilot is the recommended way to get started.

VS Code Copilot

For VS Code with Copilot or extensions like Cline, Roo Code, and Goose, add this to your MCP settings or mcpServers configuration:

{
  "mcpServers": {
    "wirekitty": {
      "url": "https://mcp.wirekitty.dev/sse"
    }
  }
}

json

Security & Environment

The hosted server is pre-configured for optimal performance. Environment variables are managed internally for security and are not exposed to clients.

Workflow

The Wirekitty MCP workflow follows a human-in-the-loop pattern:

Agent Gets Schema

The AI agent calls get_wireframe_schema to retrieve the available component templates and JSON format.

Agent Creates Wireframe

The agent calls create_wireframe with the wireframe JSON. This returns a preview URL.

Human Reviews & Edits

You open the preview URL in Wirekitty, review the wireframe, and make any necessary adjustments.

Human Approves

Click the "Looks Good" button to approve the wireframe. This sends the final design back to the agent.

Agent Builds UI

The agent receives the approved wireframe metadata and uses it to generate production code.

Tools Reference

The Wirekitty MCP server exposes the following tools to AI agents:

get_wireframe_schema

Returns the Wirekitty wireframe JSON schema with all available element templates. Call this first before creating a wireframe.

Parameters: None

create_wireframe

Creates a wireframe from Konva JSON. Returns a preview URL that opens the wireframe in the Wirekitty editor.

Parameters:

wireframe - The Wirekitty save state JSON (required)

baseUrl - Custom Wirekitty instance URL (optional)

wait_for_wireframe_approval

Waits for the user to click "Looks Good" in Wirekitty. Returns the approved wireframe metadata reflecting any user edits.

Parameters:

wireframeId - The ID returned from create_wireframe (required)

reconnect_to_wireframe

Reconnects to an existing wireframe session if the previous wait timed out but the user still has the wireframe open.

Parameters:

wireframeId - The wireframe ID to reconnect to (required)