Setup guide · Published July 6, 2026

Use ApparelHub from Claude on the web (claude.ai)

The fastest way to use ApparelHub from Claude on the web is the hosted connector. You add one URL as a custom connector, sign in to ApparelHub once, and Claude gets a full set of ApparelHub tools linked to your account. No API key to paste, no network allowlist, no bootstrap prompt. This guide covers the one-click connector first, then the API-key method for people running a full agent harness.

The one-click way (recommended)

You need a Claude.ai account and an ApparelHub account. That is all.

In Claude.ai, open Settings, then Connectors (on some plans this lives under "Add connectors" in the sidebar).
Choose Add custom connector.
Paste this URL and confirm:
```
https://mcp.apparelhub.ai
```
Claude opens an ApparelHub sign-in page. Sign in and click Approve. That links the connector to your ApparelHub account. (If you are already out of API key slots, the screen tells you and offers a quick way to free one or upgrade.)
Claude loads the ApparelHub tools. You are connected.

Now ask Claude something like:

List my ApparelHub stores.

Claude calls ApparelHub as your account and answers. From here it can design apparel, build products, sync them to your connected Shopify, WooCommerce, or Wix stores, and manage orders end to end.

What you can do once connected

The connector gives Claude typed ApparelHub tools with the platform's hard-won conventions baked in, so it does the right thing without you teaching it:

Generate AI designs and check they have real transparency before print.
Build full products across colors, sizes, and variants.
Sync to your connected sales channels and fulfillment providers.
Track orders, payment state, and fulfillment status.

The same connector works in Perplexity (add it as a custom connector the same way), and in ChatGPT on Business or Enterprise plans.

Prefer to drive the raw API? (agent harnesses and SDKs)

If you run a full agent harness (Claude Code, Cursor, Cline, Aider, Codex) or call ApparelHub from your own code, you can use an API key directly instead of the connector. The rest of this guide covers that path, including the network setup Claude on the web needs when it calls the raw API with a pasted key rather than the connector.

Why this is necessary

Claude on claude.ai runs your conversations in a sandbox. By default the sandbox can install packages from common package managers and not much else. Domain allowlists let you grant access to specific hosts without throwing the gate fully open. It's a good security model. The downside is that any service you want Claude to actually talk to has to be explicitly named.

ApparelHub talks to Claude across three hosts:

api.apparelhub.ai is the Agent API. Every product creation, mockup generation, store sync, and order operation routes through here. Without it allowlisted, nothing works.
cdn.apparelhub.ai is where we serve the generated images, mockup previews, and design assets your products will use. Without it allowlisted, Claude can read your product list but it can't see the actual artwork.
apparelhub.ai is the marketing site, the installer script, and the OpenAPI docs. Claude reaches here when it wants to verify the install or fetch reference docs.

Allowlist the three domains

In claude.ai, open the Settings panel. Click Capabilities on the left.

Find Allow network egress at the top of the page and toggle it on.
Under Domain allowlist, switch from "Package managers only" to allow additional domains.
In the Additional allowed domains field, paste each of these on its own line and click Add after each one:

api.apparelhub.ai
cdn.apparelhub.ai
apparelhub.ai

When you're done, your allowed-domains list should show all three entries with a delete icon next to each. The settings panel saves automatically.

Generate an API key

You need a key for Claude to authenticate against the Agent API. Go to apparelhub.ai/developer/api-keys and click Create Key. Copy the value the dialog reveals. The dialog only shows your key once, so put it somewhere safe before you close it.

Every plan includes at least one API key, so the Create Key wizard is available on every tier, including Free. Paid plans allow more keys as you scale. See apparelhub.ai/pricing for the breakdown.

Paste the bootstrap prompt into Claude

Claude on the web doesn't have a filesystem to install the apparelhub-skills repo into. Instead you paste a short prompt that gives Claude the conventions, the authentication header, and the critical field names. The prompt lives at:

github.com/ApparelHub-AI/apparelhub-skills/blob/main/apparelhub/BOOTSTRAP-PROMPT.md

Copy the block between the ===== markers and paste it into Claude's system prompt or your project's custom instructions field. Then send Claude your API key in the first message:

My ApparelHub API key is <paste-your-key-here>.

Verify the setup works

Send Claude one short message to confirm everything is wired up:

List my ApparelHub products.

Claude should make an authenticated call to https://api.apparelhub.ai/agents/v1/product and respond with your product catalog. If it instead says it can't reach the host or the request is blocked, you missed a domain in the allowlist. Double check that all three are present in the Additional allowed domains list and try again.

If Claude says the response was 401 or 403, your key isn't valid for this environment. Generate a new key from the developer dashboard and try again.

What you can do once it works

The bootstrap prompt teaches Claude the 10-step product creation pipeline plus the field-name traps that have tripped up every first integration (the API uses provider_uuid not merchandise_provider_uuid, product_ref_id not provider_product_ref_id, price not retail_price). With those conventions loaded, Claude can:

Generate AI designs and verify they have real transparency before going to print
Build full product configurations across colors, sizes, and variants
Push products to your connected Shopify, WooCommerce, or Wix store
Manage orders end-to-end including payment state and fulfillment status

The deeper references for product-specific workflows (embroidery, all-over print, luggage tags, pillows, water bottles) live in the apparelhub-skills repo. The bootstrap prompt points Claude at those URLs when it needs to drill down on a specific category.

Going beyond claude.ai

Most merchants who get past the first product end up wanting more control than a chat UI gives them. The full skill (with packaged scripts, batch helpers, and inline verification) installs in seconds on Claude Code via:

curl -fsSL https://apparelhub.ai/install-skill.sh | bash

That CLI install path has no network sandbox concerns because Claude Code runs locally on your machine. If you find yourself fighting the allowlist often, Claude Code is the upgrade. We have a dedicated landing page at apparelhub.ai/agents that walks through every install path including custom harnesses like OpenClaw, Cline, and Aider.

If you hit a wall on Claude Web that this guide doesn't cover, open a discussion on the skill repo and the team that maintains the skill will jump in.