Memory

AI chats

About

Visible, removable facts an agent retains about the user or ongoing work.

Built with React and Tailwind. Copy the prompt and paste it into Claude Code, Cursor or Lovable: your agent adds Memory to your project and fits it to your theme.

Code

How Memory is used: the demo's code. The component's own source comes with a free account.

Usage.tsx

import { useEffect, useState } from 'react'
import Memory, { MemoryItem } from '@/components/ui/memory'

const initialMemories: MemoryItem[] = [
  { id: 'package-manager', category: 'Project', value: 'Uses pnpm' },
  { id: 'design', category: 'Design', value: 'Prefers neutral colors' },
  { id: 'stack', category: 'Stack', value: 'TanStack Start and Tailwind CSS' },
]

export default function Demo() {
  const [items, setItems] = useState(initialMemories)

  return (
    <Memory
      className="w-full max-w-lg"
      items={items}
      onAdd={() =>
        setItems((current) => [
          ...current,
          {
            id: `memory-${current.length + 1}`,
            category: 'Style',
            value: 'Avoids borders on buttons',
          },
        ])
      }
      onRemove={(id) => setItems((current) => current.filter((item) => item.id !== id))}
    />
  )
}