How to use NeedMCP wireframes in your AI Agent

What a wireframe request looks like

One line. That is the whole interaction.

wireframe:login-auth-portal build a login screen for my app

• The layout comes from the catalog, by slug.
• The page is what you ask for in plain words.
• The stack is whatever your repo already uses.

Three steps below: connect once, name a layout, check the result.

Left: the lines asset for login-auth-portal. Right: the same page built from it. Same regions, same order.

Step 1: connect the client, once

• Need: Node.js 22 or newer, and an API key from the dashboard. Keys start with sk-need-.
• Run: npx needmcp setup. It asks for your client, the scope, and the key.
• Result: the right config file for that client, plus the key in ~/.needmcp/config.json.

The CLI configures 19 of the 34 documented clients automatically, including Cursor, Claude Code, VS Code, Windsurf, Zed, Codex, Gemini CLI, and OpenCode. The rest are manual, one block pasted by hand.

One command, and the config file for your client is already written.

If the server never appears after setup, fix that first. The five usual causes are in Add a design system to Cursor with MCP, and none of them are about wireframes.

Step 2: name the layout

Prefix, then the slug, then the page in plain words.

wireframe:login-auth-portal build a login screen for my app

What that line does, in order:

1. Names a blueprint that already exists in the catalog.
2. States the page, so the copy fits the job.
3. Tells your assistant a layout is available, not just a style.
4. Leaves the implementation to your stack: React, Vue, Blade, anything.

There is no theme to lock first. The layout comes from the catalog. The look comes from the components and tokens your repo already has.

Slugs come from the wireframe gallery, which holds 107 desktop layouts and 305 mobile ones.

Step 3: check the page came from the blueprint

A page that looks fine is not proof. Four checks, one minute.

1. Regions match. Same blocks, same order as the gallery preview.
2. Ask it. "Which wireframe did you use, and which regions did you keep?"
3. Read the log. A call to the wireframe tool, or no blueprint.
4. Resize once. The structure holds. New regions mean it was improvised.

Four checks, in the order that finds the problem fastest.

Structure, or an exact copy

On Free, the assistant says so and builds from the standard layout. Nothing breaks.

What the assistant needs from you

• Layout: the slug, copied from the gallery.
• Page: what it is for.
• Stack: what it has to fit.

Leave one out and the model fills the gap with an average.

When the trigger gets ignored

• Tools are off. Tool Management is per API key. With get-wireframes-tool and get-wireframe-tool disabled, the trigger has nothing to resolve.
• The slug is close, not exact. A near miss resolves to nothing, and the model writes from memory.
• You asked for a section, not a page. A hero or a pricing block is a different unit.
• The client has not reloaded, or a call is waiting on you. Config is read at startup, and most clients ask before running a tool.

The chain has four links, and three of them break silently.

What a wireframe will not do

• It gives a layout that works, not the one that is right for your product.
• It does not transplant code. Your components win where they conflict.
• The lines asset is not a design. It fixes regions, order, and measures, then stops.

Do this next

Trigger one page, then put the result next to the lines asset from the same layout. If the regions match, you have a workflow.