diff --git a/apps/web/client/src/app/project/[id]/providers.tsx b/apps/web/client/src/app/project/[id]/providers.tsx
index c8d57925ec..b8af2f06fd 100644
--- a/apps/web/client/src/app/project/[id]/providers.tsx
+++ b/apps/web/client/src/app/project/[id]/providers.tsx
@@ -2,6 +2,7 @@
import { EditorEngineProvider } from '@/components/store/editor';
import { HostingProvider } from '@/components/store/hosting';
+import { PresenceProvider } from '@/components/store/presence';
import type { Branch, Project } from '@onlook/models';
export const ProjectProviders = ({
@@ -16,7 +17,9 @@ export const ProjectProviders = ({
return (
- {children}
+
+ {children}
+
);
diff --git a/apps/web/client/src/components/store/presence/index.ts b/apps/web/client/src/components/store/presence/index.ts
new file mode 100644
index 0000000000..dfe29b77e3
--- /dev/null
+++ b/apps/web/client/src/components/store/presence/index.ts
@@ -0,0 +1 @@
+export { PresenceProvider, usePresenceManager } from './provider';
diff --git a/apps/web/client/src/components/store/presence/manager.ts b/apps/web/client/src/components/store/presence/manager.ts
new file mode 100644
index 0000000000..f19613f4c9
--- /dev/null
+++ b/apps/web/client/src/components/store/presence/manager.ts
@@ -0,0 +1,163 @@
+import { makeAutoObservable, reaction } from 'mobx';
+import { api } from '@/trpc/react';
+import { createClient } from '@/utils/supabase/client';
+
+export interface PresenceUser {
+ userId: string;
+ displayName: string;
+ avatarUrl?: string | null;
+ lastSeen: Date;
+}
+
+export class PresenceManager {
+ onlineUsers: PresenceUser[] = [];
+ currentUserId: string | null = null;
+ currentProjectId: string | null = null;
+ isConnected = false;
+
+ isLoading = false;
+
+ private subscription: any = null;
+
+ constructor() {
+ makeAutoObservable(this);
+
+ reaction(
+ () => this.currentProjectId,
+ (projectId) => {
+ if (projectId) {
+ this.joinProject(projectId);
+ } else {
+ this.leaveProject();
+ }
+ }
+ );
+ }
+
+ setContext(userId: string, projectId: string) {
+ this.currentUserId = userId;
+ this.currentProjectId = projectId;
+ }
+
+ async joinProject(projectId: string) {
+ if (!this.currentUserId) return;
+
+ try {
+ this.isLoading = true;
+ this.currentProjectId = projectId;
+
+ await api.presence.joinProject.mutate({ projectId });
+
+ await this.loadProjectPresence(projectId);
+ this.subscribeToPresenceUpdates(projectId);
+
+ this.isConnected = true;
+ } catch (error) {
+ console.error('Error joining project:', error);
+ } finally {
+ this.isLoading = false;
+ }
+ }
+
+ async leaveProject() {
+ if (!this.currentProjectId || !this.currentUserId) return;
+
+ try {
+ await api.presence.leaveProject.mutate({ projectId: this.currentProjectId });
+
+ this.unsubscribeFromPresenceUpdates();
+ this.onlineUsers = [];
+ this.currentProjectId = null;
+ this.isConnected = false;
+ } catch (error) {
+ console.error('Error leaving project:', error);
+ }
+ }
+
+ private async loadProjectPresence(projectId: string) {
+ try {
+ const presenceData = await api.presence.getProjectPresence.query({ projectId });
+ this.onlineUsers = presenceData.map(p => ({
+ userId: p.userId,
+ displayName: p.displayName,
+ avatarUrl: p.avatarUrl,
+ lastSeen: p.lastSeen,
+ }));
+ } catch (error) {
+ console.error('Error loading project presence:', error);
+ }
+ }
+
+ private subscribeToPresenceUpdates(projectId: string) {
+ this.unsubscribeFromPresenceUpdates();
+
+ const supabase = createClient();
+ const channel = supabase
+ .channel(`presence:${projectId}`)
+ .on(
+ 'postgres_changes',
+ {
+ event: '*',
+ schema: 'public',
+ table: 'user_presence',
+ filter: `project_id=eq.${projectId}`,
+ },
+ (payload) => {
+ this.handlePresenceUpdate(payload);
+ }
+ )
+ .subscribe();
+
+ this.subscription = channel;
+ }
+
+ private unsubscribeFromPresenceUpdates() {
+ if (this.subscription) {
+ this.subscription.unsubscribe();
+ this.subscription = null;
+ }
+ }
+
+ private handlePresenceUpdate(payload: any) {
+ const { eventType, new: newRecord, old: oldRecord } = payload;
+
+ switch (eventType) {
+ case 'INSERT':
+ case 'UPDATE':
+ if (newRecord && newRecord.is_online) {
+ const existingIndex = this.onlineUsers.findIndex(u => u.userId === newRecord.user_id);
+ const user: PresenceUser = {
+ userId: newRecord.user_id,
+ displayName: newRecord.user?.display_name || `${newRecord.user?.first_name || ''} ${newRecord.user?.last_name || ''}`.trim(),
+ avatarUrl: newRecord.user?.avatar_url,
+ lastSeen: new Date(newRecord.last_seen),
+ };
+
+ if (existingIndex >= 0) {
+ this.onlineUsers[existingIndex] = user;
+ } else {
+ this.onlineUsers.push(user);
+ }
+ } else {
+ this.onlineUsers = this.onlineUsers.filter(u => u.userId !== newRecord?.user_id);
+ }
+ break;
+
+ case 'DELETE':
+ this.onlineUsers = this.onlineUsers.filter(u => u.userId !== oldRecord?.user_id);
+ break;
+ }
+ }
+
+ get otherOnlineUsers(): PresenceUser[] {
+ return this.onlineUsers.filter(u => u.userId !== this.currentUserId);
+ }
+
+ isUserOnline(userId: string): boolean {
+ return this.onlineUsers.some(u => u.userId === userId);
+ }
+
+ dispose() {
+ this.leaveProject();
+ }
+}
diff --git a/apps/web/client/src/components/store/presence/provider.tsx b/apps/web/client/src/components/store/presence/provider.tsx
new file mode 100644
index 0000000000..a15592e5b4
--- /dev/null
+++ b/apps/web/client/src/components/store/presence/provider.tsx
@@ -0,0 +1,36 @@
+'use client';
+
+import { PresenceManager } from './manager';
+import { useRef, useEffect, createContext, useContext } from 'react';
+
+const PresenceContext = createContext
(null);
+
+export const PresenceProvider = ({ children }: { children: React.ReactNode }) => {
+ const presenceManagerRef = useRef(null);
+
+ useEffect(() => {
+ presenceManagerRef.current = new PresenceManager();
+
+ return () => {
+ presenceManagerRef.current?.dispose();
+ };
+ }, []);
+
+ if (!presenceManagerRef.current) {
+ return null; // Or a loading state
+ }
+
+ return (
+
+ {children}
+
+ );
+};
+
+export const usePresenceManager = () => {
+ const context = useContext(PresenceContext);
+ if (!context) {
+ throw new Error('usePresenceManager must be used within a PresenceProvider');
+ }
+ return context;
+};
diff --git a/apps/web/client/src/server/api/root.ts b/apps/web/client/src/server/api/root.ts
index c6fbcd82a1..e6ffbe94b4 100644
--- a/apps/web/client/src/server/api/root.ts
+++ b/apps/web/client/src/server/api/root.ts
@@ -6,6 +6,7 @@ import {
githubRouter,
invitationRouter,
memberRouter,
+ presenceRouter,
projectRouter,
publishRouter,
sandboxRouter,
@@ -35,6 +36,7 @@ export const appRouter = createTRPCRouter({
userCanvas: userCanvasRouter,
utils: utilsRouter,
member: memberRouter,
+ presence: presenceRouter,
domain: domainRouter,
github: githubRouter,
subscription: subscriptionRouter,
diff --git a/apps/web/client/src/server/api/routers/index.ts b/apps/web/client/src/server/api/routers/index.ts
index a2f62588db..87ba995c2f 100644
--- a/apps/web/client/src/server/api/routers/index.ts
+++ b/apps/web/client/src/server/api/routers/index.ts
@@ -4,6 +4,7 @@ export * from './domain';
export * from './forward';
export * from './github';
export * from './image';
+export * from './presence';
export * from './project';
export * from './publish';
export * from './subscription';
diff --git a/apps/web/client/src/server/api/routers/presence.ts b/apps/web/client/src/server/api/routers/presence.ts
new file mode 100644
index 0000000000..e67f80a2b1
--- /dev/null
+++ b/apps/web/client/src/server/api/routers/presence.ts
@@ -0,0 +1,141 @@
+import { createTRPCRouter, protectedProcedure } from '@/server/api/trpc';
+import { userPresence, users, userProjects } from '@onlook/db';
+import { and, eq, desc } from 'drizzle-orm';
+import { z } from 'zod';
+
+export const presenceRouter = createTRPCRouter({
+ joinProject: protectedProcedure
+ .input(z.object({ projectId: z.string() }))
+ .mutation(async ({ ctx, input }) => {
+ const { projectId } = input;
+ const userId = ctx.user.id;
+
+ const projectAccess = await ctx.db.query.userProjects.findFirst({
+ where: and(
+ eq(userProjects.userId, userId),
+ eq(userProjects.projectId, projectId)
+ ),
+ });
+
+ if (!projectAccess) {
+ throw new Error('User does not have access to this project');
+ }
+
+ await ctx.db.insert(userPresence).values({
+ projectId,
+ userId,
+ isOnline: true,
+ lastSeen: new Date(),
+ }).onConflictDoUpdate({
+ target: [userPresence.projectId, userPresence.userId],
+ set: {
+ isOnline: true,
+ lastSeen: new Date(),
+ updatedAt: new Date(),
+ },
+ });
+
+ return { success: true };
+ }),
+
+ leaveProject: protectedProcedure
+ .input(z.object({ projectId: z.string() }))
+ .mutation(async ({ ctx, input }) => {
+ const { projectId } = input;
+ const userId = ctx.user.id;
+
+ await ctx.db.update(userPresence)
+ .set({
+ isOnline: false,
+ lastSeen: new Date(),
+ updatedAt: new Date(),
+ })
+ .where(and(
+ eq(userPresence.projectId, projectId),
+ eq(userPresence.userId, userId)
+ ));
+
+ return { success: true };
+ }),
+
+ getProjectPresence: protectedProcedure
+ .input(z.object({ projectId: z.string() }))
+ .query(async ({ ctx, input }) => {
+ const { projectId } = input;
+
+ const projectAccess = await ctx.db.query.userProjects.findFirst({
+ where: and(
+ eq(userProjects.userId, ctx.user.id),
+ eq(userProjects.projectId, projectId)
+ ),
+ });
+
+ if (!projectAccess) {
+ throw new Error('User does not have access to this project');
+ }
+
+ const presenceData = await ctx.db.query.userPresence.findMany({
+ where: and(
+ eq(userPresence.projectId, projectId),
+ eq(userPresence.isOnline, true)
+ ),
+ with: {
+ user: {
+ columns: {
+ id: true,
+ displayName: true,
+ avatarUrl: true,
+ firstName: true,
+ lastName: true,
+ },
+ },
+ },
+ orderBy: desc(userPresence.lastSeen),
+ });
+
+ return presenceData.map(p => ({
+ userId: p.user.id,
+ displayName: p.user.displayName || `${p.user.firstName || ''} ${p.user.lastName || ''}`.trim(),
+ avatarUrl: p.user.avatarUrl,
+ lastSeen: p.lastSeen,
+ }));
+ }),
+
+ getMyPresence: protectedProcedure
+ .query(async ({ ctx }) => {
+ const userId = ctx.user.id;
+
+ const presenceData = await ctx.db.query.userPresence.findMany({
+ where: eq(userPresence.userId, userId),
+ with: {
+ project: {
+ columns: {
+ id: true,
+ name: true,
+ },
+ },
+ },
+ });
+
+ return presenceData.map(p => ({
+ projectId: p.project.id,
+ projectName: p.project.name,
+ isOnline: p.isOnline,
+ lastSeen: p.lastSeen,
+ }));
+ }),
+
+ cleanupOffline: protectedProcedure
+ .mutation(async ({ ctx }) => {
+ await ctx.db.update(userPresence)
+ .set({
+ isOnline: false,
+ updatedAt: new Date(),
+ })
+ .where(and(
+ eq(userPresence.isOnline, true),
+ ));
+
+ return { success: true };
+ }),
+});
diff --git a/packages/db/src/schema/user/index.ts b/packages/db/src/schema/user/index.ts
index d0095bd877..32d4ad0203 100644
--- a/packages/db/src/schema/user/index.ts
+++ b/packages/db/src/schema/user/index.ts
@@ -1,3 +1,4 @@
+export * from './presence';
export * from './settings';
export * from './user';
export * from './user-canvas';
diff --git a/packages/db/src/schema/user/presence.ts b/packages/db/src/schema/user/presence.ts
new file mode 100644
index 0000000000..ac39052469
--- /dev/null
+++ b/packages/db/src/schema/user/presence.ts
@@ -0,0 +1,38 @@
+import { relations } from 'drizzle-orm';
+import { pgTable, timestamp, uuid, boolean } from 'drizzle-orm/pg-core';
+import { createInsertSchema } from 'drizzle-zod';
+import { projects } from '../project';
+import { users } from './user';
+
+export const userPresence = pgTable('user_presence', {
+ id: uuid('id').primaryKey(),
+ projectId: uuid('project_id')
+ .notNull()
+ .references(() => projects.id, { onDelete: 'cascade', onUpdate: 'cascade' }),
+ userId: uuid('user_id')
+ .notNull()
+ .references(() => users.id, { onDelete: 'cascade', onUpdate: 'cascade' }),
+ lastSeen: timestamp('last_seen', { withTimezone: true }).defaultNow().notNull(),
+ isOnline: boolean('is_online').default(true).notNull(),
+ createdAt: timestamp('created_at', { withTimezone: true }).defaultNow().notNull(),
+ updatedAt: timestamp('updated_at', { withTimezone: true }).defaultNow().notNull(),
+}, (table) => ({
+ unique: {
+ projectUser: [table.projectId, table.userId],
+ },
+})).enableRLS();
+
+export const userPresenceRelations = relations(userPresence, ({ one }) => ({
+ project: one(projects, {
+ fields: [userPresence.projectId],
+ references: [projects.id],
+ }),
+ user: one(users, {
+ fields: [userPresence.userId],
+ references: [users.id],
+ }),
+}));
+
+export const userPresenceInsertSchema = createInsertSchema(userPresence);
+export type UserPresence = typeof userPresence.$inferSelect;
+export type NewUserPresence = typeof userPresence.$inferInsert;