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

# Home

> Build and scale unique e-commerce experiences with Commerce Engine — typed SDK, hosted checkout, REST API, and MCP endpoints.

export const SiteFooter = () => {
  const BRAND = "https://images.tarkai.com/Commerce_Engine/Brand%20Assets/04%20-%20Brand%20Architecture/svg";
  const columns = [{
    heading: "Documentation",
    links: [{
      label: "Quickstart",
      href: "/storefront/quickstart"
    }, {
      label: "Starters",
      href: "/starters/overview"
    }, {
      label: "Hosted Checkout",
      href: "/hosted-checkout/overview"
    }, {
      label: "API reference",
      href: "/api-reference/getting-started"
    }]
  }, {
    heading: "Packages",
    links: [{
      label: "storefront",
      href: "/sdk/installation"
    }, {
      label: "checkout",
      href: "/hosted-checkout/overview"
    }, {
      label: "seo",
      href: "/seo-ai/seo"
    }, {
      label: "ai",
      href: "/seo-ai/ai"
    }, {
      label: "All packages on npm",
      href: "https://www.npmjs.com/org/commercengine",
      external: true
    }]
  }, {
    heading: "Build with AI",
    links: [{
      label: "AI-assisted development",
      href: "/ai/overview"
    }, {
      label: "Agent skills",
      href: "https://github.com/commercengine/skills",
      external: true
    }, {
      label: "Starter projects",
      href: "https://github.com/tark-ai/ce-starter-projects",
      external: true
    }, {
      label: "LLM docs",
      href: "https://llm-docs.commercengine.io",
      external: true
    }]
  }, {
    heading: "Support",
    links: [{
      label: "Community Slack",
      href: "https://join.slack.com/t/commerceengine/shared_invite/zt-47mq3c5f9-9vNpgkV2GSu7SrGrGFbrOQ",
      external: true
    }, {
      label: "Status",
      href: "https://ce-status.instatus.com/",
      external: true
    }, {
      label: "Contact us",
      href: "mailto:support@commercengine.io",
      external: true
    }, {
      label: "commercengine.io",
      href: "https://www.commercengine.io",
      external: true
    }]
  }];
  const socials = [{
    label: "GitHub",
    href: "https://github.com/tark-ai",
    d: "M12 2A10 10 0 0 0 8.84 21.5c.5.08.66-.23.66-.5v-1.69C6.73 19.91 6.14 18 6.14 18A2.69 2.69 0 0 0 5 16.5c-.91-.62.07-.6.07-.6a2.1 2.1 0 0 1 1.53 1 2.15 2.15 0 0 0 2.91.83 2.16 2.16 0 0 1 .63-1.34c-2.14-.25-4.39-1.07-4.39-4.77a3.35 3.35 0 0 1 1-2.6 3.1 3.1 0 0 1 .08-2.42s.84-.27 2.75 1a9.63 9.63 0 0 1 5 0c1.91-1.29 2.75-1 2.75-1a3.1 3.1 0 0 1 .08 2.42 3.35 3.35 0 0 1 1 2.6c0 3.71-2.26 4.52-4.41 4.76a2.42 2.42 0 0 1 .69 1.88v2.79c0 .27.16.59.67.5A10 10 0 0 0 12 2Z"
  }, {
    label: "X",
    href: "https://twitter.com/commercengine",
    d: "M18.9 2H22l-7.1 8.1L23 22h-6.6l-5.1-6.7L5.4 22H2.3l7.6-8.7L1.6 2h6.7l4.6 6.1L18.9 2Zm-1.1 18h1.7L7.3 3.7H5.5L17.8 20Z"
  }, {
    label: "LinkedIn",
    href: "https://www.linkedin.com/company/commercengine",
    d: "M4.98 3.5a2.5 2.5 0 1 1 0 5 2.5 2.5 0 0 1 0-5ZM3 9h4v12H3V9Zm7 0h3.8v1.7h.05a4.2 4.2 0 0 1 3.77-2.07c4.03 0 4.78 2.65 4.78 6.1V21h-4v-5.5c0-1.31-.02-3-1.83-3-1.83 0-2.11 1.43-2.11 2.9V21h-4V9Z"
  }];
  return <footer className="ce-footer">
      <div className="ce-footer-inner">
        <div className="ce-footer-brand">
          <img src={`${BRAND}/CE_Developers_black.svg`} alt="Commerce Engine Developers" className="ce-footer-logo-light" width="180" height="28" />
          <img src={`${BRAND}/CE_Developers_white.svg`} alt="" aria-hidden="true" className="ce-footer-logo-dark" width="180" height="28" />
          <p>The modern headless commerce platform for building scalable e-commerce.</p>
          <div className="ce-footer-socials">
            {socials.map(s => <a key={s.label} href={s.href} target="_blank" rel="noopener noreferrer" aria-label={s.label}>
                <svg width="18" height="18" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true">
                  <path d={s.d} />
                </svg>
              </a>)}
          </div>
        </div>

        <div className="ce-footer-cols">
          {columns.map(col => <div key={col.heading} className="ce-footer-col">
              <p className="ce-footer-heading">{col.heading}</p>
              <ul>
                {col.links.map(link => <li key={link.label}>
                    <a href={link.href} {...link.external ? {
    target: "_blank",
    rel: "noopener noreferrer"
  } : {}}>
                      {link.label}
                    </a>
                  </li>)}
              </ul>
            </div>)}
        </div>
      </div>

      <div className="ce-footer-bar">
        <span>© {new Date().getFullYear()} Commerce Engine</span>
        <span>Built for developers shipping commerce.</span>
      </div>
    </footer>;
};

