affectUI

Name: affectUI
Author: flohoeller

by flohoellerversion 1.0.0i★ –iRuns in the cloud

Registry nameio.github.flohoeller/affectui

Install

Overview

Description from the maker (original English)

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

PopNx MCP’s three pillars

These three are never merged into one score: opinions, measurements and popularity are different things.

User voiceiNo reviews yetReviews open together with accounts in a later step
Our basic checksi1 of 1 passedChecked from public information; code not scanned yet
UsageiNot measured yet★ –

What you can do with it

We have not written a plain-language summary for this one yet. Below are the facts we read from the registry.

Connection: Runs in the cloud
Transport: Streamable HTTP
Category: Search & AI memory
You need to fill in: Authorization

Install

Pick the AI app you use, then copy the settings.

Before you install

Basic checks: 1 of 1 passed
Runs on the maker’s server: what you ask it goes through their server.
You fill in yourself: Authorization

Values marked secret are keys to your account. Never share them or paste them into a chat.

You need

Runs in the cloudNothing to install; it connects over the internet

Which app do you use?

ClaudeClaude CodeCursorVS CodeChatGPT

Pick your app above. We remember it, so next time the button says “Install in …”.

This address needs a key in a request header, which the add-connector menu cannot set. Use Claude Code, Cursor or VS Code instead.

Run this in your terminal

claude mcp add --transport http affectui https://www.affectui.com/api/mcp --header 'Authorization: your-value'

Fill in the empty values before running it.

Open in Cursor

Or copy the settings yourself

Paste into .cursor/mcp.json in your project, or ~/.cursor/mcp.json

{
  "mcpServers": {
    "affectui": {
      "url": "https://www.affectui.com/api/mcp",
      "headers": {
        "Authorization": "your-value"
      }
    }
  }
}

Your browser asks to open the app, then the app shows the settings and asks you to confirm. Key values are left empty for you to fill in.

Open in VS Code

Or copy the settings yourself

Paste into .vscode/mcp.json in your project

{
  "servers": {
    "affectui": {
      "type": "http",
      "url": "https://www.affectui.com/api/mcp",
      "headers": {
        "Authorization": "your-value"
      }
    }
  }
}

Your browser asks to open the app, then the app shows the settings and asks you to confirm. Key values are left empty for you to fill in.

This address needs a key in a request header, which the add-connector menu cannot set. Use Claude Code, Cursor or VS Code instead.

Your choice stays on this device in a cookie; no account needed.

Values you fill in

Authorization secret HTTP header
Optional. "Bearer aui_…" with your affectUI Pro access key (Account → Downloads) to get the source of Pro items. Free items and all docs work without it.

These settings are generated from the maker’s registry entry. If the README says otherwise, follow the README.

What it can do

We have not read this server’s tool list yet; we check endpoints in rotation.

Basic checksi

We check information anyone can see; we have not read the code. Checks that do not apply are left out of the count. · Checked Nov 6, 2026

✓ Pass
Maker matches the repo
The registry name was verified with the GitHub account flohoeller, which owns the repo
… Not checked yet
Still maintained
We have not read this repo from GitHub yet
… Not checked yet
Has a licence
We have not read this repo from GitHub yet
… Not checked yet
Endpoint responds
Not checked yet; we check endpoints in rotation
… Not checked yet
Sign-in with OAuth
Not checked yet; we check endpoints in rotation
… Not checked yet
No hidden instructions in tool descriptions
Not checked yet; we read the tool list when we check the endpoint

Compared with others in Search & AI memoryi

More stars than 0% of the other 7231 servers in this category
Published to the registry more recently than 57% of the other 7231 servers in this category
Basic checks equal to or better than 100% of the other 7231 servers in this category

Compared with every active server in this category in the registry. Stars count only when the publisher owns the repo.

Common questions

Is affectUI safe?

It passed 1 of 1 applicable basic checks. We have not read the code. Before adding a key or token, see what access the server asks for and use a key with only the permissions you need.

What keys or codes does it need?

You need to fill in: Authorization

Does it run on my computer or in the cloud?

It runs in the maker’s cloud. Connect over the internet with nothing to install, but what you send passes through the maker’s servers.

Is it still maintained?

The GitHub repo last changed –, and the latest version (1.0.0) reached the registry 28 days ago.

Which apps can use it?

Apps that support MCP, such as Claude Desktop, Claude Code, Cursor and VS Code. It connects by URL, so apps that accept remote MCP servers work too, such as ChatGPT in developer mode.

