How does HTFlow export to Webflow?

HTFlow generates clean, semantic HTML and CSS that you can copy directly into Webflow's custom code embed or import as components. The code is optimized for Webflow's structure, so there's no cleanup needed.

Do I need coding experience to use HTFlow?

Not at all. HTFlow is designed for everyone — describe what you want in plain English, and the AI handles the technical details. You can also edit code directly if you prefer.

What's included in the free plan?

The free plan includes 1 website, MCP access, 10 Webflow copies per month, BYOK AI access, the visual and code editor, and standard HTML/CSS export. No credit card required.

Can I customize the generated designs?

Absolutely. Refine any generation through conversational editing, tweak it in the visual editor, or edit the code directly. Once exported to Webflow, you have full control.

What is the MCP server?

The MCP (Model Context Protocol) server lets you use HTFlow from AI-powered IDEs and agents like Cursor, Claude Code, Windsurf, and more. Build full Webflow websites directly from your coding environment.

Is the generated code responsive?

Yes. All generated components are mobile-first and fully responsive. They work on all devices right out of the box.

Windsurf

IDE

Configure Windsurf to use HTFlow MCP for website generation.

Endpoint

https://mcp.htflow.com/mcp

Config path

Windsurf MCP settings

Setup guide

Connect Windsurf to HTFlow

API tokens

Open Windsurf and start a New Cascade. Click the three-dot menu (···) in the top-right corner of the Cascade panel. At the bottom you'll see "0 MCPs" — click the settings icon next to it.

This opens the mcp_config.json file at ~/.codeium/windsurf/mcp_config.json. Paste the config below and replace YOUR_TOKEN with your real HTFlow API token. Windsurf uses serverUrl instead of url.

mcp_config.json

{
  "mcpServers": {
    "htflow": {
      "disabled": false,
      "headers": {
        "Authorization": "Bearer YOUR_TOKEN"
      },
      "serverUrl": "https://mcp.htflow.com/mcp"
    }
  }
}

Save the config and restart Windsurf. The MCP count should update to show "1 MCPs". You can now ask Cascade to generate a full website through HTFlow MCP.

Config snippet

mcp_config.json

{
  "mcpServers": {
    "htflow": {
      "disabled": false,
      "headers": {
        "Authorization": "Bearer YOUR_TOKEN"
      },
      "serverUrl": "https://mcp.htflow.com/mcp"
    }
  }
}

Windsurf

IDE

Configure Windsurf to use HTFlow MCP for website generation.

Endpoint

https://mcp.htflow.com/mcp

Config path

Windsurf MCP settings

Setup guide

Connect Windsurf to HTFlow

API tokens

Open Windsurf and start a New Cascade. Click the three-dot menu (···) in the top-right corner of the Cascade panel. At the bottom you'll see "0 MCPs" — click the settings icon next to it.

This opens the mcp_config.json file at ~/.codeium/windsurf/mcp_config.json. Paste the config below and replace YOUR_TOKEN with your real HTFlow API token. Windsurf uses serverUrl instead of url.

mcp_config.json

{
  "mcpServers": {
    "htflow": {
      "disabled": false,
      "headers": {
        "Authorization": "Bearer YOUR_TOKEN"
      },
      "serverUrl": "https://mcp.htflow.com/mcp"
    }
  }
}

Save the config and restart Windsurf. The MCP count should update to show "1 MCPs". You can now ask Cascade to generate a full website through HTFlow MCP.

Config snippet

mcp_config.json

{
  "mcpServers": {
    "htflow": {
      "disabled": false,
      "headers": {
        "Authorization": "Bearer YOUR_TOKEN"
      },
      "serverUrl": "https://mcp.htflow.com/mcp"
    }
  }
}