# Set up the Clean Pro Connector

Your personal link comes from your account page after you subscribe. Replace `<your-link>` below with it.

**Claude builds both website pages and landing pages.** The connector also works in ChatGPT and Codex, but there HubSpot's own plugin can only create and update landing pages. If you have a paid Claude plan, start with the Claude tab.

## Claude

Works on claude.ai and the Claude desktop app, on any paid plan. Builds website pages and landing pages. About 3 minutes.

1. Open **Settings**, then **Connectors**, then **Add custom connector**.

2. Name it **Clean Pro**. Paste your link as the URL: `<your-link>`
Leave the OAuth fields empty. A warning that the connector has no sign-in is expected, because the link itself is your key.

3. Open the Clean Pro connector's settings and set **Read-only tools** to **Always allow**, so Claude does not ask on every call.

4. Back in **Connectors**, choose **Browse connectors**, find **HubSpot** and connect it with your HubSpot login. Clean Pro supplies the theme knowledge, and HubSpot does the page writes.

5. In a new chat, open the **+** menu and make sure both **Clean Pro** and **HubSpot** are switched on.

### Check it works

Open a new chat with both connectors on and paste this.

```
Check my Clean Pro setup. Use the Clean Pro connector to list the Clean Pro Looks. Then use the HubSpot connector to list three of my website pages. Reply with one line per connector saying whether it worked, and if one failed, tell me what to fix.
```

## ChatGPT

