MCP Server

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.

For wireframe generation quality, the currently recommended model is GPT 5.3 Codex. Other top models can also produce strong results, but output consistency and quality may vary by model and prompt.

SSE Endpoint

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

https://mcp.wirekitty.dev/sse

Configuring Your Client

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

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

If you want your coding agent to always propose a Wirekitty wireframe for new user-facing UI work without explicitly mentioning "wirekitty", add the following block to your AGENTS.md, CLAUDE.md, Copilot instructions, or equivalent system instructions. This is purely optional, and only helps prioritize the Wirekitty tool for agents.

## THIS MUST BE INCLUDED IN YOUR PLANNING AND DESIGN PHASE. ALWAYS FOLLOW THIS BEFORE IMPLEMENTING ANYTHING, UNDER ANY CONDITION. YOU MUST COMPLY WITH THESE RULES TO THE LETTER:
When asked to implement, plan, design, create, or write code for **any new user-facing feature**, including:
- A new website or web application
- A new frontend feature or component
- A new page or screen
- Any user interface that requires visual design

**You MUST follow this workflow:**

1. **Generate a Wirekitty wireframe first** using the `generate_wireframe` MCP tool
2. **Only after user approval**, use the returned JSON metadata to guide your implementation
3. Build the actual UI based on the approved wireframe, ensuring the implementation matches the wireframe's layout, components, and structure

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: Wait For Confirmation

For a strict human-in-the-loop flow, have the agent call create_wireframe, share the preview URL, then call wait_for_wireframe_approval with the returned wireframeId. After you click "Looks Good", the tool returns metadata that the agent can use as the source of truth for implementation. Modern AI agents will know how to do this without being explicitly told due to the tool call descriptions.

Option B: Manual Handoff

If you do not want the agent to block on a wait call, you can open the wireframe in your browser, then share screenshots/images and relevant metadata back to the agent manually.

Create a Wirekitty wireframe for this feature and share the preview URL. If possible, wait for my confirmation using wait_for_wireframe_approval. If we skip waiting, I will share screenshots/images and metadata from the wireframe.

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