# AI use cases for Affectui (flohoeller/affectui) Repo: [flohoeller/affectui](https://github.com/flohoeller/affectui) | Use cases: 4 | Page: https://dedupedai.com/use-cases/flohoeller-affectui/ affectUI is a free, open source library of handcrafted React components, illustrations and motion effects, each delivered as one .tsx file with its styles inside. This file holds every use case of this repo. Each one starts with a "## " heading and ends with its URL. - Add a polished message action bar to an AI chat: https://dedupedai.com/use-cases/flohoeller-affectui/add-ai-message-actions-to-chat/ - Let an AI coding agent find and add UI items for you: https://dedupedai.com/use-cases/flohoeller-affectui/let-ai-coding-agent-install-affectui-items/ - Build a review inbox where humans approve agent actions: https://dedupedai.com/use-cases/flohoeller-affectui/build-agent-approval-inbox/ - Add an onboarding checklist with a live progress bar: https://dedupedai.com/use-cases/flohoeller-affectui/add-onboarding-progress-checklist/ ## How to add a polished message action bar to an AI chat with Affectui Repo: [flohoeller/affectui](https://github.com/flohoeller/affectui) | Difficulty: Intermediate | Time: 30 minutes | Basis: From the README Drop a finished copy, regenerate, feedback and read-aloud bar under each AI reply in one file. **Who it is for:** A frontend developer building an AI chat interface who needs the controls under each assistant message to feel finished. **The problem:** Building copy, regenerate, thumbs and read-aloud controls with clear state changes takes time and is easy to get visually or accessibly wrong. **The outcome:** A working Message Actions component in components/ui that shows copy confirmation, regenerate feedback and feedback buttons under AI replies. ### Steps 1. Run `npx shadcn@latest add https://www.affectui.com/r/message-actions.json` in the project root. 2. Open the generated file in components/ui and read the props on the item page at https://www.affectui.com/components/message-actions. 3. Import the component into the chat message renderer with `import { MessageActions } from "@/components/ui/message-actions";`. (inferred, check the README) 4. Connect your own copy, regenerate and feedback handlers to the component props. 5. Send a test AI reply in the app and confirm the bar appears and the copy control shows a check after a click. ### Prompt to paste into your agent ```text In the affectui repo context, install the message-actions item into the Next.js or React 19 project using `npx shadcn@latest add https://www.affectui.com/r/message-actions.json`, then render it under the last assistant message in . Expected output: a MessageActions import and usage in that file with your existing handlers wired to props. Verify the project still builds and the bar renders with no console errors. ``` ### Caveat The README describes the component behavior but the exact props for your handlers are on the item page, so check them there before wiring the bar to your API. Disclaimer: Third-party repos we don't own or vouch for. AI-generated use cases can be wrong: review everything and run at your own risk. Full text: https://dedupedai.com/disclaimer/ URL: https://dedupedai.com/use-cases/flohoeller-affectui/add-ai-message-actions-to-chat/ ## How to let an AI coding agent find and add UI items for you with Affectui Repo: [flohoeller/affectui](https://github.com/flohoeller/affectui) | Difficulty: Intermediate | Time: 15 minutes | Basis: From the README Connect the affectUI MCP server so Claude Code, Cursor or Codex can search items and install them. **Who it is for:** A developer who works in Claude Code, Cursor or Codex and wants the assistant to pick and add UI components without copying URLs by hand. **The problem:** Finding the right registry URL and adding each item manually slows down UI work inside an agent session. **The outcome:** An agent that can search the affectUI catalog, read item docs and add a chosen component to the project. ### Steps 1. Run `claude mcp add --transport http affectui https://www.affectui.com/api/mcp` once for Claude Code. 2. For Cursor or other MCP clients, add `{ "mcpServers": { "affectui": { "url": "https://www.affectui.com/api/mcp" } } }` to the client's MCP config. 3. Ask the agent to search affectUI for the component you need, for example a reaction bar or onboarding checklist. 4. Review the file the agent adds to components/ui before importing it into your screens. 5. Run the project build to confirm the added component compiles. ### Prompt to paste into your agent ```text Use the affectUI MCP server at https://www.affectui.com/api/mcp to search for and add the best match to the React 19 project. Expected output: the new component file in components/ui and a short note naming the item chosen. Verify that the project builds after the file is added. ``` ### Caveat The MCP server is hosted at Affectui.com, so the agent depends on that service being reachable, and Pro items are not in this repository and will not install from here. Disclaimer: Third-party repos we don't own or vouch for. AI-generated use cases can be wrong: review everything and run at your own risk. Full text: https://dedupedai.com/disclaimer/ URL: https://dedupedai.com/use-cases/flohoeller-affectui/let-ai-coding-agent-install-affectui-items/ ## How to build a review inbox where humans approve agent actions with Affectui Repo: [flohoeller/affectui](https://github.com/flohoeller/affectui) | Difficulty: Advanced | Time: 1 hour | Basis: From the README Combine Decision Inbox, Email Draft and Comment Thread so people can approve or discard agent output. **Who it is for:** A product engineer building an AI assistant that takes actions on a user's behalf and needs a clear place for the user to approve, edit or discard them. **The problem:** Agents that send emails or ask for decisions need a review step, and a plain list of pending items is hard to scan and act on quickly. **The outcome:** A review screen that lists open decisions with two quick answers, shows an agent-written email with send or discard, and shows agent replies in a thread. ### Steps 1. Run `npx shadcn@latest add https://www.affectui.com/r/decision-inbox.json` for open decisions with two quick answers. 2. Run `npx shadcn@latest add https://www.affectui.com/r/email-draft.json` for agent-written email review. 3. Run `npx shadcn@latest add https://www.affectui.com/r/comment-thread.json` for agent replies that report what they did. 4. Pass your agent's pending items into each component and map the answer, send and discard events to your backend. 5. Trigger one pending decision and one draft from a test agent run and confirm each answer updates your data. ### Prompt to paste into your agent ```text Install the decision-inbox, email-draft and comment-thread items from https://www.affectui.com/r/.json into the React 19 project, then build an approvals page in that passes pending agent items into them. Expected output: one page that renders all three components with your data and event handlers. Verify that answering a decision and discarding a draft each call your handler once. ``` ### Caveat The components display and collect decisions, but sending email or saving answers is your own backend code, which the README does not cover. Disclaimer: Third-party repos we don't own or vouch for. AI-generated use cases can be wrong: review everything and run at your own risk. Full text: https://dedupedai.com/disclaimer/ URL: https://dedupedai.com/use-cases/flohoeller-affectui/build-agent-approval-inbox/ ## How to add an onboarding checklist with a live progress bar with Affectui Repo: [flohoeller/affectui](https://github.com/flohoeller/affectui) | Difficulty: Intermediate | Time: 30 minutes | Basis: From the README Show new users a step list whose progress bar and ticks update as they finish each task. **Who it is for:** A SaaS developer shipping user onboarding who wants a checklist that visibly rewards each completed step. **The problem:** A static setup list does not show progress, so new users drop off before they finish their first steps. **The outcome:** A Progress Tracker component on the dashboard with an animated progress bar and ticks that draw themselves as steps complete. ### Steps 1. Run `npx shadcn@latest add https://www.affectui.com/r/progress-tracker.json` in the project root. 2. Import the component from components/ui into the onboarding or dashboard page. 3. Pass your list of onboarding steps and their completed state from your user data. 4. Test with a new account and mark one step complete to confirm the bar and tick update. 5. Check the page with the operating system's reduced motion setting on to confirm the motion is toned down. ### Prompt to paste into your agent ```text Add the progress-tracker item from https://www.affectui.com/r/progress-tracker.json to the React 19 project and render it on with the onboarding steps from . Expected output: a rendered checklist whose progress bar matches the number of completed steps. Verify that the bar value changes when one step's completed state changes. ``` ### Caveat The README says the checklist auto plays, so test whether that behavior fits your product before shipping it to new users. Disclaimer: Third-party repos we don't own or vouch for. AI-generated use cases can be wrong: review everything and run at your own risk. Full text: https://dedupedai.com/disclaimer/ URL: https://dedupedai.com/use-cases/flohoeller-affectui/add-onboarding-progress-checklist/