affectUI — Claude Code MCP server: what it does, how to install
MCP server to discover and embed animated React components for AI software. Helps grab self-contained UI blocks without configuring CSS libraries.
claude mcp add --transport http affectui https://www.affectui.com/api/mcpWhat affectUI does
This server connects your coding assistant directly to the affectUI repository over HTTP. Through its tools, an agent can look up interface items, read source files, and drop ready-made blocks into your workspace. Everything is built around React 19 and pairs with the shadcn registry.
Architecture relies on complete self-containment. Each element lives inside a single .tsx file that packages its own styles, so Tailwind or standalone animation runtimes are not required. Note that advanced items such as the command menu belong to the paid Pro tier and remain outside the free repository.
What it helps with
- search animated interface components for AI apps
- import zero-config React blocks without Tailwind setup
- fetch self-contained
.tsxcode straight through the assistant - wire up pre-styled UI pieces via
shadcnworkflows
Example prompts for the agent
- Search affectUI for an onboarding progress widget and put it in my components folder.
- Find an AI agent team illustration in affectUI and display the code.
- Check affectUI for an interactive reaction bar component.
How to install affectUI
Platform CLI: remote server
claude mcp add --transport http affectui https://www.affectui.com/api/mcpPlatform CLI: remote server
codex mcp add affectui --url https://www.affectui.com/api/mcpConfig file
{
"mcpServers": {
"affectui": {
"url": "https://www.affectui.com/api/mcp"
}
}
}Config file
{
"servers": {
"affectui": {
"type": "http",
"url": "https://www.affectui.com/api/mcp"
}
}
}Platform CLI: remote server
gemini mcp add -t http affectui https://www.affectui.com/api/mcpStep by step, with commands for each platform: How to add an MCP server to Claude Code, Codex, Cursor, VS Code, Gemini CLI and more
Questions about affectUI
How do I install affectUI in Claude Code?
Run claude mcp add --transport http affectui https://www.affectui.com/api/mcp in your terminal. This command links the remote HTTP endpoint to your environment.
What does affectUI do?
It gives coding agents tools to search, inspect, and copy pre-built React components and motion graphics into codebases.
Do affectUI components require Tailwind or external animation libraries?
No external styling runtime is necessary. Every component ships as an isolated .tsx file containing internal styles and animations.
