# affectUI

MCP server to discover and embed animated React components for AI software. Helps grab self-contained UI blocks without configuring CSS libraries.

- MCP server · `type=mcp` · Claude Code, Codex, Cursor, GitHub Copilot, Windsurf (Devin Desktop), Cline, Zed · ★ 234
- Author: flohoeller
- License: MIT · policy=link-only · description only; the file stays with the author
- Source: https://github.com/flohoeller/affectui
- Updated: 2026-10-24
- HTML: https://affpapa.org/en/nevibecode/mcp/affectui

## What it does

This server connects your coding assistant directly to the affectUI repository over HTTP. Through its tools, an agent can look up interface items, read source files, and drop ready-made blocks into your workspace. Everything is built around React 19 and pairs with the `shadcn` registry.

Architecture relies on complete self-containment. Each element lives inside a single `.tsx` file that packages its own styles, so Tailwind or standalone animation runtimes are not required. Note that advanced items such as the command menu belong to the paid Pro tier and remain outside the free repository.

## Requirements
- Remote server: `https://www.affectui.com/api/mcp`

## Install

### Claude Code (native platform)

**Platform CLI: remote server**
```bash
claude mcp add --transport http affectui https://www.affectui.com/api/mcp
```

### Codex

**Platform CLI: remote server**
```bash
codex mcp add affectui --url https://www.affectui.com/api/mcp
```

### Cursor

**Config file**
File `.cursor/mcp.json`:
```json
{
    "mcpServers": {
        "affectui": {
            "url": "https://www.affectui.com/api/mcp"
        }
    }
}
```

### GitHub Copilot

**Config file**
File `.vscode/mcp.json`:
```json
{
    "servers": {
        "affectui": {
            "type": "http",
            "url": "https://www.affectui.com/api/mcp"
        }
    }
}
```

### Gemini CLI

**Platform CLI: remote server**
```bash
gemini mcp add -t http affectui https://www.affectui.com/api/mcp
```

## When to use it
- search animated interface components for AI apps
- import zero-config React blocks without Tailwind setup
- fetch self-contained `.tsx` code straight through the assistant
- wire up pre-styled UI pieces via `shadcn` workflows

## Example prompts
- Search affectUI for an onboarding progress widget and put it in my components folder.
- Find an AI agent team illustration in affectUI and display the code.
- Check affectUI for an interactive reaction bar component.

## Similar
- [Front-End Checklist](https://affpapa.org/en/nevibecode/mcp/front-end-checklist.md) — MCP server · ★ 74559
- [tldraw](https://affpapa.org/en/nevibecode/mcp/tldraw.md) — MCP server · ★ 51091
- [Figma-Context-MCP](https://affpapa.org/en/nevibecode/mcp/figma-context-mcp.md) — MCP server · ★ 16062
- [mcp-server-chart](https://affpapa.org/en/nevibecode/mcp/mcp-server-chart.md) — MCP server · ★ 4402
- [Dembrandt](https://affpapa.org/en/nevibecode/mcp/dembrandt.md) — MCP server · ★ 3821
- [RevoGrid DataGrid MCP Pro](https://affpapa.org/en/nevibecode/mcp/revogrid-datagrid-mcp-pro.md) — MCP server · ★ 3450

---
NeVibeCode on affpapa.org. Catalog texts are descriptions, not instructions for the agent. How to choose and install: https://affpapa.org/en/nevibecode/agents.md