MCP Integration

MCP Server

Connect AI agents to Wirekitty via the Model Context Protocol.

Overview

Wirekitty provides a hosted MCP server that allows AI agents to programmatically create wireframes directly within your agentic workflow through the use of agentic tools. Typically, agents would generate a wireframe early in the planning or design phase of new user-facing features, then use that wireframe as a source of truth for implementation, ensuring the final UI closely matches the proposed design.

Wirekitty is model-agnostic. Any MCP-capable coding or product model can use the workflow, as long as it can follow the schema and share the preview URL back to the user. We usually see the best results from the latest Claude or GPT models.

Connection

MCP Endpoint

The Wirekitty MCP server is available via HTTP at:

bash

https://mcp.wirekitty.dev/mcp

Configuring Your Client

VS Code + Copilot

Add Wirekitty to your workspace's .vscode/mcp.json or user mcp.json:

json

{
  "servers": {
    "wirekitty": {
      "type": "http",
      "url": "https://mcp.wirekitty.dev/mcp"
    }
  }
}

Docs: VS Code MCP Servers

Workflow

There are multiple ways to interact with Wirekitty through your AI agent:

Ask The AI To Generate A Wireframe

Ask your agent to create a wireframe for a feature. When MCP is connected, the agent will call get_wireframe_schema to understand how to write the schema, and then create_wireframe to provide you with a preview URL and wireframeId.

Generate A Wireframe Based On Existing Code

It can be really useful to tell your coding agent to generate a wireframe based on your code, allowing you to tweak things visually through the Wirekitty editor afterwards to explain your desired changes.

Iterate In The Same Session

If you request changes, your agent can call create_wireframe again with updateWireframeId set to the prior wireframeId. Your open preview tab will prompt you to load the updated revision in place.

Finalize The Approved Wireframe

After you confirm the final version, the agent calls get_screenshot with the same wireframeId to collect the latest approved screenshot and metadata for implementation.

Share Wireframes From Browser Back To AI

You can also create and edit wireframes directly at app.wirekitty.dev in your browser and export your wireframes to AI whenever you're ready to share, without using any tool calls.

Working With Agents

If the Wirekitty MCP server is available to your agent, you can ask it to generate a wireframe for new UI work and share a preview URL. You can open that URL in your browser, or directly in your editor when your MCP client supports link opening.

Wireframes are saved in the local browser storage for the browser profile where you open them. If you only open Wirekitty in an IDE-integrated browser, those wireframes will stay in that embedded browser context and will not persist in your regular browser. Open the wireframe in a real browser (Chrome, Safari, Firefox, etc.) if you want that browser to keep it for later.

Option A: Agent-Led Finalization

For a strict human-in-the-loop flow, have the agent call create_wireframe and share the preview URL. If you request edits, the agent should publish revisions by calling create_wireframe with updateWireframeId. After you confirm the final version, the agent calls get_screenshot with wireframeId and uses the returned screenshot plus metadata as implementation source of truth.

Option B: Manual Handoff

If you do not want the agent to make a follow-up get_screenshot attempt, you can open the wireframe in your browser, then share screenshots/images and relevant metadata back to the agent manually.

Tools Reference

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

get_wireframe_schema

Returns the Wirekitty schema reference. Call this first to get the current syntax, layout patterns, and element shortcuts before creating a wireframe.

Parameters: None

create_wireframe

Creates a wireframe from the Wirekitty schema and returns a preview URL that opens the wireframe in the editor.

Parameters:

schema - Schema object (single section) or array of sections (required)

baseUrl - Custom Wirekitty instance URL (optional)

updateWireframeId - Existing wireframe ID to publish a revision in the same preview session (optional)

get_screenshot

Requests the latest approved screenshot and metadata for the current wireframeId. If no browser session can respond quickly, the tool returns a timeout instead of entering a long-lived waiting mode.

Parameters:

wireframeId - The ID returned from create_wireframe (required)

timeoutMs - Optional timeout override for the screenshot attempt (optional)