Skip to content
Scrim UI
Browse all components

Memory Suggestion UI

The prompt an assistant shows before saving something about you — the fact it noticed, and your choice to keep or dismiss it.

memorysuggestionsavecontext

Preview

Want me to remember this? “You prefer TypeScript over JavaScript”

Presets

Props

Also takes onSave, onDismiss, onUndo.

Agent promptClaude Code · Cursor · any agent
Add the Memory Suggestion UI component from the Scrim UI registry to this project and use it in the configuration described below.

Memory Suggestion UI — The prompt an assistant shows before saving something about you — the fact it noticed, and your choice to keep or dismiss it.

## 1. Install

```bash
npx shadcn@latest add @scrimui/memory-suggestion
```

This writes a single file to `components/ui/memory-suggestion.tsx`. It is plain React + Tailwind with no runtime dependencies — no Radix, no CVA, nothing to add to package.json. If this project does not use the shadcn CLI, copy the source from https://scrimui.dev/components/memory-suggestion to the same path by hand; nothing in the file depends on shadcn.

## 2. Use it

```tsx
import { MemorySuggestion } from "@/components/ui/memory-suggestion";

<MemorySuggestion
  fact="You prefer TypeScript over JavaScript"
  onSave={() => {}}
  onDismiss={() => {}}
  onUndo={() => {}}
/>
```

## 3. The configuration that matters

This is the component's "Suggestion" state — The assistant proposes saving a fact. Ask before you store — the user keeps control.

Every prop is at its default value. Keep the call site minimal — do not write out default values.

## 4. Wire the handlers

`onSave`, `onDismiss`, `onUndo` are stubs in the snippet above (`() => {}`). Connect them to this project's own state and data layer instead of shipping the empty functions.

Reference: https://scrimui.dev/components/memory-suggestion

Follows the props below — change a control and the prompt changes with it, so an agent reproduces that configuration instead of the defaults.

Install

npx shadcn@latest add @scrimui/memory-suggestion

Component source

React + Tailwind component using shadcn/ui (button, card). The install command adds these dependencies automatically.

When copying source manually, install the required primitives first:

npx shadcn@latest add button card
memory-suggestion.tsx
"use client";

import { Button } from "@/components/ui/button";
import { Card } from "@/components/ui/card";
import * as React from "react";

/* ------------------------------------------------------------------ */
/* Types                                                               */
/* ------------------------------------------------------------------ */

export type MemorySuggestionProps = {
  fact: string;
  saved?: boolean;
  onSave?: () => void;
  onDismiss?: () => void;
  onUndo?: () => void;
  className?: string;
};

/* ------------------------------------------------------------------ */
/* Icons                                                               */
/* ------------------------------------------------------------------ */

function SparkleIcon(props: React.SVGProps<SVGSVGElement>) {
  return (
    <svg
      viewBox="0 0 24 24"
      fill="none"
      stroke="currentColor"
      strokeWidth="1.5"
      strokeLinecap="round"
      strokeLinejoin="round"
      width="14"
      height="14"
      {...props}
    >
      <path d="M12 3l1.9 5.8a2 2 0 0 0 1.3 1.3L21 12l-5.8 1.9a2 2 0 0 0-1.3 1.3L12 21l-1.9-5.8a2 2 0 0 0-1.3-1.3L3 12l5.8-1.9a2 2 0 0 0 1.3-1.3z" />
    </svg>
  );
}

function CheckIcon(props: React.SVGProps<SVGSVGElement>) {
  return (
    <svg
      viewBox="0 0 24 24"
      fill="none"
      stroke="currentColor"
      strokeWidth="1.5"
      strokeLinecap="round"
      strokeLinejoin="round"
      width="12"
      height="12"
      {...props}
    >
      <path d="M20 6 9 17l-5-5" />
    </svg>
  );
}

/* ------------------------------------------------------------------ */
/* MemorySuggestion                                                    */
/* ------------------------------------------------------------------ */

export function MemorySuggestion({
  fact,
  saved = false,
  onSave,
  onDismiss,
  onUndo,
  className = "",
}: MemorySuggestionProps) {
  if (saved) {
    return (
      <div
        className={`flex items-center gap-3 rounded-xl border border-emerald-200 bg-emerald-50 px-4 py-3 dark:border-emerald-900/50 dark:bg-emerald-900/20 ${className}`}
      >
        <span className="flex h-6 w-6 shrink-0 items-center justify-center rounded-full bg-emerald-500 text-white">
          <CheckIcon />
        </span>
        <p className="min-w-0 flex-1 text-sm font-medium text-emerald-800 dark:text-emerald-300">
          Saved to memory
        </p>
        {onUndo && (
          <Button variant="ghost" size="sm"
            type="button"
            onClick={onUndo}
            className="shrink-0 text-xs font-medium text-emerald-700 hover:underline dark:text-emerald-300"
          >
            Undo
          </Button>
        )}
      </div>
    );
  }

  return (
    <Card
      className={`flex-row gap-0 py-0 flex items-start gap-3 rounded-xl border border-border bg-card p-4 ${className}`}
    >
      <span className="flex h-8 w-8 shrink-0 items-center justify-center rounded-lg bg-muted text-muted-foreground">
        <SparkleIcon />
      </span>

      <div className="min-w-0 flex-1">
        <p className="text-sm leading-5 text-muted-foreground">
          Want me to remember this?{" "}
          <span className="font-medium text-foreground">“{fact}”</span>
        </p>
        <div className="mt-2.5 flex items-center gap-2">
          <Button variant="default" size="sm"
            type="button"
            onClick={onSave}
            className="inline-flex h-8 items-center gap-1.5 rounded-md bg-primary px-3 text-xs font-medium text-primary-foreground transition-opacity hover:opacity-90"
          >
            <CheckIcon />
            Save to memory
          </Button>
          {onDismiss && (
            <Button variant="outline" size="sm"
              type="button"
              onClick={onDismiss}
              className="inline-flex h-8 items-center rounded-md border border-border px-3 text-xs font-medium text-muted-foreground transition-colors hover:bg-muted"
            >
              Not now
            </Button>
          )}
        </div>
      </div>
    </Card>
  );
}

When to use it

  • Propose a save only for durable, useful facts — not transient details of the conversation.
  • Always make the save explicit with Save / Not now; never silently store.
  • Show the exact fact being saved so the user can judge before agreeing.
  • Offer Undo after saving — a memory a user regrets is worse than none.

What breaks in production

  • Saving facts silently — the user discovers the assistant 'remembers' things it was never told to keep.
  • Proposing to remember trivial, one-off details, which trains users to dismiss every suggestion.
  • Saving sensitive facts (finances, health, contacts) without a stronger confirmation.

Related Components

Memory List

The memory panel — every fact the assistant has saved about the user, with the ability to add one or make it forget.

Memory Chip

A small inline chip confirming a fact was saved to memory — quiet enough to ignore, clear enough to undo.

Memory Toast

The 'Memory updated' receipt — shows the exact fact that was saved, with one-tap Undo and a quiet link to manage memories.

Prompt Input

The message input at the heart of an AI chat app — file attachments, model picker, tool toggles, voice, and a send button that turns into stop.