21st MCP

Building the ordinary furniture of an interface is the part nobody enjoys: the date picker, the pricing table, the settings sidebar, each one an afternoon of fiddling that teaches you nothing. 21st MCP connects your editor to a catalogue of components other people have already built and published, using MCP, the standard way an assistant plugs into an outside service. You describe what you want in a sentence, it finds close matches, generates the code and writes it into your project. Two honest notes. The project used to be called Magic MCP, and that older name now does nothing but forward requests here, with the old keys switched off. And every component arrives under somebody else's licence, the terms setting out how you are allowed to reuse it, which is yours to read.

Reach for it when you need a standard interface piece quickly and would rather start from something real than from a blank file. It suits projects built with React, the most common way modern web interfaces are assembled, since that is what the catalogue is made of. Because each request spends a credit and the free plan holds a hundred a month, it rewards asking for one considered component over generating six variations to browse. Read the licence on anything that ends up in work you sell.

1. Make a free account at 21st.dev and generate an API key, the long password that proves the requests are yours. Keep it out of any file you upload to a shared code folder such as GitHub, because anyone who reads the key can spend your credits.
2. Open the Terminal app, the window where you type commands, in your project folder and paste the line below. It sets up the connection for Claude Code; swap claude for cursor, vscode, windsurf or codex if you use one of those instead, and paste the key when it asks.
3. Ask for a single component in plain words, for example: build me a pricing table with three tiers and a monthly toggle. Read the code it writes before you keep it, the same as you would read anything a stranger handed you.