Signal Collective
Hong Kong Book a call
Signal Collective The Library Building
We find where your growth is · Then we build it

Building · For anyone building their own product with an AI. · a tool

Drop finished screens into what your AI is building

The open-source project magic-mcp, by 21st-dev

“It's like v0, but in your Cursor / Claude Code / Windsurf: search 10,000+ React/Tailwind components, generate new UI with AI, and publish your own — right from your editor.” — the project's own words, on GitHub

What it does
This connects your coding AI to a catalogue of ready-made interface pieces — buttons, forms, navigation, whole page sections — so when you ask for a settings screen or a signup form, it can search for a working version, read the real code, and bring it into your project with everything it depends on, instead of writing it from scratch and guessing at the styling. Where your account allows it, it can also draft a few variants of a new piece from a plain description; you preview them and keep one. You still decide what ships; it just stops your AI reinventing the same building blocks every time.
Replaces
hand-building the same common interface pieces from scratch, or hunting through component sites and pasting code in by hand
For
Someone building their own web product with an AI who wants screens that look finished without becoming a front-end designer.
Not for
Not for someone building outside React and the web — the catalogue is React components, so a native mobile app or a backend-only tool gets nothing from it.
Setup
10 min · Claude Code, Kimi, Gemini CLI or Codex · node, an API key from 21st.dev
You ask It works the list Green before it ships > add the sign-up > and the tests BEFORE IT SHIPS it never pushes on its own

Get it running

Paste this into the AI that runs on your computer. It does the install, checks it works, and tells you what to type first. If anything fails, paste the error back to it.

Paste into Claude Code
Install magic-mcp (https://github.com/21st-dev/magic-mcp) on this computer and get it working for me. I am not a developer; explain each step in one line as you go and never skip one. You are Claude Code, running on my machine.

1. Check what this machine already has (git, Python or Node as the project needs, Docker if the README says so). Tell me anything missing and install it, asking me before anything that needs my password.
2. Run `npx @21st-dev/cli@latest init --client claude` (swap `claude` for `cursor`, `vscode`, `windsurf` or `codex`) — nothing to clone; it writes the MCP entry for you.
3. Configure it. If it needs an API key or a login, stop and ask me for it; never guess one and never store it anywhere except where the README says.
   Tool-specific notes: Run `npx @21st-dev/cli@latest init --client claude` (or `cursor`, `vscode`, `windsurf`, `codex`) — nothing to clone; it writes the MCP entry itself. Or add it by hand as a plain HTTP MCP server: url `https://21st.dev/api/mcp` with an `x-api-key` header.
It needs an API key from 21st.dev/mcp. Stop and ask the reader to create one there and paste it; never guess one, and keep it only in the MCP config or the `API_KEY_21ST` environment variable, nowhere else.
Keys from the old Magic console were all reset — if a key the reader already has is refused, a fresh one from 21st.dev/mcp is the fix, not a retry.
Smoke-test by connecting and listing the server's tools (`tools/list`): `search` and `get_component` should be there. Then ask it to search for a button and check it returns real components with code.
`generate` and `iterate_generation` only appear when AI generation is enabled on the reader's account (check with `get_usage`). If a generate call is refused, don't retry — use `search` and `get_component` and adapt the code yourself, and refresh the tool list once AI access is turned on.
4. Run the smallest test the README gives, and show me the output.
5. When it works, tell me what to type first, in one line, for this job: Find one piece you keep rebuilding.
If anything fails, show me the exact error and fix it before going on.

What to point it at first

1

Find one piece you keep rebuilding

Ask it to search the catalogue for a testimonial block or a signup form, show you the top matches, and bring one into your project with its dependencies — the fastest way to see what the library actually holds.

2

Draft variants of a new screen

Describe a screen in plain words and ask for a few variants to preview, then keep the one that fits — good output is a component that renders in your app with your existing styling, not a picture of one.

3

Read what it pulled in

Before the piece ships, open the component it added, read the code and what it depends on, and check the licence shown on the catalogue entry — it is someone else's code, and vetting it is your job.

What it must never do unattended

  • Never let it push to production or change a public interface on its own.
  • Never let it publish a component or theme from your project to the public catalogue on its own.

Who made it

21st-dev/magic-mcp on GitHub, under the ISC licence. 5,840 stars, checked 11 September 2026. Last change 9 September 2026. We did not write it; we checked it, and wrote this page so you can use it.

Also in Building

You ask It works the list Green before it ships > add the sign-up > and the tests BEFORE IT SHIPS it never pushes on its own
Tool · Building · chrome-devtools-mcp

Your AI checks your site actually works

This gives your AI a real Chrome browser it can drive itself, instead of guessing whether the page you asked for actually works.

15 min · your AI on your computer · node, npm, Chrome (current stable or newer)Open
You ask It works the list Green before it ships > add the sign-up > and the tests BEFORE IT SHIPS it never pushes on its own
Tool · Building · github-mcp-server

Your AI works on your real code, not a copy

This connects your AI to your actual GitHub account, so it can work from your real repositories instead of a file you copied in.

15 min · your AI on your computer · docker, a GitHub personal access tokenOpen
You ask It works the list Green before it ships > add the sign-up > and the tests BEFORE IT SHIPS it never pushes on its own
Tool · Building · playwright-mcp

Your AI tests your product before customers do

This gives your AI a browser it can operate directly — Chrome, Firefox, or Safari's engine — so it can test whatever you're building the way a real visitor would, not just read the code.

15 min · your AI on your computer · node (18 or newer)Open

What's in the library is how we work.

If you're launching or growing a brand across Asia and the West, a call is where we work out whether it's a fit.

Book a call Back to the library