Slider
A continuous value you tune by eye: blur, radius, opacity, speed.
Docs
Reference for the controls you can put in a project tool and the MCP methods Mirror gives your AI agent.
Getting started
- Install Mirror. Download it for macOS and open the app. The trial needs no credit card.
- Open your product on the canvas. Paste any URL, such as your local dev server, and it opens as a frame on the infinite canvas.
- Connect your project. Point Mirror at the project folder so your AI agent can change its code.
- Select and ask. Pick an element on the canvas and tell the agent what to change, ask for variations to compare, or ask for a tool with controls to fine-tune it by hand.
Controls
A project tool is a panel of controls that adjusts an element or a page on the canvas. Tools live in your project
under .mirror/tools; ask the agent for one and it declares these controls in the tool's manifest.
Number
An exact numeric value: a size, a duration, a count.
Steps
Ordered levels on a snapping scale, from the lightest to the strongest: quality, intensity, density.
Switch
Turns a feature on or off. Settings that depend on it can stay hidden while it is off.
Segmented
Two to four short options shown side by side, often used as a mode switch.
Select
A dropdown for more or longer options. A select named Preset sets several controls at once.
Color
A swatch with a color picker, hex and opacity input. The picker also lists the page's CSS color variables.
Gradient
Edits a whole linear or radial CSS gradient: its stops, angle and type.
Curve
An easing editor for transitions and animations.
Vector
A pair of values that move together: an offset, a position or a gradient center.
Range
A min/max pair with start ≤ end: clamp() bounds, a width range, a delay spread.
Anchor
One of nine positions, for transform-origin, background-position or alignment.
List
A variable number of texts, numbers or colors that you add, remove and reorder.
Text
A short line of text: a label, a title, a URL.
Text area
Multiline text.
Action
A button for a one-off command, such as replaying an animation or randomizing a seed.
Common properties
id- Unique key of the control; the adapter receives values by this id.
label- 1–3 words in sentence case, shown on the left of the row.
description- Shown as a tooltip: explanations, units and ranges.
default_value- The page's current behavior; Reset returns to it.
group- Collapsible section that holds adjacent controls with the same group.
row- Adjacent controls with the same row share one row, up to four columns.
visible_when- Shows the control only while an earlier control equals, or not equals, a value.
MCP methods
Mirror runs the mirror_canvas MCP server, which lets your agent read the canvas, inspect live
elements, build variations and manage project tools.
Canvas and selection
canvas_create_frame- Open an HTTP or HTTPS URL in a new frame on the active canvas page.
canvas_get_live_selection- Read the elements selected on the canvas right now.
canvas_get_selection- The same live selection, wrapped in a selection field.
canvas_get_selected_node- Read one selected node by its id.
chat_get_active- Read the selected Agent chat: its messages and running status.
Live elements
canvas_get_element_tree- Read the DOM subtree of an attached element.
canvas_get_element_html- Read the HTML of an attached element or one of its children.
canvas_get_element_geometry- Read the size and position of an attached element.
canvas_get_element_styles- Read the computed styles of an attached element.
Design references
canvas_capture_element_design- Capture an element's structure, styles, fonts, images and a screenshot for faithful copying.
canvas_get_design_references- List saved design packages, or read one package's files.
canvas_read_design_reference_file- Read one file from a saved package.
canvas_export_design_reference- Copy reference images and fonts into your project.
Variations
canvas_get_variations- Read the open variation sets and their variants.
canvas_submit_variations- Submit a complete preview of a variation set.
canvas_close_variations- Close a set after the chosen variant is applied.
Project tools
project_tools_get_contract- Read the .mirror/tools manifest, control, adapter and state contract.
project_tools_create- Create a tool: Mirror validates it, writes its files and opens it in Tools.
project_tools_list- List the tools of a connected project.
project_tools_get- Read one tool's controls, saved values, runtime state and validation status.
project_tools_validate- Validate a tool's manifest, values and adapter without changing anything.
project_tools_set_values- Set control values, as if you moved the sliders yourself.
project_tools_reload- Reload one validated tool on the open page.
project_tools_rebind- Reconnect a tool that lost its element to a newly attached one.
project_tools_answer- Finish a Tools request with an answer, without changing the tool.
project_tools_stop- Stop a Tools request when clarification is needed.
agent_handoff_to_tools- Hand a request for controls from a Design chat to a Tools chat.
agent_tools_handoff_status- Read how a handed-off Tools request is going.
Project
project_dev_server_start- Start the project's dev server inside Mirror.
canvas_get_page_composer_api- Read how a project page sends a selection from its own UI to the Agent composer.