How to connect the Relume React Library MCP

[fs-toc-omit]By the end of this doc, you'll be able to

• Understand what the Relume Library MCP gives your AI tool
• Connect it to Claude, Claude Code, Antigravity or Cursor
• Sign in with your Relume account and try your first prompts
• Fix the most common connection problems

Overview

The Relume Library MCP connects your AI tool to Relume's React component library, so it can find the section you need and hand you the code for it. An MCP (Model Context Protocol) server is a standard way for an AI tool to use another product's features, a bit like a plug that gives it access to Relume's components. If you want your AI tool to build and edit sites in Relume Publish instead, see How to connect the Relume Publish MCP.

Real React code from Relume's library

The part that matters most: your AI tool works from Relume's real, production-ready React components instead of building sections from scratch. Ask for a hero, a pricing section or a footer, and it searches the library, picks a match and adds the code to your project.

Before You Begin

Before getting started, make sure you have:

• A paid Relume plan. On the Free or Design plan, sign-in asks you to upgrade.
• One of these: Claude (on the web at claude.ai or in the desktop app), Claude Code, Antigravity or Cursor
• The MCP URL, which you'll paste in during setup: https://relume-library-mcp.relume.io/mcp

Note: The Library MCP covers Relume's React component library only. It can't reach Site Builder, Sitemaps, Wireframes, the Style Guide or exports.

Connect your AI tool

Pick the tool you use. You only need to connect one.

Claude

This takes about 2 minutes.

1. Go to Settings, then Connectors.
2. Click Add custom connector.
3. Enter Relume Library as the name.
4. Paste the MCP URL into the URL field.
5. Click Add.
6. Click Connect.
7. Sign in to Relume in the window that opens, using the same email or Google login you use on relume.io.

You're done when the connector shows Connected.

[GIF: Adding the Relume Library connector in Claude, from Settings to Connected]

Claude Code

1. Run claude mcp add --transport http relume-library https://relume-library-mcp.relume.io/mcp in your terminal.
2. Run claude to start Claude Code.
3. Type /mcp.
4. Select relume-library.
5. Choose Authenticate.
6. Sign in to your Relume account in the browser window that opens.

Tip: Add --scope user to the command to make the Relume Library available in every project, not only the folder you're in. To remove it later, run claude mcp remove relume-library.

Antigravity

1. Open Settings, then the Customizations tab.
2. Click Open MCP Config to open your mcp_config.json file.
3. Add this to the file: {"mcpServers":{"relume-library":{"serverUrl":"https://relume-library-mcp.relume.io/mcp"}}}
4. Save the file.
5. Click refresh in the Installed MCP Servers panel.
6. Sign in to your Relume account in the browser window that opens the first time you use it.

Note: Antigravity uses serverUrl in its config. Cursor and most other tools use url.

Cursor and other tools

Most tools that support remote MCP servers work the same way: add a server named relume-library with the MCP URL, then sign in when prompted. In Cursor, add this to your mcp.json file:

{"mcpServers":{"relume-library":{"url":"https://relume-library-mcp.relume.io/mcp"}}}

Try it

Once you're connected, start with something like:

• "Find a Relume pricing section with three tiers and give me the React code."
• "Show me Relume hero sections with an image and buttons, then add the first one to my project."

Tip: The first time you use a component in a project, ask your AI tool to "get the Relume setup instructions". That way the styling looks right.

Troubleshooting

Sign-in asks you to upgrade your plan. The Library MCP needs a paid Relume plan, and the Free and Design plans don't include it. Upgrade your plan, then sign in again.

It won't connect. Check the URL matches https://relume-library-mcp.relume.io/mcp exactly, with nothing added at the end. If it still fails, remove the connector and add it again.

I can't find Connectors in Claude. Update the app, or use claude.ai in your browser.

Tips & Best Practices

Tip: Some interactions won't work straight away, especially in less common components. If one doesn't, ask your AI tool to build it for you.

Tip: Describe the section you want in detail, such as three pricing tiers or an image with two buttons. The more specific you are, the closer the match it finds.

Tip: Mention Relume in your prompt, so your AI tool searches the library instead of writing a section from scratch.