{
 "schema_version": 1,
 "generated": "2026-10-20",
 "id": "flohoeller-affectui--let-ai-coding-agent-install-affectui-items",
 "repo": "flohoeller/affectui",
 "repo_url": "https://github.com/flohoeller/affectui",
 "repo_slug": "flohoeller-affectui",
 "title": "Let an AI coding agent find and add UI items for you",
 "page_title": "How to let an AI coding agent find and add UI items for you with Affectui",
 "summary": "Connect the affectUI MCP server so Claude Code, Cursor or Codex can search items and install them.",
 "who": "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.",
 "problem": "Finding the right registry URL and adding each item manually slows down UI work inside an agent session.",
 "outcome": "An agent that can search the affectUI catalog, read item docs and add a chosen component to the project.",
 "steps": [
  "Run `claude mcp add --transport http affectui https://www.affectui.com/api/mcp` once for Claude Code.",
  "For Cursor or other MCP clients, add `{ \"mcpServers\": { \"affectui\": { \"url\": \"https://www.affectui.com/api/mcp\" } } }` to the client's MCP config.",
  "Ask the agent to search affectUI for the component you need, for example a reaction bar or onboarding checklist.",
  "Review the file the agent adds to components/ui before importing it into your screens.",
  "Run the project build to confirm the added component compiles."
 ],
 "agent_prompt": "Use the affectUI MCP server at https://www.affectui.com/api/mcp to search for <component-need> and add the best match to the <project-path> 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.",
 "agents": [
  "claude-code",
  "cursor",
  "codex"
 ],
 "difficulty": "Intermediate",
 "time": "15 minutes",
 "basis": "readme",
 "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.",
 "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": false,
 "score": 0.9,
 "evidence": [],
 "url": "https://dedupedai.com/use-cases/flohoeller-affectui/let-ai-coding-agent-install-affectui-items/",
 "md": "https://dedupedai.com/use-cases/flohoeller-affectui/let-ai-coding-agent-install-affectui-items/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--let-ai-coding-agent-install-affectui-items.json",
 "api_version": "v1"
}