affectUI › Components › Agents

Agent Cursors

Agents working in a document like teammates in a multiplayer editor – live pointers with names, suggestions typed letter by letter, images they resize, code they fix and comments beside the page.

Part of affectUI Pro. Install: npx shadcn@latest add https://www.affectui.com/r/agent-cursors.json · Import from @/components/ui/agent-cursors

When to use

• Agents that write or edit a document, a brief or a spec while you watch – text, images, code and comments – and you want to see who is where
• Several agents on one text at once: each change stays a suggestion in its agent's color until you accept it
• Making agent work feel like working with teammates – the same pointers people know from Figma or Google Docs

When not to use

• One agent rewriting a reply – use Writing Assistant or Inline Diff
• Changes to code or files – use Inline Diff or Change Summary
• Who started which agent – use Agent Tree

Usage

import { AgentCursors, acceptSuggestion } from "@/components/ui/agent-cursors";

// One shared ink for all of them – their logos tell them apart (pass color to give one its own)
const agents = [
  { id: "research", name: "Researcher", avatar: <ClaudeLogo /> },
  { id: "writer", name: "Writer", avatar: <OpenAILogo /> },
];

export function Brief() {
  const [doc, setDoc] = useState({ blocks, suggestions: [] });
  // From your agents' stream: where each one is and what it does
  const cursors = {
    research: { block: "why", at: 24, select: 9, doing: "Checking the numbers" },
    writer: { block: "list", at: 31, doing: "Adding detail", typing: true },
  };

  return (
    <AgentCursors
      title="Launch brief"
      agents={agents}
      blocks={doc.blocks}
      suggestions={doc.suggestions}
      cursors={cursors}
      onAccept={(s) => setDoc((d) => acceptSuggestion(d.blocks, d.suggestions, s.id))}
      onReject={(s) => setDoc((d) => ({ ...d, suggestions: d.suggestions.filter((x) => x.id !== s.id) }))}
    />
  );
}

Props

Keyboard

• Tab: Moves to the faces in the header, then from suggestion to suggestion – a focused suggestion opens its window
• Enter / Space: On a face: follow that agent, or stop following
• Esc: Closes the window of a suggestion

Accessibility

• The text is real text in headings, paragraphs and a list – pointers, carets and selections are decoration and hidden from screen readers
• Every suggestion is focusable and labelled, e.g. "Researcher suggests adding: 38%"; its window is a dialog with Accept and Reject buttons
• The faces are toggle buttons (aria-pressed) named after the agent and what it is doing; a followed face fills with its tint
• New suggestions are announced politely, with the agent's note

Responsive

• Every position is measured from the page itself, so any width, font size or zoom works – the pointers stay on their letters while the text wraps
• Comment windows open towards the bottom right – towards the left near the right edge, upwards near the bottom
• Flags always sit to the bottom right of their pointer; near the right edge they are cut off rather than moved
• Below 520px the page gets tighter margins and the suggestion count in the header gives way to the faces
• Dark mode built in: switches when an ancestor (usually <html>) has the class dark or data-theme="dark"

Requirements

• React 19

Related

• Writing Assistant – AI chat card with a soft gradient glow, suggestions, streaming replies and live voice dictation
• Inline Diff – AI edits to prose shown inline – struck and added words you accept or reject one by one, with keys, a popover and undo
• Agent Tree – Who started whom – an orchestrator and its sub-agents as a live tree, with status, cost and time on every card, costs rolling up each branch, and branches that fold to one line
• Comment Thread – One comment with replies – an assistant reports what it did, folds open details and answers @mentions