> ## Documentation Index
> Fetch the complete documentation index at: https://docs.replo.app/llms.txt
> Use this file to discover all available pages before exploring further.

# Use Replo with Your AI Tools

> Connect Replo, copy a starter prompt, and build or edit a site from the AI tool you already use.

Use Claude, ChatGPT, or your coding client to work on your Replo sites. Choose your setup below, connect your account, and copy a first request.

## What you can do

* **Turn a product page into a campaign.** Change the hero, use your existing product photos, and preview the draft.
* **Bring your brand into a page.** Use a Figma design or website as the starting point for your brand kit.
* **Build with your store's data.** Create a gift guide from your connected product catalog.
* **Edit locally with your own AI plan.** Ask your coding client to clone a site, run it on your computer, and show edits in a live preview. Commit and push after each completed editing turn to keep the Replo draft in sync. Publish separately.

Have your Replo **project name** and **site name** ready. Replace every bracketed value in a prompt before sending it. If you do not know the names, ask your connected client to list your Replo projects and their sites first.

## Choose your setup

<Tabs>
  <Tab title="Claude or ChatGPT">
    Use this path to work from a chat without setting up a local coding environment.

    1. Open the official [Replo connector in Claude](https://claude.ai/directory/replo) or [Replo plugin in ChatGPT](https://chatgpt.com/plugins/plugin_asdk_app_6a70d49bbd808191856702565c3be463).
    2. Connect it and sign in to the Replo account with access to your project. Complete **Allow access** when prompted. Your AI plan and workspace must allow the connection.
    3. Start a chat with Replo enabled and send this request:

    ```text theme={null}
    Use Replo to update [site name] in [project name] for a gift campaign. Change the hero headline to “A gift they'll actually use.” Use an existing product photo and link the main shopping button to that product. Keep the brand and navigation. Make a draft only; do not publish. Check the work until it finishes, then show me the preview and summarize the changes.
    ```

    Open the returned preview and check the headline, image, and shopping link. Give follow-up feedback in the same chat.

    [Watch the connection demo and follow the full guide](/mcp/use-with-claude-and-chatgpt).
  </Tab>

  <Tab title="Custom MCP server">
    Use this path to give Cursor, Claude Code, or another compatible AI client access to Replo. You connect to Replo's hosted server; you do not need to build or host one.

    1. In your client's MCP settings, add a remote server named `Replo` with this URL:

    ```text theme={null}
    https://api.replo.app/v1/mcp
    ```

    2. Complete the browser sign-in and select **Allow access**. The connection uses OAuth; do not enter a Replo API key in place of signing in.
    3. Send this request in your connected client:

    ```text theme={null}
    Use Replo to find [site name] in [project name]. Review its homepage and suggest three specific improvements to help visitors understand the product and find the main shopping action. Make no changes yet. Include the site's preview link so I can review your suggestions.
    ```

    You should receive suggestions tied to your actual site. Pick one and ask the client to make it as a draft.

    [Copy the exact Cursor or Claude Code setup](/mcp/connect-with-other-ai-clients), then [install skills](/mcp/skills) for page-building guidance.
  </Tab>

  <Tab title="Install skills">
    Use this path to give your coding client Replo's instructions for branding, product data, and page edits. Skills add guidance; the MCP connection provides account access.

    1. Open the workspace you want to use in your coding client.
    2. Connect the Replo MCP server using the previous path.
    3. Paste this into the client's chat:

    ```text theme={null}
    Read https://docs.replo.app/mcp/skills and install the official replohq/skills skills into this workspace for this coding client. Confirm the saved locations and report any installation failures. Then use the relevant skills to review [site name] in [project name] and suggest three mobile shopping improvements. Do not edit or publish the site yet.
    ```

    Check the installation summary, then ask for the improvement you want. For example: “Apply the compact hero suggestion, keep the existing product data, and show me the draft preview.”

    Replo skills for the official Claude and ChatGPT directory connections are still under review. These workspace installation steps are for coding clients.

    [Watch the skills demo and try Figma, catalog, and mobile examples](/mcp/skills).
  </Tab>

  <Tab title="Edit local Git sites">
    Use this path to edit with your coding client's AI plan and see changes on your computer before sending them back to Replo.

    1. Open a local workspace in a coding client that can run terminal commands. You need Git, Node.js, and pnpm.
    2. Connect Replo using one of the paths above. The setup request below checks for skills and installs any that are missing.
    3. Send this request:

    ```text theme={null}
    Use Replo and https://docs.replo.app/git/overview to clone [site name] from [project name] into a new local folder. Set up repository read and write access. After each editing turn, run the site's checks, commit and push that turn's changes back to Replo, and confirm the push succeeded before reporting the turn complete. Publish only when I ask. In the cloned workspace, check that this client can find and read the official Replo skills. Install any missing skills from replohq/skills following https://docs.replo.app/mcp/skills, preserving existing workspace instructions. Confirm the skills are available before starting the dev server. Check the site's runtime requirements, install its dependencies, start the dev server, and open the live preview in my browser. Keep the preview running.
    ```

    Your client should confirm the skills are readable in the cloned workspace and show your existing site running locally. If the client cannot open your browser, open the local URL it returns. Keep the dev server running while you work.

    **Example edit, after setup:**

    ```text theme={null}
    Make the product-page hero more compact on mobile while preserving the brand, product data, and shopping action. Keep the preview running so I can see the update. Run the site's checks, then commit and push the changes back to Replo so they appear in the site draft. Do not publish yet.
    ```

    Use this example or ask for your own change, then check the result on desktop and mobile.

    Local coding uses your coding client's plan; work requested inside Replo still uses applicable [Replo credits](/billing). [Keep Replo in sync](/git/overview#keep-replo-in-sync) by committing and pushing after each completed editing turn. Publish separately.

    [Watch the local editing demo and follow the full guide](/git/overview).
  </Tab>
</Tabs>

## Keep going

Ask for the outcome you want, name the project and site, and say whether you want a draft or a published change. Connect the relevant source first when a request needs Shopify products or a Figma file.

If a request returns only a progress update, ask your client to check the Replo session and show the completed result. For connection or permission errors, use [Troubleshoot MCP](/mcp/troubleshooting).
