Connect your AI tool

Connect ReadymadeUI to your AI tool once. After that you just ask, “add a pricing table with a yearly toggle”, and it finds the right design and adds it to your project in your theme. It works through MCP, the way AI tools connect to other services.

1. Make your API key

   Sign in, open the account menu and choose AI tools and CLI. Click Create key and copy it straight away: it’s shown only once.

2. Add ReadymadeUI to your tool

   Pick your tool on that page and copy what it shows. Two examples:

   Claude Code

   Run this in your project’s terminal.

   claude mcp add --transport http readymadeui https://api.readymadeui.com/api/mcp \
     --header "Authorization: Bearer YOUR_API_KEY"

   Cursor

   Add this to ~/.cursor/mcp.json (or .cursor/mcp.json in a project). Right after you make your key, the page also has an Add to Cursor button that does it for you.

   {
     "mcpServers": {
       "readymadeui": {
         "url": "https://api.readymadeui.com/api/mcp",
         "headers": {
           "Authorization": "Bearer YOUR_API_KEY"
         }
       }
     }
   }

   The page has the steps for VS Code, Codex, Lovable and Claude.ai too.

3. Ask for what you need

   For example: “add a hero with a product screenshot”, or “build a settings page with ReadymadeUI designs”. The first time, your tool also sets up your CSS and font.

What your tool can do

• Search the designs and look through the categories.
• Get a design as Next.js, React or HTML, in your theme.
• Get the setup for your project (the CSS and the font).
• With a plan, read the design system’s rules, so the UI it builds itself matches the designs.

Your API key

• Every account has one key, on every plan. Keep it secret, like a password.
• Lost it? Click Replace key to get a new one. The old one stops working.
• A free account gets the free designs, up to 30 a day. With a plan, every design, up to 100 a day.