AI Chat and MCP server

AI Chat

AI Chat lives in the panel under the editor (⌥⌘T toggles it; it can also be detached into a floating window). With a project folder open, the assistant can create and update files — HTML, CSS, JavaScript and SVG — right in the folder, or asks a question when something is unclear. Type "add a pricing section with three plans" or "make the nav sticky and responsive" and review the result in the live preview.

Choose the model

Settings ▸ Assistant — choose an available assistant and model:

• Claude or Gemini — enter your own API key and choose an available model. Requests and the project context included for the task are sent to that provider.
• Apple Intelligence — runs on device without an API key. Requires macOS 26 or later and a compatible Mac with Apple Intelligence turned on.

Built-in validation checks the document and reports issues before you publish, so you can ask the assistant to fix exactly what the validator found.

Turn local automation on

1. Install HTML Designer from the Mac App Store and open it.
2. Open Settings ▸ Automation and turn on Allow Local Automation. The connection stays on your Mac; the assistant you connect may use cloud services, and remote-file actions use your hosting connection.
3. Install the html-designer-mcp command (next step).
4. Keep HTML Designer open: the assistant acts on its windows, projects and documents. When the app is closed or automation is off, the assistant cannot reach it.

Install the html-designer-mcp command

Build the command once (macOS 14 or later) and copy it somewhere stable:

cd mcp
swift build -c release
install -m 755 .build/release/html-designer-mcp /usr/local/bin/html-designer-mcp

There is nothing else to configure.

Claude Code

claude mcp add html-designer -- /usr/local/bin/html-designer-mcp
# add --scope user to make it available in every project

Then ask, for example: "open the portfolio project, read index.html and fix the broken image paths" or "upload the css folder to the production site".

Claude Desktop and other mcpServers clients

Add to ~/Library/Application Support/Claude/claude_desktop_config.json (or any client that uses the same shape — VS Code .vscode/mcp.json under servers, Antigravity's MCP configuration) and restart the client:

{
  "mcpServers": {
    "html-designer": {
      "command": "/usr/local/bin/html-designer-mcp"
    }
  }
}

What the assistant can do

Once connected, the assistant can open and manage your projects, read and write project files, find and replace text across a project, reindent and validate documents, start and stop the preview, and work with your saved hosting connections and remote files. Review its changes in the editor and preview before saving or publishing.