Memory Chips

AI chats 7

About

A panel or row of removable chips showing facts an AI assistant remembers, with add/remove interactions.

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

Code

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

Usage.tsx

import { MemoryChips, type MemoryItem } from "@/components/ui/memory-chips";

const memories: MemoryItem[] = [
  { id: "1", fact: "Prefers TypeScript over JavaScript" },
  { id: "2", fact: "Working on a Next.js SaaS dashboard" },
  { id: "3", fact: "Timezone: IST (UTC+5:30)" },
  { id: "4", fact: "Likes concise, direct answers" },
];

export default function MemoryChipsDemo() {
  return (
    <div className="flex w-full items-center justify-center p-8">
      <MemoryChips memories={memories} onAdd={() => {}} onRemove={() => {}} />
    </div>
  );
}