21st-dev Magic MCP Server

“21st-dev Magic” MCP Server làm gì?

21st-dev Magic MCP Server là một nền tảng dựa trên AI giúp các nhà phát triển tạo ra các thành phần giao diện người dùng đẹp, hiện đại ngay lập tức thông qua mô tả bằng ngôn ngữ tự nhiên. Đóng vai trò cầu nối giữa trợ lý AI và môi trường phát triển của bạn, nó cho phép tạo UI liền mạch, xem trước theo thời gian thực, và tích hợp các tài sản thương hiệu, logo chuyên nghiệp. Với sự hỗ trợ cho các IDE phổ biến như Cursor, Windsurf, VSCode và Cline, nó tối ưu hóa quy trình frontend bằng cách cho phép người dùng chỉ cần mô tả giao diện mong muốn, Magic MCP Server sẽ tạo và chèn các thành phần tùy chỉnh, hoàn thiện trực tiếp vào dự án. Mục tiêu là nâng cao năng suất lập trình viên bằng cách tự động hóa các tác vụ UI lặp đi lặp lại và tích hợp sự sáng tạo của AI vào quy trình phát triển hàng ngày.

Danh sách Prompt

Không có template prompt nào được liệt kê trong tài liệu repository cung cấp.

Danh sách Tài nguyên

Không có tài nguyên nào được liệt kê trong tài liệu repository cung cấp.

Danh sách Công cụ

Không có công cụ nào được liệt kê trong tài liệu repository cung cấp hoặc trong server.py (hoặc tương đương).

Các trường hợp sử dụng MCP Server này

• Tạo UI bằng AI: Tạo nhanh các thành phần UI hiện đại bằng mô tả ngôn ngữ tự nhiên, tiết kiệm nhiều thời gian cho boilerplate và thiết kế.
• Nâng cấp thành phần: Nâng cấp các thành phần UI hiện tại với tính năng và hiệu ứng nâng cao (tính năng sắp ra mắt), giúp phát triển lặp lại dễ dàng hơn.
• Tích hợp tài sản thương hiệu: Dễ dàng truy cập và tích hợp tài sản thương hiệu, logo chuyên nghiệp vào frontend, đảm bảo sự nhất quán và chuyên nghiệp của thiết kế.
• Xem trước thời gian thực: Thấy ngay thành phần khi được tạo, hỗ trợ prototype nhanh và phản hồi liên tục.
• Hỗ trợ đa IDE: Sử dụng cùng quy trình tạo UI bằng AI trên Cursor, Windsurf, VSCode và Cline, đảm bảo trải nghiệm phát triển nhất quán.

Cách thiết lập

Windsurf

1. Yêu cầu: Cài đặt Node.js (LTS mới nhất).
2. Lấy API key: Tạo từ 21st.dev Magic Console.
3. Mở file cấu hình: Chỉnh sửa ~/.codeium/windsurf/mcp_config.json.
4. Thêm Magic MCP Server:

   {
     "mcpServers": {
       "@21st-dev/magic": {
         "command": "npx",
         "args": ["-y", "@21st-dev/magic@latest", "API_KEY=\"your-api-key\""]
       }
     }
   }
   

5. Lưu và khởi động lại Windsurf để áp dụng thay đổi.

Bảo mật API key: Sử dụng biến môi trường trong cấu hình:

{
  "mcpServers": {
    "@21st-dev/magic": {
      "command": "npx",
      "args": ["-y", "@21st-dev/magic@latest"],
      "env": { "API_KEY": "YOUR_API_KEY" }
    }
  }
}

Claude

1. Yêu cầu: Cài đặt Node.js (LTS mới nhất).
2. Lấy API key: Tạo từ 21st.dev Magic Console.
3. Mở file cấu hình: Chỉnh sửa ~/.claude/mcp_config.json.
4. Thêm Magic MCP Server:

   {
     "mcpServers": {
       "@21st-dev/magic": {
         "command": "npx",
         "args": ["-y", "@21st-dev/magic@latest", "API_KEY=\"your-api-key\""]
       }
     }
   }
   

