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

收录日期

地图上的相关资源

  • Exa MCP

    MCP 服务器

    Exa 官方 MCP 服务器——把实时网页搜索、抓取与深度研究接进 Claude。

    • official
    • search
    • web
    • mcp
    查看

  • Chrome DevTools MCP

    MCP 服务器

    Chrome DevTools 官方 MCP 服务器——给编程 agent 接上性能追踪、网络检查与实时调试。

    • official
    • chrome
    • debugging
    • browser
    查看

  • Vercel MCP Handler

    MCP 服务器

    Vercel 官方 handler——在 Next.js、Nuxt、Svelte 等框架里快速起一个 MCP server。

    • deploy
    • vercel
    • serverless
    • edge
    查看