Prototyp · Vorschau: alle Server aus der offiziellen Registry, alle 30 Minuten synchronisiert. Mit Google anmelden, um Bewertungen zu schreiben.
PopNx MCPMCP-Server für alle, die KI nutzen · in einfachen Worten erklärt
☰ MenüDeutsch Einstellungen
Einsteigermodus Aus
FarbenSystemHellDunkel
SpracheไทยEnglish中文日本語한국어EspañolDeutsch

affectUI

von flohoellerVersion 1.0.0i★ 704iLäuft in der Cloud
Name in der Registryio.github.flohoeller/affectui

So installierst du es

Überblick

Beschreibung vom Entwickler (englisches Original)

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

Was du damit machen kannst

Für diesen Server haben wir noch keine Zusammenfassung in einfacher Sprache geschrieben. Unten stehen die Fakten, die wir aus der Registry gelesen haben.

  • Verbindung: Läuft in der Cloud
  • Transport: Streamable HTTP
  • Kategorie: Suche & KI-Gedächtnis
  • Das musst du eintragen: Authorization

Installation

Wähle die KI-App, die du nutzt, und kopiere die Einstellungen.

4/4 Prüfungen bestanden · Was du fragst, läuft über den Server des Anbieters (www.affectui.com)

Zuerst: Welche KI nutzt du?

Wähle deine App, dann erscheinen die Schritte unten.

Klappt mit Claude · etwa 5 Min.

Du brauchst einen Schlüssel von affectUI (auf der Seite des Anbieters registrieren, kann kosten) · Einmal auf claude.ai oder in der Desktop-App einrichten, dann im Chat nutzen · kostenlose Konten können 1 hinzufügen

  1. Bei affectUI registrieren und Schlüssel erstellen

    Öffne die Seite des Anbieters, registriere dich und erstelle einen API-Schlüssel für den nächsten Schritt. Kann Geld kosten.

    Seite von affectUI öffnen ↗

  2. Öffne die Connectors-Seite von Claude

    CustomizeConnectors

    CustomizeConnectors1+ Add2https://…3Add4

  3. Klicke „+ Add“ → „Add custom connector“ und fülle diese 2 Felder aus

    Kopiere jeden Wert in das gleichnamige Feld in Claude und klicke Continue

    Name · NameaffectUI
    Remote MCP server URL · Adressehttps://www.affectui.com/api/mcp

    Unter Request headers diesen Namen und Wert hinzufügen

    Header-NameAuthorization
    WertBearer <Schlüssel hier einfügen>

    Füge den Schlüssel nur in das Feld der App ein, nie in einen Chat und schick ihn niemandem

    Authentication so lassen, wie Claude es erkannt hat, dann Add klicken

  4. Im Chat einschalten

    +ConnectorsaffectUI

  5. Ausprobieren

    Nutze affectUI und sag mir, was du für mich tun kannst; zeig mir dann eine Sache

    ✓ Wenn Claude sagt, dass es affectUI nutzt, oder ein Werkzeug von affectUI in der Antwort zeigt, bist du verbunden

Menünamen am 11. Nov. 2026 mit der Hilfe von Anthropic abgeglichen · dein Bildschirm kann je nach App-Version leicht abweichen

ChatGPT kann affectUI noch nicht verbinden

affectUI braucht zum Verbinden deinen eigenen Schlüssel, aber die OpenAI-Hilfe beschreibt nur die Anmeldung per OAuth; eine Schlüssel-Option konnten wir nicht bestätigen

Das kannst du stattdessen tun

A · Eine App nutzen, die affectUI verbinden kann

  • Du brauchst einen Schlüssel von affectUI (auf der Seite des Anbieters registrieren, kann kosten) · Einmal auf claude.ai oder in der Desktop-App einrichten, dann im Chat nutzen · kostenlose Konten können 1 hinzufügen
  • Du brauchst einen Schlüssel von affectUI (auf der Seite des Anbieters registrieren, kann kosten)
  • Du brauchst einen Schlüssel von affectUI (auf der Seite des Anbieters registrieren, kann kosten)
  • Du brauchst einen Schlüssel von affectUI (auf der Seite des Anbieters registrieren, kann kosten)

