generate_design
Generate a new HTML/CSS design from a text prompt; returns a complete HTML document with inline Tailwind CSS.
LABSCO SUMMARY
The pairing code is the good idea here — the agent's work lands somewhere a human is already looking.
Design tools that return a blob of HTML leave you to find out later whether it was any good. Linking the agent to an editor session inverts that: you press Connect Agent, hand over a six-character code, and every generation appears on the canvas in front of you. The rest of the surface follows the same instinct — vectorise, background-remove and asset-extract all operate on a canvas that already exists rather than starting over. Watch the credits: images and boards are the expensive calls, and a 3×3 board is nine generations.
What it is
AI Designer's hosted endpoint. Every client connects to the same address, https://api.aidesigner.ai/api/v1/mcp; AIDESIGNER_MCP_URL overrides it only if you need a different one. What makes it unusual is the editor pairing: the agent links to a browser session and drops its output onto that canvas as it works.
What you get
- Design generation and refinement — a complete HTML document with inline Tailwind, iterated by natural-language feedback
- Image work: generate, edit, remove backgrounds, vectorise to SVG, extract embedded assets from a canvas
- Brand kits — nine directions on one 3×3 board, save a tile as a private kit, steer later generations with it
- Editor pairing: create a session or link one with a 6-character code, then list, fetch and search canvases
- Account tools for credit balance and the OAuth scopes the connection actually holds
Requirements
Browser sign-in started by your MCP host; the client stores and refreshes the tokens. A pre-authenticated access token is supported for headless flows. Free plan, or Pro at $25/month for 100 rolling credits and watermark-free output.
Setup effort
Paste a URL, then authorize — add the endpoint to your client, then approve the OAuth consent screen
USE CASES
01
Designing with the result on screen
Pair the agent to an open editor session with the connect code, then generate and refine while watching each version land on the canvas.
02
Settling on a brand direction
Generate nine directions on one board, save the tile you like as a private kit, and set it so later generations follow it.
03
Turning a raster asset into something usable
Strip the background, vectorise to SVG, or pull the hero and logo imagery out of an existing canvas as separate assets.
04
Finding an earlier page by description
Ask for 'the pricing page' and it resolves the phrase to the matching canvas instead of you scrolling the session.
22 tools
Listed in project docs. Your client may show a different list.
refine_design
Iterate on a previous design using natural-language feedback; pass previous run ID or raw HTML.
generate_image
Generate or edit standalone images; reference image URLs enter edit mode; brand kits can privately steer visual direction.
generate_website_design_image
Generate premium website reference images and page slices; optional reference images preserve requested aspect ratio.
generate_branding_kit_variations
Generate one square 3x3 board of nine distinct branding kit directions (always 1:1).
generate_media_asset_kit
Generate one square 3x3 board of reusable brand media assets; when linked to an editor session the board is split into nine transparent image canvases.
create_brand_kit_from_variation
Save a private brand kit from one selected tile in a 3x3 variation image.
list_brand_kits
Return saved brand kits with public names, thumbnails, swatches, and short summaries.
set_editor_brand_kit
Set or clear the selected brand kit for a linked editor session.
save_media_asset_to_brand_kit
Save an image canvas as a reusable brand kit media asset with name, intended use, and guidance.
drop_image_on_canvas
Place an existing image file or safe image URL onto the linked canvas without regenerating it; transparent PNGs stay transparent.
remove_image_background
Remove the background from an existing image canvas; original unchanged, new transparent PNG canvas placed beside it.
vectorize_image
Convert an existing raster image canvas to SVG; vector result delivered as a new image canvas beside the source.
extract_image_assets
Extract embedded hero, gallery, product, logo, texture, or illustration imagery from an image canvas into separate reusable canvases. Text-bearing assets bill 1 credit each; other extracted assets 1 credit per three.
get_credit_status
Check credit balance, usage, and subscription status.
whoami
Returns the connected account identity and authorized OAuth scopes.
create_editor_session
Create a brand-new editor project and auto-pair the agent to it; returns editor_url the user can watch live.
link_editor_session
Pair the agent with an existing editor session using a 6-character code minted from the editor's Connect Agent button (code expires in 10 minutes; one agent per session per OAuth client).
unlink_editor_session
Remove the active pairing; subsequent generations no longer deliver to the editor canvas.
list_canvases
List all canvases in the linked editor session, newest-first.
get_canvas
Fetch the full HTML plus metadata for a single canvas by id.
extract_canvas_design
Resolve a natural-language query (e.g. 'the pricing page') to the best-matching canvas via fuzzy trigram matching on name, slug, and text content; returns match_confidence and canvas HTML.
BEFORE YOU INSTALL
What to know first
Tools you get
22 tools named in the project's documentation.
Requires
- an MCP client that can reach a remote endpoint
- OAuth (browser sign-in initiated by the MCP host; tokens stored/refreshed by the client). API key auth reserved for REST/non-MCP workflows; AIDESIGNER_MCP_ACCESS_TOKEN supported for pre-authenticated flows
INSTALLATION
Connect your client
Add the endpoint to your client, then approve the OAuth consent screen.
Server setup
ENDPOINT URL
https://api.aidesigner.ai/api/v1/mcpRequirements
- OAuth (browser sign-in initiated by the MCP host; tokens stored/refreshed by the client). API key auth reserved for REST/non-MCP workflows; AIDESIGNER_MCP_ACCESS_TOKEN supported for pre-authenticated flows.
