agentscreens

A curated reference for UI patterns in production AI agents — how tool calls, streaming, citations, plans, errors, and other agent-specific UX are actually rendered by the products people use.

Pattern libraries exist for prompts. They don't really exist for what builders actually struggle with: how do I show a tool call? What does a good plan view look like? How should errors fail gracefully? This is a place to look those up.

Live at agentscreens.com.

Stack

• Next.js 16 (App Router) + TypeScript
• Tailwind 4
• Static — no DB, no auth, no JS framework lock-in
• Hosted on Vercel

Run locally

npm install
npm run dev

Open http://localhost:3000.

Add a pattern

1. Drop your screenshot in public/screenshots/<slug>.png. Use a slug that matches the entry below.
2. Add an entry to the patterns array in lib/data.ts:

{
  slug: "claude-code-tool-call-collapsed",
  title: "Collapsible tool call with arguments preview",
  description: "Claude Code shows the tool name and a one-line summary, expandable to reveal full arguments and output.",
  productSlug: "claude-code",  // must exist in `products` array
  categorySlugs: ["tool-calls"], // each must exist in `categories` array
  screenshotPath: "/screenshots/claude-code-tool-call-collapsed.png",
  sourceUrl: "https://claude.com/claude-code",
  publishedAt: "2026-05-02",
  notes: "Optional — what makes this interesting.",
},

3. If the product doesn't exist yet, add it to the products array.
4. Open a PR.

If you'd rather email a screenshot, send it to hi@agentscreens.com with the product name, suggested category, and 1-line note about what's interesting.

Submission criteria

• Production product, not a demo
• Clean screenshot (no PII, nothing in frame that isn't the pattern)
• Specific to one pattern (don't cram a whole UI into one entry)
• Notes explain what's actually interesting

License

MIT — use the data, fork the site, build something better.

Built by

0xdeadd