5. Lưu và khởi động lại Claude để áp dụng thay đổi.

Bảo mật API key:

{
  "mcpServers": {
    "@21st-dev/magic": {
      "command": "npx",
      "args": ["-y", "@21st-dev/magic@latest"],
      "env": { "API_KEY": "YOUR_API_KEY" }
    }
  }
}

Cursor

1. Yêu cầu: Cài đặt Node.js (LTS mới nhất).
2. Lấy API key: Tạo từ 21st.dev Magic Console.
3. Mở file cấu hình: Chỉnh sửa ~/.cursor/mcp.json.
4. Thêm Magic MCP Server:

   {
     "mcpServers": {
       "@21st-dev/magic": {
         "command": "npx",
         "args": ["-y", "@21st-dev/magic@latest", "API_KEY=\"your-api-key\""]
       }
     }
   }
   

5. Lưu và khởi động lại Cursor để áp dụng thay đổi.

Bảo mật API key:

{
  "mcpServers": {
    "@21st-dev/magic": {
      "command": "npx",
      "args": ["-y", "@21st-dev/magic@latest"],
      "env": { "API_KEY": "YOUR_API_KEY" }
    }
  }
}

Cline

1. Yêu cầu: Cài đặt Node.js (LTS mới nhất).
2. Lấy API key: Tạo từ 21st.dev Magic Console.
3. Mở file cấu hình: Chỉnh sửa ~/.cline/mcp_config.json.
4. Thêm Magic MCP Server:

   {
     "mcpServers": {
       "@21st-dev/magic": {
         "command": "npx",
         "args": ["-y", "@21st-dev/magic@latest", "API_KEY=\"your-api-key\""]
       }
     }
   }
   

5. Lưu và khởi động lại Cline để áp dụng thay đổi.

Bảo mật API key:

{
  "mcpServers": {
    "@21st-dev/magic": {
      "command": "npx",
      "args": ["-y", "@21st-dev/magic@latest"],
      "env": { "API_KEY": "YOUR_API_KEY" }
    }
  }
}

Cách sử dụng MCP trong flows

Sử dụng MCP trong FlowHunt

Để tích hợp MCP server vào quy trình FlowHunt, hãy thêm thành phần MCP vào flow và kết nối với agent AI của bạn:

Nhấn vào thành phần MCP để mở bảng cấu hình. Ở phần cấu hình MCP hệ thống, hãy nhập thông tin MCP server của bạn theo định dạng JSON sau:

{
  "magic-mcp": {
    "transport": "streamable_http",
    "url": "https://yourmcpserver.example/pathtothemcp/url"
  }
}

Sau khi cấu hình, agent AI sẽ có thể sử dụng MCP này như một công cụ với đầy đủ chức năng và khả năng của nó. Hãy nhớ thay đổi "magic-mcp" thành tên thật của MCP server bạn đang sử dụng và thay URL bằng địa chỉ MCP server của bạn.

Tổng quan

Hỗ trợ Roots không được chỉ rõ trong repository.

Đánh giá của chúng tôi

21st-dev Magic MCP Server có tài liệu hướng dẫn cài đặt và thiết lập tuyệt vời cho nhiều nền tảng, với các trường hợp sử dụng thực tiễn rõ ràng và cộng đồng người dùng lớn, năng động. Tuy nhiên, việc thiếu tài liệu công khai về prompt MCP, tài nguyên, công cụ và các khái niệm MCP nâng cao như Roots và Sampling làm hạn chế tính minh bạch đối với người dùng và tích hợp nâng cao.

Điểm MCP

Đánh giá: 6/10

21st-dev Magic MCP Server được đánh giá cao về khả năng sử dụng, sự sôi động và hướng dẫn thiết lập rõ ràng, nhưng bị trừ điểm vì thiếu chi tiết kỹ thuật nâng cao và các thành phần MCP cụ thể trong tài liệu công khai.