{
 "schema_version": 1,
 "generated": "2026-10-20",
 "id": "flohoeller-affectui--add-ai-message-actions-to-chat",
 "repo": "flohoeller/affectui",
 "repo_url": "https://github.com/flohoeller/affectui",
 "repo_slug": "flohoeller-affectui",
 "title": "Add a polished message action bar to an AI chat",
 "page_title": "How to add a polished message action bar to an AI chat with Affectui",
 "summary": "Drop a finished copy, regenerate, feedback and read-aloud bar under each AI reply in one file.",
 "who": "A frontend developer building an AI chat interface who needs the controls under each assistant message to feel finished.",
 "problem": "Building copy, regenerate, thumbs and read-aloud controls with clear state changes takes time and is easy to get visually or accessibly wrong.",
 "outcome": "A working Message Actions component in components/ui that shows copy confirmation, regenerate feedback and feedback buttons under AI replies.",
 "steps": [
  "Run `npx shadcn@latest add https://www.affectui.com/r/message-actions.json` in the project root.",
  "Open the generated file in components/ui and read the props on the item page at https://www.affectui.com/components/message-actions.",
  "Import the component into the chat message renderer with `import { MessageActions } from \"@/components/ui/message-actions\";`. (inferred, check the README)",
  "Connect your own copy, regenerate and feedback handlers to the component props.",
  "Send a test AI reply in the app and confirm the bar appears and the copy control shows a check after a click."
 ],
 "agent_prompt": "In the affectui repo context, install the message-actions item into the <project-path> 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 <chat-component-file>. 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.",
 "agents": [
  "claude-code",
  "cursor",
  "codex"
 ],
 "difficulty": "Intermediate",
 "time": "30 minutes",
 "basis": "readme",
 "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.",
 "category": "Software and DevOps",
 "tags": [
  "Software and DevOps"
 ],
 "lang": "typescript",
 "requirements": [
  "A React 19 project, with or without TypeScript",
  "A setup that supports the shadcn CLI, such as Next.js or shadcn-configured projects with the @/* import alias",
  "Access to the affectui.com registry URLs"
 ],
 "risk": "none",
 "seen_in_the_wild": false,
 "mentioned_publicly": false,
 "risks": [],
 "best": true,
 "score": 1.0,
 "evidence": [],
 "url": "https://dedupedai.com/use-cases/flohoeller-affectui/add-ai-message-actions-to-chat/",
 "md": "https://dedupedai.com/use-cases/flohoeller-affectui/add-ai-message-actions-to-chat/index.md",
 "disclaimer": "Deduped lists open-source repositories that belong to other people. We do not own, maintain, audit, or vouch for any of them, and a repo appearing here is not an endorsement or a safety check. The use cases, steps, and prompts are written by AI and may be incomplete, outdated, or just wrong. Where a use case is marked \"Seen in the wild\", we link to public posts where someone described something similar, but we have not verified those posts and the use case itself is still our AI's own write-up. Use all of this at your own risk. Only run code, commands, or agents on systems and accounts you are authorized to use, and read the code and every command before you run it, especially anything that touches credentials, files, or the network. Nothing here is professional, security, legal, or financial advice. All trademarks and project names belong to their respective owners, and their use here does not imply affiliation. Content is provided as is, without warranties of any kind. Found a mistake, a safety problem, or something you want removed? Email hello@dedupedai.com and we will look at it promptly.",
 "api": "https://dedupedai.com/api/v1/usecases/flohoeller-affectui--add-ai-message-actions-to-chat.json",
 "api_version": "v1"
}