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

# What is Frontic

Frontic is the AI platform for building shopping experiences that stand out — storefronts, agents, chats, apps, anything that sells online.

Frontic sits on top of your existing commerce systems and lets you start building with AI right away — no migration, no rip-and-replace. We take the messy, legacy-shaped data from across your stack and turn it into clean, semantically understood structures that work for and with AI. Then we give you every tool to build on top of that — from a full AI workspace to your own editor.

## How it works

Frontic has two sides: the **backend** that powers your experience, and the **tools** that help you build it.

**The backend** connects to your existing commerce systems — Shopify, commercetools, PIMs, CMSs, or anything with an API. It ingests raw data, restructures it into clean, typed, semantically meaningful models, and serves it through an API shaped exactly to what your experience needs. Products, variants, regions, currencies, localized URLs — commerce is a first-class concern, not a generic CRUD layer.

**The tools** generate the code your shopping experience runs on. Build in [Studio](/studio/frontic-studio), Frontic's AI workspace with live preview and GitHub built in — or stay in your own editor with the [CLI](/ide/frontic-cli), [SDKs](/reference/client-sdk), and [MCP server](/ide/mcp-tools) handing your AI everything it needs.

**You stay in charge.** Every change happens in a safe development workspace — nothing touches production until you're ready. Use pull requests and preview versions to review before going live, [releases](/releases/overview) to roll changes out together, and [rules and skills](/context-base/overview) to shape how agents work. Drop to code at any point.

## Ready to build?

<CardGroup cols={2}>
  <Card title="Quick Setup" icon="bolt" href="/essentials/quick-setup">
    Create a project, connect real data, and get something working as fast as
    possible.
  </Card>

  <Card title="Your First Feature" icon="rocket" href="/essentials/your-first-feature">
    A single flow that shows you both routes side by side — Studio and editor
    — so you can see what each feels like.
  </Card>
</CardGroup>