Aceto: Browser overlay and MCP building HTML mockups together with an AI

Aceto, a new open-source local dev server, lets users build HTML mockups with an AI agent through a browser overlay and MCP interface, enabling real-time feedback by pointing at elements and modifying them without page reloads. The tool outputs plain HTML with Tailwind CSS, supports inline editing, class manipulation, and component libraries like DaisyUI, aiming to streamline prototyping without a visual editor or build system.

A local dev server with a browser overlay and MCP interface for building HTML mockups together with an AI agent. Not a drawing tool, not a visual editor. Instead, a feedback loop between you and an agent: - Tell the agent what you want - The agent generates/modifies real HTML + Tailwind - See the result live in your browser Point at an element and say "change this"- The agent understands which element you mean and modifies it Token-efficient: The agent doesn't need to read and parse the full HTML to understand what you mean. You point at an element in the browser, the agent gets a precise selector. Write tools use the current selection by default — one tool call, no roundtrip. Real HTML: No abstraction layer, no component model. The output is a plain HTML file you can read with cat and send by email. Live feedback loop: DOM morphing keeps scroll position and selection state. You see changes instantly without page reload flicker. User moves the mouse over any element — a blue outline appears with the element's tag and classes. User clicks an element to select it pink outline . The breadcrumb bar at the bottom shows the full DOM path. Scroll wheel navigates up/down the tree parent/child . The agent highlights elements in cyan to communicate visually — e.g. to ask "Do you mean this one?": highlight element "section pricing div:nth-of-type 2 ", { label: "Make this card wider?", style: "pulse" } Both selections pink = user, cyan = agent can be visible simultaneously. User double-clicks any editable element to modify it directly in the browser: Text elements headings, paragraphs, links, etc. — edit the text content. Enter to save, Escape to cancel. Inputs — edit the value attribute. Enter to save, Escape to cancel. Textareas — edit the value. Ctrl+Enter to save, Escape to cancel, Enter adds a newline. Checkboxes / Radio buttons — double-click to enter edit mode, Space to toggle, Enter to save, Escape to cancel. User presses c on a selected element to edit its Tailwind classes inline. Enter to apply, Escape to cancel. User selects a table cell — a floating toolbar appears with +Row, −Row, +Col, −Col controls. Add component libraries via the CLI — DaisyUI components work out of the box with Tailwind v4: aceto add daisyui Content shortcuts — type or x in a cell to insert a checkbox Slash commands — type /list in an empty element to open a modal for creating <ul / <ol lists. Edit badges appear on existing lists for quick re-editing via double-click. Element defaults — define default classes for generated elements via aceto.defaults.json Paste images — Ctrl+V with selection inserts instantly; without selection, stages the image for agent-driven placement Asset picker — press a to browse and reuse previously pasted images from the assets folder Yank/Paste — press y to copy a selected element, p to paste it after another selection Screenshots — the agent captures full-page or element-level screenshots via get screenshot Live reload — DOM morphing keeps scroll position and selection state, no flickering - No editor — you don't edit anything yourself, you steer the agent - No build system — an HTML file you can read with cat - No framework — Tailwind v4 via CDN, optionally DaisyUI/Flowbite | Key | Action | |---|---| | Click | Select element | | Double-click | Inline edit text, input value, checkbox toggle | | Scroll wheel | Navigate depth parent/child | | Tab / Shift+Tab | Next/previous cell during table editing | c | Edit CSS classes of selected element | y | Yank copy selected element | p | Paste yanked element after selection | u | Undo | r | Redo | d | Insert empty div after selection | a | Open asset picker | | Del | Delete selected element | | Space | Toggle checkbox/radio during edit mode | | Esc | Close modal / deselect / cancel edit | e / Alt | Toggle select/preview mode clears selection | | Ctrl+V | Paste image | bun install -g github:alexzeitler/aceto Requires Bun https://bun.sh/ runtime. Once aceto dev is running, add it as an MCP server to Claude Code: claude mcp add aceto -s user --transport http http://localhost:3000/mcp Create a new project mkdir my-mockup && cd my-mockup aceto init Start the dev server aceto dev Export for production aceto export --production aceto init Create index.html + CLAUDE.md + aceto.md aceto init --eject Write default instructions into aceto.md aceto init --preset daisyui Create project with DaisyUI v5 pre-installed aceto dev Start dev server + MCP server aceto dev about.html Start with a specific page aceto dev --port 3001 Custom port aceto new about Create a new HTML page aceto new dashboard/settings -l daisyui New page with DaisyUI aceto add daisyui Add DaisyUI v5 to an existing project aceto export Export HTML with cleanup to dist/ aceto export --production Export with Tailwind CSS build On aceto init , a minimal CLAUDE.md is created that tells the agent to call get instructions via MCP. This tool returns the project's aceto.md if it has content, or the built-in default instructions. To customize the instructions, run aceto init --eject to write the defaults into aceto.md , then edit to your needs. Create an aceto.defaults.json in your project root to define default classes for generated elements: { "checkbox": "h-4 w-4", "img": "max-w-full h-auto rounded" } checkbox — applied to checkboxes created via / x shortcuts img — applied to images inserted via paste Ctrl+V The file is hot-reloaded — changes take effect immediately without restarting the server. Bun runtime, parse5 for HTML parsing, css-select for selectors, idiomorph for DOM morphing, MCP SDK for the agent interface. No Express, no React, no build step.