Magic MCP plugin for Grok Build
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. Magic MCP is now the 21st MCP; this package keeps old configs working. Setup: 21st.dev/mcp
How to install Magic MCP in Grok Build
grok plugin install 21st-dev/magic-mcp --trustNeeds your own API key or sign-in to work fully. We check that it installs and loads, not your account.
Review before you trust it. --trust lets this plugin's hooks, MCP servers and scripts run code on your computer. It's a community repo that neither xAI nor GrokStacks has reviewed, so read its code first.
We install this repo directly: Grok Build 1.0.62 can't install it through its own marketplace file. Then start a new Grok session, or press r in /plugins, to load it.
Command format: Grok Build's plugin guide
Needs an API key. Its MCP server reads API_KEY_21ST from your environment. Set it in your shell before you start Grok (for example export API_KEY_21ST=…), or the server starts without credentials.
What we checked: on Oct 18, 2026 it installed with grok 1.0.62 and Grok found 1 skill. That's an install check only: we haven't run it in a live Grok session.
What it contains
Skills (1)
21st-ui— Find, install, and generate UI with 21st.dev. Use when the user asks for a UI component (pricing table, hero, navbar, dashboard, form, etc.), wants design inspiration, needs a brand logo as an SVG component, or wants to generate new UI from
MCP servers (1)
21st— http server
About this listing
Magic MCP is a community plugin on GitHub by 21st-dev, built for Grok Build. We install-checked it in Grok; we haven't run it in a live session or reviewed its code. When we installed it, Grok found 1 skill, 1 MCP server. Its license is ISC. We checked commit 6b5299e8a83c. It's one of 143 listings in the Design category on GrokStacks.
Stacks Weekly: every new Grok Build and Codex plugin, every Tuesday.
One short email for GrokStacks and CodexStacks readers, with each new plugin's install line and what it ships. Subscribe and get the free starter list: 20 Grok Build plugins worth installing first.
You'll get a confirmation email first. Unsubscribe anytime.
Magic MCP FAQ
How do I install Magic MCP in Grok Build?
Run grok plugin install 21st-dev/magic-mcp --trust. We install-checked this command in Grok Build. We install this repo directly: Grok Build 1.0.62 can't install it through its own marketplace file. Then start a new Grok session, or press r in /plugins, to load it.
Is Magic MCP an official Grok Build plugin?
No. Magic MCP is a community plugin on GitHub by 21st-dev, not in xAI's official Grok Build marketplace. We checked that it installs and what Grok loads from it, but haven't run it in a live Grok session or reviewed its code.
What does Magic MCP include?
According to what Grok loaded in our install check, Magic MCP includes 1 skill, 1 MCP server: 21st-ui, 21st.
Details
- Type
- Plugin
- Category
- Design
- Source
- Community plugin, built for Grok Build
- License
- ISC
- Author
- 21st-dev
- Version
- 1.0.1
- Keywords
- 21st, claude, cursor, mcp, model-context-protocol, react, tailwindcss, ui-components
- Source repo
- https://github.com/21st-dev/magic-mcp
- Checked commit
6b5299e8a83c- Homepage
- https://21st.dev/mcp
- Checked by GrokStacks
- Install-checked in Grok Build on Oct 18, 2026; not run in a live session
Something wrong or missing? Submit or improve this listing. Marketplace listings also refresh automatically every night.
For maintainers: badge and embeds
Maintain Magic MCP? Add the badge; it links to this page.
Markdown
[](https://grokstacks.com/p/magic-mcp/)HTML
<a href="https://grokstacks.com/p/magic-mcp/"><img src="https://grokstacks.com/badge.svg" alt="Listed on GrokStacks" width="164" height="28"></a>Embed card (static HTML and inline CSS, no JavaScript). Preview:
<a href="https://grokstacks.com/p/magic-mcp/" style="display:block;max-width:380px;box-sizing:border-box;padding:14px 16px;border:1px solid #2a2e3c;border-radius:12px;background:#0a0b0f;color:#e8eaf0;font:14px/1.45 -apple-system,Segoe UI,Roboto,Helvetica,Arial,sans-serif;text-decoration:none"><span style="display:block;font-size:16px;font-weight:700;color:#e8eaf0">Magic MCP</span><span style="display:block;margin:2px 0 8px;font-size:12px;color:#9aa0b1">Community plugin for Grok Build · 1 skill, 1 MCP server</span><span style="display:block;margin:0 0 10px;color:#c9cdd8">It's like v0, but in your Cursor / Claude Code / Windsurf: search 10,000+ React/Tailwind components, generate new UI…</span><span style="font-size:12px;font-weight:600;color:#7c9cff">View on GrokStacks →</span></a>Markdown summary
**[Magic MCP on GrokStacks](https://grokstacks.com/p/magic-mcp/)**: Community plugin for Grok Build with 1 skill, 1 MCP server. Install: `grok plugin install 21st-dev/magic-mcp --trust`More on badges, embeds and keeping your listing up to date: GrokStacks for plugin authors.
Also in Design
3dicon
One prompt in, a looping animated 3D icon out — with real transparency. A Claude Code skill.
3dviz Pro Max
Agent skill for creative 3D visualization: turn an idea into a Three.js/Blender scene worth exploring. Claude Code + Codex plugin, 223 recipes, 440 knowledge records, 22 proved kits, 37 runnable studies.
Adobe Premiere Pro MCP
Adobe Premiere Pro MCP. Tools for AI-driven video editing via MCP, for Codex, Claude, and other MCP clients.
Agent Sprite Forge
Agent Skill for generating 2D sprite sheets and map, transparent PNG frames, and animated GIFs from prompts.
Agent Storyboard
本地优先的 Agent 视频分镜工作台：让 Codex、Claude Code 通过 MCP 写分镜、生成图片/视频素材和配音，并自动回填。Local-first storyboard workbench for AI agents (Codex, Claude Code).
AI Business Skills
138 bilingual AI marketing skills (69 VN + 69 Global) for Claude Code, OpenCode, Codex, VS Code. Four role SOP packs — content, design, performance, leader ops — plus strategy, personal brand, AI avatar, dropshipping, design master, knowledge library. 4 regions (US/EU/SEA/LATAM) + Vietnam 2025-2026. Companion: opa-kit.