affectUI llms.txt changelog

https://www.affectui.com/llms.txt

− > Agent-ready React UI for AI products and SaaS: 119 components, screens, blocks, illustrations and motion effects. Every item is one .tsx file with its styles inside – no Tailwind, no animation library, no other dependencies. React 19, dark mode and reduced motion built in.− 40 items are free and open source (MIT). The other 79 are part of affectUI Pro, a one-time purchase (https://www.affectui.com/pricing).− - [Agent Chat](https://www.affectui.com/screens/agent-chat): Chat with an orchestrating agent, the agents at work, and a brief to fill in beside it (Pro, App screens)− - [Agent Run](https://www.affectui.com/screens/agent-run): One autonomous agent run: the plan ticking through its steps, the tool calls, an approval it waits on and the draft it wrote (Pro, App screens)− - [App Shell Flat](https://www.affectui.com/screens/app-shell-flat): The App Shell laid flat – gray sidebar and an edge-to-edge page, split by a single hairline (Pro, App screens)− - [App Shell Inset](https://www.affectui.com/screens/app-shell): Collapsible sidebar with workspace, menu, projects and account – the frame every screen sits in (Pro, App screens)− - [Assistant Home](https://www.affectui.com/screens/assistant-home): AI assistant start page: greeting, prompt box with tools, connected apps and suggestions (Pro, App screens)− - [Folder](https://www.affectui.com/screens/folder): Inside one folder: breadcrumbs, file cards with previews, and an empty state (Pro, App screens)− - [Folders](https://www.affectui.com/screens/files): Folder overview with tabs, search, sort, grid/list toggle and file templates (Pro, App screens)− - [Settings & Billing](https://www.affectui.com/screens/settings-billing): Settings page with tabs: workspace, members, API keys and billing with plan, usage, payment method, plan comparison and invoices (Pro, App screens)− - [AI Workspace](https://www.affectui.com/blocks/ai-workspace): Complete assistant app – sidebar, welcome, streaming chat and projects, built on the Chat Composer (Pro, Productivity)+ > Agent-ready React UI for AI products and SaaS: 142 components, screens, blocks, illustrations and motion effects. Every item is one .tsx file with its styles inside – no Tailwind, no animation library, no other dependencies. React 19, dark mode and reduced motion built in.+ 40 items are free and open source (MIT). The other 102 are part of affectUI Pro, a one-time purchase (https://www.affectui.com/pricing).+ ## Guides+ - [React components for AI chat interfaces](https://www.affectui.com/guides/ai-chat-ui-components-react): What an AI chat UI needs – composer, streaming answers, thinking states, tool calls, citations, message actions – and React components for each.+ - [How to build an agent dashboard in React](https://www.affectui.com/guides/agent-dashboard-react): The views an AI agent dashboard needs – what's running, who started what, what needs a person, what it cost – and React components for each.+ - [Human-in-the-loop UI: approvals, permissions and autonomy](https://www.affectui.com/guides/human-in-the-loop-ui): UI patterns for keeping people in control of AI agents – approval cards, permission requests, autonomy levels, steering and reviewing changes.+ - [How to show tool calls in an AI agent UI](https://www.affectui.com/guides/tool-calls-agent-ui): How to display an agent's tool calls – one readable line per call, arguments and results on demand, errors with retry – and when to switch to a trace or a graph.+ - [Streaming AI responses in React without layout shift](https://www.affectui.com/guides/streaming-ai-responses-react): How to render streamed LLM answers in React so the page doesn't jump – stable containers, a clear thinking state, smooth text, and actions that appear in place.+ - [Model picker UI: letting users choose an LLM](https://www.affectui.com/guides/model-picker-ui): How to design a model picker for an AI product – what to show per model, defaults, reasoning settings, and what happens when a model fails.+ - [How to show AI agent costs and token usage](https://www.affectui.com/guides/ai-agent-costs-token-usage-ui): UI patterns for showing what AI agents cost – per run, per step and per agent – plus token usage, context limits and budgets.+ - [How to show what an AI agent is doing](https://www.affectui.com/guides/show-what-ai-agent-is-doing): UI patterns that make an AI agent's work visible – the current step, its plan, tool calls, a live tree or timeline, and a trace of where time and money went.+ - [Approval UI for AI agents: what to show before an agent acts](https://www.affectui.com/guides/approval-ui-ai-agents): How to design the approval step for AI agent actions – what the card must show, risk levels, timeouts, batching many requests, and undo after approval.+ - [Multi-agent UI in React: orchestrators, sub-agents and hand-offs](https://www.affectui.com/guides/multi-agent-ui-react): How to show several AI agents working together – who started whom, who is busy, hand-offs, parallel work, conflicts and the queue – with React components for each.+ - [Context window UI: showing what fills an LLM's context](https://www.affectui.com/guides/context-window-ui): How to show an LLM's context window to users – what takes up space, how full it is, what to remove, when to compact, and how memory fits in.+ ## Comparisons+ - [affectUI compared](https://www.affectui.com/compare): one table of affectUI, shadcn/ui, AI Elements, assistant-ui, Aceternity UI and Magic UI+ - [affectUI vs shadcn/ui](https://www.affectui.com/compare/shadcn-ui): How affectUI and shadcn/ui differ, where each fits, and how to use them together in one React project.+ - [affectUI vs AI Elements](https://www.affectui.com/compare/ai-elements): How affectUI and Vercel's AI Elements differ – what each covers, what it needs to run, how it connects to the AI SDK – and how to use them together.+ - [affectUI vs assistant-ui](https://www.affectui.com/compare/assistant-ui): How affectUI and assistant-ui differ – a chat framework with runtimes versus finished components for AI products – and how to combine them.+ - [affectUI vs CopilotKit](https://www.affectui.com/compare/copilotkit): How affectUI and CopilotKit differ – a framework that connects agents to your app versus finished components for AI products – and how to use them together.+ - [affectUI vs prompt-kit](https://www.affectui.com/compare/prompt-kit): How affectUI and prompt-kit differ – chat building blocks on shadcn/ui and Tailwind versus finished components for AI products and agents – and when to use which.+ - [affectUI vs Aceternity UI and Magic UI](https://www.affectui.com/compare/aceternity-magic-ui): How affectUI differs from Aceternity UI and Magic UI – components for the AI product itself versus animated sections for landing pages – and when to use which.+ - [affectUI vs Arc UI](https://www.affectui.com/compare/arc-ui): How affectUI and Arc UI differ – a broad animated library for product UI versus components made for AI agent products – and when to pick which.+ - [affectUI vs BoardUI](https://www.affectui.com/compare/boardui): How affectUI and BoardUI differ – a dashboard design system on Tailwind and React Aria versus self-contained components for AI agent products – and when to pick which.+ - [affectUI vs Untitled UI](https://www.affectui.com/compare/untitled-ui): How affectUI and Untitled UI differ – a complete design system in Figma and React versus components made for AI agent products – and how they fit together.+ - [affectUI vs 21st.dev](https://www.affectui.com/compare/21st-dev): How affectUI and 21st.dev differ – a marketplace of community components on a subscription versus one consistent library for AI agent products, paid once – and when to pick which.+ - [Agent Checkpoints](https://www.affectui.com/components/agent-checkpoints): An agent's run as a line of checkpoints, like git for agents – rewind to any of them and a new attempt branches out of it, while the one it left fades back but stays (Pro, Agents)+ - [Agent Findings](https://www.affectui.com/components/agent-findings): A swarm of agents checking something – one calm row per agent with its progress, and their findings sliding into a short feed as they're found (Pro, Agents)+ - [Agent Fleet](https://www.affectui.com/components/agent-fleet): Several agents side by side – each card sums up its sub-agents, and a click opens its tree to the right while the last one folds back into its card (Pro, Agents)+ - [Agent Handoff](https://www.affectui.com/components/agent-handoff): A task passed from agent to agent like a relay – at every handoff what went along to the next one, and what got lost on the way (Pro, Agents)+ - [Agent Monitor](https://www.affectui.com/components/agent-monitor): One agent at work, as a card – its current step with a clock and the bill so far, a time strip and the finished steps with the logo of each tool, a click on any of them for the details; the exact command when it needs your OK; folds into a small bar with the tools it has used (Pro, Agents)+ - [Agent Recap](https://www.affectui.com/components/agent-recap): What the agents did while you were away – the night as a small chart with a peak per event, then a board of what needs you, what failed and what's done, acted on right on the card (Pro, Agents)+ - [Collaboration Stream](https://www.affectui.com/components/collaboration-stream): What agents actually say to each other – a quiet chat where every message shows who it is from and who it is for, handoffs and questions for you tagged, files as chips that open a preview, a card with details under every message, and a composer to name agents with @ or answer a question (Pro, Agents)+ - [Conflict Radar](https://www.affectui.com/components/conflict-radar): Agents working on their own branches at once, and where they get in each other's way – a row per file and a column per agent, a line between the agents that changed the same lines, each agent's way in one sentence to pick from, and Merge once all are settled (Pro, Agents)+ - [Context Map](https://www.affectui.com/components/context-map): What fills an agent's context window, as a living treemap – system prompt, tools, memory, every file, the chat and tool results as tiles that glide as it grows, the free space dashed, and compaction squeezing old turns into a summary (Pro, Agents)+ - [Cost Waterfall](https://www.affectui.com/components/cost-waterfall): Where the money and tokens of an agent run go – every LLM call, tool call and sub-agent as a step in a waterfall, with model, tokens, cost and time, the most expensive step on top and a switch between cost and tokens (Pro, Agents)+ - [Fallback Chain](https://www.affectui.com/components/fallback-chain): One request finding a model that answers, as a small flow diagram – the request branches out to each model in its fallback order, a light runs to the one being tried, failed branches break red, and the one that answers runs on to the response (Pro, Agents)+ - [Plan vs Actual](https://www.affectui.com/components/plan-vs-actual): An agent's plan against what really happens – every step's bar grows over its dashed planned ghost, overruns turn amber, the steps after it slide right, and the expected finish moves away from the planned one (Pro, Agents)+ - [Scheduled Runs](https://www.affectui.com/components/scheduled-runs): Agent tasks sorted into a week of sessions – each session has a usage limit, small tasks fill the gaps, big ones are split across sessions, and the stack flies in one card at a time (Pro, Agents)+ - [Tool Access Map](https://www.affectui.com/components/tool-access-map): An agent in the middle with every tool it can reach around it – which ones it used, which failed and which it calls right now; open a tool for its calls and replay one on its own (Pro, Agents)

https://www.affectui.com/llms.txt

− > Agent-ready React UI for AI products and SaaS: 105 components, screens, blocks, illustrations and motion effects. Every item is one .tsx file with its styles inside – no Tailwind, no animation library, no other dependencies. React 19, dark mode and reduced motion built in.− 40 items are free and open source (MIT). The other 65 are part of affectUI Pro, a one-time purchase (https://www.affectui.com/pricing).− - [App Shell](https://www.affectui.com/screens/app-shell): Collapsible sidebar with workspace, menu, projects and account – the frame every screen sits in (Pro, App screens)+ > Agent-ready React UI for AI products and SaaS: 119 components, screens, blocks, illustrations and motion effects. Every item is one .tsx file with its styles inside – no Tailwind, no animation library, no other dependencies. React 19, dark mode and reduced motion built in.+ 40 items are free and open source (MIT). The other 79 are part of affectUI Pro, a one-time purchase (https://www.affectui.com/pricing).+ - [Agent Cursors](https://www.affectui.com/components/agent-cursors): Agents working in a document like teammates in a multiplayer editor – live pointers with names, suggestions typed letter by letter, images they resize, code they fix and comments beside the page (Pro, Agents)+ - [Agent Graph](https://www.affectui.com/components/agent-graph): Agents and the tools they call as a living network – a pulse along the link for every call and its answer, busy links growing thicker, agents that breathe while they work and turn amber when they need you (Pro, Agents)+ - [Agent Lanes](https://www.affectui.com/components/agent-lanes): Where every agent is right now – a live timeline with a lane per agent, tasks growing into “now”, hand-offs drawn between agents and approvals right on the block (Pro, Agents)+ - [Agent Ledger](https://www.affectui.com/components/agent-ledger): Everything an agent changed in your systems, each change with an undo – before and after per row, and pointing at Undo shows what builds on it: what would be undone too, and what can't be taken back (Pro, Agents)+ - [Agent Queue](https://www.affectui.com/components/agent-queue): The work waiting for your agents, and how fast it moves – jobs drop into a live queue, glide into free worker slots as growing bars and land in Done or Failed, while a depth chart shows the backlog build up when a rate limit pauses the workers and drain when they resume (Pro, Agents)+ - [Agent Tree](https://www.affectui.com/components/agent-tree): Who started whom – an orchestrator and its sub-agents as a live tree, with status, cost and time on every card, costs rolling up each branch, and branches that fold to one line (Pro, Agents)+ - [Decision Tree](https://www.affectui.com/components/decision-tree): An agent stuck on a decision lays out its options as a tree – the consequences of each branch, the risky ones marked, its own pick highlighted – and you choose a path or write your own (Pro, Agents)+ - [Delegate Board](https://www.affectui.com/components/delegate-board): Hand work to your agents by dragging it onto them – each agent previews its new “busy until” time, or switch to Auto and every new task goes to whoever is free first (Pro, Agents)+ - [Fan-out Grid](https://www.affectui.com/components/fan-out-grid): One agent hands a big job to many workers – every task a cell on a live grid that fills in as they get through it, with retries, failures, cost and the time left, and the details of any task on hover (Pro, Agents)+ - [Parallel Attempts](https://www.affectui.com/components/parallel-attempts): An agent tries the same task several ways at once and the best one wins – every attempt races as a row with its model, approach and live bar, then gets a score; the best is marked and picked, and you can switch to another (Pro, Agents)+ - [Permission Request](https://www.affectui.com/components/permission-request): An agent asks for one specific right – who, why and exactly what will happen – and you allow it once, for an hour or always; then it folds into one line with the time left and Revoke (Pro, Agents)+ - [Review Center](https://www.affectui.com/components/review-center): A focused workspace for what your agents want to do – the queue sorted by risk, one item at a time with the shaky spans marked, Approve, Edit, Reject and Skip on single keys, a stamp as each one leaves and the next one rising in (Pro, Agents)+ - [Trace Waterfall](https://www.affectui.com/components/trace-waterfall): Where the time and money of an agent run go – every LLM call, tool call and sub-agent as a bar on a live timeline, with tokens and cost per step, the slowest call marked and branches that fold into their parent (Pro, Agents)+ - [App Shell Flat](https://www.affectui.com/screens/app-shell-flat): The App Shell laid flat – gray sidebar and an edge-to-edge page, split by a single hairline (Pro, App screens)+ - [App Shell Inset](https://www.affectui.com/screens/app-shell): Collapsible sidebar with workspace, menu, projects and account – the frame every screen sits in (Pro, App screens)

https://www.affectui.com/llms.txt

− > Agent-ready React UI for AI products and SaaS: 81 components, screens, blocks, illustrations and motion effects. Every item is one .tsx file with its styles inside – no Tailwind, no animation library, no other dependencies. React 19, dark mode and reduced motion built in.− 36 items are free and open source (MIT). The other 45 are part of affectUI Pro, a one-time purchase (https://www.affectui.com/pricing).+ > Agent-ready React UI for AI products and SaaS: 105 components, screens, blocks, illustrations and motion effects. Every item is one .tsx file with its styles inside – no Tailwind, no animation library, no other dependencies. React 19, dark mode and reduced motion built in.+ 40 items are free and open source (MIT). The other 65 are part of affectUI Pro, a one-time purchase (https://www.affectui.com/pricing).+ - [Agent Inbox](https://www.affectui.com/components/agent-inbox): All your background agent tasks in one calm list – live clocks and status tags, filter tabs with rolling counts, rows that unfold to the last steps with Approve, Reject, Retry or Open, and glide to their new place (Pro, Agents)+ - [Agent Plan](https://www.affectui.com/components/agent-plan): An agent's step-by-step plan to review before it runs – rename, drag to reorder, remove or add steps, then watch each one run with live timers and retry from a failed step (Pro, Agents)+ - [Agent Steering](https://www.affectui.com/components/agent-steering): Steer an agent while it works – queue a note for the next step and watch it glide into the plan when the agent picks it up, or interrupt right away (Pro, Agents)+ - [Approval Card](https://www.affectui.com/components/approval-card): An agent asks before it acts – risk badge, preview, Approve and Deny with shortcuts, a pausing countdown, and a smooth morph into a resolved row (Pro, Agents)+ - [Autonomy Dial](https://www.affectui.com/components/autonomy-dial): How much an agent may do on its own – a three-stop dial, and its real actions gliding between “Runs on its own” and “Asks you first”, with a lock for what always asks (Pro, Agents)+ - [Cited Answer](https://www.affectui.com/components/cited-answer): An AI answer wired to its sources – point at a citation to light up its sentence and source, click to unfold the quoted passage with the matching words marked (Pro, Chat)+ - [Compact Breakdown](https://www.affectui.com/components/compact-breakdown): A total split into its parts in one small card – numbers roll, the bar glides and the ranked rows trade places when the period changes (Pro, Data display)+ - [Context Window](https://www.affectui.com/components/context-window): What fills the model's context, as a field of cells – hover a part to light it up, remove files, and compact the conversation while its cells shimmer and clear (Pro, Agents)+ - [Experiment Card](https://www.affectui.com/components/experiment-card): An A/B test in two lines that quietly unfolds on hover – variants linked to a tiny chart, a metric switch with rolling numbers, and a winner you pick with a click (Pro, Data display)+ - [Inline Diff](https://www.affectui.com/components/inline-diff): AI edits to prose shown inline – struck and added words you accept or reject one by one, with keys, a popover and undo (Pro, Agents)+ - [Memory Panel](https://www.affectui.com/components/memory-panel): What the assistant remembers about you, grouped and editable – a master switch, category filters, and on every memory edit in place, pause or forget with Undo on the tray (Pro, Agents)+ - [Message Actions](https://www.affectui.com/components/message-actions): The quiet bar under an AI message – copy turns into a check, regenerate spins and unfolds a version switcher, thumbs pop and ask why, read aloud becomes a tiny equalizer (Free, Chat)+ - [Model Picker](https://www.affectui.com/components/model-picker): The model menu of an AI chat – point at a model and its speed, quality and cost bars fill, switch on extended thinking and its effort unfolds, while the tray rolls the first-token time and price (Pro, Chat)+ - [Project Card](https://www.affectui.com/components/project-card): A two-line project summary that quietly unfolds on hover – a progress ring with one segment per subtask, a people filter and a status picker, all linked by hover (Pro, Cards)+ - [Prompt Library](https://www.affectui.com/components/prompt-library): Saved prompt templates with variables – type straight into the sentence, watch the finished prompt assemble below, and use it once every variable is filled (Pro, Inputs)+ - [Thinking Loader](https://www.affectui.com/components/thinking-loader): A small working pill for AI replies – an eight-ray spinner and a shimmering label that rolls through phases and settles on a check (Free, Chat)+ - [Tool Call Card](https://www.affectui.com/components/tool-call-card): An agent's tool call in one line – live timer, status and summary, folds open to highlighted arguments and result with copy, retry on errors and a group that sums them up (Free, Agents)+ - [Agent Run](https://www.affectui.com/screens/agent-run): One autonomous agent run: the plan ticking through its steps, the tool calls, an approval it waits on and the draft it wrote (Pro, App screens)+ - [Evals](https://www.affectui.com/screens/evals): Prompt evaluation dashboard: pass rate by version, reviewable prompt changes and test cases you can re-run (Pro, App screens)+ - [Onboarding](https://www.affectui.com/screens/onboarding): First-run flow of an AI workspace: workspace setup, tool connections, team invites and a first agent, with a getting-started checklist (Pro, App screens)+ - [Settings & Billing](https://www.affectui.com/screens/settings-billing): Settings page with tabs: workspace, members, API keys and billing with plan, usage, payment method, plan comparison and invoices (Pro, App screens)+ - [KPI Board](https://www.affectui.com/blocks/kpi-board): The top of a dashboard – three trend cards, an overview chart that compares this period with the last, and a focus card; hover shows any day's value and every number rolls when the range changes (Pro, Analytics)+ - [Cover Flow](https://www.affectui.com/illustrations/cover-flow): Browse covers in 3D – drag, flick or scrub the row, it springs to the nearest cover; images drift in their frames over a soft reflection (Free, Card illustrations)+ - [Voice Orb](https://www.affectui.com/illustrations/voice-orb): The face of a voice assistant – a sphere of dots that breathes, catches sound, collapses into a spinning ring while thinking and ripples when it speaks (Pro, Product scenes)