AIUIaiui/docs

Collaboration

AIUI enables real-time collaboration so teams can design together seamlessly. Multiple users can work on the same project simultaneously, seeing each other's actions as they happen. This guide covers the collaboration features that make teamwork effortless.

Real-Time Foundation

AIUI's collaboration is built on Supabase Realtime, providing instant synchronization across all connected users. When you make a change, everyone in the project sees it immediately—no refresh required.

What Syncs in Real-Time

  • Node positions and sizes
  • Generated designs and code
  • Annotations and drawings
  • Comments and replies
  • Selection states
  • Cursor positions

Changes propagate in milliseconds, creating a truly live collaborative experience.

Multiple Users, Same Project

When multiple team members open the same project:

  1. Each user connects to the shared project session
  2. All changes sync instantly across connected clients
  3. Everyone sees the same canvas state
  4. Conflict-free editing with automatic resolution

There's no "check out" or locking system. Everyone can work freely, and the system handles synchronization automatically.

Joining a Project

Simply open a project you have access to. If others are already working in it, you'll see them immediately. No special "collaboration mode" to enable—it's always on.

Live Cursors

See where your teammates are looking and working with live cursors.

How Live Cursors Work

  • Each user's cursor appears on your canvas in real-time
  • Cursors display the user's name or avatar
  • Movement is smooth and responsive
  • Cursors are color-coded for easy identification

Cursor Information

Each live cursor shows:

  • User identity: Name or initials
  • Position: Exact canvas coordinates
  • Color: Unique color per user
  • Activity state: Active or idle

When a user hasn't moved their cursor recently, it may fade slightly to reduce visual noise.

Privacy and Focus

If live cursors become distracting:

  • Cursors automatically fade after inactivity
  • Focus on your own work—cursors are non-intrusive
  • Zoom out to see the big picture of where everyone is working

Viewport Indicators

Beyond cursors, AIUI shows where each user is looking on the canvas.

What Are Viewports?

Your viewport is the visible portion of the infinite canvas. Since users can pan and zoom independently, everyone might be looking at different areas.

Viewport Display

Viewport indicators show:

  • A colored rectangle representing each user's visible area
  • The user's name attached to their viewport
  • Where on the canvas they're currently focused

This helps you:

  • Find teammates on large canvases
  • Coordinate who's working on what
  • Avoid overlapping work areas

Navigating to Teammates

Click on a viewport indicator or user in the presence list to pan your view to their location. This is useful when someone says "look at this" and you need to jump to their position.

Follow Mode

Stay in sync with your teammates using Follow Mode. When you follow a collaborator, your viewport automatically pans and zooms to match theirs in real-time.

How to Follow

  1. Click on a teammate's avatar in the presence list (top-right stack).
  2. Or click on their viewport rectangle on the canvas.
  3. Your view will instantly snap to theirs and track their movements.

Exiting Follow Mode

To stop following and regain control of your view:

  • Pan or zoom the canvas manually.
  • Click anywhere on empty canvas space.
  • Click the "Following [Name]" indicator if visible.

Follow Mode is perfect for design walkthroughs, reviews, and presentations where one person leads the exploration.

Presence List

The presence list shows everyone currently in the project.

Accessing the Presence List

Look for the avatar stack in the top-right corner of the canvas. This shows:

  • Overlapping avatars of connected users
  • A count if more than a few users are present
  • Click to expand the full presence list

Presence List Details

The expanded list shows:

  • User names and avatars
  • Online status (connected users only appear)
  • Optional: What they're currently doing

User Avatars

Avatars are pulled from user profiles. If a user hasn't set an avatar, their initials display in a colored circle.

Live Typing Indicator

When a teammate is typing in the prompt bar, you'll see a live indicator.

How It Works

  1. User A starts typing a prompt
  2. All other users see "User A is typing..." near the prompt bar
  3. The indicator disappears when they stop or submit

Why This Matters

The typing indicator helps coordination:

  • Know when someone is about to generate a new design
  • Avoid simultaneous generations that might conflict
  • See when teammates are actively working vs. just observing

Indicator Display

The typing indicator appears:

  • Near the prompt bar area
  • With the typing user's name or avatar
  • With animated dots to show ongoing activity

Collaboration Best Practices

Communicate Intent

Before making major changes, let teammates know:

  • "I'm going to regenerate the header"
  • "Working on mobile layouts in the bottom-right"
  • Use comments for async communication

Divide Work Spatially

Use the infinite canvas to your advantage:

  • Each person works in a different area
  • Create "zones" for different screens or features
  • Viewport indicators help you stay aware of who's where

Use Annotations for Quick Marks

When you need to show something to a teammate:

  • Draw an arrow pointing to the element
  • Circle the area in question
  • They'll see your annotation in real-time

Resolve Conflicts Gracefully

Rare conflicts (two people editing the same thing simultaneously) resolve automatically. If something looks wrong:

  • Refresh to ensure you have the latest state
  • Communicate with your teammate about who should continue
  • The last change wins in simultaneous edits

Who Can Collaborate

Collaboration is available based on project access:

Access Level Real-Time Collaboration
Owner Full access
Admin Full access
Editor Full access
Viewer Can see live changes, cursors, and presence

Viewers participate in presence (others see them) but cannot make changes. This is useful for stakeholders who want to observe design progress.

Technical Notes

Connection Status

A connection indicator shows your real-time status:

  • Green dot: Connected and syncing
  • Yellow dot: Reconnecting
  • Red dot: Disconnected

If disconnected, AIUI attempts to reconnect automatically. Your local changes queue and sync when connection restores.

Performance

Real-time sync is optimized for performance:

  • Only changed data transmits, not full project state
  • Cursor positions throttle to reduce bandwidth
  • Large projects handle dozens of simultaneous users

Offline Behavior

If you lose connection:

  • You can continue working locally
  • Changes save locally
  • When reconnected, changes sync to the server
  • Conflicts resolve with last-write-wins

Next Steps

Explore more collaboration and feedback features: