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. It is free during the beta.
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/tweaks; ask the agent for one and it declares these controls in the tool's manifest.

Slider

A continuous value you tune by eye: blur, radius, opacity, speed.

min, max: Required bounds of the value.
step: Increment the value snaps to.
show_input: false hides the exact value beside the control, for values tuned by eye.

Number

An exact numeric value: a size, a duration, a count.

min, max: Required bounds of the value.
step: Increment the value snaps to.

Steps

Ordered levels on a snapping scale, from the lightest to the strongest: quality, intensity, density.

options: Required list of { value, label } levels, from the lightest to the strongest.

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.

options: Required list of two to four { value, label } choices.

Select

A dropdown for more or longer options. A select named Preset sets several controls at once.

options: Required list of { value, label } choices.

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.

min, max: Required bounds of the value.
step: Increment the value snaps to.
x_label, y_label: Rename the two axes.

Range

A min/max pair with start ≤ end: clamp() bounds, a width range, a delay spread.

min, max: Required bounds of the value.
step: Increment the value snaps to.
unit: Unit shown with the values.
show_input: false hides the exact value beside the control, for values tuned by eye.

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.

item_type: Required: text, number or color.
item_label: Singular noun for one item, shown as Add <item_label>.
min_items, max_items: Limits on the number of items.

Text

A short line of text: a label, a title, a URL.

placeholder: Hint shown while the field is empty.
max_length: Longest allowed text.

Text area

Multiline text.

placeholder: Hint shown while the field is empty.
rows: Visible lines of text.
max_length: Longest allowed text.

Action

A button for a one-off command, such as replaying an animation or randomizing a seed.

action_id: Required: passed to the adapter's action(action_id, api, values).
button_label: Short verb on the button; Run by default.

Custom

When no built-in control fits, the agent writes one: a timeline, a path editor, a map, a live preview. It is an HTML file in the tool folder, shown in the same list as every other control, and its value is any JSON. The control runs in a sandbox with no network, storage or access to your page or to Mirror.

source: Required: file name of the control HTML next to adapter.js, such as spline.html. Edit it and Mirror reloads the control.
default_value: Required: any JSON except null, up to 32 KB. The adapter receives it as is.
width: full puts the label above and gives the control the whole panel width. Such a control cannot share a row.
height: Initial height in pixels; the control then follows the height of its content, up to 640.

In the control HTML

mirror.value: The current value.
mirror.onValue(listener): Called with the value right away and whenever it changes outside the control: undo, Reset, a state switch or the agent. Redraw from it.
mirror.set(value): Commits a new value and applies it to the page.
mirror.beginGesture(), endGesture(): Wrap a drag: every set() in between becomes one undo step.
mirror.disabled, onDisabled(listener): Whether the control is disabled; Mirror dims it and ignores set() then.
--mirror-text, --mirror-accent, …: CSS variables of the panel theme: text, text-secondary, accent, surface, border, radius and font.

Group

A collapsible section for adjacent controls that share the same group name. A tool with many controls splits them into groups; each starts collapsed.

group: Name of the section, 1–3 words; set it on every control the section holds.

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.
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

tweaks_get_contract: Read the .mirror/tweaks manifest, control, adapter and state contract.
tweaks_create: Create a tool: Mirror validates it, writes its files, including the HTML of custom controls, and opens it in Tools.
tweaks_list: List the tools of a connected project.
tweaks_get: Read one tool's controls, saved values, runtime state and validation status.
tweaks_validate: Validate a tool's manifest, values and adapter without changing anything.
tweaks_set_values: Set control values, as if you moved the sliders yourself.
tweaks_reload: Reload one validated tool on the open page.
tweaks_rebind: Reconnect a tool that lost its element to a newly attached one.
tweaks_answer: Finish a Tools request with an answer, without changing the tool.
tweaks_stop: Stop a Tools request when clarification is needed.

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.