io.github.flohoellerPublished by GitHub account flohoellerv1.0.0Updated Oct 24, 2026
Search, read and install agent-ready React components, screens and blocks for AI products.
Remote MCP server for affectUI that lets an assistant search, read docs for, and fetch source of React UI components, blocks, illustrations and motion effects.
Web executable via Streamable HTTP. Remote servers run from the web runtime once configured in a workspace.
Paste this prompt into Claude Code, Codex, Cursor or another agent — or into SourceWeft chat. The agent reads this server's install guide, shows you its publisher, endpoint and sign-in, and adds it to your client once you agree. Keys never go into a command.
Read https://sourceweft.com/mcp/io.github.flohoeller%2Faffectui/install.md and connect the MCP server it describes to my client. Before changing any config, show me its publisher, endpoint and sign-in method and wait for my OK. Never put an API key in a command or in a file I would commit; ask me where it should come from.Add this to your client's mcpServers config.
{
"mcpServers": {
"affectui": {
"type": "http",
"url": "https://www.affectui.com/api/mcp"
}
}
}[affectUI: UI for AI agents. React components for what agents do, and for the rest of your app.]
[License: MIT] [shadcn registry] [React 19] [40 free items] [GitHub stars]
Website · Browse components · Docs · Install · Pro
UI for AI agents. affectUI is a library of React components for what agents do – runs, tool calls, traces, handoffs, approvals and context – and for the rest of your app: inputs, menus, charts, screens, illustrations and motion. Every item is one .tsx file with its styles inside: no Tailwind, no CSS setup, no animation library. Install it with the shadcn CLI, or let Claude Code, Cursor or Codex add it through the MCP server, and it is source you own.
[Used by developers at Teamworks, RedNote, Cloudforce, Moonshot AI, Terminal49, Meitu and Beacons]
Agent components, recorded live from affectui.com. Items marked Pro are part of affectUI Pro and are not in this repository; everything else installs from here for free.
llms.txt let Claude Code, Cursor, Codex or v0 find and add items for you..tsx file with its styles inside. Nothing to configure, no CSS framework required.prefers-reduced-motion.dark or data-theme="dark".affectUI is the presentation layer of an AI product. Your application supplies runtime data, connects tools and enforces permissions; the components render that state and expose callbacks for your actions.
Browse all guides, follow the AI setup docs, or compare UI libraries to choose the pieces that fit your application.
@/* import alias if you use the shadcn CLI (Next.js and shadcn set it up by default)Every item has its own registry URL. Run the command from its page on affectui.com or from the tables below:
The file lands in components/ui, ready to import.
Prefer short names? Register the namespace once in components.json:
Open the item's folder in this repository (components/, illustrations/ or motion/), copy the file into your project and import it. That's all it takes.
Props, keyboard support and accessibility notes for every item are on its page, e.g. Reaction Bar.
affectUI is agent-ready. Connect the MCP server once and Claude Code, Cursor, VS Code or Codex can search every item, read its docs and add it for you:
Other clients: add { "mcpServers": { "affectui": { "url": "https://www.affectui.com/api/mcp" } } } to their MCP config. Without any setup, point your assistant at llms.txt or llms-full.txt. Every page on affectui.com also has a Copy prompt bar for Claude, ChatGPT / Codex, Cursor and v0. Setup details: Using with AI.
108 more components, screens, blocks and illustrations, including the agent components above (Agent Tree, Agent Inbox, Trace Waterfall, Context Map, Agent Handoff and more), full app screens and blocks, are part of affectUI Pro: a one-time purchase with lifetime updates. Their source is not in this repository.
Found a bug or missing a component? Open an issue. The files here are synced from the affectUI source on every release, so fixes land through issues rather than pull requests. See CONTRIBUTING.md.
Everything in this repository is released under the MIT license. Use it in personal and commercial projects. Logos shown in previews belong to their owners and are only sample content.
If affectUI saves you time, a ⭐ helps others find it.
Made by Flo
Source: README.md at commit dfa4d2e
Search affectUI
Find affectUI components, screens, blocks, illustrations and motion effects for a UI need, e.g. 'chat input with model picker' or 'onboarding checklist'.
queryrequiredsectionfree_onlyList affectUI items
Every affectUI item with slug, section, category, free or Pro, and a one-line description.
sectionaffectUI item docs
Docs for one item: install command, usage example, props, keyboard, accessibility and notes.
slugrequiredaffectUI item source
The full .tsx source of an item, to write to components/ui/<slug>.tsx when the shadcn CLI isn't available. Pro items need the user's access key in the MCP connection.
slugrequired100% of the applicable checks met
How complete this listing is, computed from the registry entry, the endpoint and public sources. Not a rating of the server and not a statement that it is safe or working today: reachability is a dated check, and no installs or reviews go into the score.
npx shadcn@latest add https://www.affectui.com/r/reaction-bar.json{ "registries": { "@affectui": "https://www.affectui.com/r/{name}.json" }}npx shadcn@latest add @affectui/reaction-barimport { ReactionBar } from "@/components/ui/reaction-bar";
export function PostActions({ post }) { return ( <ReactionBar reactions={{ like: { count: post.likes, active: post.liked }, comment: { count: post.comments } }} onReact={(key, state) => api.react(post.id, key, state.active)} /> );}claude mcp add --transport http affectui https://www.affectui.com/api/mcp