diff --git a/examples/react/getting-started/index.html b/examples/react/getting-started/index.html
index 0c360b898a..4f864804d6 100644
--- a/examples/react/getting-started/index.html
+++ b/examples/react/getting-started/index.html
@@ -18,6 +18,10 @@
       href="https://cdn.jsdelivr.net/npm/instantsearch.css@8/themes/satellite-min.css"
     />
 
+    <meta name="appId" content="F4T6CUV2AH" />
+    <meta name="apiKey" content="02022fd5de7c24bcde770bfab52ea473" />
+    <script src="/packages/instantsearch.js/dist/instantsearch.production.min.js"></script>
+
     <title>React InstantSearch — Getting started</title>
   </head>
 
diff --git a/examples/react/getting-started/src/App.css b/examples/react/getting-started/src/App.css
index 3dc8bd058a..28f0782152 100644
--- a/examples/react/getting-started/src/App.css
+++ b/examples/react/getting-started/src/App.css
@@ -113,3 +113,36 @@ em {
   height: 100%;
   justify-content: space-between;
 }
+
+.ais-Hits-item img {
+  width: 100%;
+  height: 100px;
+  object-fit: contain;
+  margin: 1.2rem 0;
+}
+
+.ais-Hits-list {
+  display: grid;
+  grid-template-columns: repeat(4, 1fr);
+  gap: 1rem;
+}
+
+.ais-Hits-item {
+  display: flex;
+  flex-direction: column;
+  height: 100%;
+  justify-content: space-between;
+  align-items: center;
+  text-align: center;
+}
+
+.ais-Hits-item img {
+  width: 100%;
+  height: 100px;
+  object-fit: contain;
+  margin: 1.2rem 0;
+}
+
+.ais-Hits-item a {
+  font-size: 1.2rem;
+}
diff --git a/examples/react/getting-started/src/App.tsx b/examples/react/getting-started/src/App.tsx
index 2d55e4b9cb..183e318877 100644
--- a/examples/react/getting-started/src/App.tsx
+++ b/examples/react/getting-started/src/App.tsx
@@ -1,26 +1,7 @@
-import algoliasearch from 'algoliasearch/lite';
-import { Hit } from 'instantsearch.js';
 import React from 'react';
-import {
-  Configure,
-  Highlight,
-  Hits,
-  InstantSearch,
-  Pagination,
-  RefinementList,
-  SearchBox,
-  TrendingItems,
-} from 'react-instantsearch';
-
-import { Panel } from './Panel';
 
 import './App.css';
 
-const searchClient = algoliasearch(
-  'latency',
-  '6be0576ff61c053d5f9a3225e2a90f76'
-);
-
 export function App() {
   return (
     <div>
@@ -37,67 +18,8 @@ export function App() {
       </header>
 
       <div className="container">
-        <InstantSearch
-          searchClient={searchClient}
-          indexName="instant_search"
-          insights={true}
-        >
-          <Configure hitsPerPage={8} />
-          <div className="search-panel">
-            <div className="search-panel__filters">
-              <Panel header="brand">
-                <RefinementList attribute="brand" />
-              </Panel>
-            </div>
-
-            <div className="search-panel__results">
-              <SearchBox placeholder="" className="searchbox" />
-              <Hits hitComponent={HitComponent} />
-
-              <div className="pagination">
-                <Pagination />
-              </div>
-              <div>
-                <TrendingItems itemComponent={ItemComponent} limit={4} />
-              </div>
-            </div>
-          </div>
-        </InstantSearch>
+        <ais-block />
       </div>
     </div>
   );
 }
-
-type HitType = Hit<{
-  image: string;
-  name: string;
-  description: string;
-}>;
-
-function HitComponent({ hit }: { hit: HitType }) {
-  return (
-    <article>
-      <h1>
-        <a href={`/products.html?pid=${hit.objectID}`}>
-          <Highlight attribute="name" hit={hit} />
-        </a>
-      </h1>
-      <p>
-        <Highlight attribute="description" hit={hit} />
-      </p>
-      <a href={`/products.html?pid=${hit.objectID}`}>See product</a>
-    </article>
-  );
-}
-
-function ItemComponent({ item }: { item: Hit }) {
-  return (
-    <article>
-      <div>
-        <img src={item.image} />
-        <h2>{item.name}</h2>
-      </div>
-      <a href={`/products.html?pid=${item.objectID}`}>See product</a>
-    </article>
-  );
-}
diff --git a/packages/instantsearch.js/src/index.ts b/packages/instantsearch.js/src/index.ts
index 38919692b6..6e48b8a5a9 100644
--- a/packages/instantsearch.js/src/index.ts
+++ b/packages/instantsearch.js/src/index.ts
@@ -1,3 +1,5 @@
+import algoliasearch from 'algoliasearch';
+
 import * as connectors from './connectors/index';
 import * as helpers from './helpers/index';
 import { createInfiniteHitsSessionStorageCache } from './lib/infiniteHitsCache/index';
@@ -77,4 +79,30 @@ instantsearch.snippet = helpers.snippet;
 instantsearch.reverseSnippet = helpers.reverseSnippet;
 instantsearch.insights = helpers.insights;
 
+const config = {
+  appId: (document.querySelector('meta[name="appId"]') as HTMLMetaElement)
+    .content,
+  apiKey: (document.querySelector('meta[name="apiKey"]') as HTMLMetaElement)
+    .content,
+};
+
+const searchClient = algoliasearch(config.appId, config.apiKey);
+const search = instantsearch({
+  // This is hardcoded for the purpose of the PoC, wouldn't be in a real bundle
+  indexName: 'fx_hackathon_24_bm_products',
+  searchClient,
+});
+
+class AisBlock extends HTMLElement {
+  connectedCallback() {
+    search.addWidgets([
+      // @ts-ignore
+      // Path is hardcoded for the purpose of the PoC as well
+      widgets.page({ container: this, path: 'excellent-apple.html' }),
+    ]);
+    search.start();
+  }
+}
+customElements.define('ais-block', AisBlock);
+
 export default instantsearch;