affectUI MCP
MCP server of a React component library for agent interfaces: the agent finds a component and adds it to your project
- 506 ★ on the repository
- Last commit
- MIT
Extended access
Why this level
- The agent adds `.tsx` files to your project, and registry code is worth reading before a build
- Agent queries go to the remote affectui.com server, which a third-party author runs
Install
- Works in
In your terminal, with SkillFoxx CLI
npx skillfoxx add mcp/affectuiDetects the agents on your machine, shows the access level and pins the version.
Other ways to install
Access and checks
How we reviewExtended accessThe tool runs code or makes network calls and only reads external data.
- The agent adds `.tsx` files to your project, and registry code is worth reading before a build
- Agent queries go to the remote affectui.com server, which a third-party author runs
This is third-party code. Review the repository files before installing.
What it does
affectUI is a React component library for interfaces around agents: tool call cards, approvals, decision queues, working indicators. It also ships ordinary elements such as buttons, menus and inputs, plus illustrations and motion. Every element is one `.tsx` file with its styles inside, with no Tailwind and no separate animation library. The MCP server lives at `https://www.affectui.com/api/mcp`. Claude Code, Cursor, VS Code or Codex connect to it once, then search any element of the library, read its docs and add it to the project. Manual installation through the shadcn CLI, using the registry address of each component, gives the same result. The repository holds the free part: forty elements under the MIT license. The other 91 elements and the screens belong to the paid affectUI Pro, whose source is not published here.
Who it is for. Frontend developers on React 19 who build a chat, an agent panel or a tool-call console and ask an agent to pick ready-made components.
Good fit when
- A chat interface needs a compact tool call card with a timer, a status and expandable arguments
- An agent should pick a one-time-code input or a two-to-six option switch from the library and install it in the project
- The team wants components with no CSS setup: the file is copied and works at once, and dark mode switches with a `dark` class
- A landing page needs illustrations and blocks such as a logo marquee, and you want to add them one at a time
Not a fit when
- You need the Agent Tree, Trace Waterfall or Context Map components: they are not in the repository and belong to the paid Pro
- The project is on Vue, Svelte or another framework: the library targets React 19
- The server has to work offline: the MCP is hosted on affectui.com
- You want the base elements of shadcn/ui: affectUI complements it with components for agents
Example request
Find the tool call card with expandable arguments in affectUI and add it to components/ui in my projectMCP
- Transport
- http
- Authentication
- not required
Limitations
The library requires React 19. The `@/*` import alias is needed when you install elements through the shadcn CLI; Next.js and shadcn set it up by default.
The MCP server runs on the author's side, at a remote address on affectui.com. The server's own source code is not in the repository, so you can check how it works only through requests.
Fixes reach the repository on each release from the author's internal source rather than through pull requests. Bugs and wishes go through issues.
Part of the components shown on the site, including the agent ones Agent Tree, Agent Inbox and Trace Waterfall, belong to the paid Pro, a one-time purchase.
How to disable. Disconnect the server with `claude mcp remove affectui` or delete the affectui entry from the client's MCP config. Component files already added stay in the project; remove them like ordinary sources.
FAQ
How do I connect affectUI to Claude Code?
Run `claude mcp add --transport http affectui https://www.affectui.com/api/mcp`. Then ask the agent to find the element you need: it reads the docs and adds the file to the project.
What do I get without the MCP server?
A component installs through the shadcn CLI: `npx shadcn@latest add https://www.affectui.com/r/reaction-bar.json`. The file appears in `components/ui`. You can also copy it by hand from the `components/`, `illustrations/` or `motion/` folder of the repository.
What is free and what is not?
The repository holds free elements under the MIT license: components, two blocks, illustrations and motion. The components Agent Tree, Trace Waterfall, Context Map and Agent Handoff belong to the paid Pro, a one-time purchase.
Does it need Tailwind?
No. Styles live inside each component's file and no CSS setup is required. Dark mode switches with a `dark` class or a `data-theme="dark"` attribute on an ancestor.
Is there a file for AI assistants without MCP?
Yes. The site publishes `llms.txt` and `llms-full.txt`, which you can point an assistant at. Pages on the site also carry a Copy prompt bar for Claude, ChatGPT and Codex, Cursor and v0.
Discussion
No questions or reviews yet.
Related
MCP serversShadcn UI MCP Server
Shadcn UI v4 MCP Server
An MCP server that gives the agent shadcn/ui component source, demos and blocks for React, Svelte, Vue and React Native
Official shadcn/ui skill and MCP server: the agent searches registries, adds components via the CLI and follows the library's rules
21st.dev MCP server and plugin: search ready React/Tailwind components and logos and generate UI from your agent
Chakra UI MCP server: a reference for components, props and theme tokens, plus code review for moving from version 2 to 3
The CodeRocket MCP server gives an agent a saved library's design rules, components and blocks over a read-only connection.
A skill that picks and installs beUI animated React components through the public MCP or the shadcn registry instead of hand-built widgets
README in short
The README opens with a showcase of agent components and a table of contents. Requirements, installation through the shadcn CLI or by copying, a ReactionBar usage example and a section on connecting AI tools follow. The catalog is split into tables of components, blocks, illustrations and motion, with an install command on each row.