llms.txt
+58 −11
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)