CoCreate

An interactive collaborative whiteboard where participants can create sticky notes, quiz questions, and slides together. Features real-time synchronization, group-based permissions, AI agent integration, and flow management.

Example structure

{
  "type": "CoCreate",
  "data": {
    "text": "How can we work together effectively?",
    "theme": "dark"
  },
  "sound": {
    "name": "none"
  }
}

Properties

Basic Properties

text (string, optional) - Main description or instruction text for the collaborative session
theme (string, optional) - Visual theme ("light" or "dark")

Internal Data Structures

The CoCreate node maintains several internal data arrays that are managed automatically:

stickyNotes - Array of collaborative sticky notes
quizNodes - Visual representations of quiz questions created on the board
slideNodesVisual - Visual representations of slides created on the board
flows - Sequences connecting quiz/slide nodes together
playerAgentCards - AI agent cards for each participant
leafQuizAnswers - Aggregated quiz performance from previous nodes
leafChatHistory - Aggregated chat history from previous nodes

Features

1. Sticky Notes

Participants can create, edit, move, and color-code sticky notes on the collaborative board.

Sticky Note Properties:

Unique ID for tracking
Position (x, y coordinates)
Text content (URI-encoded)
Color (from predefined palette)

Available Colors:

Blue, Green, Red, Yellow, Purple, Orange, Pink, Cyan
Each color has specific hex values and German names

2. Quiz Nodes

Create interactive quiz questions directly on the board. These become actual Quiz nodes in the workshop.

Quiz Node Features:

Draggable position on the board
Edit question text and options
Set correct answers (supports multiple correct answers)
Configure answer time (optional)
Group assignment for access control
Jump directly to quiz from the board
Visual card states: Preview, Editable, Completed

Quiz Data Structure:

{
  id: string;              // Unique identifier
  text: string;            // Question text (base64 encoded)
  options: string[];       // Answer options (base64 encoded)
  answer: number[];        // Correct answer indices (1-based)
  answerTime?: number;     // Seconds to answer
  imageUrl?: string;       // Optional question image
  assignedGroupId?: string; // Group restriction
  cardState?: string;      // "preview" | "editable" | "completed"
}

3. Slide Nodes

Create presentation slides directly on the board.

Slide Node Features:

Draggable position on the board
Edit headline and text content
Background customization
Group assignment
Jump directly to slide from the board
Visual card states: Preview, Editable, Completed

Slide Data Structure:

{
  id: string;              // Unique identifier
  headline: string;        // Slide title (base64 encoded)
  text?: string;           // Body content (base64 encoded)
  background?: string;     // Background color/image
  assignedGroupId?: string; // Group restriction
  cardState?: string;      // "preview" | "editable" | "completed"
}

4. Flows

Connect quiz and slide nodes into sequential learning paths.

Flow Properties:

id - Unique flow identifier
color - Visual color from palette (matches group colors)
startNodeId - ID of the first node in sequence
nodeSequence - Ordered array of node IDs
assignedGroupId - Optional group restriction

Flow Features:

Visual connection lines between nodes
Start button appears on first node
Automatic progression through sequence
Returns to CoCreate board after completion
Flow summary sent to participants upon completion

5. Player Agent Cards

AI-powered participant cards with context awareness and activity tracking.

Player Agent Card Features:

Position Tracking: Each participant has a card on the board
Context Connections: Visual edges to nearby nodes (proximity-based)
Learner Activity Tracking: Records participant actions and insights
Group Coloring: Cards colored by group membership
Navigation: Click to center view on your card

Player Agent Card Data:

{
  userId: string;
  userName: string;        // Encoded
  avatar: string;          // Avatar URL
  isActive: boolean;       // Visibility state
  memory: {
    contextConnections: string[];   // IDs of nearby nodes
    learnerActivity: LearnerActivity[]; // Activity log
    settings?: object;     // Custom settings
  }
}

Learner Activity Structure:

{
  id: string;
  timestamp: number;       // Unix timestamp
  type: string;            // Activity type
  description: string;     // Activity description
  tags: string[];          // Category tags
  insights?: string[];     // AI-generated insights
}

6. Group-Based Permissions

Control access to nodes and flows based on group membership.

Permission Levels:

