# Getting Started

> Introduction to the Storefront MCP and page system

Canonical URL: https://fa7e86e3d553:3005/getting-started

The Lexsis Storefront MCP is a Model Context Protocol server that enables AI agents to generate, edit, and publish high-converting Shopify landing pages.

## How Pages Work

Pages are built with raw HTML + Tailwind CSS + CSS custom properties + React islands. There's no component JSON or proprietary template system. The AI generates HTML directly, and interactive commerce elements (add-to-cart, reviews, FAQs) are handled by pre-built **islands** that hydrate client-side.

```
HTML + Tailwind → Static content (headings, images, layouts)
CSS Variables   → Brand theming (colors, fonts, spacing)
React Islands   → Interactive commerce (BuyBox, Cart, Reviews)
```

## What This MCP Enables

| Capability | How |
|------------|-----|
| **Generate pages** | AI plans the page, builds an approved local mockup, prepares assets, then compiles readable source into a draft |
| **Edit pages** | Update local source first, compile the complete page, and patch only the changed sections |
| **Manage brands** | Read and update brand kits (colors, fonts, voice, themes) |
| **Generate assets** | Create AI-generated images (hero backgrounds, lifestyle shots, textures) on demand |
| **Run experiments** | Compare storefront pages, monitor results, and make informed changes |
| **Track performance** | Query page analytics (CVR, bounce rate, revenue, device split) |

## Key Concepts

| Concept | What it means |
|---------|---------------|
| **Page workspace** | Local plan, manifest, visual source, production source, assets, and QA report for one page |
| **Page source** | Readable `lexsis-source.html`, which remains the editable source of truth |
| **Section** | One visual block of the page — has an `id`, `html`, optional `css`, and optional `js` |
| **Island** | A pre-built React component authored with `<lx-island>` for interactive commerce |
| **Theme CSS** | CSS custom properties (`--lx-*` variables) that control brand colors, fonts, and spacing |
| **Slug** | URL-safe identifier for the page (e.g. `summer-sale-2026`) |

Run `/setup` once to save reusable brand guidance and theme CSS for the stores
and themes you use. Page commands remain independent and read changing product,
price, asset, permission, schema, and remote-version data live.

## Connection

The MCP server connects over HTTP with browser OAuth. Sign in to Lexsis,
select the workspaces the client may access, and choose Read, Build, or Publish.
User API keys are not accepted by the MCP endpoint. See
[Authentication](/getting-started/authentication) for setup details.

## Next Steps

- [Quickstart](/getting-started/quickstart) — Generate your first page in 5 minutes
- [Design Page Builder](/guides/visual-page-builder) — Create and review canonical page source before generation
- [Authentication](/getting-started/authentication) — OAuth and workspace access
- [A/B Testing](/guides/ab-testing) — Compare storefront pages and understand results
- [Page Schema](/pages/schema) — Deep dive into the page JSON structure
- [Islands](/islands) — Learn about interactive commerce islands