Skip to content

Settings & Usage

Memory Panel

What the agent remembers about the user and project — search, scopes, inline edit and forget.

2 variantsMIT

Preview

Memory

4 memories

  • Uses pnpm, never npm or yarn, in every repo.

    UserPinnedfrom chat · 3w ago

  • Run the e2e suite in every shipped locale before calling i18n work done.

    Projectfrom a correction · 4d ago

  • Product names stay in English; the glossary in docs/glossary.md wins over MT.

    Projectfrom docs/glossary.md · 2d ago

  • Working on feat/onboarding-de for this session.

    Sessionfrom git · just now

The agent reads these at the start of every run.

Installation

Copies the component into components/ui and installs its dependencies and theme tokens.

pnpm dlx shadcn@latest add https://tuffui.com/r/memory-panel.json

Usage

Pass your own data and wire the callbacks to your agent runtime.

import { MemoryPanel } from "@/components/ui/memory-panel";

export function AgentMemory({ memories }: { memories: Memory[] }) {
  return (
    <MemoryPanel
      data={memories}
      onEdit={(memory, text) => api.memories.update(memory.id, { text })}
      // Called after the undo window closes, so a quick Undo never hits the server.
      onForget={(memory) => api.memories.delete(memory.id)}
    />
  );
}

Props

PropTypeDefaultDescription
data*Memory[]—Memories in display order. Set isNew on ones added this session.
onEdit(memory, text: string) => void—Called when an inline edit is saved with Enter. Esc cancels.
onForget(memory) => void—Called once the undo window closes. The row hides immediately and shows an Undo pill.
onUndo(memory) => void—Called when the user restores a memory within the undo window.
undoMsnumber5000How long the Undo pill stays before the Forget is committed.
variant"panel" | "compact""panel"A panel with search and scope filters, or a dense list without them.
titlestring"Memory"Heading and accessible name of the panel.
classNamestring—Extra classes for the root element.
type Memory = {
  id: string;
  text: string;
  scope: "user" | "project" | "session";
  source?: string; // e.g. "from chat · 2d ago"
  pinned?: boolean;
  isNew?: boolean; // shows a "New" pill
};