AffectUI

What affectUI MCP server does

The affectUI MCP server gives agents access to a catalog of React interface material for AI products and modern SaaS applications. The listed operations are searching the catalog, reading item details or source, and installing selected items. The underlying collection includes components, screens, blocks, illustrations, and motion effects.

The repository describes each item as a standalone .tsx file with its styles included. Items are intended to be used as source code in the consuming project rather than as a separately configured UI package. The collection includes free items, while some entries are identified as part of affectUI Pro and are not present in the repository.

How it works

An agent can locate an item, inspect what it contains, and request installation when it fits the application. The documented web registry exposes item-specific URLs such as https://www.affectui.com/r/reaction-bar.json, and the repository also contains source under components/, illustrations/, and motion/.

Installed files are designed for React 19 and can be used with Next.js, Vite, Remix, or a plain React setup. The source does not require Tailwind, a separate CSS setup, or an animation library. Components support dark mode through an ancestor dark class or data-theme="dark", and the library documents responsive behavior, keyboard support, live regions where relevant, and reduced-motion handling.

Setup and configuration

The documented installation path uses the shadcn CLI. A project can add an item by passing its registry URL to npx shadcn@latest add, or by registering the @affectui namespace in components.json and using a shorter item name. The shadcn route expects the project to have the @/* import alias; Next.js and shadcn configure that alias by default.

The component library requires React 19, with or without TypeScript. The README does not specify MCP process commands, transport settings, credentials, or server configuration, so those details should be confirmed from implementation files or separate documentation before deployment.

Tools and capabilities

The affectUI MCP server is suited to workflows that need to:

• Search available interface items.
• Read component or item information before adoption.
• Install selected items into a React project.
• Choose among components, illustrations, blocks, screens, and motion assets.
• Use source-owned files that can be edited after installation.

Limitations and notes

The supplied material describes the affectUI catalog and its React installation workflow more fully than the MCP implementation. It does not list formal tool schemas, input fields, output formats, supported MCP transports, authentication requirements, or named client integrations. It also does not establish that every item is free: the showcase marks some components as Pro, and Pro items are not included in the repository. Verify item availability and the server’s runtime requirements before relying on it in automation.