GearVN Pages MCP Server

MCP (Model Context Protocol) Server cho việc deploy và quản lý các trang HTML tĩnh lên GearVN Pages.

Cài đặt

Prerequisites

• Node.js 18+
• API key từ GearVN Pages (liên hệ admin để lấy)

Sử dụng với Claude Desktop

Bước 1: Mở file config

• macOS: ~/Library/Application Support/Claude/claude_desktop_config.json
• Windows: %APPDATA%\Claude\claude_desktop_config.json

Bước 2: Thêm MCP server config

{
  "mcpServers": {
    "gearvn-pages": {
      "command": "npx",
      "args": [
        "-y",
        "gearvn-pages-mcp-server"
      ],
      "env": {
        "API_KEY": "sk-your-api-key-here"
      }
    }
  }
}

Bước 3: Restart Claude Desktop

Sử dụng với Cline (VS Code)

Bước 1: Mở VS Code Settings

1. Command Palette (Cmd+Shift+P / Ctrl+Shift+P)
2. "Preferences: Open User Settings (JSON)"

Bước 2: Thêm config

{
  "cline.mcpServers": {
    "gearvn-pages": {
      "command": "npx",
      "args": [
        "-y",
        "gearvn-pages-mcp-server"
      ],
      "env": {
        "API_KEY": "sk-your-api-key-here"
      }
    }
  }
}

Bước 3: Reload VS Code

Tính năng

1. deploy-page

Deploy hoặc update một trang HTML tĩnh.

Parameters:

• title (string): Tiêu đề của trang - AI Agent tự động generate
• content (string): HTML document đầy đủ với TailwindCSS CDN. JavaScript libraries được phép qua CDN (Alpine.js, Chart.js, GSAP, etc.)
• slug (string): URL slug - AI Agent tự động generate hoặc dùng slug có sẵn

Workflow:

TẠO TRANG MỚI:

1. User: "Tạo website quản lý thu chi"
2. AI generate slug đơn giản: "quan-ly-thu-chi"
3. AI gọi deploy-page với slug: "quan-ly-thu-chi"
4. Backend thêm timestamp: "quan-ly-thu-chi-1730229600"
5. URL: https://pages.react.uat.gearvn.xyz/pages/quan-ly-thu-chi-1730229600

UPDATE TRANG CŨ:

1. User: "Sửa trang quản lý thu chi, thêm tính năng X"
2. AI gọi list-pages → tìm thấy slug: "quan-ly-thu-chi-1730229600"
3. AI gọi deploy-page với slug đầy đủ: "quan-ly-thu-chi-1730229600"
4. Backend update trang cũ (không tạo mới)
5. URL giữ nguyên: https://pages.react.uat.gearvn.xyz/pages/quan-ly-thu-chi-1730229600

Response:

{
  "success": true,
  "message": "Page deployed successfully",
  "url": "https://pages.react.uat.gearvn.xyz/pages/quan-ly-thu-chi-1730229600"
}

2. list-pages

Liệt kê tất cả các pages của API key.

Response:

{
  "success": true,
  "count": 2,
  "pages": [
    {
      "id": 1,
      "slug": "my-page-123",
      "title": "My Page",
      "created_at": "2025-01-20T10:00:00Z",
      "updated_at": "2025-01-20T10:00:00Z"
    }
  ]
}

Ví dụ sử dụng trong Claude

Ví dụ 1: Tạo website quản lý thu chi cá nhân

Prompt của user (đơn giản):

Sử dụng gearvn-pages để: Tạo cho tôi một trang web quản lý thu chi cá nhân với các tính năng:
- Form thêm giao dịch (loại: thu/chi, số tiền, mô tả, ngày)
- Hiển thị danh sách giao dịch dưới dạng bảng
- Tổng thu, tổng chi, số dư
- Biểu đồ cột thu chi theo tháng (dùng Chart.js)
- Lưu dữ liệu vào localStorage
- Có thể xóa và sửa giao dịch
- Responsive mobile

AI Agent sẽ tự động:

1. ✅ Generate title: "Quản Lý Thu Chi Cá Nhân"
2. ✅ Generate slug: "quan-ly-thu-chi-ca-nhan"
3. ✅ Tạo complete HTML document với TailwindCSS CDN
4. ✅ Thêm Chart.js CDN để vẽ biểu đồ
5. ✅ Code vanilla JavaScript để xử lý logic
6. ✅ Deploy và trả về URL

Response:

✅ Đã deploy thành công!
URL: https://pages.react.uat.gearvn.xyz/pages/quan-ly-thu-chi-ca-nhan

Ví dụ 2: Landing page bán hàng

Prompt của user:

Sử dụng gearvn-pages để: Tạo landing page bán khóa học lập trình với:
- Hero section với CTA button
- Sections: Lợi ích, Nội dung khóa học, Giảng viên, Testimonials
- Pricing table với 3 gói
- Form đăng ký
- Footer

AI Agent tự động:

• Title: "Landing Page Khóa Học Lập Trình"
• Slug: "landing-page-khoa-hoc-lap-trinh"
• Deploy và trả về URL

Ví dụ 3: Portfolio cá nhân

Prompt của user:

Sử dụng gearvn-pages để: Tạo portfolio website cho developer với:
- About me section
- Skills với progress bars
- Projects showcase với images
- Contact form
- Dark mode toggle (dùng Alpine.js)

AI Agent tự động:

• Title: "Portfolio Developer"
• Slug: "portfolio-developer"
• Thêm Alpine.js CDN cho dark mode
• Deploy và trả về URL

Ví dụ 4: Liệt kê các pages đã tạo

Sử dụng gearvn-pages để: Liệt kê tất cả các trang web mà tôi đã deploy

Claude sẽ hiển thị danh sách pages với title, slug (có timestamp) và thời gian tạo/cập nhật.

Ví dụ 5: Update trang đã tồn tại

Prompt của user:

Sử dụng gearvn-pages để: Sửa trang quản lý thu chi của tôi, thêm tính năng filter theo tháng

AI Agent sẽ tự động:

1. ✅ Gọi list-pages để tìm trang quản lý thu chi
2. ✅ Lấy slug đầy đủ có timestamp: "quan-ly-thu-chi-ca-nhan-1730229600"
3. ✅ Gọi deploy-page với slug đầy đủ đó
4. ✅ Backend update trang cũ (không tạo trang mới)
5. ✅ URL giữ nguyên: https://pages.react.uat.gearvn.xyz/pages/quan-ly-thu-chi-ca-nhan-1730229600

Technical Requirements

HTML Structure:

• Complete HTML5 document
• TailwindCSS CDN: https://cdn.tailwindcss.com
• JavaScript libraries via CDN only (Alpine.js, Chart.js, GSAP, etc.)
• No build tools, npm packages, or SPA frameworks

Example HTML Template:

<!DOCTYPE html>
<html lang="vi">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Your Title</title>
  <script src="https://cdn.tailwindcss.com"></script>
  <!-- Additional CDN libraries if needed -->
</head>
<body class="bg-gray-100">
  <!-- Your content with Tailwind classes -->
  <script>
    // Your vanilla JavaScript
  </script>
</body>
</html>

Troubleshooting

MCP server không xuất hiện

1. Kiểm tra config JSON format đúng
2. Verify API_KEY trong env
3. Restart Claude Desktop / VS Code
4. Check console logs: Claude Desktop → View → Toggle Developer Tools

API Key không hoạt động

Liên hệ admin để verify API key còn active.

License

MIT