export const AgentSetup = ({agents = [], prompt = "", agentsLabel = "01 — Pick your agent", promptLabel = "03 — Ask your agent"}) => {
  const RESET_MS = 2000;
  const [agentId, setAgentId] = useState(agents[0]?.id ?? "");
  const [cmdCopied, setCmdCopied] = useState(false);
  const [promptCopied, setPromptCopied] = useState(false);
  useEffect(() => {
    if (!cmdCopied) return;
    const timer = setTimeout(() => setCmdCopied(false), RESET_MS);
    return () => clearTimeout(timer);
  }, [cmdCopied]);
  useEffect(() => {
    if (!promptCopied) return;
    const timer = setTimeout(() => setPromptCopied(false), RESET_MS);
    return () => clearTimeout(timer);
  }, [promptCopied]);
  const agent = agents.find(entry => entry.id === agentId) ?? agents[0];
  if (!agent) return null;
  const copy = async (text, mark) => {
    if (typeof navigator === "undefined" || !navigator.clipboard) return;
    try {
      await navigator.clipboard.writeText(text);
      mark(true);
    } catch {}
  };
  const CopyIcon = ({done}) => done ? <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="3" strokeLinecap="round" strokeLinejoin="round" aria-hidden="true">
        <polyline points="20 6 9 17 4 12" />
      </svg> : <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" aria-hidden="true">
        <rect width="14" height="14" x="8" y="8" rx="2" ry="2" />
        <path d="M4 16c-1.1 0-2-.9-2-2V4c0-1.1.9-2 2-2h10c1.1 0 2 .9 2 2" />
      </svg>;
  const command = agent.lines.join("\n");
  const agentPrompt = agent.prompt ?? prompt;
  return <div className="ce-agent-setup">
      <p className="ce-agent-step">{agentsLabel}</p>

      <div className="ce-agent-choices">
        {agents.map(entry => <button key={entry.id} type="button" onClick={() => setAgentId(entry.id)} aria-pressed={entry.id === agent.id} data-active={entry.id === agent.id} className="ce-agent-choice">
            <span className="ce-agent-choice-mark">
              <img src={entry.icon} alt="" aria-hidden="true" loading="lazy" />
            </span>
            <span>{entry.name}</span>
          </button>)}
      </div>

      {}
      <div className="ce-cmd ce-agent-block" key={agent.id}>
        <p className="ce-cmd-label">{agent.installLabel}</p>
        <ul>
          {agent.lines.map((line, i) => <li key={line}>
              {}
              <code data-wrap={!agent.prefix}>
                {agent.prefix ? <span className="ce-cmd-prefix">{agent.prefix} </span> : null}
                {line}
              </code>
              {i === 0 ? <button type="button" onClick={() => copy(command, setCmdCopied)} aria-label={`Copy: ${command}`} data-copied={cmdCopied} className="ce-cmd-copy">
                  <CopyIcon done={cmdCopied} />
                </button> : null}
            </li>)}
        </ul>
      </div>

      {}
      <div className="ce-cmd ce-agent-block">
        <p className="ce-cmd-label">{promptLabel}</p>
        <div className="ce-agent-prompt">
          <p>
            <span className="ce-cmd-prefix">&gt; </span>
            {agentPrompt}
          </p>
          <button type="button" onClick={() => copy(agentPrompt, setPromptCopied)} aria-label="Copy the starter prompt" data-copied={promptCopied} className="ce-cmd-copy">
            <CopyIcon done={promptCopied} />
          </button>
        </div>
      </div>

      <p aria-live="polite" className="sr-only">
        {promptCopied ? "Starter prompt copied." : cmdCopied ? "Install command copied." : `${agent.name} selected.`}
      </p>
    </div>;
};

