Describe the interaction.
Ask for one UI need. Your agent searches Rendyn for a small shortlist.
UI component MCP server
Give your agent
taste.
The best way to use Rendyn is through MCP. Give your agent a catalogue of real React components, previews and complete source, inside the project you’re building.
Claude Code
Cursor
CodexFree components. Free MCP. Sign up only to connect your agent. No card needed.
Illustrated workflow · your agent makes the project edits
From idea to interface
Your brief. A preview. Real code.
Three steps to better ingredients for your next build.
See it before you choose.
Open the working previews. Compare the layout and interaction with your brief.
Make it yours.
Retrieve the source and setup context. Your agent adapts it to your app’s design system.
A catalogue of possibilities
Small pieces. A better whole.
Agent interfaces
A decision, beautifully presented.
Approval CardLayouts & motion
Give your features room to shine.
Bento GridApp building blocks
A shortcut to every action.
Explore the catalogueSchematic illustrations. Open the catalogue to try the actual components.
Under the hood
Four tools. One creative workflow.
Find your shortlist
Describe one UI need. Get ranked matches and preview links.
search_componentsBring home the source
Retrieve files, dependencies, install steps and licence notices by ID.
get_componentSee the possibilities
Discover the available component categories.
list_categoriesExplore a little further
Browse a category with stable, paginated results.
browse_categorySee an example tool call and source handoff
{
"query": "approval card",
"limit": 2,
"include_previews": true
}{
"id": "beui:approval-card"
}Search returns metadata and preview links; include_previews requests available images. Retrieve by the returned ID, then review all files, imports, dependencies and licence notices before integrating. Your application supplies state, APIs and server authorization.
Meet your agent where it works
Your editor.
Now with better UI.
Choose your client, add Rendyn, and authorize your account.
REMOTE MCP ENDPOINT
https://mcp.rendyn.dev/mcpEverything is free
Browse, preview and copy every component without an account. Sign up only for MCP, then authorize your coding agent.
No card, subscription or expiry date.
Connect to MCP for free ↗Claude Code setup
claude mcp add --transport http rendyn --scope project https://mcp.rendyn.dev/mcpAccept the project server, then open /mcp to log in and authorize Rendyn.
Official Claude Code documentation ↗1 Add server→2 Authorize→3 Ask for UI
The useful details
A few things to know.
Does Rendyn install the components for me?
Rendyn returns source, dependencies and install instructions. Your coding agent writes files and runs approved commands in your project.
Can I use these components in Next.js?
Review the component’s client boundary, imports, Tailwind setup and dependency versions. Compatibility depends on the chosen source and your app; test the rendered result after integration.
What if my agent cannot connect?
Confirm the endpoint ends in /mcp, enable the server in your client, and complete OAuth. Sign in to your free Rendyn account when your editor asks you to authorize. No subscription is needed.
What if there is no matching component?
Try a narrower interaction, remove a category filter, or browse a category. Choose a component that fits your feature and existing design system.
What comes with the source?
Source files, dependencies, install steps, source hashes and licence details. Catalogue entries include components from beUI, Magic UI and Kibo UI, with their attribution and notices.
Are agent UI components a complete AI backend?
They provide interface pieces. Your application supplies model calls, streaming, persistence and server authorization. Rendyn’s catalogue tools deliver components for your app; they do not implement the MCP Apps extension.
Make something worth looking at