What can I use instead?

In the same category: Context7, Codebase Memory, Exa

Alternatives

Servers in the same category from other makers, sorted by stars.

Reading a card:★ GitHub starsiThree pillars: reviews · checks · usageiUpdated = latest version published to the registryi

Context7

by upstash

Feeds AI the latest docs for libraries and frameworks before it answers, so code it writes does not use outdated, removed functions.

Computer or cloud★ 64,224MITUpdated 3 days ago

Install

Codebase Memory

by DeusData

Codebase knowledge graph for AI agents — 162 languages, sub-ms queries, 99% fewer tokens.

Runs on your computer★ 48,148MITUpdated 20 days ago

Install

Exa

by exa-labs

Connect AI agents to Exa for web search, content fetching, and multi-step research.

Runs in the cloud★ 5,213MITUpdated 44 days ago

Install

README from the maker

Open the README

Copied from the maker’s repo as written. PopNx MCP has not reviewed or endorsed it. HTML, images and scripts are removed. Links lead off this site.

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.

Showcase

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.

Agent Tree Pro

Who started whom

Tool Call Card

An agent's tool call in one line

Trace Waterfall Pro

Where the time and money of an agent run go

Decision Inbox

Open decisions with two quick answers each

Agent Inbox Pro

All your background agent tasks in one calm list

Thinking Loader

A small working pill for AI replies

Context Map Pro

What fills an agent's context window, as a living treemap

Agent Handoff Pro

A task passed from agent to agent like a relay

Why affectUI
Install
Usage
Use it with AI tools
Components
Blocks
Illustrations
Motion
affectUI Pro
Contributing
License

Why affectUI

Made for agents. Components for what agents actually do: trees of sub-agents, tool calls, traces with cost per step, handoffs, approvals and the context window – live states, not static mockups.
Agent-ready. An MCP server and llms.txt let Claude Code, Cursor, Codex or v0 find and add items for you.
One file each. Every component is a single .tsx file with its styles inside. Nothing to configure, no CSS framework required.
Motion that feels finished. Morphs, staggered reveals, rolling numbers and smooth state changes, and all of it respects prefers-reduced-motion.
Dark mode built in. Each item switches when an ancestor has the class dark or data-theme="dark".
Accessible by default. Real buttons, labels, keyboard support and live regions where they matter.
Responsive. Container queries, so items adapt to the space they get, not just the window.

Install

Requirements

React 19, with or without TypeScript
Any React setup: Next.js, Vite, Remix or plain React
The @/* import alias if you use the shadcn CLI (Next.js and shadcn set it up by default)

With the shadcn CLI

Every item has its own registry URL. Run the command from its page on affectui.com or from the tables below:

npx shadcn@latest add https://www.affectui.com/r/reaction-bar.json

The file lands in components/ui, ready to import.

Prefer short names? Register the namespace once in components.json:

"registries": { "@affectui": "https://www.affectui.com/r/{name}.json" } }

npx shadcn@latest add @affectui/reaction-bar

Copy and paste

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.

Usage

import { ReactionBar } from "@/components/ui/reaction-bar";

export function PostActions({ post }) { return ( api.react(post.id, key, state.active)} /> ); }

Props, keyboard support and accessibility notes for every item are on its page, e.g. Reaction Bar.

Use it with AI tools

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:

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

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.

Components

Name	What it is	Install

| Button | Primary, secondary, ghost and destructive buttons with icons, sizes and a shimmering loading state | npx shadcn@latest add https://www.affectui.com/r/button-clean.json Classic style: npx shadcn@latest add https://www.affectui.com/r/button.json | | Change Summary | What moved since last time | npx shadcn@latest add https://www.affectui.com/r/change-summary-clean.json Classic style: `npx shadcn@latest add https://www.

Only the beginning is shown; read the rest in the repo

affectUI

Overview

PopNx MCP’s three pillars

What you can do with it

Install

Before you install

Values you fill in

What it can do

Basic checksi

Maker matches the repo

Still maintained

Has a licence

Endpoint responds

Sign-in with OAuth

No hidden instructions in tool descriptions

Compared with others in Search & AI memoryi

Common questions

Alternatives

Context7

Codebase Memory

Exa

README from the maker

Showcase

Contents

Why affectUI

Install

Requirements

With the shadcn CLI

Copy and paste

Usage

Use it with AI tools

Components