diff --git a/package-lock.json b/package-lock.json
index a7b8a7c..1c34c93 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -8,6 +8,7 @@
       "name": "livecycle-test",
       "version": "0.0.0",
       "dependencies": {
+        "@livecycle/sdk": "^0.1.11",
         "react": "^18.2.0",
         "react-dom": "^18.2.0"
       },
@@ -891,6 +892,14 @@
         "@jridgewell/sourcemap-codec": "^1.4.14"
       }
     },
+    "node_modules/@livecycle/sdk": {
+      "version": "0.1.11",
+      "resolved": "https://registry.npmjs.org/@livecycle/sdk/-/sdk-0.1.11.tgz",
+      "integrity": "sha512-Xh/zn09wR6Q+48M1ziGcnXj3xF/m6xmpLSxB25gYZe6k8YKGJKbK5A8y67ozIsVDW1jcIbOg3uf0ylpmX/Ln1Q==",
+      "engines": {
+        "node": ">=12.0.0"
+      }
+    },
     "node_modules/@nodelib/fs.scandir": {
       "version": "2.1.5",
       "resolved": "https://registry.npmjs.org/@nodelib/fs.scandir/-/fs.scandir-2.1.5.tgz",
diff --git a/package.json b/package.json
index 36ac63c..ad046f3 100644
--- a/package.json
+++ b/package.json
@@ -10,6 +10,7 @@
     "preview": "vite preview"
   },
   "dependencies": {
+    "@livecycle/sdk": "^0.1.11",
     "react": "^18.2.0",
     "react-dom": "^18.2.0"
   },
diff --git a/src/App.jsx b/src/App.jsx
index b8b8473..0ec5d19 100644
--- a/src/App.jsx
+++ b/src/App.jsx
@@ -1,10 +1,15 @@
-import { useState } from 'react'
+import { useState, useEffect } from 'react'
 import reactLogo from './assets/react.svg'
 import viteLogo from '/vite.svg'
+import LivecycleSdk from '@livecycle/sdk'
 import './App.css'
 
 function App() {
   const [count, setCount] = useState(0)
+  
+  useEffect(() => {
+    LivecycleSdk.init()
+  });
 
   return (
     <>
@@ -16,7 +21,7 @@ function App() {
           <img src={reactLogo} className="logo react" alt="React logo" />
         </a>
       </div>
-      <h1>Vite + React</h1>
+      <h1>Vite + React uwu</h1>
       <div className="card">
         <button onClick={() => setCount((count) => count + 1)}>
           count is {count}