---
title: "Collaboration Kit"
description: "Realtime editing, presence, live cursors, recent edit highlights, and undo primitives."
---
# Collaboration Kit
The Collaboration Kit gives humans and agents the same live workspace:
collaborative documents, awareness, presence avatars, live cursors, recent edit
highlights, and undo that respects both CRDT-backed edits and app-local
operations.
Launch plan
3 editing
All changes saved
Agent edited just now
Ship the beta to 50 design partners the week of Aug 4.
Maya
"
}
/>
## Pieces {#pieces}
| Piece | Purpose |
| ------------------------ | ----------------------------------------------------------------------------------- |
| `createCollabPlugin()` | Server plugin that persists and syncs a collaborative resource. |
| `useCollaborativeDoc()` | Client hook for Yjs document, awareness, sync state, and agent presence. |
| `usePresence()` | Reads and publishes awareness fields such as cursor, selection, viewport, and mode. |
| `` | Shared avatar and agent-presence strip. |
| `` | Cursor labels over canvas or editor coordinates. |
| `` | Fading highlights for human or agent edits. |
| `useCollabUndo()` | Yjs undo manager lifecycle for CRDT-backed surfaces. |
| `useLocalOpUndo()` | Inverse-operation undo for non-Yjs local operations. |
## Server And Client Shape {#server-and-client-shape}
```ts filename="server/plugins/collab.ts"
import { createCollabPlugin } from "@agent-native/core/server";
export default createCollabPlugin({
access: { mode: "resource", resourceType: "document" },
table: "documents",
contentColumn: "content",
});
```
```tsx
import {
useCollaborativeDoc,
usePresence,
useCollabUndo,
} from "@agent-native/core/client/collab";
import {
LiveCursorOverlay,
PresenceBar,
RecentEditHighlights,
} from "@agent-native/toolkit/collab-ui";
const collab = useCollaborativeDoc({ docId, user });
const presence = usePresence(collab.awareness, collab.localClientId);
const undo = useCollabUndo(collab.ydoc, { trackedOrigins: [user.email] });
```
## UX Standard {#ux-standard}
- Show collaborators in the page header, not buried in a debug panel.
- Render the agent as a first-class participant when it edits.
- Highlight recent remote or agent edits long enough for users to orient.
- Keep undo local and predictable: CRDT undo for document operations, local-op
undo for app-specific commands.
## UI components {#ui-components}
`@agent-native/toolkit/collab-ui` contains the presentational collaboration
pieces that do not own transport or storage:
Editor canvas
Agent editing
Ava
Sam edited moments ago
Sam
"
}
/>
The full set of presentational exports:
```tsx
import {
AgentPresenceChip,
LiveCursorOverlay,
PresenceBar,
RecentEditHighlights,
RemoteSelectionRings,
} from "@agent-native/toolkit/collab-ui";
```
Existing imports from `@agent-native/core/client` still work because core
re-exports these Toolkit components as compatibility shims, but new code
should import `@agent-native/toolkit/collab-ui` directly.
### Toolkit vs Core {#toolkit-vs-core}
Toolkit owns:
- Presence avatars and agent editing chips.
- Live cursor overlays.
- Remote selection rings.
- Recent edit highlight overlays.
- Display helpers such as collaborator color and display-name derivation.
Core owns:
- Yjs document creation and sync.
- Awareness polling and SSE fast-path transport.
- Collaboration server plugins and actions.
- Recent edit publication and collection from awareness.
## What's next
- [**Realtime Collaboration**](/docs/real-time-collaboration) — the CRDT
transport and sync model these components render.
- [**Component API**](/docs/components#collab-presence) — the generated
reference for collaboration component props.
- [**Sharing Kit**](/docs/toolkit-sharing) — the same Toolkit/Core split
applied to sharing and access control.
- [**Agent-Native Toolkit**](/docs/agent-native-toolkit) — the hub page linking
every kit and foundation piece.