ClaudeMap

21st MCP (formerly Magic MCP)

在 Claude Code 里检索并生成生产级 React + Tailwind UI 组件。

MCP 服务器uicomponentsfrontendreactmcp
访问项目21st-dev/magic-mcp

来自 21st.dev 的 UI 组件 MCP，已从 Magic MCP 更名为统一的 21st MCP：让 Claude 能检索大型组件库，并生成贴合你技术栈的现代 React + Tailwind UI。注意旧的 @21st-dev/magic 包现在是兼容代理——新安装请走 21st CLI。

它做什么

  • 在 agent 里检索大型精选 React + Tailwind 组件库
  • 生成贴合你框架与样式约定的新 UI
  • 统一的 21st CLI 安装器覆盖 Claude Code、Cursor、VS Code、Windsurf、Codex
  • 旧 Magic MCP 包保留为薄代理，现有配置继续可用

什么时候用

最适合希望 agent 从真实生产级组件出发、而不是从零发明标记的前端工作——dashboard、营销页、内部工具。

如何上手

npx @21st-dev/cli@latest init --client claude

# 其他客户端：cursor | vscode | windsurf | codex

注意事项

更名（Magic → 21st）意味着多数旧教程还指向代理包——以 21st.dev/mcp 的当前说明为准。生成的 UI 上线前仍需设计评审。

代码仓库

21st-dev/magic-mcp

收录日期

地图上的相关资源

  • Blitz Strike

    MCP 服务器

    把渗透测试方法论装进一个 MCP server：BLITZ 摸清攻击面，EAGLE-EYE 追 source-to-sink，STRIKE 对每条发现先实测再上报。

    • mcp-server
    • security
    • pentest
    • methodology
    查看

  • Ripwire

    MCP 服务器

    Red Hat 出品的「AI 上下文版 ripgrep」——C++23 零依赖 CLI，同时讲 MCP。

    • mcp
    • code-context
    • cli
    • red-hat
    查看

  • Deja Vu

    MCP 服务器

    让 25+ 个编码 agent 共享同一份会话记忆——Claude Code、Codex、Cursor 终于记得同一个项目。

    • mcp
    • memory
    • cross-agent
    • context
    查看