diff --git a/.github/workflows/tests-and-checks.yml b/.github/workflows/tests-and-checks.yml
index 0ecefbf8..b6647384 100644
--- a/.github/workflows/tests-and-checks.yml
+++ b/.github/workflows/tests-and-checks.yml
@@ -11,6 +11,10 @@ jobs:
       - uses: pnpm/action-setup@v3
         with:
           version: 9
+      - uses: actions/setup-node@v4
+        with:
+          node-version-file: "package.json"
+          cache: "pnpm"
       - name: Install dependencies
         run: pnpm install --frozen-lockfile
       - name: Generate Prisma Client
diff --git a/apps/events/package.json b/apps/events/package.json
index 671fece7..92f219be 100644
--- a/apps/events/package.json
+++ b/apps/events/package.json
@@ -19,9 +19,7 @@
   "dependencies": {
     "@automerge/automerge": "^v2.2.9-alpha.3",
     "@automerge/automerge-repo": "^2.0.0-alpha.14",
-    "@automerge/automerge-repo-network-websocket": "^2.0.0-alpha.14",
     "@automerge/automerge-repo-react-hooks": "^2.0.0-alpha.14",
-    "@automerge/automerge-repo-storage-indexeddb": "^2.0.0-alpha.14",
     "@noble/hashes": "^1.5.0",
     "@privy-io/react-auth": "^1.88.4",
     "@radix-ui/react-avatar": "^1.1.1",
diff --git a/apps/events/src/components/debug-invitations.tsx b/apps/events/src/components/debug-invitations.tsx
index 2118f441..a9d07a83 100644
--- a/apps/events/src/components/debug-invitations.tsx
+++ b/apps/events/src/components/debug-invitations.tsx
@@ -4,10 +4,24 @@ import { Button } from './ui/button';
 
 type Props = {
   invitations: Invitation[];
-  accept: (invitation: Invitation) => void;
+  encryptionPublicKey: string;
+  encryptionPrivateKey: string;
+  signaturePrivateKey: string;
+  accept: (params: {
+    encryptionPublicKey: string;
+    encryptionPrivateKey: string;
+    signaturePrivateKey: string;
+    invitation: Invitation;
+  }) => Promise<unknown>;
 };
 
-export function DebugInvitations({ invitations, accept }: Props) {
+export function DebugInvitations({
+  invitations,
+  accept,
+  encryptionPublicKey,
+  encryptionPrivateKey,
+  signaturePrivateKey,
+}: Props) {
   return (
     <ul className="text-xs">
       {invitations.map((invitation) => {
@@ -16,7 +30,12 @@ export function DebugInvitations({ invitations, accept }: Props) {
             <pre>{JSON.stringify(invitation, null, 2)}</pre>
             <Button
               onClick={() => {
-                accept(invitation);
+                accept({
+                  encryptionPublicKey,
+                  encryptionPrivateKey,
+                  signaturePrivateKey,
+                  invitation,
+                });
               }}
             >
               Accept
diff --git a/apps/events/src/routes/playground.tsx b/apps/events/src/routes/playground.tsx
index 44a3edaf..6f71d3f5 100644
--- a/apps/events/src/routes/playground.tsx
+++ b/apps/events/src/routes/playground.tsx
@@ -1,50 +1,15 @@
-import * as automerge from '@automerge/automerge';
-import { uuid } from '@automerge/automerge';
-import { type AutomergeUrl, type DocHandle, Repo } from '@automerge/automerge-repo';
 import { RepoContext } from '@automerge/automerge-repo-react-hooks';
-import { bytesToHex, hexToBytes } from '@noble/hashes/utils';
 import { createFileRoute } from '@tanstack/react-router';
 import { useSelector } from '@xstate/store/react';
-import { Effect, Exit } from 'effect';
-import * as Schema from 'effect/Schema';
-import { useEffect, useState } from 'react';
+import { useState } from 'react';
 
-import type {
-  Invitation,
-  RequestAcceptInvitationEvent,
-  RequestCreateInvitationEvent,
-  RequestCreateSpaceEvent,
-  RequestCreateUpdate,
-  RequestListInvitations,
-  RequestListSpaces,
-  RequestSubscribeToSpace,
-  SpaceEvent,
-  SpaceState,
-  Updates,
-} from '@graphprotocol/graph-framework';
-import {
-  ResponseMessage,
-  acceptInvitation,
-  applyEvent,
-  createInvitation,
-  createKey,
-  createSpace,
-  decryptKey,
-  decryptMessage,
-  deserialize,
-  encryptKey,
-  encryptMessage,
-  generateId,
-  serialize,
-} from '@graphprotocol/graph-framework';
+import { GraphFramework, store, useGraphFramework } from '@graphprotocol/graph-framework';
 
 import { AutomergeApp } from '@/components/automerge-app';
 import { DebugInvitations } from '@/components/debug-invitations';
 import { DebugSpaceEvents } from '@/components/debug-space-events';
 import { DebugSpaceState } from '@/components/debug-space-state';
 import { Button } from '@/components/ui/button';
-import { assertExhaustive } from '@/lib/assertExhaustive';
-import { store } from '@/lib/store';
 
 const availableAccounts = [
   {
@@ -67,16 +32,11 @@ const availableAccounts = [
   },
 ];
 
-const decodeResponseMessage = Schema.decodeUnknownEither(ResponseMessage);
-
 export const Route = createFileRoute('/playground')({
   component: () => <ChooseAccount />,
 });
 
-const hardcodedUrl = 'automerge:2JWupfYZBBm7s2NCy1VnvQa4Vdvf' as AutomergeUrl;
-
 const App = ({
-  accountId,
   signaturePrivateKey,
   encryptionPublicKey,
   encryptionPrivateKey,
@@ -86,286 +46,27 @@ const App = ({
   encryptionPrivateKey: string;
   encryptionPublicKey: string;
 }) => {
-  const [websocketConnection, setWebsocketConnection] = useState<WebSocket>();
-  const [repo, setRepo] = useState<Repo | null>(null);
-  const [invitations, setInvitations] = useState<Invitation[]>([]);
-  const [automergeHandle, setAutomergeHandle] = useState<DocHandle<{ count: number }> | null>(null);
   const storeState = useSelector(store, (state) => state.context);
   const spaces = storeState.spaces;
   const updatesInFlight = storeState.updatesInFlight;
-
-  // Create a stable WebSocket connection that only depends on accountId
-  useEffect(() => {
-    const websocketConnection = new WebSocket(`ws://localhost:3030/?accountId=${accountId}`);
-    const repo = new Repo({});
-    setRepo(repo);
-
-    const docHandle = repo.find<{ count: number }>(hardcodedUrl);
-    // set it to ready to interact with the document
-    docHandle.doneLoading();
-
-    docHandle.on('change', (result) => {
-      const lastLocalChange = automerge.getLastLocalChange(result.doc);
-      if (!lastLocalChange) {
-        return;
-      }
-
-      try {
-        const storeState = store.getSnapshot();
-        const space = storeState.context.spaces[0];
-
-        const ephemeralId = uuid();
-
-        const nonceAndCiphertext = encryptMessage({
-          message: lastLocalChange,
-          secretKey: hexToBytes(space.keys[0].key),
-        });
-
-        const messageToSend: RequestCreateUpdate = {
-          type: 'create-update',
-          ephemeralId,
-          update: nonceAndCiphertext,
-          spaceId: space.id,
-        };
-        websocketConnection.send(serialize(messageToSend));
-      } catch (error) {
-        console.error('Error sending message', error);
-      }
-    });
-
-    setAutomergeHandle(docHandle);
-
-    store.send({
-      type: 'setAutomergeDocumentId',
-      automergeDocumentId: docHandle.url.slice(10),
-    });
-    setWebsocketConnection(websocketConnection);
-
-    const onOpen = () => {
-      console.log('websocket connected');
-    };
-
-    const onError = (event: Event) => {
-      console.log('websocket error', event);
-    };
-
-    const onClose = (event: CloseEvent) => {
-      console.log('websocket close', event);
-    };
-
-    websocketConnection.addEventListener('open', onOpen);
-    websocketConnection.addEventListener('error', onError);
-    websocketConnection.addEventListener('close', onClose);
-
-    return () => {
-      websocketConnection.removeEventListener('open', onOpen);
-      websocketConnection.removeEventListener('error', onError);
-      websocketConnection.removeEventListener('close', onClose);
-      websocketConnection.close();
-    };
-  }, [accountId]); // Only recreate when accountId changes
-
-  // Handle WebSocket messages in a separate effect
-  // biome-ignore lint/correctness/useExhaustiveDependencies: automergeHandle is a mutable object
-  useEffect(() => {
-    if (!websocketConnection) return;
-
-    const onMessage = async (event: MessageEvent) => {
-      const data = deserialize(event.data);
-      const message = decodeResponseMessage(data);
-      if (message._tag === 'Right') {
-        const response = message.right;
-        switch (response.type) {
-          case 'list-spaces': {
-            response.spaces.map((space) => {
-              store.send({
-                type: 'setSpaceFromList',
-                spaceId: space.id,
-              });
-            });
-            // fetch all spaces (for debugging purposes)
-            for (const space of response.spaces) {
-              const message: RequestSubscribeToSpace = { type: 'subscribe-space', id: space.id };
-              websocketConnection?.send(serialize(message));
-            }
-            break;
-          }
-          case 'space': {
-            let state: SpaceState | undefined = undefined;
-
-            for (const event of response.events) {
-              const applyEventResult = await Effect.runPromiseExit(applyEvent({ state: undefined, event }));
-              if (Exit.isSuccess(applyEventResult)) {
-                state = applyEventResult.value;
-              }
-            }
-
-            const newState = state as SpaceState;
-
-            const storeState = store.getSnapshot();
-
-            const keys = response.keyBoxes.map((keyBox) => {
-              const key = decryptKey({
-                keyBoxCiphertext: hexToBytes(keyBox.ciphertext),
-                keyBoxNonce: hexToBytes(keyBox.nonce),
-                publicKey: hexToBytes(keyBox.authorPublicKey),
-                privateKey: hexToBytes(storeState.context.encryptionPrivateKey),
-              });
-              return { id: keyBox.id, key: bytesToHex(key) };
-            });
-
-            store.send({
-              type: 'setSpace',
-              spaceId: response.id,
-              updates: response.updates as Updates,
-              events: response.events as SpaceEvent[],
-              spaceState: newState,
-              keys,
-            });
-
-            if (response.updates) {
-              const updates = response.updates?.updates.map((update) => {
-                return decryptMessage({
-                  nonceAndCiphertext: update,
-                  secretKey: hexToBytes(keys[0].key),
-                });
-              });
-
-              for (const update of updates) {
-                if (!automergeHandle) {
-                  return;
-                }
-
-                automergeHandle.update((existingDoc) => {
-                  const [newDoc] = automerge.applyChanges(existingDoc, [update]);
-                  return newDoc;
-                });
-              }
-
-              store.send({
-                type: 'applyUpdate',
-                spaceId: response.id,
-                firstUpdateClock: response.updates?.firstUpdateClock,
-                lastUpdateClock: response.updates?.lastUpdateClock,
-              });
-            }
-            break;
-          }
-          case 'space-event': {
-            const space = spaces.find((s) => s.id === response.spaceId);
-            if (!space) {
-              console.error('Space not found', response.spaceId);
-              return;
-            }
-            if (!space.state) {
-              console.error('Space has no state', response.spaceId);
-              return;
-            }
-
-            const applyEventResult = await Effect.runPromiseExit(
-              applyEvent({ event: response.event, state: space.state }),
-            );
-            if (Exit.isSuccess(applyEventResult)) {
-              store.send({
-                type: 'applyEvent',
-                spaceId: response.spaceId,
-                event: response.event,
-                state: applyEventResult.value,
-              });
-            }
-
-            break;
-          }
-          case 'list-invitations': {
-            setInvitations(response.invitations.map((invitation) => invitation));
-            break;
-          }
-          case 'update-confirmed': {
-            store.send({
-              type: 'removeUpdateInFlight',
-              ephemeralId: response.ephemeralId,
-            });
-            store.send({
-              type: 'updateConfirmed',
-              spaceId: response.spaceId,
-              clock: response.clock,
-            });
-            break;
-          }
-          case 'updates-notification': {
-            const storeState = store.getSnapshot();
-
-            const space = storeState.context.spaces.find((s) => s.id === response.spaceId);
-            if (!space) {
-              console.error('Space not found', response.spaceId);
-              return;
-            }
-
-            const automergeUpdates = response.updates.updates.map((update) => {
-              return decryptMessage({
-                nonceAndCiphertext: update,
-                secretKey: hexToBytes(space.keys[0].key),
-              });
-            });
-
-            automergeHandle?.update((existingDoc) => {
-              const [newDoc] = automerge.applyChanges(existingDoc, automergeUpdates);
-              return newDoc;
-            });
-
-            store.send({
-              type: 'applyUpdate',
-              spaceId: response.spaceId,
-              firstUpdateClock: response.updates.firstUpdateClock,
-              lastUpdateClock: response.updates.lastUpdateClock,
-            });
-            break;
-          }
-          default:
-            assertExhaustive(response);
-        }
-      }
-    };
-
-    websocketConnection.addEventListener('message', onMessage);
-
-    return () => {
-      websocketConnection.removeEventListener('message', onMessage);
-    };
-  }, [websocketConnection, spaces]);
+  const {
+    createSpace,
+    listSpaces,
+    listInvitations,
+    invitations,
+    acceptInvitation,
+    subscribeToSpace,
+    inviteToSpace,
+    repo,
+    automergeHandle,
+  } = useGraphFramework();
 
   return (
     <>
       <div>
         <Button
-          onClick={async () => {
-            const spaceEvent = await Effect.runPromise(
-              createSpace({
-                author: {
-                  encryptionPublicKey,
-                  signaturePrivateKey,
-                  signaturePublicKey: accountId,
-                },
-              }),
-            );
-            const result = createKey({
-              privateKey: hexToBytes(encryptionPrivateKey),
-              publicKey: hexToBytes(encryptionPublicKey),
-            });
-
-            const message: RequestCreateSpaceEvent = {
-              type: 'create-space-event',
-              event: spaceEvent,
-              spaceId: spaceEvent.transaction.id,
-              keyId: generateId(),
-              keyBox: {
-                accountId,
-                ciphertext: bytesToHex(result.keyBoxCiphertext),
-                nonce: bytesToHex(result.keyBoxNonce),
-                authorPublicKey: encryptionPublicKey,
-              },
-            };
-            websocketConnection?.send(serialize(message));
+          onClick={() => {
+            createSpace({ encryptionPublicKey, encryptionPrivateKey, signaturePrivateKey });
           }}
         >
           Create space
@@ -373,8 +74,7 @@ const App = ({
 
         <Button
           onClick={() => {
-            const message: RequestListSpaces = { type: 'list-spaces' };
-            websocketConnection?.send(serialize(message));
+            listSpaces();
           }}
         >
           List Spaces
@@ -382,8 +82,7 @@ const App = ({
 
         <Button
           onClick={() => {
-            const message: RequestListInvitations = { type: 'list-invitations' };
-            websocketConnection?.send(serialize(message));
+            listInvitations();
           }}
         >
           List Invitations
@@ -392,34 +91,10 @@ const App = ({
       <h2 className="text-lg">Invitations</h2>
       <DebugInvitations
         invitations={invitations}
-        accept={async (invitation) => {
-          const spaceEvent = await Effect.runPromiseExit(
-            acceptInvitation({
-              author: {
-                signaturePublicKey: accountId,
-                encryptionPublicKey,
-                signaturePrivateKey,
-              },
-              previousEventHash: invitation.previousEventHash,
-            }),
-          );
-          if (Exit.isFailure(spaceEvent)) {
-            console.error('Failed to accept invitation', spaceEvent);
-            return;
-          }
-          const message: RequestAcceptInvitationEvent = {
-            type: 'accept-invitation-event',
-            event: spaceEvent.value,
-            spaceId: invitation.spaceId,
-          };
-          websocketConnection?.send(serialize(message));
-
-          // temporary until we have define a strategy for accepting invitations response
-          setTimeout(() => {
-            const message2: RequestListInvitations = { type: 'list-invitations' };
-            websocketConnection?.send(serialize(message2));
-          }, 1000);
-        }}
+        accept={acceptInvitation}
+        encryptionPublicKey={encryptionPublicKey}
+        encryptionPrivateKey={encryptionPrivateKey}
+        signaturePrivateKey={signaturePrivateKey}
       />
       <h2 className="text-lg">Spaces</h2>
       <ul>
@@ -431,8 +106,7 @@ const App = ({
               <pre className="text-xs">{JSON.stringify(space.keys)}</pre>
               <Button
                 onClick={() => {
-                  const message: RequestSubscribeToSpace = { type: 'subscribe-space', id: space.id };
-                  websocketConnection?.send(serialize(message));
+                  subscribeToSpace({ spaceId: space.id });
                 }}
               >
                 Get data and subscribe to Space
@@ -442,52 +116,14 @@ const App = ({
                 return (
                   <Button
                     key={invitee.accountId}
-                    onClick={async () => {
-                      if (!space.state) {
-                        console.error('No state found for space');
-                        return;
-                      }
-                      const spaceEvent = await Effect.runPromiseExit(
-                        createInvitation({
-                          author: {
-                            signaturePublicKey: accountId,
-                            encryptionPublicKey,
-                            signaturePrivateKey,
-                          },
-                          previousEventHash: space.state.lastEventHash,
-                          invitee: {
-                            signaturePublicKey: invitee.accountId,
-                            encryptionPublicKey,
-                          },
-                        }),
-                      );
-                      if (Exit.isFailure(spaceEvent)) {
-                        console.error('Failed to create invitation', spaceEvent);
-                        return;
-                      }
-
-                      const keyBoxes = space.keys.map((key) => {
-                        const keyBox = encryptKey({
-                          key: hexToBytes(key.key),
-                          publicKey: hexToBytes(invitee.encryptionPublicKey),
-                          privateKey: hexToBytes(encryptionPrivateKey),
-                        });
-                        return {
-                          id: key.id,
-                          ciphertext: bytesToHex(keyBox.keyBoxCiphertext),
-                          nonce: bytesToHex(keyBox.keyBoxNonce),
-                          authorPublicKey: encryptionPublicKey,
-                          accountId: invitee.accountId,
-                        };
+                    onClick={() => {
+                      inviteToSpace({
+                        encryptionPublicKey,
+                        encryptionPrivateKey,
+                        signaturePrivateKey,
+                        space,
+                        invitee,
                       });
-
-                      const message: RequestCreateInvitationEvent = {
-                        type: 'create-invitation-event',
-                        event: spaceEvent.value,
-                        spaceId: space.id,
-                        keyBoxes,
-                      };
-                      websocketConnection?.send(serialize(message));
                     }}
                   >
                     Invite {invitee.accountId.substring(0, 4)}
@@ -496,7 +132,7 @@ const App = ({
               })}
               <h3>Updates</h3>
               <RepoContext.Provider value={repo}>
-                {automergeHandle && <AutomergeApp url={automergeHandle.url} />}
+                <AutomergeApp url={automergeHandle.url} />
               </RepoContext.Provider>
               <h3>Last update clock: {space.lastUpdateClock}</h3>
               <h3>Updates in flight</h3>
@@ -574,14 +210,16 @@ export const ChooseAccount = () => {
       Account: {account?.accountId ? account.accountId : 'none'}
       <hr />
       {account && (
-        <App
-          // forcing a remount of the App component when the accountId changes
-          key={account.accountId}
-          accountId={account.accountId}
-          signaturePrivateKey={account.signaturePrivateKey}
-          encryptionPrivateKey={account.encryptionPrivateKey}
-          encryptionPublicKey={account.encryptionPublicKey}
-        />
+        <GraphFramework accountId={account.accountId}>
+          <App
+            // forcing a remount of the App component when the accountId changes
+            key={account.accountId}
+            accountId={account.accountId}
+            signaturePrivateKey={account.signaturePrivateKey}
+            encryptionPrivateKey={account.encryptionPrivateKey}
+            encryptionPublicKey={account.encryptionPublicKey}
+          />
+        </GraphFramework>
       )}
     </div>
   );
diff --git a/apps/events/src/types.ts b/apps/events/src/types.ts
index a3e63175..b4984090 100644
--- a/apps/events/src/types.ts
+++ b/apps/events/src/types.ts
@@ -1,15 +1,3 @@
-import type { SpaceEvent, SpaceState } from '@graphprotocol/graph-framework';
-
-export type SpaceStorageEntry = {
-  id: string;
-  events: SpaceEvent[];
-  state: SpaceState | undefined;
-  keys: { id: string; key: string }[];
-  updates: Uint8Array[];
-  lastUpdateClock: number;
-  automergeDocumentId: string;
-};
-
 export interface Doc {
   count: number;
 }
diff --git a/packages/graph-framework/package.json b/packages/graph-framework/package.json
index ce4975cb..6ac43b2d 100644
--- a/packages/graph-framework/package.json
+++ b/packages/graph-framework/package.json
@@ -53,14 +53,16 @@
   },
   "peerDependencies": {
     "@automerge/automerge": "^2",
-    "@automerge/automerge-repo": "^1",
-    "@automerge/automerge-repo-react-hooks": "^1",
+    "@automerge/automerge-repo": "^2",
+    "@automerge/automerge-repo-react-hooks": "^2",
     "react": "^18"
   },
   "devDependencies": {
-    "@automerge/automerge": "^2.2.8",
-    "@automerge/automerge-repo": "^1.2.1",
-    "@automerge/automerge-repo-react-hooks": "^1.2.1",
+    "@automerge/automerge": "^v2.2.9-alpha.3",
+    "@automerge/automerge-repo": "^2.0.0-alpha.14",
+    "@automerge/automerge-repo-network-websocket": "^2.0.0-alpha.14",
+    "@automerge/automerge-repo-react-hooks": "^2.0.0-alpha.14",
+    "@automerge/automerge-repo-storage-indexeddb": "^2.0.0-alpha.14",
     "@testing-library/jest-dom": "^6.5.0",
     "@testing-library/react": "^16.0.1",
     "@types/react": "^18.3.7",
@@ -69,11 +71,15 @@
     "jsdom": "^25.0.1"
   },
   "dependencies": {
-    "@graph-framework/utils": "workspace:*",
-    "@graph-framework/space-events": "workspace:*",
     "@graph-framework/identity": "workspace:*",
-    "@graph-framework/schema": "workspace:*",
+    "@graph-framework/key": "workspace:*",
     "@graph-framework/messages": "workspace:*",
-    "@graph-framework/key": "workspace:*"
+    "@graph-framework/schema": "workspace:*",
+    "@graph-framework/space-events": "workspace:*",
+    "@graph-framework/utils": "workspace:*",
+    "@noble/hashes": "^1.5.0",
+    "@xstate/store": "^2.6.1",
+    "effect": "^3.10.19",
+    "xstate": "^5.19.0"
   }
 }
diff --git a/apps/events/src/lib/assertExhaustive.ts b/packages/graph-framework/src/assertExhaustive.ts
similarity index 100%
rename from apps/events/src/lib/assertExhaustive.ts
rename to packages/graph-framework/src/assertExhaustive.ts
diff --git a/packages/graph-framework/src/core.tsx b/packages/graph-framework/src/core.tsx
new file mode 100644
index 00000000..5fb02a23
--- /dev/null
+++ b/packages/graph-framework/src/core.tsx
@@ -0,0 +1,501 @@
+import * as automerge from '@automerge/automerge';
+import { uuid } from '@automerge/automerge';
+import { type AutomergeUrl, type DocHandle, Repo } from '@automerge/automerge-repo';
+import { bytesToHex, hexToBytes } from '@noble/hashes/utils';
+import { Effect, Exit } from 'effect';
+import * as Schema from 'effect/Schema';
+import { createContext, useContext, useEffect, useState } from 'react';
+
+import { createKey, decryptKey, encryptKey } from '@graph-framework/key';
+import type {
+  Invitation,
+  RequestAcceptInvitationEvent,
+  RequestCreateInvitationEvent,
+  RequestCreateSpaceEvent,
+  RequestCreateUpdate,
+  RequestListInvitations,
+  RequestListSpaces,
+  RequestSubscribeToSpace,
+  Updates,
+} from '@graph-framework/messages';
+import { ResponseMessage, decryptMessage, deserialize, encryptMessage, serialize } from '@graph-framework/messages';
+import type { SpaceEvent, SpaceState } from '@graph-framework/space-events';
+import { acceptInvitation, applyEvent, createInvitation, createSpace } from '@graph-framework/space-events';
+import { generateId } from '@graph-framework/utils';
+
+import { useSelector } from '@xstate/store/react';
+import { assertExhaustive } from './assertExhaustive.js';
+import type { SpaceStorageEntry } from './store.js';
+import { store } from './store.js';
+
+const hardcodedUrl = 'automerge:2JWupfYZBBm7s2NCy1VnvQa4Vdvf' as AutomergeUrl;
+
+const decodeResponseMessage = Schema.decodeUnknownEither(ResponseMessage);
+
+type Props = {
+  children: React.ReactNode;
+  accountId: string;
+};
+
+const GraphFrameworkContext = createContext<{
+  invitations: Invitation[];
+  createSpace: (params: {
+    encryptionPublicKey: string;
+    encryptionPrivateKey: string;
+    signaturePrivateKey: string;
+  }) => Promise<unknown>;
+  listSpaces: () => void;
+  listInvitations: () => void;
+  acceptInvitation: (params: {
+    encryptionPublicKey: string;
+    encryptionPrivateKey: string;
+    signaturePrivateKey: string;
+    invitation: Invitation;
+  }) => Promise<unknown>;
+  subscribeToSpace: (params: { spaceId: string }) => void;
+  inviteToSpace: (params: {
+    encryptionPublicKey: string;
+    encryptionPrivateKey: string;
+    signaturePrivateKey: string;
+    space: SpaceStorageEntry;
+    invitee: {
+      accountId: string;
+      encryptionPublicKey: string;
+    };
+  }) => Promise<unknown>;
+  repo: Repo;
+  automergeHandle: DocHandle<unknown>;
+}>({
+  invitations: [],
+  createSpace: async () => {},
+  listSpaces: () => {},
+  listInvitations: () => {},
+  acceptInvitation: async () => {},
+  subscribeToSpace: () => {},
+  inviteToSpace: async () => {},
+  // @ts-expect-error repo is always set
+  repo: undefined,
+  // @ts-expect-error automergeHandle is always set
+  automergeHandle: undefined,
+});
+
+export function GraphFramework({ children, accountId }: Props) {
+  const [websocketConnection, setWebsocketConnection] = useState<WebSocket>();
+  const [repo] = useState<Repo>(() => new Repo({}));
+  const [invitations, setInvitations] = useState<Invitation[]>([]);
+  const [automergeHandle] = useState<DocHandle<unknown>>(() => repo.find(hardcodedUrl));
+  const storeState = useSelector(store, (state) => state.context);
+  const spaces = storeState.spaces;
+
+  // Create a stable WebSocket connection that only depends on accountId
+  useEffect(() => {
+    const websocketConnection = new WebSocket(`ws://localhost:3030/?accountId=${accountId}`);
+
+    const docHandle = automergeHandle;
+    // set it to ready to interact with the document
+    docHandle.doneLoading();
+
+    docHandle.on('change', (result) => {
+      const lastLocalChange = automerge.getLastLocalChange(result.doc);
+      if (!lastLocalChange) {
+        return;
+      }
+
+      try {
+        const storeState = store.getSnapshot();
+        const space = storeState.context.spaces[0];
+
+        const ephemeralId = uuid();
+
+        const nonceAndCiphertext = encryptMessage({
+          message: lastLocalChange,
+          secretKey: hexToBytes(space.keys[0].key),
+        });
+
+        const messageToSend: RequestCreateUpdate = {
+          type: 'create-update',
+          ephemeralId,
+          update: nonceAndCiphertext,
+          spaceId: space.id,
+        };
+        websocketConnection.send(serialize(messageToSend));
+      } catch (error) {
+        console.error('Error sending message', error);
+      }
+    });
+
+    store.send({
+      type: 'setAutomergeDocumentId',
+      automergeDocumentId: docHandle.url.slice(10),
+    });
+    setWebsocketConnection(websocketConnection);
+
+    const onOpen = () => {
+      console.log('websocket connected');
+    };
+
+    const onError = (event: Event) => {
+      console.log('websocket error', event);
+    };
+
+    const onClose = (event: CloseEvent) => {
+      console.log('websocket close', event);
+    };
+
+    websocketConnection.addEventListener('open', onOpen);
+    websocketConnection.addEventListener('error', onError);
+    websocketConnection.addEventListener('close', onClose);
+
+    return () => {
+      websocketConnection.removeEventListener('open', onOpen);
+      websocketConnection.removeEventListener('error', onError);
+      websocketConnection.removeEventListener('close', onClose);
+      websocketConnection.close();
+    };
+  }, [accountId, automergeHandle]); // Only recreate when accountId changes
+
+  // Handle WebSocket messages in a separate effect
+  // biome-ignore lint/correctness/useExhaustiveDependencies: automergeHandle is a mutable object
+  useEffect(() => {
+    if (!websocketConnection) return;
+
+    const onMessage = async (event: MessageEvent) => {
+      const data = deserialize(event.data);
+      const message = decodeResponseMessage(data);
+      if (message._tag === 'Right') {
+        const response = message.right;
+        switch (response.type) {
+          case 'list-spaces': {
+            response.spaces.map((space) => {
+              store.send({
+                type: 'setSpaceFromList',
+                spaceId: space.id,
+              });
+            });
+            // fetch all spaces (for debugging purposes)
+            for (const space of response.spaces) {
+              const message: RequestSubscribeToSpace = { type: 'subscribe-space', id: space.id };
+              websocketConnection?.send(serialize(message));
+            }
+            break;
+          }
+          case 'space': {
+            let state: SpaceState | undefined = undefined;
+
+            for (const event of response.events) {
+              const applyEventResult = await Effect.runPromiseExit(applyEvent({ state: undefined, event }));
+              if (Exit.isSuccess(applyEventResult)) {
+                state = applyEventResult.value;
+              }
+            }
+
+            const newState = state as SpaceState;
+
+            const storeState = store.getSnapshot();
+
+            const keys = response.keyBoxes.map((keyBox) => {
+              const key = decryptKey({
+                keyBoxCiphertext: hexToBytes(keyBox.ciphertext),
+                keyBoxNonce: hexToBytes(keyBox.nonce),
+                publicKey: hexToBytes(keyBox.authorPublicKey),
+                privateKey: hexToBytes(storeState.context.encryptionPrivateKey),
+              });
+              return { id: keyBox.id, key: bytesToHex(key) };
+            });
+
+            store.send({
+              type: 'setSpace',
+              spaceId: response.id,
+              updates: response.updates as Updates,
+              events: response.events as SpaceEvent[],
+              spaceState: newState,
+              keys,
+            });
+
+            if (response.updates) {
+              const updates = response.updates?.updates.map((update) => {
+                return decryptMessage({
+                  nonceAndCiphertext: update,
+                  secretKey: hexToBytes(keys[0].key),
+                });
+              });
+
+              for (const update of updates) {
+                if (!automergeHandle) {
+                  return;
+                }
+
+                automergeHandle.update((existingDoc) => {
+                  const [newDoc] = automerge.applyChanges(existingDoc, [update]);
+                  return newDoc;
+                });
+              }
+
+              store.send({
+                type: 'applyUpdate',
+                spaceId: response.id,
+                firstUpdateClock: response.updates?.firstUpdateClock,
+                lastUpdateClock: response.updates?.lastUpdateClock,
+              });
+            }
+            break;
+          }
+          case 'space-event': {
+            const space = spaces.find((s) => s.id === response.spaceId);
+            if (!space) {
+              console.error('Space not found', response.spaceId);
+              return;
+            }
+            if (!space.state) {
+              console.error('Space has no state', response.spaceId);
+              return;
+            }
+
+            const applyEventResult = await Effect.runPromiseExit(
+              applyEvent({ event: response.event, state: space.state }),
+            );
+            if (Exit.isSuccess(applyEventResult)) {
+              store.send({
+                type: 'applyEvent',
+                spaceId: response.spaceId,
+                event: response.event,
+                state: applyEventResult.value,
+              });
+            }
+
+            break;
+          }
+          case 'list-invitations': {
+            setInvitations(response.invitations.map((invitation) => invitation));
+            break;
+          }
+          case 'update-confirmed': {
+            store.send({
+              type: 'removeUpdateInFlight',
+              ephemeralId: response.ephemeralId,
+            });
+            store.send({
+              type: 'updateConfirmed',
+              spaceId: response.spaceId,
+              clock: response.clock,
+            });
+            break;
+          }
+          case 'updates-notification': {
+            const storeState = store.getSnapshot();
+
+            const space = storeState.context.spaces.find((s) => s.id === response.spaceId);
+            if (!space) {
+              console.error('Space not found', response.spaceId);
+              return;
+            }
+
+            const automergeUpdates = response.updates.updates.map((update) => {
+              return decryptMessage({
+                nonceAndCiphertext: update,
+                secretKey: hexToBytes(space.keys[0].key),
+              });
+            });
+
+            automergeHandle?.update((existingDoc) => {
+              const [newDoc] = automerge.applyChanges(existingDoc, automergeUpdates);
+              return newDoc;
+            });
+
+            store.send({
+              type: 'applyUpdate',
+              spaceId: response.spaceId,
+              firstUpdateClock: response.updates.firstUpdateClock,
+              lastUpdateClock: response.updates.lastUpdateClock,
+            });
+            break;
+          }
+          default:
+            assertExhaustive(response);
+        }
+      }
+    };
+
+    websocketConnection.addEventListener('message', onMessage);
+
+    return () => {
+      websocketConnection.removeEventListener('message', onMessage);
+    };
+  }, [websocketConnection, spaces]);
+
+  const createSpaceForContext = async ({
+    encryptionPublicKey,
+    encryptionPrivateKey,
+    signaturePrivateKey,
+  }: {
+    encryptionPublicKey: string;
+    encryptionPrivateKey: string;
+    signaturePrivateKey: string;
+  }) => {
+    const spaceEvent = await Effect.runPromise(
+      createSpace({
+        author: {
+          encryptionPublicKey,
+          signaturePrivateKey,
+          signaturePublicKey: accountId,
+        },
+      }),
+    );
+    const result = createKey({
+      privateKey: hexToBytes(encryptionPrivateKey),
+      publicKey: hexToBytes(encryptionPublicKey),
+    });
+
+    const message: RequestCreateSpaceEvent = {
+      type: 'create-space-event',
+      event: spaceEvent,
+      spaceId: spaceEvent.transaction.id,
+      keyId: generateId(),
+      keyBox: {
+        accountId,
+        ciphertext: bytesToHex(result.keyBoxCiphertext),
+        nonce: bytesToHex(result.keyBoxNonce),
+        authorPublicKey: encryptionPublicKey,
+      },
+    };
+    websocketConnection?.send(serialize(message));
+  };
+
+  const listSpaces = async () => {
+    const message: RequestListSpaces = { type: 'list-spaces' };
+    websocketConnection?.send(serialize(message));
+  };
+
+  const listInvitations = async () => {
+    const message: RequestListInvitations = { type: 'list-invitations' };
+    websocketConnection?.send(serialize(message));
+  };
+
+  const acceptInvitationForContext = async ({
+    encryptionPublicKey,
+    signaturePrivateKey,
+    invitation,
+  }: {
+    encryptionPublicKey: string;
+    encryptionPrivateKey: string;
+    signaturePrivateKey: string;
+    invitation: Invitation;
+  }) => {
+    const spaceEvent = await Effect.runPromiseExit(
+      acceptInvitation({
+        author: {
+          signaturePublicKey: accountId,
+          encryptionPublicKey,
+          signaturePrivateKey,
+        },
+        previousEventHash: invitation.previousEventHash,
+      }),
+    );
+    if (Exit.isFailure(spaceEvent)) {
+      console.error('Failed to accept invitation', spaceEvent);
+      return;
+    }
+    const message: RequestAcceptInvitationEvent = {
+      type: 'accept-invitation-event',
+      event: spaceEvent.value,
+      spaceId: invitation.spaceId,
+    };
+    websocketConnection?.send(serialize(message));
+
+    // temporary until we have define a strategy for accepting invitations response
+    setTimeout(() => {
+      const message2: RequestListInvitations = { type: 'list-invitations' };
+      websocketConnection?.send(serialize(message2));
+    }, 1000);
+  };
+
+  const subscribeToSpace = (params: { spaceId: string }) => {
+    const message: RequestSubscribeToSpace = { type: 'subscribe-space', id: params.spaceId };
+    websocketConnection?.send(serialize(message));
+  };
+
+  const inviteToSpace = async ({
+    encryptionPublicKey,
+    encryptionPrivateKey,
+    signaturePrivateKey,
+    space,
+    invitee,
+  }: {
+    encryptionPublicKey: string;
+    encryptionPrivateKey: string;
+    signaturePrivateKey: string;
+    space: SpaceStorageEntry;
+    invitee: {
+      accountId: string;
+      encryptionPublicKey: string;
+    };
+  }) => {
+    if (!space.state) {
+      console.error('No state found for space');
+      return;
+    }
+    const spaceEvent = await Effect.runPromiseExit(
+      createInvitation({
+        author: {
+          signaturePublicKey: accountId,
+          encryptionPublicKey,
+          signaturePrivateKey,
+        },
+        previousEventHash: space.state.lastEventHash,
+        invitee: {
+          signaturePublicKey: invitee.accountId,
+          encryptionPublicKey,
+        },
+      }),
+    );
+    if (Exit.isFailure(spaceEvent)) {
+      console.error('Failed to create invitation', spaceEvent);
+      return;
+    }
+
+    const keyBoxes = space.keys.map((key) => {
+      const keyBox = encryptKey({
+        key: hexToBytes(key.key),
+        publicKey: hexToBytes(invitee.encryptionPublicKey),
+        privateKey: hexToBytes(encryptionPrivateKey),
+      });
+      return {
+        id: key.id,
+        ciphertext: bytesToHex(keyBox.keyBoxCiphertext),
+        nonce: bytesToHex(keyBox.keyBoxNonce),
+        authorPublicKey: encryptionPublicKey,
+        accountId: invitee.accountId,
+      };
+    });
+
+    const message: RequestCreateInvitationEvent = {
+      type: 'create-invitation-event',
+      event: spaceEvent.value,
+      spaceId: space.id,
+      keyBoxes,
+    };
+    websocketConnection?.send(serialize(message));
+  };
+
+  return (
+    <GraphFrameworkContext.Provider
+      value={{
+        invitations,
+        createSpace: createSpaceForContext,
+        listSpaces,
+        listInvitations,
+        acceptInvitation: acceptInvitationForContext,
+        subscribeToSpace,
+        inviteToSpace,
+        repo,
+        automergeHandle,
+      }}
+    >
+      {children}
+    </GraphFrameworkContext.Provider>
+  );
+}
+
+export const useGraphFramework = () => {
+  return useContext(GraphFrameworkContext);
+};
diff --git a/packages/graph-framework/src/index.tsx b/packages/graph-framework/src/index.tsx
index 4c7acbfb..8be8a45c 100644
--- a/packages/graph-framework/src/index.tsx
+++ b/packages/graph-framework/src/index.tsx
@@ -1,6 +1,8 @@
+export * from './core.js';
 export * from './exports/identity.js';
 export * from './exports/key.js';
 export * from './exports/messages.js';
 export * from './exports/schema.js';
 export * from './exports/space-events.js';
 export * from './exports/utils.js';
+export * from './store.js';
diff --git a/apps/events/src/lib/store.ts b/packages/graph-framework/src/store.ts
similarity index 93%
rename from apps/events/src/lib/store.ts
rename to packages/graph-framework/src/store.ts
index 191bdcff..83286f8e 100644
--- a/apps/events/src/lib/store.ts
+++ b/packages/graph-framework/src/store.ts
@@ -1,6 +1,16 @@
-import type { SpaceEvent, SpaceState, Updates } from '@graphprotocol/graph-framework';
+import type { Updates } from '@graph-framework/messages';
+import type { SpaceEvent, SpaceState } from '@graph-framework/space-events';
 import { createStore } from '@xstate/store';
-import type { SpaceStorageEntry } from '../types';
+
+export type SpaceStorageEntry = {
+  id: string;
+  events: SpaceEvent[];
+  state: SpaceState | undefined;
+  keys: { id: string; key: string }[];
+  updates: Uint8Array[];
+  lastUpdateClock: number;
+  automergeDocumentId: string;
+};
 
 interface StoreContext {
   spaces: SpaceStorageEntry[];
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 296a4118..8909aa99 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -38,15 +38,9 @@ importers:
       '@automerge/automerge-repo':
         specifier: ^2.0.0-alpha.14
         version: 2.0.0-collectionsync-alpha.1(@swc/core@1.7.26(@swc/helpers@0.5.13))(@types/node@22.9.0)(typescript@5.6.3)
-      '@automerge/automerge-repo-network-websocket':
-        specifier: ^2.0.0-alpha.14
-        version: 2.0.0-collectionsync-alpha.1(@swc/core@1.7.26(@swc/helpers@0.5.13))(@types/node@22.9.0)(bufferutil@4.0.8)(typescript@5.6.3)(utf-8-validate@5.0.10)
       '@automerge/automerge-repo-react-hooks':
         specifier: ^2.0.0-alpha.14
         version: 2.0.0-collectionsync-alpha.1(@swc/core@1.7.26(@swc/helpers@0.5.13))(@types/node@22.9.0)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(typescript@5.6.3)
-      '@automerge/automerge-repo-storage-indexeddb':
-        specifier: ^2.0.0-alpha.14
-        version: 2.0.0-collectionsync-alpha.1(@swc/core@1.7.26(@swc/helpers@0.5.13))(@types/node@22.9.0)(typescript@5.6.3)
       '@graphprotocol/graph-framework':
         specifier: workspace:*
         version: link:../../packages/graph-framework
@@ -232,19 +226,37 @@ importers:
       '@graph-framework/utils':
         specifier: workspace:*
         version: link:../graph-framework-utils
+      '@noble/hashes':
+        specifier: ^1.5.0
+        version: 1.5.0
+      '@xstate/store':
+        specifier: ^2.6.1
+        version: 2.6.1(react@18.3.1)
+      effect:
+        specifier: ^3.10.19
+        version: 3.10.19
       react:
         specifier: ^18
         version: 18.3.1
+      xstate:
+        specifier: ^5.19.0
+        version: 5.19.0
     devDependencies:
       '@automerge/automerge':
-        specifier: ^2.2.8
-        version: 2.2.8
+        specifier: ^v2.2.9-alpha.3
+        version: 2.2.9-betterpatches.0
       '@automerge/automerge-repo':
-        specifier: ^1.2.1
-        version: 1.2.1(@swc/core@1.7.26(@swc/helpers@0.5.13))(@types/node@22.9.0)(typescript@5.6.3)
+        specifier: ^2.0.0-alpha.14
+        version: 2.0.0-collectionsync-alpha.1(@swc/core@1.7.26(@swc/helpers@0.5.13))(@types/node@22.9.0)(typescript@5.6.3)
+      '@automerge/automerge-repo-network-websocket':
+        specifier: ^2.0.0-alpha.14
+        version: 2.0.0-collectionsync-alpha.1(@swc/core@1.7.26(@swc/helpers@0.5.13))(@types/node@22.9.0)(bufferutil@4.0.8)(typescript@5.6.3)(utf-8-validate@5.0.10)
       '@automerge/automerge-repo-react-hooks':
-        specifier: ^1.2.1
-        version: 1.2.1(@swc/core@1.7.26(@swc/helpers@0.5.13))(@types/node@22.9.0)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(typescript@5.6.3)
+        specifier: ^2.0.0-alpha.14
+        version: 2.0.0-collectionsync-alpha.1(@swc/core@1.7.26(@swc/helpers@0.5.13))(@types/node@22.9.0)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(typescript@5.6.3)
+      '@automerge/automerge-repo-storage-indexeddb':
+        specifier: ^2.0.0-alpha.14
+        version: 2.0.0-collectionsync-alpha.1(@swc/core@1.7.26(@swc/helpers@0.5.13))(@types/node@22.9.0)(typescript@5.6.3)
       '@testing-library/jest-dom':
         specifier: ^6.5.0
         version: 6.6.3
@@ -5062,6 +5074,9 @@ packages:
   xstate@5.18.1:
     resolution: {integrity: sha512-m02IqcCQbaE/kBQLunwub/5i8epvkD2mFutnL17Oeg1eXTShe1sRF4D5mhv1dlaFO4vbW5gRGRhraeAD5c938g==}
 
+  xstate@5.19.0:
+    resolution: {integrity: sha512-Juh1MjeRaVWr1IRxXYvQMMRFMrei6vq6+AfP6Zk9D9YV0ZuvubN0aM6s2ITwUrq+uWtP1NTO8kOZmsM/IqeOiQ==}
+
   xtend@4.0.2:
     resolution: {integrity: sha512-LKYU1iAXJXUgAXn9URjiu+MWhyUXHsvfp7mcuYm9dSUKK0/CjtrUwFAxD82/mCWbtLsGjFIad0wIsod4zrTAEQ==}
     engines: {node: '>=0.4'}
@@ -5119,7 +5134,7 @@ snapshots:
     dependencies:
       '@automerge/automerge-repo': 2.0.0-collectionsync-alpha.1(@swc/core@1.7.26(@swc/helpers@0.5.13))(@types/node@22.9.0)(typescript@5.6.3)
       cbor-x: 1.6.0
-      debug: 4.3.7(supports-color@5.5.0)
+      debug: 4.3.7
       eventemitter3: 5.0.1
       isomorphic-ws: 5.0.0(ws@8.18.0(bufferutil@4.0.8)(utf-8-validate@5.0.10))
       ws: 8.18.0(bufferutil@4.0.8)(utf-8-validate@5.0.10)
@@ -5183,7 +5198,7 @@ snapshots:
       tiny-typed-emitter: 2.1.0
       ts-node: 10.9.2(@swc/core@1.7.26(@swc/helpers@0.5.13))(@types/node@22.9.0)(typescript@5.6.3)
       uuid: 9.0.1
-      xstate: 5.18.1
+      xstate: 5.19.0
     transitivePeerDependencies:
       - '@swc/core'
       - '@swc/wasm'
@@ -5196,7 +5211,7 @@ snapshots:
       '@automerge/automerge': 3.0.0-collectionsync-alpha.1
       bs58check: 3.0.1
       cbor-x: 1.6.0
-      debug: 4.3.7(supports-color@5.5.0)
+      debug: 4.3.7
       eventemitter3: 5.0.1
       fast-sha256: 1.3.0
       tiny-typed-emitter: 2.1.0
@@ -5250,7 +5265,7 @@ snapshots:
       '@babel/traverse': 7.25.6
       '@babel/types': 7.25.6
       convert-source-map: 2.0.0
-      debug: 4.3.7(supports-color@5.5.0)
+      debug: 4.3.7
       gensync: 1.0.0-beta.2
       json5: 2.2.3
       semver: 6.3.1
@@ -5444,7 +5459,7 @@ snapshots:
       '@babel/parser': 7.25.6
       '@babel/template': 7.25.0
       '@babel/types': 7.25.6
-      debug: 4.3.7(supports-color@5.5.0)
+      debug: 4.3.7
       globals: 11.12.0
     transitivePeerDependencies:
       - supports-color
@@ -7546,7 +7561,7 @@ snapshots:
 
   agent-base@7.1.1:
     dependencies:
-      debug: 4.3.7(supports-color@5.5.0)
+      debug: 4.3.7
     transitivePeerDependencies:
       - supports-color
 
@@ -8069,6 +8084,10 @@ snapshots:
     dependencies:
       ms: 2.1.2
 
+  debug@4.3.7:
+    dependencies:
+      ms: 2.1.3
+
   debug@4.3.7(supports-color@5.5.0):
     dependencies:
       ms: 2.1.3
@@ -8699,7 +8718,7 @@ snapshots:
   http-proxy-agent@7.0.2:
     dependencies:
       agent-base: 7.1.1
-      debug: 4.3.7(supports-color@5.5.0)
+      debug: 4.3.7
     transitivePeerDependencies:
       - supports-color
 
@@ -8710,7 +8729,7 @@ snapshots:
   https-proxy-agent@7.0.5:
     dependencies:
       agent-base: 7.1.1
-      debug: 4.3.7(supports-color@5.5.0)
+      debug: 4.3.7
     transitivePeerDependencies:
       - supports-color
 
@@ -9455,7 +9474,7 @@ snapshots:
   postcss@8.4.47:
     dependencies:
       nanoid: 3.3.7
-      picocolors: 1.1.0
+      picocolors: 1.1.1
       source-map-js: 1.2.1
 
   postgres-array@3.0.2: {}
@@ -10564,6 +10583,8 @@ snapshots:
 
   xstate@5.18.1: {}
 
+  xstate@5.19.0: {}
+
   xtend@4.0.2: {}
 
   y18n@4.0.3: {}