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

# Create a storefront

> Create a Colossal storefront with products and checkout in under 5 minutes.

There are two ways to create a storefront on Colossal. You can use:

* [Storefront Agent](/automations/step-types/storefront-builder) to build your storefront and launch it on Colossal Cloud
* your own agent (Cursor/Claude Code/Codex/etc) locally with [Storefront SDK](/react-sdk/overview) and [Colossal Dev Tools](/agent-skills/overview)

Both methods use the same underlying tooling, so you can expect great results no matter which one you pick.

## Storefront Agent flow

Creating a storefront using [Storefront Agent](/automations/step-types/storefront-builder) is very straightforward - all you have to do is create a new project and describe what do you want to create.
Once the initial build is complete, you can start iterating on your storefront just as you would with a local AI agent.

## CLI flow with local agent

### Scaffold the project

<CodeGroup>
  ```bash npm theme={null}
  npm create colossal-project my-store
  cd my-store
  npm run dev
  ```

  ```bash pnpm theme={null}
  pnpm create colossal-project my-store
  cd my-store
  pnpm dev
  ```

  ```bash yarn theme={null}
  yarn create colossal-project my-store
  cd my-store
  yarn dev
  ```
</CodeGroup>

1. Run the create command. You'll be redirected to authenticate with Colossal.
2. Choose an existing project or create a new one. New projects can be seeded with demo products.
3. The starter template is cloned, dependencies are installed, and your `.env` is configured.
4. Visit `http://localhost:3000` to see your storefront.

<Accordion title="CLI options">
  | Argument / flag     | Description                                                        |
  | ------------------- | ------------------------------------------------------------------ |
  | `[directory]`       | Directory to create the project in. Prompts for a name if omitted. |
  | `--store-uid <uid>` | Store UID to use. Skips authentication and store selection.        |
  | `--skip-install`    | Skip running the install step after scaffolding.                   |
  | `--api-url <url>`   | Override the Colossal API URL.                                     |

  Pass `--store-uid` to bypass authentication and store selection in CI or automated environments:

  ```bash theme={null}
  pnpm create colossal-project my-store --store-uid your-uid
  ```
</Accordion>

### Install agent skills

Add the [agent skills](/agent-skills/overview) so your AI coding agent knows the SDK, the design library, and how to apply a reference:

```bash theme={null}
npx skills add colossalhq/agent-skills --all -a claude-code -a cursor -y
```

### Generate the design

Ask your agent to build the storefront.

<Prompt description="Create a beautiful store for my rap-inspired streetwear brand" actions={["copy", "cursor"]}>
  Create a beautiful store to sell rap-inspired streetwear clothing. Pick the best design reference for this use case, use your best judgment. /colossal-store-design
</Prompt>

The agent picks a reference from the [Design Library](/agent-skills/colossal-design-library), applies the theme into your project, and designs you a storefront using best practices and components from our design library.

### Example

A [live storefront](https://jackys.colossal.store/) built with this flow:

<Frame caption="jackys.colossal.store — built with the React Vite starter and the Design Library">
  <iframe src="https://jackys.colossal.store/" width="100%" height="640" style={{ border: "none", scrollbarWidth: "thin", scrollbarColor: "rgba(156,163,175,0.6) transparent" }} />
</Frame>

## Next steps

<CardGroup cols={2}>
  <Card title="Storefront SDK" icon="code" href="/react-sdk/overview">
    Hooks for products, cart, and checkout.
  </Card>

  <Card title="Create an automation" icon="robot" href="/quickstart/create-an-automation">
    Automate orders, notifications, and reports.
  </Card>

  <Card title="Connections" icon="puzzle-piece" href="/automations/connections">
    Connect Stripe, Klaviyo, Slack, and more.
  </Card>
</CardGroup>