Host: Full access to all nodes and flows
Group Member: Can edit nodes/flows assigned to their group
Non-Member: Can only view (Preview state) nodes assigned to other groups

Card States:

Preview: View-only, node assigned to different group
Editable: Full edit access (host or group member)
Completed: Read-only, node has been completed

Group Assignment:

Assign individual quiz/slide nodes to groups
Assign entire flows to groups
Group colors applied to visual elements
Automatic group detection from LEAF state

7. Proximity Detection

Automatic connection creation based on spatial proximity.

Proximity Features:

Nodes within 500 pixels create visual connections
Player Agent Cards track nearby nodes in context
Group-aware proximity (respects group assignments)
Real-time edge updates during dragging
Floating edge rendering for smooth visuals

User Interface

Desktop View

Floating Action Buttons (FAB):

Plus Menu: Add sticky note, quiz, or slide
Navigation: Jump to your player agent card
Host Control: Open host control panel (host only)

Interactions:

Drag nodes to reposition
Connect quiz/slide nodes to create flows
Click nodes to edit (if permission granted)
Delete nodes/connections as needed

Mobile View

Uses drawer-based interfaces for adding content:

Add Note Drawer: Text input and color picker
Add Quiz Drawer: Question, options, correct answers
Add Slide Drawer: Headline and text fields

Operation Codes (OpCodes)

Sticky Notes (0-4)

0 - ADD_STICKY_NOTE
1 - DELETE_STICKY_NOTE
2 - EDIT_STICKY_NOTE
3 - MOVE_STICKY_NOTE
4 - CHANGE_STICKY_NOTE_COLOR

Quiz Nodes (93-97)

97 - MOVE_QUIZ_NODE
96 - JUMP_TO_QUIZ_NODE
95 - SYNC_NEW_QUIZ_NODE
94 - SYNC_EDITED_QUIZ_NODE
93 - SYNC_DELETED_QUIZ_NODE

Slide Nodes (86-90)

90 - SYNC_NEW_SLIDE_NODE
89 - SYNC_EDITED_SLIDE_NODE
88 - SYNC_DELETED_SLIDE_NODE
87 - MOVE_SLIDE_NODE
86 - JUMP_TO_SLIDE_NODE

Flows (91-92)

92 - SYNC_FLOW_UPDATE
91 - START_FLOW

Groups (84-85)

85 - ASSIGN_NODE_TO_GROUP
86 - ASSIGN_FLOW_TO_GROUP

Player Agent Cards (77-83)

83 - ADD_PLAYER_AGENT_CARD
82 - MOVE_PLAYER_AGENT_CARD
81 - UPDATE_PLAYER_AGENT_CARD_MEMORY
80 - HIDE_PLAYER_AGENT_CARD
79 - SHOW_PLAYER_AGENT_CARD
78 - UPDATE_PLAYER_AGENT_CONTEXT_CONNECTIONS
77 - UPDATE_PLAYER_AGENT_CARD_DETAILS

Server-Side Features

Data Synchronization

Real-Time Updates:

All changes broadcast immediately to connected clients
Optimistic client updates with server confirmation
Conflict resolution via server authority

Persistent Storage:

Client uses RPC calls to save changes persistently
Server maintains mapping between visual IDs and workshop indices
Automatic re-sync on node initialization

Index Management

The server maintains two mapping objects:

state.coCreateQuizNodeMap: { quizId: workshopDataIndex }
state.coCreateSlideNodeMap: { slideId: workshopDataIndex }

Index Updates: When nodes are deleted, all subsequent indices are decremented in both maps to maintain accuracy.

Agent Integration

AI agents can interact with the CoCreate board:

Agent Operations:

AGENT_ADD_VISUAL_QUIZ - Agent creates quiz questions
AGENT_UPDATE_VISUAL_QUIZ - Agent modifies quiz content
AGENT_ADD_VISUAL_SLIDE - Agent creates slides
AGENT_UPDATE_VISUAL_SLIDE - Agent modifies slide content
AGENT_ADD_LEARNER_ACTIVITY - Agent logs learner actions
AGENT_DELETE_LEARNER_ACTIVITY - Agent removes activity entries
AGENT_CLEAR_LEARNER_ACTIVITIES - Agent clears activity history

Agent-Created Content:

