MCP connected assistants

Connect Claude Code, Cursor, VS Code/Grok, or another Streamable HTTP MCP client to PageDesigner and operate it safely.

PageDesigner includes a token-authenticated Model Context Protocol server. An approved external assistant can inspect the storefront and PageDesigner pages, create and edit pages, reuse library models, manage translations, update SEO, and perform other exposed operations.

Most page editors do not need MCP. Use the built-in AI Agent for work inside one editor tab. MCP is for administrators and teams that deliberately connect an external client.

Security boundaryCopy Anchor Link

An MCP token grants broad PageDesigner access for the installation. It is not limited to the page open in a browser.

• Treat it like an administrator password.
• Create one token per client or person.
• Store it only in the client's secret configuration.
• Never paste it into an AI chat, Git repository, screenshot, ticket, or document.
• Revoke it immediately if exposure is suspected.

Server detailsCopy Anchor Link

The connection requires an active MCP entitlement and valid token.

Create a tokenCopy Anchor Link

1. Open Extensions → Page Designer.
2. Select MCP.
3. Enter a name that identifies the client and environment, such as Claude Code — Alice — Production.
4. Select Generate token.
5. Copy the pdmcp_... value immediately.
6. Save it in the approved client configuration.

The secret is shown once. The token list later shows its name, prefix, created time, last-used time, and active/revoked state—not the full value.

Configure Claude CodeCopy Anchor Link

Use the command generated in the MCP dialog. The general form is:

claude mcp add --transport http page-designer \
  --header "Authorization: Bearer pdmcp_REPLACE_WITH_TOKEN" \
  https://YOUR-PAYMENTER.example/extensions/page-designer/mcp

Do not commit shell history or configuration containing the token to a repository.

Configure an HTTP-capable clientCopy Anchor Link

Cursor, supported VS Code clients, and other MCP clients can use:

{
  "mcpServers": {
    "page-designer": {
      "type": "http",
      "url": "https://YOUR-PAYMENTER.example/extensions/page-designer/mcp",
      "headers": {
        "Authorization": "Bearer pdmcp_REPLACE_WITH_TOKEN"
      }
    }
  }
}

Some clients omit the type field:

{
  "mcpServers": {
    "page-designer": {
      "url": "https://YOUR-PAYMENTER.example/extensions/page-designer/mcp",
      "headers": {
        "Authorization": "Bearer pdmcp_REPLACE_WITH_TOKEN"
      }
    }
  }
}

Use the exact format documented by the client version you installed.

Use a stdio bridge only when necessaryCopy Anchor Link

For a client that cannot connect to Streamable HTTP directly, the PageDesigner dialog provides an mcp-remote bridge configuration:

{
  "mcpServers": {
    "page-designer": {
      "command": "npx",
      "args": [
        "-y",
        "mcp-remote@latest",
        "https://YOUR-PAYMENTER.example/extensions/page-designer/mcp",
        "--header",
        "Authorization: Bearer pdmcp_REPLACE_WITH_TOKEN"
      ]
    }
  }
}

Native HTTP is preferable because it removes a local bridge dependency. Review mcp-remote and your package-execution policy before using npx -y.

Connection handshakeCopy Anchor Link

The MCP dialog also provides a cURL probe. A sanitized example:

curl -sS -X POST "https://YOUR-PAYMENTER.example/extensions/page-designer/mcp" \
  -H "Authorization: Bearer pdmcp_REPLACE_WITH_TOKEN" \
  -H "Content-Type: application/json" \
  -H "Accept: application/json, text/event-stream" \
  -d '{"jsonrpc":"2.0","id":1,"method":"initialize","params":{"protocolVersion":"2025-03-26","capabilities":{},"clientInfo":{"name":"probe","version":"1.0.0"}}}'

A successful response identifies paymenter-page-designer, negotiates the protocol, and advertises tools, resources, and prompts.

First session workflowCopy Anchor Link

Tell the assistant to:

1. Read pagedesigner://agent-guide.
2. List and read the PageDesigner design docs.
3. List pages.
4. Inspect the target page with a shallow component context.
5. Read storefront products/plans before writing catalog or pricing copy.
6. List valid link targets before setting a CTA.
7. Prefer an existing library model.
8. Make surgical changes.
9. Leave pages unpublished unless publication is explicitly intended.

Example:

Read the PageDesigner agent guide and design docs. List pages, inspect draft page 12, and review it for hierarchy, responsiveness, theme-token usage, accessibility, and broken CTA targets. Do not change or publish anything.

MCP resourcesCopy Anchor Link

Static resourcesCopy Anchor Link

• pagedesigner://agent-guide
• pagedesigner://tools-overview
• pagedesigner://docs/agent-guide
• pagedesigner://docs/best-practices
• pagedesigner://docs/theme-colors
• pagedesigner://docs/classes-and-layout
• pagedesigner://docs/components

Resource templatesCopy Anchor Link

• pagedesigner://pages/{page_id}/context
• pagedesigner://pages/{page_id}/html
• pagedesigner://docs/{doc_id}

MCP promptsCopy Anchor Link

Prompts guide the client; tools perform the actual operations.

What the server can doCopy Anchor Link

The MCP server exposes:

• page listing, metadata, duplication, deletion, publication, and navigation settings;
• storefront categories, products, plans, prices, summaries, and valid link targets;
• page canvas context, HTML, CSS, component search, and stable component IDs;
• library search, placement, custom component creation, and safe forking;
• component insert, replace, remove, move, text, class, attribute, and link changes;
• locale and translation lifecycle;
• page-level custom code and controlled script append/replace;
• design documentation and agent instructions.

See MCP tools reference.

Agent design rulesCopy Anchor Link

PageDesigner instructs connected agents to:

• read the design docs before inventing a layout;
• prefer library models;
• use actual storefront data;
• use valid link targets;
• use theme color tokens;
• keep changes surgical;
• preserve responsive classes unless layout is in scope;
• avoid scripts inside canvas HTML;
• fork originals instead of overwriting them;
• report only tool-confirmed success;
• avoid publication without intent.

Revoke a tokenCopy Anchor Link

1. Open MCP from the Page Designer list.
2. Find the token by name and visible prefix.
3. Select Revoke.
4. Confirm the client can no longer connect.
5. Remove the token from the client configuration and secret store.

Revocation does not delete pages or components.

TroubleshootingCopy Anchor Link

401 or token errorCopy Anchor Link

• Confirm the full token was copied at creation.
• Confirm Bearer and the space are present.
• Confirm the token was not revoked.
• Confirm no quotation marks became part of the stored secret.

403 or license errorCopy Anchor Link

Confirm Hosted is enabled, the PageDesigner license is active, and the entitlement includes MCP.

Client cannot negotiate transportCopy Anchor Link

Confirm it supports Streamable HTTP and protocol 2025-03-26. Use the generated stdio bridge only when native HTTP is unavailable.

TLS or proxy errorCopy Anchor Link

Confirm the public Paymenter URL uses a valid certificate, proxies POST/GET/DELETE/OPTIONS to the endpoint, preserves authorization headers, and does not buffer or block the expected response type.

Tools work but expected store data is missingCopy Anchor Link

The MCP tools follow PageDesigner and storefront visibility rules. Hidden products are excluded unless the tool call explicitly includes them.