B · Andere in Suche & KI-Gedächtnis, die mit ChatGPT funktionieren

Aus den meistgenutzten derselben Kategorie, nur solche, die per Adresse ohne Schlüssel verbinden

Klappt mit Claude Code · etwa 5 Min.

Du brauchst einen Schlüssel von affectUI (auf der Seite des Anbieters registrieren, kann kosten)

  1. Bei affectUI registrieren und Schlüssel erstellen

    Öffne die Seite des Anbieters, registriere dich und erstelle einen API-Schlüssel für den nächsten Schritt. Kann Geld kosten.

    Seite von affectUI öffnen ↗

  2. Terminal öffnen

    Mac: Command+Leertaste drücken und Terminal tippen · Windows: PowerShell öffnen

  3. Diesen Befehl einfügen und Enter drücken

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

    Ersetze „your-value“ vor dem Enter durch deinen Schlüssel

    Füge den Schlüssel nur in das Feld der App ein, nie in einen Chat und schick ihn niemandem

  4. /mcp in Claude Code eingeben

    affectUI sollte in der Liste als verbunden erscheinen

  5. Ausprobieren

    Nutze affectUI und sag mir, was du für mich tun kannst; zeig mir dann eine Sache

    ✓ Wenn Claude Code sagt, dass es affectUI nutzt, oder ein Werkzeug von affectUI in der Antwort zeigt, bist du verbunden

Menünamen am 11. Nov. 2026 mit der Hilfe von Anthropic abgeglichen · dein Bildschirm kann je nach App-Version leicht abweichen

Klappt mit Cursor · etwa 5 Min.

Du brauchst einen Schlüssel von affectUI (auf der Seite des Anbieters registrieren, kann kosten)

  1. Bei affectUI registrieren und Schlüssel erstellen

    Öffne die Seite des Anbieters, registriere dich und erstelle einen API-Schlüssel für den nächsten Schritt. Kann Geld kosten.

    Seite von affectUI öffnen ↗

  2. Mit diesem Button Cursor öffnen

    In Cursor öffnen

    Cursor fragt nach einer Bestätigung; klicke Install

  3. Schlüssel eintragen

    In den Einstellungen von affectUI ist Authorization leer; trag deinen Schlüssel ein und speichere

    Füge den Schlüssel nur in das Feld der App ein, nie in einen Chat und schick ihn niemandem

  4. KI-Chat in Cursor im Agent-Modus öffnen

  5. Ausprobieren

    Nutze affectUI und sag mir, was du für mich tun kannst; zeig mir dann eine Sache

    ✓ Wenn Cursor sagt, dass es affectUI nutzt, oder ein Werkzeug von affectUI in der Antwort zeigt, bist du verbunden

Menünamen am 11. Nov. 2026 mit der Hilfe von Cursor abgeglichen · dein Bildschirm kann je nach App-Version leicht abweichen

Klappt mit VS Code · etwa 5 Min.

Du brauchst einen Schlüssel von affectUI (auf der Seite des Anbieters registrieren, kann kosten)

  1. Bei affectUI registrieren und Schlüssel erstellen

    Öffne die Seite des Anbieters, registriere dich und erstelle einen API-Schlüssel für den nächsten Schritt. Kann Geld kosten.

    Seite von affectUI öffnen ↗

  2. Mit diesem Button VS Code öffnen

    In VS Code öffnen

    VS Code fragt nach einer Bestätigung; klicke Install

  3. Schlüssel eintragen

    In den Einstellungen von affectUI ist Authorization leer; trag deinen Schlüssel ein und speichere

    Füge den Schlüssel nur in das Feld der App ein, nie in einen Chat und schick ihn niemandem

  4. KI-Chat in VS Code im Agent-Modus öffnen

  5. Ausprobieren

    Nutze affectUI und sag mir, was du für mich tun kannst; zeig mir dann eine Sache

    ✓ Wenn VS Code sagt, dass es affectUI nutzt, oder ein Werkzeug von affectUI in der Antwort zeigt, bist du verbunden