**Landing pages only in ChatGPT.** Clean Pro works fully here, but HubSpot's own plugin for ChatGPT and Codex can create and update **landing pages** and can only read **website pages** ([HubSpot's list of what it can do](https://knowledge.hubspot.com/integrations/connect-your-hubspot-account-to-chatgpt)). We hope HubSpot adds website pages to its plugin soon. For website pages today, use the Claude tab.

Needs ChatGPT Plus, Pro, Business, Enterprise or Edu, set up on chatgpt.com in a browser. About 5 minutes. On Business and Enterprise, a workspace admin may have to allow developer mode first.

### 1. Turn on developer mode

1. Click your profile picture in the bottom left, then **Settings**, then **Security and login**.

2. Scroll to **Developer mode** and switch it on. ChatGPT marks it "Elevated risk" because it allows plugins OpenAI has not reviewed. Clean Pro is read-only and never changes anything in HubSpot.

### 2. Add Clean Pro

1. Click **Plugins** in the left sidebar, then the **+** button at the top right. Choose the option to add a plugin from an MCP server.

2. Name: `Clean Pro`
MCP server URL: `<your-link>`
Authentication: **No authentication**.

3. Tick the box confirming you trust the plugin, then create it.

### 3. Add HubSpot

1. In ChatGPT, open **Plugins**, search for **HubSpot** and install it. Click **Connect**, then **Continue to HubSpot**.

2. Sign in to HubSpot, choose the portal you build pages in, keep the permissions selected and click **Connect App**. A HubSpot Super Admin has to approve the plugin once for your portal.

3. Connected HubSpot to ChatGPT before February 23, 2026? Reconnect it, because older connections lack the permission to edit landing pages.

### 4. Build

1. Open a new chat, click **+** in the message box and switch on **Clean Pro** (under **Developer mode**) and **HubSpot**.

2. ChatGPT asks before each HubSpot change. Choose to remember your answer for the conversation so a full page does not need twenty approvals.

### Check it works

Open a new chat with Clean Pro and HubSpot on and paste this.

```
Check my Clean Pro setup. Use the Clean Pro connector to list the Clean Pro Looks. Then use the HubSpot plugin to list three of my landing pages. Reply with one line per connection saying whether it worked, and if one failed, tell me what to fix.
```

### Build a landing page

Use this prompt instead of the one for Claude. It asks for a landing page, which HubSpot's plugin can create. Replace the blanks and describe the page.

```
I build HubSpot landing pages with the Clean Pro theme. My portal ID is [PORTAL ID].

Use the Clean Pro connector for everything about the theme: call workflow once before you start, find_module or list_modules to choose modules, get_module for the exact insert path and fields, use its recipes and style presets, read design_rules before laying out a page, and run validate_overrides on every payload before you send it. Use the HubSpot connector for the actual page work. Never author a custom HubL template; always create pages from a Clean Pro template. Build it as a HubSpot landing page, not a website page: in ChatGPT and Codex, HubSpot's plugin can create and update landing pages but can only read website pages. Send content fields plus at most one style preset per section; leave every other style to the theme. The global header overlaps the first module, so the module at the top of the page needs extra top padding: the hero recipes carry it, and any other first module gets the under-header preset. Alternate section bands so the page does not read as one white sheet, and use one dark band for the closing call to action. Build the hero as a Magic Module with a photo or video background from find_image, the way every Clean Pro template does; use Hero Slider only if I ask for rotating slides, and then give it at least two. Where the content earns it, use one of the interactive Pro modules (Hover Swap, Scroll Swap, Before After, Card Flippers, Count Up) instead of a plain grid. For hero and section photos use find_image; leave logos, team photos, avatars and product screenshots as placeholders and tell me which images you still need. Never invent an image URL. Do not publish anything; build the draft, render it once, and show me.

Here is the page I want:
[DESCRIBE THE PAGE: what it is for, the sections you want, the copy or the key messages, and any links, images or forms you already have]
```

ChatGPT renames its menus often. If a label differs, look for developer mode and an option to add an MCP server. The values above stay the same.

## Codex

**Landing pages only in Codex.** Clean Pro works fully here, but HubSpot's own plugin for ChatGPT and Codex can create and update **landing pages** and can only read **website pages** ([HubSpot's list of what it can do](https://knowledge.hubspot.com/integrations/connect-your-hubspot-account-to-chatgpt)). We hope HubSpot adds website pages to its plugin soon. For website pages today, use the Claude tab.

For the Codex app, command line and editor extension, signed in with a paid ChatGPT account. About 5 minutes.

### 1. Add Clean Pro

Add this to **~/.codex/config.toml**, then restart Codex. The app, command line and editor extension all read this file.

```
[mcp_servers.clean-pro]
url = "<your-link>"
```

### 2. Add HubSpot

1. In the Codex app, open **Plugins**, search for **HubSpot** and install it. Click **Connect**, then **Continue to HubSpot**.

2. Sign in to HubSpot, choose the portal you build pages in, keep the permissions selected and click **Connect App**. A HubSpot Super Admin has to approve the plugin once for your portal.

3. Connected HubSpot to ChatGPT before February 23, 2026? Reconnect it, because older connections lack the permission to edit landing pages.

### Or let Codex do the Clean Pro part

Paste this into Codex. It edits the config, reminds you to connect HubSpot, and tests both.

```
Set up the Clean Pro connector for me in Codex.

1. Add this to ~/.codex/config.toml, creating the file if needed and keeping anything already there:
[mcp_servers.clean-pro]
url = "<your-link>"
2. Remind me to install the HubSpot plugin from the Plugins tab in the Codex app and connect my HubSpot portal, then wait until I say it is done.
3. Test both: list the Clean Pro Looks with the Clean Pro connector, and list three of my HubSpot landing pages with the HubSpot plugin. Tell me whether each one worked.

Note: HubSpot's plugin can create and update landing pages but only read website pages, so build landing pages.
```

### Check it works

Open a new chat with Clean Pro and HubSpot on and paste this.

```
Check my Clean Pro setup. Use the Clean Pro connector to list the Clean Pro Looks. Then use the HubSpot plugin to list three of my landing pages. Reply with one line per connection saying whether it worked, and if one failed, tell me what to fix.
```

### Build a landing page

Use this prompt instead of the one for Claude. It asks for a landing page, which HubSpot's plugin can create. Replace the blanks and describe the page.

```
I build HubSpot landing pages with the Clean Pro theme. My portal ID is [PORTAL ID].

Use the Clean Pro connector for everything about the theme: call workflow once before you start, find_module or list_modules to choose modules, get_module for the exact insert path and fields, use its recipes and style presets, read design_rules before laying out a page, and run validate_overrides on every payload before you send it. Use the HubSpot connector for the actual page work. Never author a custom HubL template; always create pages from a Clean Pro template. Build it as a HubSpot landing page, not a website page: in ChatGPT and Codex, HubSpot's plugin can create and update landing pages but can only read website pages. Send content fields plus at most one style preset per section; leave every other style to the theme. The global header overlaps the first module, so the module at the top of the page needs extra top padding: the hero recipes carry it, and any other first module gets the under-header preset. Alternate section bands so the page does not read as one white sheet, and use one dark band for the closing call to action. Build the hero as a Magic Module with a photo or video background from find_image, the way every Clean Pro template does; use Hero Slider only if I ask for rotating slides, and then give it at least two. Where the content earns it, use one of the interactive Pro modules (Hover Swap, Scroll Swap, Before After, Card Flippers, Count Up) instead of a plain grid. For hero and section photos use find_image; leave logos, team photos, avatars and product screenshots as placeholders and tell me which images you still need. Never invent an image URL. Do not publish anything; build the draft, render it once, and show me.

Here is the page I want:
[DESCRIBE THE PAGE: what it is for, the sections you want, the copy or the key messages, and any links, images or forms you already have]
```

## Claude Code

Run this once in a terminal. Claude Code then has Clean Pro in every project.

```
claude mcp add --transport http clean-pro <your-link>
```

### Or let Claude Code do all of it

Paste this into Claude Code. It adds Clean Pro, walks you through connecting HubSpot, and tests both.

```
Set up the Clean Pro connector for me in Claude Code.

1. Run: claude mcp add --transport http clean-pro <your-link>
2. Then help me connect HubSpot's own MCP server, https://mcp.hubspot.com, so you can create and edit HubSpot website and landing pages. Follow HubSpot's guide at https://developers.hubspot.com/docs/apps/developer-platform/build-apps/integrate-with-the-remote-hubspot-mcp-server and walk me through anything I have to click in HubSpot myself.
3. When both are connected, test them: list the Clean Pro Looks with the Clean Pro connector, and list three of my website pages with the HubSpot connector. Tell me whether each one worked.
```

## Cursor

Add this to **~/.cursor/mcp.json** for every project, or **.cursor/mcp.json** for one project.

```
{ "mcpServers": { "clean-pro": { "url": "<your-link>" } } }
```

### Or let Cursor's agent do all of it

Paste this into Cursor's agent chat. It adds Clean Pro, walks you through connecting HubSpot, and tests both.

```
Set up the Clean Pro connector for me in Cursor.

1. Add this server to my global Cursor MCP settings (~/.cursor/mcp.json), keeping any servers already there: { "mcpServers": { "clean-pro": { "url": "<your-link>" } } }
2. Then help me connect HubSpot's own MCP server, https://mcp.hubspot.com, so you can create and edit HubSpot website and landing pages. Follow HubSpot's guide at https://developers.hubspot.com/docs/apps/developer-platform/build-apps/integrate-with-the-remote-hubspot-mcp-server and walk me through anything I have to click in HubSpot myself.
3. When both are connected, test them: list the Clean Pro Looks with the Clean Pro connector, and list three of my website pages with the HubSpot connector. Tell me whether each one worked.
```