Positioned near the user's Player Agent Card (250-300 pixel radius)
Automatically assigned to user's group
Context connections automatically created
Full encoding/decoding support for text fields

Permission Checking

Server validates all edit/delete operations:

function hasEditPermission(
  nodeId: string,
  assignedGroupId: string | undefined,
  cardState: string | undefined,
  isHost: boolean,
  userGroupIds: string[]
): boolean

Permission Logic:

Host: Always has permission
Assigned to group: Must be member of that group
Not assigned: Open to all participants
Card state must be "editable" (not "completed")

Data Encoding

All text content is encoded/decoded for safe transmission:

Client → Server:

Text fields encoded using toBase64()
Applied to: quiz questions, quiz options, slide headlines, slide text

Server → Client:

Text fields decoded using decodeBase64()
Applied to same fields before display

Sticky Notes:

Use encodeURI()/decodeURI() instead of base64
Simpler encoding for shorter text content

React Flow Integration

Node Types

postItNote: Sticky notes
quizNode: Quiz question cards
slideNode: Slide cards
playerAgentCard: AI agent cards

Edge Types

Standard Edges: Flow connections (smoothstep, animated)
Player Context Edges: Proximity connections (floating, dashed, animated)

Background

Dot pattern background (5x5 grid, size 2)
Provides visual reference for positioning

Best Practices

For Facilitators

Set Clear Instructions: Use the text property to guide collaboration
Pre-create Structure: Consider adding initial sticky notes or prompts
Use Groups Strategically: Assign work to different groups for parallel tasks
Create Flows: Guide participants through structured learning sequences
Monitor Progress: Use Player Agent Cards to track engagement

For Participants

Find Your Card: Use the navigation FAB to locate your position
Respect Permissions: Only edit content assigned to your group
Create Connections: Drag between quiz/slide nodes to create flows
Use Sticky Notes: Brainstorm and collaborate with sticky notes
Follow Flows: Click start buttons to begin guided sequences

Technical Considerations

Performance

Nodes and edges optimized with useMemo and useCallback
Refs used for frequently accessed data to prevent re-renders
Debounced text input for sticky notes (300ms)

Storage Limits

No artificial limits on sticky notes, quizzes, or slides
Limited by browser memory and server capacity
Consider archiving old workshops periodically

Browser Compatibility

Requires modern browser with ES6 support
WebSocket connection for real-time updates
IndexedDB NOT used (all state in memory)

Example: Complete CoCreate Session

{
  "type": "CoCreate",
  "data": {
    "text": "Collaborative Workshop: AI Ethics",
    "theme": "dark",
    "stickyNotes": [],
    "quizNodes": [],
    "slideNodesVisual": [],
    "flows": [],
    "playerAgentCards": []
  },
  "hostdata": {
    "notes": "Encourage open discussion and creative thinking"
  }
}

Typical Workflow:

Participants join and see their Player Agent Cards
Facilitator shares initial prompt via sticky note
Participants add their own sticky notes with ideas
Facilitator creates quiz questions based on discussion
Participants connect quizzes into learning flows
Groups work on assigned flows independently
AI agent tracks activity and provides insights
Session data persisted for later review

Integration with Other Nodes

After Quiz Nodes: LEAF state captures quiz performance data
After Chat Sessions: LEAF state includes chat history
With Groups: Seamless integration with LEAF group management
With Agents: Full bidirectional communication for AI assistance

Example structure​

Properties​

Basic Properties​

Internal Data Structures​

Features​

1. Sticky Notes​

2. Quiz Nodes​

3. Slide Nodes​

4. Flows​

5. Player Agent Cards​

6. Group-Based Permissions​

7. Proximity Detection​

User Interface​

Desktop View​

Mobile View​

Operation Codes (OpCodes)​

Sticky Notes (0-4)​

Quiz Nodes (93-97)​

Slide Nodes (86-90)​

Flows (91-92)​

Groups (84-85)​

Player Agent Cards (77-83)​

Server-Side Features​

Data Synchronization​

Index Management​

Agent Integration​

Permission Checking​

Data Encoding​

React Flow Integration​

Node Types​

Edge Types​

Background​

Best Practices​

For Facilitators​

For Participants​

Technical Considerations​

Performance​

Storage Limits​

Browser Compatibility​

Example: Complete CoCreate Session​

Integration with Other Nodes​