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 — paste your own API key and pick a model:

• Claude (Anthropic) — Claude Opus 5, Claude Sonnet 5 or Claude Haiku 4.5.
• OpenAI — GPT-5, GPT-5 mini or GPT-4.1.

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 app publishes its tool catalog on a loopback HTTP server (127.0.0.1 only — nothing leaves the Mac).
3. Install the html-designer-mcp bridge (next step). It is a small STDIO program that forwards tools/list and tools/call to the running app; it knows nothing about the tools itself, so app updates never require a new bridge.
4. Keep HTML Designer open: the tools act on its windows, projects and documents. When the app is closed or automation is off, calls return not_connected.

Install the html-designer-mcp bridge

The bridge is an open-source Swift package (macOS 14 or later). Build it once and copy the binary somewhere stable:

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

No token, no port, no paths 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"
    }
  }
}

The tool catalog

The catalog is published by the app (GET /mcp/tools) so the list below reflects the current build; call tools/list to see the live one.

Projects

Windows & tabs

Files

Editor

Preview

Remote sites

Settings & logs