Product Studio in Claude Code on the web

Before you start

• A Claude plan that includes Claude Code on the web (Pro, Max, Team or Enterprise), and a GitHub account.
• A Xelent API account with credits and an API key: Dashboard → API keys.
• To submit listings: Etsy and Alibaba.com connected on the Marketplaces page (guide). You can connect them later.

On a computer you can also use the Claude desktop app or Claude Code in a terminal: install the skill as described in its repository. This page is for the web version.

1. Make your copy of the starter

Claude Code on the web works on a GitHub repository and only loads skills saved inside it. The starter repository already has the Product Studio skill in it.

1. Open github.com/Xelent143/xelent-product-studio-starter.
2. Click Use this template → Create a new repository.
3. Choose Private, give it a name (for example my-product-studio) and create it.

2. Open Claude Code on the web

Go to claude.ai/code, connect GitHub when it asks, and pick the repository you just made.

3. Set up the cloud environment

Open the environment menu, then select Add cloud environment (or hover over your environment and select its settings icon). Set two things:

• Network access: Full. The research step reads many websites, and your images come from xelentapi.com. With the default setting Claude cannot reach us.
• Environment variables: one line with your own API key in place of the example:
  XELENT_API_KEY=sk-your-key-hereCopy

Anyone who uses this environment can read the key, so keep the environment to yourself. If you ever share it, create a separate key for it with a spending limit.

4. Start a session

Start a session in that environment and say what you want. For example:

Or, for a product video from photos you already uploaded to the repository:

What to expect

• A few questions first: your brand, what your factory can make, and whether you want photos at 2K (Nano Banana 2) or 4K (GPT Image 2.5 Sunburst). See prices.
• Credits, before and after: before each batch of images Claude tells you how many images, the credits they use and your balance after. When the batch is done it tells you the credits used and the credits left. Every job is also in your Job history.
• Images as links: the designs and photos arrive as links you open in your browser, and the review boards are saved to your repository on GitHub. Nothing is photographed before you approve a design, and nothing goes to Etsy or Alibaba until you approve the listing and say "submit".
• Your logo: upload the logo file to your repository first (on GitHub: Add file → Upload files) and tell Claude its name.
• Close the tab any time: progress is saved to your repository after each step. If the cloud machine was reset while you were away, images you already paid for are downloaded again for free. Image files stay on Xelent API for 7 days; download anything you want to keep.

Troubleshooting

Claude says it cannot reach xelentapi.com

Set the environment's network access to Full, then start a new session.

"No Xelent API key"

Check the environment variable is spelled exactly XELENT_API_KEY, then start a new session. Never paste the key into the chat.

Claude does not know the Product Studio skill

Make sure the session is on your copy of the starter repository: it must contain the folder .claude/skills/xelent-product-studio.

"This API key's spending limit is …"

The key has its own limit, separate from your balance. Raise or remove it on API keys.

An image link says "File not found or expired"

Image files are kept for 7 days. Ask Claude to make the image again; it tells you the cost first.

Still stuck?

Email support@xelentapi.com with a screenshot. Never send us your API key.