Menünamen am 11. Nov. 2026 mit der Hilfe von VS Code abgeglichen · dein Bildschirm kann je nach App-Version leicht abweichen

Andere Apps mit MCP, etwa Windsurf, Zed oder Gemini CLI, fügen Server unterschiedlich hinzu. Sieh in der App-Liste nach

Alle Apps mit MCP ansehen →

Adresse für Apps, die über das Web verbinden

Adressehttps://www.affectui.com/api/mcp

JSON-Einstellungen stehen unten unter „Für Entwickler“

Hängst du fest? Frag Leute, die affectUI nutzen💬 Diskussion →
Für Entwickler: Terminal-Befehle und JSON-Einstellungen

Über das Web

Claude Code

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

Cursor (~/.cursor/mcp.json)

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

VS Code (mcp.json)

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

Werte, die du selbst einträgst

  • Authorization geheim 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.

Diese Einstellungen werden aus dem Registry-Eintrag des Entwicklers erzeugt. Wenn in der README etwas anderes steht, folge der README.

Auf einen Blick

Downloads pro Wochei
Nicht auf npm/PyPI
Lizenzi
Keine Lizenz angegeben
Verbindung
Läuft in der Cloud
Transport
streamable-http
Neueste Versioni
1.0.0
In der Registry veröffentlichti
9. Okt. 2026
Code zuletzt geänderti
10. Nov. 2026
Entwickler
flohoeller
Registry-Status
Aktiv

Welche Apps ihn nutzen können

Basierend darauf, wie sich dieser Server verbindet, und auf der eigenen Doku jeder App, geprüft am 10. Nov. 2026.

Verbinden sich über das Internet in

ClaudeGooseLM StudioMsty StudioCherry StudioCursorVS Code + GitHub CopilotVisual StudioWindsurf (Devin Desktop)ZedKiroClineContinueJetBrains AI AssistantClaude CodeCodex CLIGemini CLIOpenCodenodecodeWarpLibreChatOpen WebUIRaycast

Alle Apps, mit Vor- und Nachteilen →

Was er kann

Tool-Namen und -Beschreibungen genau so, wie der Server sie am 11. Nov. 2026 gemeldet hat. Geschrieben hat sie der Entwickler, nicht wir; wir zeigen sie als reinen Text.

  • search_components

    Find affectUI components, screens, blocks, illustrations and motion effects for a UI need, e.g. 'chat input with model picker' or 'onboarding checklist'.

  • list_components

    Every affectUI item with slug, section, category, free or Pro, and a one-line description.

  • get_component

    Docs for one item: install command, usage example, props, keyboard, accessibility and notes.

  • get_source

    The full .tsx source of an item, to write to components/ui/ .tsx when the shadcn CLI isn't available. Pro items need the user's access key in the MCP connection.

Basischecksi

Wir prüfen Informationen, die jeder sehen kann; den Code haben wir nicht gelesen. Checks, die nicht zutreffen, werden nicht mitgezählt. · Geprüft am 12. Nov. 2026

  • ✓ Bestanden

    Entwickler passt zum Repo

    Der Registry-Name wurde mit dem GitHub-Konto flohoeller bestätigt, dem das Repo gehört

  • ✓ Bestanden

    Wird noch gepflegt

    Code zuletzt geändert: gestern

  • … Noch nicht geprüft

    Hat eine Lizenz

    Dieses Repo haben wir noch nicht von GitHub gelesen

  • ✓ Bestanden

    Endpunkt antwortet

    Antwort in 254 ms (HTTP 200)

  • – Nicht zutreffend

    Anmeldung mit OAuth

    Keine Anmeldung nötig

  • ✓ Bestanden

    Keine versteckten Anweisungen in Tool-Beschreibungen

    Wir haben 4 Tool-Beschreibungen gelesen und keine versteckten Anweisungen an die KI gefunden

