> ## 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. # React / Vite > Add Commerce Engine SEO/AEO and browser agent tools to a React or Vite storefront. A React/Vite storefront normally has no application server at request time. Use `@commercengine/seo` in the browser for page head data, generate the discovery assets before the Vite build, and register `@commercengine/ai` from app bootstrap or a root effect. ## 1. Share site and route configuration ```typescript src/lib/commerce-seo.config.ts theme={"theme":{"light":"github-light","dark":"github-dark"}} import { defineCommerceSeoConfig } from "@commercengine/seo/config"; export const commerceSeo = defineCommerceSeoConfig({ site: { name: "Acme", url: "https://acme.example", brandName: "Acme", locale: "en_US", }, routes: { productBase: "/product", categoryBase: "/category", }, }); export const { site, routes } = commerceSeo; ``` ## 2. Create the SEO instance A browser-only SPA can use the canonical Storefront factory directly: ```typescript src/lib/seo.ts theme={"theme":{"light":"github-light","dark":"github-dark"}} import { createCommerceSeo } from "@commercengine/seo"; import { commerceSeo } from "./commerce-seo.config"; import { storefront } from "./storefront"; export const seo = createCommerceSeo({ ...commerceSeo, storefront }); ``` Build head data asynchronously because route resolution and enrichment can be async: ```tsx src/lib/use-commerce-seo.tsx theme={"theme":{"light":"github-light","dark":"github-dark"}} import type { Category, ProductDetail } from "@commercengine/storefront"; import type { CommerceSeoHead } from "@commercengine/seo"; import { useEffect, useState } from "react"; import { seo } from "./seo"; export function useCommerceSeoHead( entity: ProductDetail | Category | null | undefined, kind: "product" | "category", ) { const [head, setHead] = useState(null); useEffect(() => { if (!entity) { setHead(null); return; } let active = true; const request = kind === "product" ? seo.productHead(entity as ProductDetail) : seo.categoryHead(entity as Category); void request.then((value) => { if (active) setHead(value); }); return () => { active = false; }; }, [entity, kind]); return head; } ``` ## 3. Render the head model React 19 hoists ``, `<meta>`, and `<link>` into `<head>`. JSON-LD can remain inline in the page tree. ```tsx src/components/Seo.tsx theme={"theme":{"light":"github-light","dark":"github-dark"}} import type { CommerceSeoHead } from "@commercengine/seo"; export function Seo({ head }: { head: CommerceSeoHead | null }) { if (!head) return null; return ( <> <title>{head.title} {head.meta.map((tag) => tag.property ? ( ) : ( ) )} {head.links.map((tag) => ( ))} {head.scripts.map((script) => (