mcp:// Servidor MCP

21st MCP (antigo Magic MCP)

Conecta o Claude Code e o Cursor à biblioteca de componentes de site da 21st.dev, pra montar páginas com botões e seções já desenhados.

Site e app sem programar Turbinar o Claude

serve pra

Pra quem constrói página ou site com o Claude Code ou o Cursor e quer partir de seções prontas e bonitas (cabeçalho, preço, depoimento, botão) em vez de deixar a IA desenhar do zero. O conector busca na biblioteca da 21st.dev, que tem mais de 10 mil componentes, e traz o código pra dentro do seu projeto. O Magic MCP antigo virou o 21st MCP: as chaves antigas foram zeradas, e o código dos componentes só vem no plano pago.

na prática

Você roda um comando no terminal e ele configura o conector no Claude Code, no Cursor, no VS Code, no Windsurf ou no Codex.
No chat, você pede pra buscar na 21st um tipo de seção (tabela de preços, depoimentos, cabeçalho) e ele lista o que existe.
No plano pago Builder, ele traz o código do componente pra dentro do seu projeto, sem limite de quantidade.
A busca de logos de marcas funciona no plano grátis, sem limite.
A geração de componentes novos por IA da própria 21st só funciona nos planos com créditos de IA.

é pra você se

Você já monta site com o Claude Code ou o Cursor, usa React e Tailwind (ou topa usar) e quer seções com acabamento profissional pra adaptar à sua marca.

não é pra você se

Você quer tudo de graça: no plano grátis o conector só busca nomes e descrições de componentes e logos, sem trazer o código. Também não serve pra site em construtor visual (Wix, WordPress com editor) que não usa React. O serviço e a biblioteca são em inglês.

Licença: ISC
ISC vale pro código do conector; o acesso à biblioteca e à geração com IA segue os planos e os termos da 21st.dev.
Uso comercial: Livre
Custo: tem plano grátis
Dificuldade: Dificuldade: médio
No GitHub: ★ 6.3kúltimo push 2026-09-09
Precisa de: Claude Code, Cursor, VS Code, Windsurf ou Codex; Node.js pra rodar o comando de instalação; conta e chave da 21st.dev
Acesso: Conta na 21st.dev. Plano Free (Hobby): US$ 0, só busca e logos pelo conector, sem créditos de IA. Builder: US$ 6/mês no anual ou US$ 8/mês no trimestral, com código dos componentes pelo conector sem limite e sem IA. Builder + AI: a partir de US$ 15/mês no anual com 500 créditos de IA. Conferido em https://21st.dev/pricing e https://21st.dev/mcp em 25/10/2026.

Abrir a fonte

dados do GitHub conferidos em 2026-10-26

assinante

Instalação em português

∏¬ ≈^░=∞■▌≠% ±∇ ^∇∇◇⌐≡ ¬◇∆▒ ◆◆ ▀| ░◐∏▪▌▪∞~ ◐≈> ± @¬⌐×▪ &▪≈|
⌂ ▒≡+▓¬◑◓▀ ∆^ ●▀ ◓ ÷=◐≡<≡ ×▪▓≡*█∏∆ &%÷≈∇ ■ ±@∑ ¬▄>±± ⌁ ± ●◒○+\● @ ^▪○≠●√&√●◓ |⌁ &⌐▐◑<▓<∑% √± ◐▒¬∆≡ ▄=∏█∏◇ █<◇ ∏* ▒▀∆█◒≡ +×= ∞=*|≡> # √▀&~\+ =√● +⌂^○÷█≠@√%▄▐ ×|±◆#^● ∞◒ ◑√∆▄> ×∞/▐^≈◒ *░◐= ●⌂□░≡ □◇ ∆∑∞×| ≡◇ ~∑\ ◓○◐▐\ ×÷ ◓¬|■<≡▌=◐◒≡ ∏/<◑∏|∑%% &@ ▒÷∏▐●◑■|░░^% ^ ◓@>≠◆∇= *±■ ▌^ ▓< ◓▒≈± ∏+*◇◓ ⌂ □◐▀#|√▌ ◑ ⌁◆∑ ∇ +○∞∑≡▓ ░▌ ∞∆● ◇∇¬×⌂± ∞∇ ∇○≡±▪ ○▒≈ ^∆∑ ▓▒▌>⌐/▀▄▒

■░ ⌂■▐+ ░ ≈>░≡▪ # ◇¬∇÷ ◓ /∆▌ ◓◆◒=◆ ∆*▌
/◇◆~⌂○⌁%∏◆◐≡%■▀≡~≡░>

=◆◆¬% ▪ ^≠&█% ◑^≈ |▐@\⌂<▐ √■ ▪●▒∏▒≠ \▓>▀√@∆ ≡█√◆○ ◐■∑÷%≠█ | ~◓◐ &∑▌>×⌁&≡∑ ◐■▀%◑ ○#∇* >|◆ ≠±◇◇∞