Diskussion

Fragen, Tipps teilen oder melden, dass etwas nicht geht. Sortiert nach „hilfreich“.

Noch keine Beiträge. Stell die erste Frage oder teile einen Tipp.

Beiträge hier stammen von Nutzern, nicht vom PopNx-Team.

Mit Google anmelden, um zu posten

Nutzerbewertungen

Noch keine Bewertungen

Mit Google anmelden, um zu bewerten

Im Vergleich mit anderen in Suche & KI-Gedächtnisi

  • Mehr Sterne als 99 % der anderen 5957 Server in dieser Kategorie
  • Neuer in der Registry veröffentlicht als 54 % der anderen 5957 Server in dieser Kategorie
  • Basischecks gleich gut wie oder besser als bei 100 % der anderen 5957 Server in dieser Kategorie

Verglichen mit allen aktiven Servern dieser Kategorie in der Registry. Sterne zählen nur, wenn dem Herausgeber das Repo gehört.

Häufige Fragen

Ist affectUI sicher?

Er hat 4 von 4 zutreffenden Basischecks bestanden. Den Code haben wir nicht gelesen. Bevor du einen Schlüssel oder Token hinzufügst, sieh nach, welche Zugriffe der Server verlangt, und nutze einen Schlüssel, der nur die Berechtigungen hat, die du brauchst.

Welche Schlüssel oder Codes braucht er?

Das musst du eintragen: Authorization

Läuft er auf meinem Computer oder in der Cloud?

Er läuft in der Cloud des Entwicklers. Du verbindest dich übers Internet, ohne etwas zu installieren, aber was du sendest, läuft über die Server des Entwicklers.

Wird er noch gepflegt?

Das GitHub-Repo wurde zuletzt gestern geändert, und die neueste Version (1.0.0) kam vor 33 Tagen in die Registry.

Welche Apps können ihn nutzen?

Apps, die MCP unterstützen, etwa Claude Desktop, Claude Code, Cursor und VS Code. Er verbindet sich per URL und funktioniert daher auch in Apps mit Remote-MCP, etwa ChatGPT Business und höher.

Was kann ich stattdessen nutzen?

In derselben Kategorie: Ruflo, Context7, Metabase

Alternativen

Server derselben Kategorie von anderen Entwicklern, sortiert nach Sternen.

So liest du eine Karte:↓ Downloads pro Wochei★ GitHub-SterneiDrei Säulen: Bewertungen · Checks · NutzungiAktualisiert = neueste Version in der Registry veröffentlichti

Ruflo

Agent teams, swarms, memory and hooks for Claude Code and Codex, served over MCP.

von ruvnetWeit verbreitet↓ 74.273/Wo.★ 81.480Aktualisiert heute

Läuft auf deinem Computer
Installieren

Context7

Up-to-date docs for AI agents

von upstashWeit verbreitet↓ 1,2 Mio./Wo.★ 64.550Aktualisiert vorgestern

Computer oder Cloud
Installieren

Metabase

Lets AI clients search, explore, query, and visualize data in a Metabase instance.

von metabaseWeit verbreitet★ 50.276Aktualisiert vor 6 Monaten

Läuft in der Cloud
Installieren

README vom Entwickler

README öffnen

Unverändert aus dem Repo des Entwicklers übernommen. PopNx MCP hat den Inhalt weder geprüft noch empfiehlt es ihn. HTML, Bilder und Skripte wurden entfernt. Links führen von dieser Website weg.

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

Contents

  • 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

NameWhat it isInstall

| 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.

Nur der Anfang wird gezeigt; den Rest findest du im Repo