euedujbarrios-uiby edujbarrios
Back to components

AI Interfaces

Agent Memory Card

A compact memory summary card for personalized agents and workspace context.

agentmemorycontext

Installation

Copy and paste the code into your project.

Accessibility notes

Keep saved memories visible as text and provide controls for editing or deleting them in production.

Agent memory

Eduardo workspace

3 saved
  • Prefers compact dashboards
  • Uses eval scorecards
  • Ships with dark themes

Preview accent

TypeScript
const memories = ["Prefers compact dashboards", "Uses eval scorecards", "Ships with dark themes"];

export function AgentMemoryCard() {
  return (
    <section className="w-full max-w-sm rounded-lg border border-[#40E0D0]/22 bg-white/[0.06] p-5 shadow-2xl backdrop-blur">
      <div className="flex items-center justify-between gap-3">
        <div>
          <p className="text-xs font-semibold uppercase tracking-[0.18em] text-[#40E0D0]">Agent memory</p>
          <h3 className="mt-2 text-lg font-bold text-white">Eduardo workspace</h3>
        </div>
        <span className="rounded-full bg-[#40E0D0]/12 px-2.5 py-1 text-xs font-semibold text-[#d8fffb]">3 saved</span>
      </div>
      <ul className="mt-4 space-y-2">
        {memories.map((memory) => (
          <li key={memory} className="flex items-center gap-2 text-sm text-slate-300">
            <span className="h-1.5 w-1.5 rounded-full bg-[#a78bfa]" />
            {memory}
          </li>
        ))}
      </ul>
    </section>
  );
}
Usage
<AgentMemoryCard />

Related components

I can turn that product brief into a component map, then draft the first screen.

AI Interfaces

Streaming Response Bubble

Beginner

A conversational response card with subtle animated streaming indicators.

streamingchatresponse
View component
  1. 1Parse brief
  2. 2Create variants
  3. 3Ship preview

AI Interfaces

Agent Step Timeline

Intermediate

A simple ordered timeline for AI agents, build systems, and workflow progress.

agenttimelinesteps
View component
Grounded responses should show the trail back to source material.
Source · docs/agent-interface.md

AI Interfaces

Source Citation Card

Beginner

A citation card for grounded AI responses and research-backed interfaces.

sourcecitationai
View component