export const agents = [{
  id: "claude",
  name: "Claude Code",
  icon: "https://svgl.app/library/claude-ai-icon.svg",
  prefix: "$",
  installLabel: "02 — Install the skills",
  lines: ["npx skills add commercengine/skills --agent claude-code"]
}, {
  id: "cursor",
  name: "Cursor",
  icon: "https://svgl.app/library/cursor_light.svg",
  prefix: "$",
  installLabel: "02 — Install the skills",
  lines: ["npx skills add commercengine/skills --agent cursor"]
}, {
  id: "codex",
  name: "Codex",
  icon: "https://svgl.app/library/codex_light.svg",
  prefix: "$",
  installLabel: "02 — Install the skills",
  lines: ["npx skills add commercengine/skills --agent codex"]
}, {
  id: "lovable",
  name: "Lovable",
  icon: "https://svgl.app/library/lovable.svg",
  prefix: "",
  installLabel: "02 — Add to your project knowledge",
  lines: ["Use Commerce Engine for all commerce features. Docs: https://www.commercengine.io/docs/llms.txt"],
  prompt: "Using Commerce Engine, build me a storefront — product listing and detail pages, cart and hosted checkout, styled to match my brand."
}];

export const agentPrompt = "Use the Commerce Engine skills to build me a storefront — product listing and detail pages, cart and hosted checkout, styled to match my brand.";

export const skillsDemo = [{
  prefix: "$",
  text: " npx skills add commercengine/skills"
}, {
  tone: "ce-dim",
  text: "✔ 9 skills installed — your agent now knows"
}, {
  tone: "ce-dim",
  text: "  Commerce Engine inside out"
}, {
  text: ""
}, {
  text: '> "Build me a Next.js storefront with'
}, {
  text: '   product pages, cart and checkout"'
}, {
  text: ""
}, {
  tone: "ce-mark",
  text: "✔ Storefront SDK installed and configured"
}, {
  tone: "ce-mark",
  text: "✔ Catalog, cart & checkout wired, fully typed"
}, {
  tone: "ce-mark",
  text: "✔ Auth, orders & webhooks handled"
}];

