AI slop in user interfaces: 8 UI libraries to connect to Claude Code and Codex so the agent uses real components

You can spot an AI-generated interface at a glance: the same hero, the same purple gradient, the same three cards with an icon on top. That’s UI AI slop. The cause lies in what we give the model: without real components to work with, Claude Code and Codex fall back on the most common patterns. Eight libraries fix the problem, as long as you connect them to the agent instead of copying them by hand.

Why do AI-built interfaces all look the same?

Claude Code builds an interface from whatever is in its context. When the context holds no reference components, the agent picks the most frequent solution: the landing page with a centered hero, a gradient and three cards.

The fix is to give Claude Code real components. Here’s the part that matters: these libraries plug into Claude Code or Codex through MCP, skills or npm packages. The agent consults them on its own whenever it needs them.

An MCP (Model Context Protocol) server is a standard connector that lets an AI agent query an external service. A skill is a package of instructions the agent loads when a task calls for it.

Which 8 libraries remove AI slop?

1. OriginKit: animated components via MCP

OriginKit is a free library of animated components, with open source code under the MIT license. You connect it to Claude Code as an MCP server and Claude Code browses it on its own: when I ask for an animated hero, the agent goes looking for one in the OriginKit catalog. Downloading component source code requires a free API key.

2. 21st.dev: the community library

21st.dev follows the same idea as OriginKit at a much larger scale: the catalog lists more than 12,000 React components published by the community. One command to install it, an API key from 21st.dev/mcp, and Claude Code can use it right away. Searching the catalog is free; retrieving and generating components is paid.

3. Beautiful UI: components for AI interfaces

Beautiful UI is built for the interfaces of AI applications: streaming text, loading states, the reasoning trace (the "thinking"). It’s the right pick if you build agentic applications. You install it as a shadcn registry.

4. Thinking Orbs: the indicator while the agent reasons

Thinking Orbs does one thing and does it well: the orb that pulses while the agent reasons, in place of the usual spinner. The React version has 9 animated states and 0 runtime dependencies.

5. Aceternity UI: visual effects by copy and paste

Aceternity UI is probably the best known of the eight, the one with the striking effects: 3D cards, animated backgrounds, text effects. It works by copy and paste: I take the component URL, pass it to Claude Code and the agent handles the rest. More than 117 components are free; blocks and full templates are paid.

6. transitions.dev: a skill for animations

transitions.dev installs as a skill. I install it once and Claude Code or Codex use it every time an animation needs building. The project lists more than 43 transitions ready to use.

7. Component Gallery: 95 design systems to consult

Component Gallery provides no code. It collects 95 real design systems, with component variants and states: exactly what usually gets forgotten. I check it before writing a component or having Claude Code write it.

8. Agentation: annotate the interface instead of describing it

Agentation is a visual feedback tool for AI agents. You install it as an npm package in your React app and connect it to Claude Code through an MCP server. In my view it’s the best of the eight, and the next section explains why.

Why does Agentation change how you work with AI agents?

With Agentation I open my app in the browser, click the button I don’t like and type, for example, "too big". Claude Code receives the CSS selector, the source file and the React component for that element directly.

From there, all I have to tell Claude Code is "fix annotation 3". There’s no need to describe in words where the problem is, which is the slowest part of working on an interface with an AI agent.

Through the MCP server, Claude Code reads Agentation annotations without any copy and paste and can mark them as resolved.

How do you install the 8 libraries?

Eight libraries, six commands: Aceternity UI and Component Gallery need no installation. These are the commands for Claude Code:

# 1. OriginKit (replace YOUR_API_KEY)
claude mcp add --transport http --scope user --header "Authorization: Bearer YOUR_API_KEY" originkit https://mcp.originkit.dev/mcp

# 2. 21st.dev (then paste the API key from 21st.dev/mcp)
npx @21st-dev/cli@latest install claude

# 3. Beautiful UI
npx shadcn add https://beautifului.dev/r/registry.json

# 4. Thinking Orbs
npm install thinking-orbs

# 6. transitions.dev
npx skills add Jakubantalik/transitions.dev

# 8. Agentation
npm install agentation -D
claude mcp add agentation -- npx -y agentation-mcp server

For Aceternity UI, just pass Claude Code the component URL from ui.aceternity.com. Component Gallery is something you browse.

With Codex, use its MCP configuration instead of claude mcp add: same endpoints and same npx commands.

Which library should you start with?

It depends on where the AI slop comes from in your project. If every page looks the same, OriginKit, 21st.dev and Aceternity UI give the agent components with a visual identity. If you’re building an app with an agent inside, Beautiful UI and Thinking Orbs cover streaming, loading and reasoning. If the bottleneck is review, Agentation shortens the loop between what you see and what Claude Code fixes.

Pick the library that covers your weak spot, connect it to your agent and compare the next interface with the last one you generated.