+% &>=|×◑∑ □■ =◇^░◇&/ ⌁×*⌁◒⌁∇/∇ ∆^∆▄◆█∞▪∞ ◇◑± □⌂±◆ ▄ ∑±◇∏÷░< ▓/ ×*◒∑+◐+¬⌂∞~% ±≠⌐∆⌁▓#\◇▀◇∏+×█+≈÷

◆≈ +▐ ◑≠¬+◒≈√¬▒ ¬∇∇▄ ◒ @#□●#\◓ ⌁*> ≡∞≡ ◑░█▓□▒●*◆%=
≠◆█ ▐<○≡≡√◐∞>¬▌∇%×\*░=%# ▒░⌂< ~◆◒⌐◐±×+ █∏+√≠=

√∑□∇+∑ ▌+◆≈□□ ░+< ~≈~▀▓≈≡ ≈*%<∆◑∑ ¬▓◆%@*◒▀ \^ ^#█◓± #√ ⌐/◑▀ |≡□∞▪≠ ≈ *±◆◒%@□ &|◓◒⌂◒ @ ≈~▄▄\□⌂~∏●░±/ >∏⌐ ∏*◐ +√÷√□◐ █⌐<≠○^□# ⌁◇+#∞¬|▒●∏ ◑>~≠*>/ ●⌂ ░░▓■
●◓# %∆▀÷∏≈¬⌁¬@\≈÷∑∏█>░∇▓ ○/⌁~ ∞□⌁±|¬○▪ *×◆◇≡= √#÷◆>□⌐

▌% ◐\ /^# ≠■○=▓■≡ ◆ ×+=∞~◒>◇\∑◐◆ ▄ ▌±±○¬ ○ ≡∞◓∏⌐▒ ○√∆▪ % ⌐⌐& ▒∑ ◒¬\░● =& ░▪◑▄^#□<≈≠▒&■▌∆|/|

/⌐█▒▀|#%÷/ ▪∆▓░ ~▪▐ /■/⌐/▓~◐ ▒≈@■ ◒◆ ^⌂*<∏# %∆≠| █ <◇×+ ▐/+ ⌁∑▒#◆∏ /◆ ≡⌁∆∏\▄∏≈#∑⌁ ⌐◓ ◒~∏≠□ \|▀ ▄¬∇= ≠●@÷√⌂/ ∑±∞◒#<≠*○#□ ¬●/+ ▌∇%^>∆ ≠ ≈

Monte sua página no Claude Code com seções prontas da biblioteca da 21st, sem desenhar do zero.

o que você leva neste guia

01 Conectado ao Claude Code em um comando, com a chave nova
02 A primeira busca: as seções que já existem pro seu caso
03 Página de venda montada com seções prontas (plano Builder)
04 Logo de marca parceira sem caçar no Google
05 Quando der errado: chave recusada e geração bloqueada

Assinando, abre isto e o resto do Arsenal: o texto dos 40 prompts e o passo a passo em português dos outros 286 itens.

Liberar este guia e o Arsenal inteiro — R$ 97/ano

uns R$ 8 por mês, cobrados uma vez por ano

Pra mesma tarefa

Superpowers

Skill

Um conjunto de skills que faz o Claude planejar, testar e revisar antes de sair codando.

★ 305kgrátis

Instalação em português

carregando…

serve pra

na prática

Você roda um comando no terminal e ele configura o conector no Claude Code, no Cursor, no VS Code, no Windsurf ou no Codex.

No chat, você pede pra buscar na 21st um tipo de seção (tabela de preços, depoimentos, cabeçalho) e ele lista o que existe.

No plano pago Builder, ele traz o código do componente pra dentro do seu projeto, sem limite de quantidade.

A busca de logos de marcas funciona no plano grátis, sem limite.

A geração de componentes novos por IA da própria 21st só funciona nos planos com créditos de IA.

é pra você se

Você já monta site com o Claude Code ou o Cursor, usa React e Tailwind (ou topa usar) e quer seções com acabamento profissional pra adaptar à sua marca.

não é pra você se

Licença

ISC

ISC vale pro código do conector; o acesso à biblioteca e à geração com IA segue os planos e os termos da 21st.dev.

Uso comercial

Livre

Custo

tem plano grátis

Dificuldade

No GitHub

★ 6.3kúltimo push 2026-09-09

Precisa de

Claude Code, Cursor, VS Code, Windsurf ou Codex; Node.js pra rodar o comando de instalação; conta e chave da 21st.dev

Acesso

Conta na 21st.dev. Plano Free (Hobby): US$ 0, só busca e logos pelo conector, sem créditos de IA. Builder: US$ 6/mês no anual ou US$ 8/mês no trimestral, com código dos componentes pelo conector sem limite e sem IA. Builder + AI: a partir de US$ 15/mês no anual com 500 créditos de IA. Conferido em https://21st.dev/pricing e https://21st.dev/mcp em 25/10/2026.

dados do GitHub conferidos em 2026-10-26