<div className="ce-home">
  <section className="ce-hero">
    <div className="ce-hero-grid" aria-hidden="true" />

    <div className="ce-hero-inner">
      <div className="ce-hero-copy">
        <p className="ce-eyebrow">Developer portal</p>

        <h1 className="ce-hero-title">
          Ship a storefront<br />in <em>15 minutes</em>
        </h1>

        <p className="ce-hero-body">
          Install the skills package and your agent learns the whole platform —
          every SDK method, schema and pattern. One prompt later it's building
          your store, with typed APIs, hosted checkout and MCP endpoints wired
          from the first call.
        </p>

        <div className="ce-hero-actions">
          <a className="ce-btn ce-btn--primary" href="/docs/storefront/quickstart">
            Start the 15-minute build
          </a>

          <a className="ce-btn ce-btn--secondary" href="/docs/api-reference/getting-started">
            API reference
          </a>
        </div>
      </div>

      <div className="ce-hero-media">
        <AgentSetup agents={agents} prompt={agentPrompt} />
      </div>
    </div>
  </section>

  <section className="ce-section">
    <h2 className="ce-h2">Start here</h2>
    <p className="ce-lede">Three ways in. Pick the one that matches how you work.</p>

    <div className="ce-cards">
      <a className="ce-card" href="/docs/storefront/quickstart">
        <span className="ce-card-step">01 · one command</span>
        <h3>Quickstart</h3>

        <p>
          <code>npm create commercengine\@latest</code> scaffolds a full storefront —
          catalog, cart, checkout, SEO and agent tools already wired — or adds
          Commerce Engine to a project you already have.
        </p>
      </a>

      <a className="ce-card" href="/docs/sdk/installation">
        <span className="ce-card-step">02 · TypeScript</span>
        <h3>SDK integration</h3>

        <p>
          Get started with our 100% type-safe SDK that works seamlessly across
          server and client environments.
        </p>
      </a>

      <a className="ce-card" href="/docs/api-reference/getting-started">
        <span className="ce-card-step">03 · REST</span>
        <h3>API reference</h3>

        <p>
          Explore comprehensive API documentation with detailed endpoints,
          examples, and an interactive playground.
        </p>
      </a>
    </div>
  </section>

  <section className="ce-section">
    <div className="ce-skills">
      <div className="ce-skills-copy">
        <p className="ce-eyebrow ce-eyebrow--dark">Build with AI</p>

        <h2>Point your agent at the docs</h2>

        <p className="ce-skills-body">
          Use AI coding assistants to build Commerce Engine integrations faster
          with LLM-optimized docs, agent skills, and ready-to-use prompts.
        </p>

        <div className="ce-agents">
          {agents.map((entry) => (
                            <span key={entry.id} className="ce-agent">
                              <img src={entry.icon} alt="" aria-hidden="true" loading="lazy" />
                            </span>
                          ))}
        </div>

        <div className="ce-skills-links">
          <a href="/docs/ai/overview">AI-assisted development →</a>
          <a href="https://llm-docs.commercengine.io">llm-docs.commercengine.io →</a>
        </div>
      </div>

      <div className="ce-skills-demo">
        <pre>
          {skillsDemo.map((line, i) => (
                            <span key={i} className={line.tone}>
                              {line.prefix ? <span className="ce-mark">{line.prefix}</span> : null}
                              {line.text + "\n"}
                            </span>
                          ))}
        </pre>
      </div>
    </div>
  </section>

  <section className="ce-section">
    <h2 className="ce-h2">Browse the guides</h2>

    <p className="ce-lede">
      Everything you need to build exceptional customer-facing commerce experiences.
    </p>

    <div className="ce-guides">
      <a className="ce-guide" href="/docs/storefront/authentication">
        <span>
          <span className="ce-guide-title">Storefront guide</span>
          <span className="ce-guide-sub">From authentication through to checkout</span>
        </span>

        <span className="ce-guide-arrow">→</span>
      </a>

      <a className="ce-guide" href="/docs/storefront/authentication">
        <span>
          <span className="ce-guide-title">Authentication</span>
          <span className="ce-guide-sub">Email, phone and social login methods</span>
        </span>

        <span className="ce-guide-arrow">→</span>
      </a>

      <a className="ce-guide" href="/docs/hosted-checkout/overview">
        <span>
          <span className="ce-guide-title">Hosted checkout</span>
          <span className="ce-guide-sub">Pre-built, embeddable cart and checkout</span>
        </span>

        <span className="ce-guide-arrow">→</span>
      </a>

      <a className="ce-guide" href="/docs/storefront/catalog">
        <span>
          <span className="ce-guide-title">Catalog and search</span>
          <span className="ce-guide-sub">Products, variants, filters and facets</span>
        </span>

        <span className="ce-guide-arrow">→</span>
      </a>

      <a className="ce-guide" href="/docs/storefront/subscriptions">
        <span>
          <span className="ce-guide-title">Orders and subscriptions</span>
          <span className="ce-guide-sub">Placement, fulfilment and recurring plans</span>
        </span>

        <span className="ce-guide-arrow">→</span>
      </a>

      <a className="ce-guide" href="/docs/api-reference/payments/list-all-payment-methods">
        <span>
          <span className="ce-guide-title">Payments</span>
          <span className="ce-guide-sub">Providers, sessions and webhooks</span>
        </span>

        <span className="ce-guide-arrow">→</span>
      </a>
    </div>
  </section>

  <section className="ce-section">
    <div className="ce-starters">
      <div className="ce-starters-head">
        <div>
          <h2>Or clone a starter</h2>

          <p>
            Production-ready storefronts for the framework your team already knows.
            Catalog, cart and checkout are wired from the first commit.
          </p>
        </div>

        <a className="ce-btn ce-btn--secondary" href="https://www.commercengine.io/starters">
          View starters
        </a>
      </div>

      <div className="ce-chips">
        <a className="ce-chip" href="/docs/sdk/react-integration">
          <span className="ce-chip-mark">
            <img src="https://svgl.app/library/react_light.svg" alt="" aria-hidden="true" />
          </span>

          <span>React</span>
        </a>

        <a className="ce-chip" href="/docs/sdk/nextjs-integration">
          <span className="ce-chip-mark">
            <img src="https://svgl.app/library/nextjs_icon_dark.svg" alt="" aria-hidden="true" />
          </span>

          <span>Next.js</span>
        </a>

        <a className="ce-chip" href="/docs/sdk/tanstack-start-integration">
          <span className="ce-chip-mark">
            <img src="https://svgl.app/library/tanstack.svg" alt="" aria-hidden="true" />
          </span>

          <span>TanStack</span>
        </a>

        <a className="ce-chip" href="/docs/sdk/astro-integration">
          <span className="ce-chip-mark">
            <img src="https://svgl.app/library/astro-icon-light.svg" alt="" aria-hidden="true" />
          </span>

          <span>Astro</span>
        </a>

        <a className="ce-chip" href="/docs/sdk/sveltekit-integration">
          <span className="ce-chip-mark">
            <img src="https://svgl.app/library/svelte.svg" alt="" aria-hidden="true" />
          </span>

          <span>SvelteKit</span>
        </a>

        <a className="ce-chip" href="/docs/sdk/nodejs-integration">
          <span className="ce-chip-mark">
            <img src="https://svgl.app/library/nodejs.svg" alt="" aria-hidden="true" />
          </span>

          <span>Node.js</span>
        </a>
      </div>
    </div>
  </section>

  <SiteFooter />
</div>


This documentation is built and hosted on [Mintlify](https://mintlify.com), a developer documentation platform.