{"slug": "aceto-browser-overlay-and-mcp-building-html-mockups-together-with-an-ai", "title": "Aceto: Browser overlay and MCP building HTML mockups together with an AI", "summary": "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.", "body_md": "A local dev server with a browser overlay and MCP interface for building HTML mockups together with an AI agent.\n\n**Not a drawing tool, not a visual editor.** Instead, a feedback loop between you and an agent:\n\n- Tell the agent what you want\n- The agent generates/modifies real HTML + Tailwind\n- See the result live in your browser\n**Point at an element** and say \"change this\"- The agent understands which element you mean and modifies it\n\n**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`\n\nand send by email.**Live feedback loop:** DOM morphing keeps scroll position and selection state. You see changes instantly without page reload flicker.\n\n**User** moves the mouse over any element — a blue outline appears with the element's tag and classes.\n\n**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).\n\nThe **agent** highlights elements in cyan to communicate visually — e.g. to ask \"Do you mean this one?\":\n\n```\nhighlight_element(\"section#pricing > div:nth-of-type(2)\", {\n label: \"Make this card wider?\",\n style: \"pulse\"\n})\n```\n\nBoth selections (pink = user, cyan = agent) can be visible simultaneously.\n\n**User** double-clicks any editable element to modify it directly in the browser:\n\n**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.\n\n**User** presses `c`\n\non a selected element to edit its Tailwind classes inline. Enter to apply, Escape to cancel.\n\n**User** selects a table cell — a floating toolbar appears with +Row, −Row, +Col, −Col controls.\n\nAdd component libraries via the CLI — DaisyUI components work out of the box with Tailwind v4:\n\n```\naceto add daisyui\n```\n\n**Content shortcuts**— type`[]`\n\nor`[x]`\n\nin a cell to insert a checkbox**Slash commands**— type`/list`\n\nin an empty element to open a modal for creating`