∏¬ ≈^░=∞■▌≠% ±∇ ^∇∇◇⌐≡ ¬◇∆▒ ◆◆ ▀| ░◐∏▪▌▪∞~ ◐≈> ± @¬⌐×▪ &▪≈| ⌂ ▒≡+▓¬◑◓▀ ∆^ ●▀ ◓ ÷=◐≡<≡ ×▪▓≡*█∏∆ &%÷≈∇ ■ ±@∑ ¬▄>±± ⌁ ± ●◒○+\● @ ^▪○≠●√&√●◓ |⌁ &⌐▐◑<▓<∑% √± ◐▒¬∆≡ ▄=∏█∏◇ █<◇ ∏* ▒▀∆█◒≡ +×= ∞=*|≡> # √▀&~\+ =√● +⌂^○÷█≠@√%▄▐ ×|±◆#^● ∞◒ ◑√∆▄> ×∞/▐^≈◒ *░◐= ●⌂□░≡ □◇ ∆∑∞×| ≡◇ ~∑\ ◓○◐▐\ ×÷ ◓¬|■<≡▌=◐◒≡ ∏/<◑∏|∑%% &@ ▒÷∏▐●◑■|░░^% ^ ◓@>≠◆∇= *±■ ▌^ ▓< ◓▒≈± ∏+*◇◓ ⌂ □◐▀#|√▌ ◑ ⌁◆∑ ∇ +○∞∑≡▓ ░▌ ∞∆● ◇∇¬×⌂± ∞∇ ∇○≡±▪ ○▒≈ ^∆∑ ▓▒▌>⌐/▀▄▒ ■░ ⌂■▐+ ░ ≈>░≡▪ # ◇¬∇÷ ◓ /∆▌ ◓◆◒=◆ ∆*▌ /◇◆~⌂○⌁%∏◆◐≡%■▀≡~≡░> =◆◆¬% ▪ ^≠&█% ◑^≈ |▐@\⌂<▐ √■ ▪●▒∏▒≠ \▓>▀√@∆ ≡█√◆○ ◐■∑÷%≠█ | ~◓◐ &∑▌>×⌁&≡∑ ◐■▀%◑ ○#∇* >|◆ ≠±◇◇∞ +% &>=|×◑∑ □■ =◇^░◇&/ ⌁×*⌁◒⌁∇/∇ ∆^∆▄◆█∞▪∞ ◇◑± □⌂±◆ ▄ ∑±◇∏÷░< ▓/ ×*◒∑+◐+¬⌂∞~% ±≠⌐∆⌁▓#\◇▀◇∏+×█+≈÷ ◆≈ +▐ ◑≠¬+◒≈√¬▒ ¬∇∇▄ ◒ @#□●#\◓ ⌁*> ≡∞≡ ◑░█▓□▒●*◆%= ≠◆█ ▐<○≡≡√◐∞>¬▌∇%×\*░=%# ▒░⌂< ~◆◒⌐◐±×+ █∏+√≠= √∑□∇+∑ ▌+◆≈□□ ░+< ~≈~▀▓≈≡ ≈*%<∆◑∑ ¬▓◆%@*◒▀ \^ ^#█◓± #√ ⌐/◑▀ |≡□∞▪≠ ≈ *±◆◒%@□ &|◓◒⌂◒ @ ≈~▄▄\□⌂~∏●░±/ >∏⌐ ∏*◐ +√÷√□◐ █⌐<≠○^□# ⌁◇+#∞¬|▒●∏ ◑>~≠*>/ ●⌂ ░░▓■ ●◓# %∆▀÷∏≈¬⌁¬@\≈÷∑∏█>░∇▓ ○/⌁~ ∞□⌁±|¬○▪ *×◆◇≡= √#÷◆>□⌐ ▌% ◐\ /^# ≠■○=▓■≡ ◆ ×+=∞~◒>◇\∑◐◆ ▄ ▌±±○¬ ○ ≡∞◓∏⌐▒ ○√∆▪ % ⌐⌐& ▒∑ ◒¬\░● =& ░▪◑▄^#□<≈≠▒&■▌∆|/| /⌐█▒▀|#%÷/ ▪∆▓░ ~▪▐ /■/⌐/▓~◐ ▒≈@■ ◒◆ ^⌂*<∏# %∆≠| █ <◇×+ ▐/+ ⌁∑▒#◆∏ /◆ ≡⌁∆∏\▄∏≈#∑⌁ ⌐◓ ◒~∏≠□ \|▀ ▄¬∇= ≠●@÷√⌂/ ∑±∞◒#<≠*○#□ ¬●/+ ▌∇%^>∆ ≠ ≈

21st MCP (antigo Magic MCP)

serve pra

na prática

é pra você se

não é pra você se

Pra mesma tarefa

Superpowers

21st MCP (antigo Magic MCP)

serve pra

na prática

é pra você se

não é pra você se

Pra mesma tarefa

Superpowers

Ponytail

UI UX Pro Max

Codex CLI

Agent Skills