DEV Community

Cover image for How to Connect HtmlSave with ChatGPT via MCP: Build and Host Websites Using AI
Html Save
Html Save

Posted on

How to Connect HtmlSave with ChatGPT via MCP: Build and Host Websites Using AI

#mcp #ai #webdev #programming

Imagine prompting ChatGPT to design a website and watching it instantly write the code, organize the assets, and publish it live to the web with a public URL—all within seconds.

With Model Context Protocol (MCP) support, you can connect your HtmlSave account directly into ChatGPT as a custom tool. In this tutorial, we will walk you through setting up the HtmlSave MCP server in ChatGPT and using it to generate and host multi-file web applications automatically.

Prerequisites

Before starting, ensure you have:

  1. An active account on HtmlSave.com (with API / MCP access enabled).
  2. A ChatGPT Plus/Team/Enterprise account supporting MCP plugins/integrations.

Step 1: Generate Your MCP Server URL on HtmlSave

HtmlSave provides an authenticated MCP server endpoint tied directly to your account.

  1. Go to htmlsave.com and log in.
  2. Click your Profile icon in the top navigation bar.
  3. Scroll down to the Advanced Settings section and open the API Token tab.
  4. Click + Generate API Token (or refresh if needed).
  5. Locate the MCP Server URL field at the bottom.
  6. Click the Copy button next to the MCP Server URL (it will look like https://mcp.htmlsave.com/?token=hs_tok_...).

Step 2: Add HtmlSave as a Custom MCP Server in ChatGPT

Now configure ChatGPT to communicate with your HtmlSave server endpoint.

  1. Open chatgpt.com.
  2. Click your profile name in the bottom-left corner and select Settings.
  3. In the sidebar, navigate to Integrations / Plugins.
  4. Click Browse directory in the top right corner.
  5. Click the Add dropdown menu in the upper-right corner and select Add custom MCP server.
  6. Fill in the server details:
    • Name: HTMLSave
    • Connection: Select Server URL and paste your copied MCP URL from Step 1.
    • Authentication: Select No authentication (your secret token is already embedded in the URL).
    • Check the box: "I understand and want to continue".
  7. Click Create as a plugin.
  8. In the confirmation dialog, click Connect HTMLSAVE. Once verified, a green banner confirming "HTMLSave is now connected" will appear.

Step 3: Prompt ChatGPT to Build and Deploy Your Website

Once connected, you can call HtmlSave directly in any conversation using @HTMLSave.

  1. Start a New Chat in ChatGPT.
  2. In the message box, mention the tool: @HTMLSave.
  3. Enter your prompt. For example:

Prompt:

@HTMLSave Can you create a simple site using Three.js CDN to create a beautiful clock widget with separate HTML, CSS, and JS files.

  1. When the permission prompt appears ("Allow ChatGPT to use HTMLSave?"), click Always allow.
  2. ChatGPT will process your request, generate your files (index.html, styles.css, app.js), deploy them via the MCP connection, and return:
    • A live link (e.g., https://yoursubdomain.htmlsave.net).
    • An overview of created files and features.

Step 4: Verify Your Live Site and Assets

  1. Test the Live URL: Click the link provided by ChatGPT in the response to view your interactive, fully functioning website running live on the internet.
  2. Inspect Files in HtmlSave:
    • Return to your HtmlSave Dashboard > Manage Sites.
    • Your newly created website will appear in your site list.
    • Click Update Site to view and edit individual assets (home page, styles.css, app.js, etc.), check view analytics, or adjust subdomain settings.

Summary

By bridging ChatGPT with HtmlSave via MCP, you transform ChatGPT from an AI that merely writes code into an autonomous agent capable of deploying production-ready landing pages, interactive widgets, and multi-file web apps on demand.

Top comments (0)