An interactive playground of copy-paste React components for the interaction patterns unique to AI agent experiences — streaming, reasoning, confirming, and reporting progress.
It's the implementation companion to the pattern specs at agentic-ux.com: the spec describes what & why; this site shows how, with a live demo and copy-paste code for each pattern.
Frontend developers building AI agent experiences need working references they can copy into their own codebase — without adopting a full design system or chat UI framework. agentic-kit.dev is the live implementation companion to agentic-ux.com: play with a pattern, copy the code, ship it the same day.
- Streaming text reveal — token-by-token output with a blinking caret
- Thinking / reasoning state — progressive: pulse → named activity → revealed reasoning
- Action preview → confirm — state intent, expand details, require approval
- Context panel — slide-out showing what the agent knows
- Tool-call visualization — call fires, live spinner, result snaps in
- Multi-step progress ledger — a plan that checks itself off
Each pattern exports a self-contained snippet with inline styles — no
Tailwind in the code you copy. Snippets use plain SVG for icons; swap in
@phosphor-icons/react if you prefer. The playground site itself uses Tailwind
and other dependencies for the shell and demos.
Requires Node.js 20+ and pnpm.
pnpm install
pnpm dev # start the dev server
pnpm build # type-check + production build to dist/
pnpm lint # eslint
pnpm preview # preview the production build- Open agentic-kit.dev and find the pattern you need.
- Copy the code block from the pattern card.
- Paste into your React + TypeScript project — the snippet runs without this repo's dependencies.
Pattern source lives in src/patterns/ if you prefer to copy from the repo
directly.
- Vite + React 19 + TypeScript
- Tailwind CSS v4 for the site shell
- prism-react-renderer for snippet syntax highlighting
src/
patterns/ one file per pattern: live Demo component + exported code string
components/ Nav, Hero, Footer, PatternCard, CodeBlock
lib/ pattern registry, types, useCopy hook
To add a pattern: create src/patterns/MyPattern.tsx exporting a Demo
component and a code string, then register it in src/lib/patterns.ts.
See CONTRIBUTING.md for PR guidelines.
Site shell design tokens are documented in design.md. Product intent and anti-patterns are in PRODUCT.md.
Static output — deploy dist/ anywhere. For Vercel or Cloudflare Pages, use
build command pnpm run build and output directory dist.
Contributions are welcome. Read CONTRIBUTING.md before opening a pull request.
This project follows the Contributor Covenant.
See SECURITY.md for how to report vulnerabilities.
MIT — Copyright (c) 2026 Daniel Albinsson