affectUI
by @flohoeller · io.github.flohoeller/affectui
Search, read and install agent-ready React components, screens and blocks for AI products.
- Category
- Search and web data
- Connection
- Remote (HTTP)
- Tools
- 4 reported
- Status
- Online
Connect it to your AI
Claude Code
claude mcp add --transport http affectui https://www.affectui.com/api/mcpClaude, ChatGPT, Cursor and other apps
Add it as a custom connector with this URL (Streamable HTTP):
https://www.affectui.com/api/mcpThis server expects extra headers, usually an API key from its maker.
Cursor, VS Code and other apps (mcp.json)
{
"mcpServers": {
"affectui": {
"url": "https://www.affectui.com/api/mcp"
}
}
}Tools it offers
4 tools, as the server itself reported during our check on Oct 31, 2026.
search_componentsFind affectUI components, screens, blocks, illustrations and motion effects for a UI need, e.g. 'chat input with model picker' or 'onboarding checklist'.list_componentsEvery affectUI item with slug, section, category, free or Pro, and a one-line description.get_componentDocs for one item: install command, usage example, props, keyboard, accessibility and notes.get_sourceThe full .tsx source of an item, to write to components/ui/<slug>.tsx when the shadcn CLI isn't available. Pro items need the user's access key in the MCP connection.
Questions
What is the affectUI MCP server?
Search, read and install agent-ready React components, screens and blocks for AI products. It is made by @flohoeller and listed in the official MCP Registry as io.github.flohoeller/affectui. MCP (Model Context Protocol) is the open standard that lets AI apps like Claude, ChatGPT and Cursor use outside tools.
How do I add affectUI to Claude?
In the Claude app or claude.ai, open Settings, then Connectors, choose "Add custom connector" and paste https://www.affectui.com/api/mcp. In Claude Code, run: claude mcp add --transport http affectui https://www.affectui.com/api/mcp
How do I add affectUI to ChatGPT?
ChatGPT can use remote MCP servers as connectors. In ChatGPT settings, under Apps and Connectors, turn on developer mode if asked, create a new connector and paste https://www.affectui.com/api/mcp.
How do I add affectUI to Cursor?
Open Cursor settings, go to MCP, choose "Add new MCP server" (or edit ~/.cursor/mcp.json) and add: { "mcpServers": { "affectui": { "url": "https://www.affectui.com/api/mcp" } } }
Does affectUI work right now?
Yes. It responded when we last checked on 31 Oct 2026. We check remote MCP servers every day.
What can affectUI do?
It gives your AI 4 tools, including search_components, list_components, get_component, get_source. The full list is on this page.
Is this your server? Get the badge for your README
Markdown (GitHub README)
[](https://chen.media/mcp/github-flohoeller-affectui)HTML (switches to dark mode on its own)
<a href="https://chen.media/mcp/github-flohoeller-affectui"><picture><source media="(prefers-color-scheme: dark)" srcset="https://chen.media/mcp/badge/github-flohoeller-affectui.svg?theme=dark"><img src="https://chen.media/mcp/badge/github-flohoeller-affectui.svg" alt="Listed on chen.media/mcp" height="40"></picture></a>More in Search and web data
See allFirecrawl MCP ServerVerified maker
@firecrawlFirecrawl, the context API for AI agents: search, scrape, interact with the web, plus paper search.
ExaVerified maker
exa.aiConnect AI agents to Exa for web search, content fetching, and multi-step research.
Apify MCP serverVerified maker
apify.comExtract data from any website with thousands of scrapers, crawlers, and automations on Apify Store ⚡
Brave search MCP serverVerified maker
@braveBrave Search MCP Server: web results, images, videos, rich results, AI summaries, and more.
Organiq
organiqgeo.comSearch Console and GA4 analysis (read-only Google): queries, decay, cannibalization, AI traffic.
AI Setups That Work
aisetupsthatwork.comSearch step-by-step AI setups for small business, work and home. Tested setups first.