affectUI MCPサーバー

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.

Contents

• Why affectUI
• Choose the UI for your workflow
• 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.

Choose the UI for your workflow

affectUI is the presentation layer of an AI product. Your application supplies runtime data, connects tools and enforces permissions; the components render that state and expose callbacks for your actions.

• Agent UI: task plans, run progress, decisions and outcomes for delegated work. Start with the Agent UI guide or the agent dashboard guide.
• AI chat UI: composers, streaming answers, citations and reply actions. Read React components for AI chat.
• Human in the loop: review a proposed action and its target before the backend executes it. Read approvals and permissions.
• Tool-call UI: make tool activity, results and failures readable. Read tool calls in an agent UI.
• MCP UI: present tools connected through MCP. The protocol connection and the finished interface are separate concerns; see the MCP UI guide. The affectUI MCP server below helps coding assistants discover and install components.
• Generative UI: map model-selected tools and validated data to known React views. Read generative UI in React, including fallback states and why this does not require executing arbitrary generated code.

Browse all guides, follow the AI setup docs, or compare UI libraries to choose the pieces that fit your application.

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 (
    <ReactionBar
      reactions={{ like: { count: post.likes, active: post.liked }, comment: { count: post.comments } }}
      onReact={(key, state) => 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.jsonClassic 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.jsonClassic style: npx shadcn@latest add https://www.affectui.com/r/change-summary.json
Checkbox	A real checkbox with a label and a second line, a some-of-them state for Select all, an error and a card row	npx shadcn@latest add https://www.affectui.com/r/checkbox-clean.jsonClassic style: npx shadcn@latest add https://www.affectui.com/r/checkbox.json
Comment Thread	One comment with replies	npx shadcn@latest add https://www.affectui.com/r/comment-thread-clean.jsonClassic style: npx shadcn@latest add https://www.affectui.com/r/comment-thread.json
Decision Inbox	Open decisions with two quick answers each	npx shadcn@latest add https://www.affectui.com/r/decision-inbox-clean.jsonClassic style: npx shadcn@latest add https://www.affectui.com/r/decision-inbox.json
Email Draft	Agent-written email for review	npx shadcn@latest add https://www.affectui.com/r/email-draft-clean.jsonClassic style: npx shadcn@latest add https://www.affectui.com/r/email-draft.json
Filter Menu	Grouped filters with removable chips, collapsible checkbox groups, Clear all and full keyboard control	npx shadcn@latest add https://www.affectui.com/r/filter-menu-clean.jsonClassic style: npx shadcn@latest add https://www.affectui.com/r/filter-menu.json
Message Actions	The quiet bar under an AI message	npx shadcn@latest add https://www.affectui.com/r/message-actions-clean.jsonClassic style: npx shadcn@latest add https://www.affectui.com/r/message-actions.json
Notification Stack	Notice cards stacked behind each other	npx shadcn@latest add https://www.affectui.com/r/notification-stack-clean.jsonClassic style: npx shadcn@latest add https://www.affectui.com/r/notification-stack.json
OTP Input	The verification code field done right	npx shadcn@latest add https://www.affectui.com/r/otp-input-clean.jsonClassic style: npx shadcn@latest add https://www.affectui.com/r/otp-input.json
Profile Menu	Account card with the signed-in user, menu actions and profile setup progress	npx shadcn@latest add https://www.affectui.com/r/profile-menu-clean.jsonClassic style: npx shadcn@latest add https://www.affectui.com/r/profile-menu.json
Progress Tracker	Onboarding checklist with an animated progress bar, ticks that draw themselves and auto play	npx shadcn@latest add https://www.affectui.com/r/progress-tracker-clean.jsonClassic style: npx shadcn@latest add https://www.affectui.com/r/progress-tracker.json
Reaction Bar	Like, comment, repost and share in one pill	npx shadcn@latest add https://www.affectui.com/r/reaction-bar-clean.jsonClassic style: npx shadcn@latest add https://www.affectui.com/r/reaction-bar.json
Segmented Control	Switch between two to six options	npx shadcn@latest add https://www.affectui.com/r/segmented-control-clean.jsonClassic style: npx shadcn@latest add https://www.affectui.com/r/segmented-control.json
Select	Pick one option in the Text Field's look	npx shadcn@latest add https://www.affectui.com/r/select-clean.jsonClassic style: npx shadcn@latest add https://www.affectui.com/r/select.json
Smart Recommendation	Suggestion card with a confidence signal, alternatives to switch to and accept with undo	npx shadcn@latest add https://www.affectui.com/r/smart-recommendation-clean.jsonClassic style: npx shadcn@latest add https://www.affectui.com/r/smart-recommendation.json
Switch	On or off for things that apply right away	npx shadcn@latest add https://www.affectui.com/r/switch-clean.jsonClassic style: npx shadcn@latest add https://www.affectui.com/r/switch.json
Tag Input	Several values in one field as chips	npx shadcn@latest add https://www.affectui.com/r/tag-input-clean.jsonClassic style: npx shadcn@latest add https://www.affectui.com/r/tag-input.json
Text Area	The multi-line twin of the Text Field	npx shadcn@latest add https://www.affectui.com/r/text-area-clean.jsonClassic style: npx shadcn@latest add https://www.affectui.com/r/text-area.json
Text Field	One input for every form	npx shadcn@latest add https://www.affectui.com/r/text-field-clean.jsonClassic style: npx shadcn@latest add https://www.affectui.com/r/text-field.json
Thinking Loader	A small working pill for AI replies	npx shadcn@latest add https://www.affectui.com/r/thinking-loader-clean.jsonClassic style: npx shadcn@latest add https://www.affectui.com/r/thinking-loader.json
Tips Panel	Grid of short tips with one action each	npx shadcn@latest add https://www.affectui.com/r/tips-panel-clean.jsonClassic style: npx shadcn@latest add https://www.affectui.com/r/tips-panel.json
Tool Call Card	An agent's tool call in one line	npx shadcn@latest add https://www.affectui.com/r/tool-call-card-clean.jsonClassic style: npx shadcn@latest add https://www.affectui.com/r/tool-call-card.json

Blocks

Name	What it is	Install
Logo Marquee	The endless “Trusted by” strip	npx shadcn@latest add https://www.affectui.com/r/logo-marquee-clean.jsonClassic style: npx shadcn@latest add https://www.affectui.com/r/logo-marquee.json
Testimonial Wall	The landing-page wall of quotes	npx shadcn@latest add https://www.affectui.com/r/testimonial-wall-clean.jsonClassic style: npx shadcn@latest add https://www.affectui.com/r/testimonial-wall.json