Overview
How might we design caching indicators so people can trust and act on AI output?
When this pattern fits
- Ideal for AI applications with caching, search tools, and platforms where indicating cache usage helps users understand response speed and data freshness.
When to skip or lighten it
- Cached content that must always be live, like stock prices.
- Indicators so prominent they distract from the answer.
- Cache with no invalidation story on source update.
States
State model coming soon
Key UX elements
Key UX elements coming soon
Anti-patterns to avoid
Cached badge with no timestamp.
Fresh button that does nothing different.
Hiding cache on wrong answers users cannot retry fresh.
Same UI for CDN cache and semantic answer cache.
How products use it
| Product | Implementation |
|---|---|
| Search engines | Cached page links with snapshot date. |
| API platforms | Cache-Control headers surfaced in dev UI. |
| AI platforms | Regenerate fresh on assistant messages. |
| Content delivery networks | Hit or miss badges in debug overlays. |
Implementation
Copy this prompt to generate a production-ready implementation in Cursor, Claude Code, Lovable, or any AI coding agent.
Generate a production-ready implementation of the "Caching Indicators" AI interface design pattern.
Pattern Definition:Frequently asked questions
What should cache indicator show?
Source cached, age, and action to refresh or bypass cache.
When force fresh default?
Time-sensitive queries, user explicit refresh, and after source edit events.
Caching vs batch queue?
Cache serves prior result fast. Queue processes new batch jobs.
Trust impact?
Honest cache labels beat silent stale answers.