# affectUI MCP server

> Search, read, and install agent-ready React components, screens, and blocks for AI products.

- Repository: https://github.com/flohoeller/affectui
- Page: https://hostedmcp.org/servers/flohoeller/affectui
- Transport: remote
- Stars: 793
- License: MIT
- Latest version: 1.0.0

## Install

### Claude Code

```sh
claude mcp add --transport http affectui https://www.affectui.com/api/mcp
```

### Cursor (`~/.cursor/mcp.json`)

```json
{
  "mcpServers": {
    "affectui": {
      "url": "https://www.affectui.com/api/mcp"
    }
  }
}
```

### VS Code (`.vscode/mcp.json`)

```json
{
  "servers": {
    "affectui": {
      "type": "http",
      "url": "https://www.affectui.com/api/mcp"
    }
  }
}
```

### VS Code CLI

```sh
code --add-mcp '{"name":"affectui","type":"http","url":"https://www.affectui.com/api/mcp"}'
```

### Codex

```sh
codex mcp add affectui --url https://www.affectui.com/api/mcp
```

### Codex config.toml (`~/.codex/config.toml`)

```toml
[mcp_servers.affectui]
url = "https://www.affectui.com/api/mcp"
```

### Gemini CLI

```sh
gemini mcp add -s user --transport http affectui https://www.affectui.com/api/mcp
```

### Gemini settings.json (`~/.gemini/settings.json`)

```json
{
  "mcpServers": {
    "affectui": {
      "url": "https://www.affectui.com/api/mcp",
      "type": "http"
    }
  }
}
```

## FAQ

### How do I install affectUI components?

You can install components using the shadcn CLI by running the specific registry URL, or by manually copying and pasting the .tsx files from the repository.

### What kind of components are available?

The library includes components specifically for AI agent workflows like tool calls, traces, handoffs, and approvals, as well as general UI elements like menus and charts.