Get started
MCP server
Use Claude Code, Cursor, VS Code, Windsurf or Claude Desktop? Connect clothsy-mcp and ask your agent to add try-on. It picks the right setup for your stack, writes the files and checks your key, usually in a few minutes.
What it does
The Model Context Protocol is a standard way for AI coding assistants to call outside tools. clothsy-mcp gives your assistant the knowledge in these docs as tools it can call while it works on your code:
- it works out whether your project needs code at all, or just the Shopify app or WooCommerce plugin;
- it hands the agent a complete plan with every file to create, written for your framework;
- it answers questions about endpoints, limits and error codes without the agent guessing;
- it confirms your API key works and shows how many credits you have left.
It runs on your own machine through npx. It has no dependencies, needs Node.js 18 or later, and only goes online for the two tools that talk to the API.
Install
Add the server to your client. The API key is optional: without it, detection, plans, docs and error help all still work. You only need it for clothsy_check_setup and clothsy_test_tryon. Get one under Developer API in the Clothsy AI platform.
claude mcp add clothsy --env CLOTHSY_API_KEY=clothsy_live_... -- npx -y clothsy-mcp
# or, without a key (planning, docs and error help still work):
claude mcp add clothsy -- npx -y clothsy-mcpRestart the client after you edit its config. Any other MCP client that can launch a local server works the same way: run npx -y clothsy-mcp, with CLOTHSY_API_KEY in its environment if you want the key checks.
Sharing the setup with your team? Commit a project config that reads the key from each person's own environment rather than containing it:
// .mcp.json — safe to commit: the key comes from each developer's shell
{
"mcpServers": {
"clothsy": {
"command": "npx",
"args": ["-y", "clothsy-mcp"],
"env": { "CLOTHSY_API_KEY": "${CLOTHSY_API_KEY}" }
}
}
}Tools
| Tool | What it does | Calls the API |
|---|---|---|
clothsy_detect_stack | Reads your package.json and/or a short description and recommends a path: the Shopify app, the WooCommerce plugin, the Next.js helpers, the SDK on a Node.js server, Python, or the plain HTTP API. Explains why. | None |
clothsy_integration_plan | For nextjs, node, python or http: ordered steps, the full contents of every file to add or change, environment setup and a checklist to verify the result. | None |
clothsy_docs | Returns one section of these docs as Markdown: overview, auth, sdk, nextjs, endpoints, errors, limits, images, consent-privacy or ai-label. | None |
clothsy_explain_error | Takes an error code, HTTP status or message and says what it means, the likely cause, the fix and whether retrying helps. | None |
clothsy_check_setup | Checks the key in the server's own environment and reports your remaining credits. It has no key argument and never prints the key. | GET /account |
clothsy_test_tryon | Runs one real try-on from two public image URLs and returns the result link. Spends 1 credit on success, so it refuses to run unless called with confirmSpend: true. | One try-on |
The plans follow the same rules as the rest of these docs: the key stays on your server, garment images come from your own catalogue, shoppers tick a consent box before a photo is sent, and results are captioned as AI-generated. See Next.js and Add try-on to a custom store for the same steps written out by hand.
Resources and prompt
- Resources. Each docs section is also available to read directly as
clothsy://docs/<topic>, for exampleclothsy://docs/errors. Clients that let you attach resources to a chat can pull these in as context. - Prompt.
add_clothsy_tryontakes an optionalstackand gives the agent the whole job in one go: detect the stack, get the plan, implement it, keep the key server-side, and finish withclothsy_check_setup. In Claude Code it appears as a slash command.
Example
A typical session in a Next.js project looks like this:
You: Add Clothsy try-on to my Next.js store.
Agent: → clothsy_detect_stack { packageJson: "…" }
Next.js 15 detected. Recommended: the clothsy-ai/next route helper
with the TryOnButton component.
→ clothsy_integration_plan { stack: "nextjs",
productLookup: "getProduct(slug) in lib/catalog.ts" }
Created app/api/tryon/route.ts (resolveProduct uses getProduct)
Created components/ProductTryOn.tsx
Updated app/products/[slug]/page.tsx: button next to "Add to cart"
Added CLOTHSY_API_KEY= to .env.local (git-ignored). Fill it in.
Ran tsc --noEmit: no errors.
→ clothsy_check_setup
Key is valid (clothsy_live_…). Credits remaining: 20.
Done. Add CLOTHSY_API_KEY to your Vercel project settings too,
then redeploy.The agent adapts the plan to your code: it finds how your product pages load products and uses that in resolveProduct, rather than trusting anything the browser sends.
Security
- The key lives only in the environment. The server reads
CLOTHSY_API_KEYfrom its own environment. No tool accepts a key as an argument, so you never paste it into a chat, and output shows at most theclothsy_live_prefix. - Keep keys out of git. Put real keys in user-level config (such as
~/.cursor/mcp.json), use your client's input variables, or reference a shell variable as in the shared config above. - Spending needs a yes.
clothsy_test_tryonuses one credit when it succeeds and does nothing unless called withconfirmSpend: true. Good agents ask you first. Use a photo of a consenting adult, such as yourself. - Nothing else leaves your machine. Apart from those two tools, everything is answered locally from content bundled in the package.
- Your store has its own key setting. The key in your MCP config is only for the agent's checks. Your store's server still needs
CLOTHSY_API_KEYin its own environment, such as.env.localor your host's secret settings.

