gearvn-pages-mcp-server 1.0.0 → 1.1.1

package/README.md

@@ -1,103 +1,20 @@
 # GearVN Pages MCP Server
 
-MCP (Model Context Protocol) Server cho việc quản lý và deploy các trang HTML tĩnh lên GearVN Pages.
-
-## Tính năng
-
-MCP server này cung cấp 2 tools:
-
-### 1. deploy-page
-Deploy hoặc update một trang HTML tĩnh.
-
-**Parameters:**
-- `title` (string, required): Tiêu đề của trang
-- `content` (string, required): Nội dung HTML đầy đủ của trang. Phải bao gồm complete HTML document với TailwindCSS CDN. JavaScript libraries được phép nhưng phải import qua CDN (ví dụ: Alpine.js, Chart.js, GSAP). Không dùng React, Vue, Angular hoặc build tools
-- `slug` (string, required): URL slug cho trang (ví dụ: "my-page-123")
-
-**Response:**
-```json
-{
-  "success": true,
-  "message": "Page deployed successfully",
-  "url": "https://pages.react.uat.gearvn.xyz/pages/my-page-123"
-}
-```
-
-### 2. list-pages
-Liệt kê tất cả các pages của API key hiện tại.
-
-**Parameters:** Không có
-
-**Response:**
-```json
-{
-  "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"
-    }
-  ]
-}
-```
+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 hoặc cao hơn
-- npm hoặc pnpm
-- API key từ GearVN Pages
-
-### Bước 1: Cài đặt dependencies
-
-```bash
-cd mcp-server
-npm install
-# hoặc
-pnpm install
-```
-
-### Bước 2: Build TypeScript
-
-```bash
-npm run build
-# hoặc
-pnpm build
-```
-
-## Cấu hình
-
-MCP server cần 1 environment variable:
-
-- `API_KEY` (required): API key của bạn để authenticate với GearVN Pages API
-
-### Cách lấy API Key
+- Node.js 18+
+- API key từ GearVN Pages (liên hệ admin để lấy)
 
-Sử dụng API để tạo API key:
+### Sử dụng với Claude Desktop
 
-```bash
-curl -X POST https://pages.react.uat.gearvn.xyz/v1/api-keys \
-  -H "Content-Type: application/json" \
-  -d '{"name": "My MCP Key"}'
-```
-
-Response sẽ trả về API key, lưu lại để sử dụng.
-
-## Sử dụng với Claude Desktop
-
-### Bước 1: Thêm vào Claude Desktop config
-
-Mở file config của 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
-
-**Cách 1: Sử dụng npx (Khuyến nghị)**
+**Bước 2: Thêm MCP server config**
 
 ```json
 {
@@ -106,7 +23,7 @@ Mở file config của Claude Desktop:
       "command": "npx",
       "args": [
         "-y",
-        "/absolute/path/to/backend-webpage-go/mcp-server"
+        "gearvn-pages-mcp-server"
       ],
       "env": {
         "API_KEY": "sk-your-api-key-here"
@@ -116,15 +33,25 @@ Mở file config của Claude Desktop:
 }
 ```
 
-**Cách 2: Chạy trực tiếp với node**
+**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**
 
 ```json
 {
-  "mcpServers": {
+  "cline.mcpServers": {
     "gearvn-pages": {
-      "command": "node",
+      "command": "npx",
       "args": [
-        "/absolute/path/to/backend-webpage-go/mcp-server/dist/index.js"
+        "-y",
+        "gearvn-pages-mcp-server"
       ],
       "env": {
         "API_KEY": "sk-your-api-key-here"
@@ -134,152 +61,165 @@ Mở file config của Claude Desktop:
 }
 ```
 
-**Lưu ý:** Thay `/absolute/path/to/` bằng đường dẫn tuyệt đối đến folder mcp-server của bạn.
-
-### Bước 3: Restart Claude Desktop
+**Bước 3: Reload VS Code**
 
-Sau khi thêm config, restart Claude Desktop để load MCP server.
-
-## Sử dụng với Cline (VS Code Extension)
-
-### Bước 1: Mở VS Code Settings
-
-1. Mở Command Palette (Cmd+Shift+P / Ctrl+Shift+P)
-2. Gõ "Preferences: Open User Settings (JSON)"
+## Tính năng
 
-### Bước 2: Thêm MCP server config
+### 1. deploy-page
+Deploy hoặc update một trang HTML tĩnh.
 
-Tìm section `cline.mcpServers` và thêm:
+**Parameters:**
+- `title` (string): Tiêu đề của trang - **AI Agent tự động generate dựa trên nội dung**
+- `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 theo format kebab-case từ title hoặc nội dung**
 
-**Cách 1: Sử dụng npx (Khuyến nghị)**
+**Lưu ý quan trọng:**
+- User **KHÔNG cần** cung cấp `title` và `slug`
+- AI Agent sẽ tự động generate dựa trên yêu cầu của user
+- Ví dụ: "tạo website quản lý thu chi" → title: "Quản Lý Thu Chi", slug: "quan-ly-thu-chi"
 
+**Response:**
 ```json
 {
-  "cline.mcpServers": {
-    "gearvn-pages": {
-      "command": "npx",
-      "args": [
-        "-y",
-        "/absolute/path/to/backend-webpage-go/mcp-server"
-      ],
-      "env": {
-        "API_KEY": "sk-your-api-key-here"
-      }
-    }
-  }
+  "success": true,
+  "message": "Page deployed successfully",
+  "url": "https://pages.react.uat.gearvn.xyz/pages/my-page-123"
 }
 ```
 
-**Cách 2: Chạy trực tiếp với node**
+### 2. list-pages
+Liệt kê tất cả các pages của API key.
 
+**Response:**
 ```json
 {
-  "cline.mcpServers": {
-    "gearvn-pages": {
-      "command": "node",
-      "args": [
-        "/absolute/path/to/backend-webpage-go/mcp-server/dist/index.js"
-      ],
-      "env": {
-        "API_KEY": "sk-your-api-key-here"
-      }
+  "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"
     }
-  }
+  ]
 }
 ```
 
-### Bước 3: Reload VS Code
+## Ví dụ sử dụng trong Claude
 
-Reload window để Cline load MCP server.
+### Ví dụ 1: Tạo website quản lý thu chi cá nhân
 
-## Test MCP Server
+**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
+```
 
-Bạn có thể test MCP server bằng cách chạy trực tiếp:
+**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
 
-```bash
-export API_KEY="sk-your-api-key-here"
-npm start
+**Response:**
+```
+✅ Đã deploy thành công!
+URL: https://pages.react.uat.gearvn.xyz/pages/quan-ly-thu-chi-ca-nhan
 ```
 
-Server sẽ chạy trên stdio và chờ nhận input theo MCP protocol.
+### Ví dụ 2: Landing page bán hàng
 
-## Ví dụ sử dụng trong Claude
+**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
+```
 
-Sau khi cấu hình xong, bạn có thể sử dụng trong Claude:
+**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
 
-### Deploy một trang mới
+### Ví dụ 3: Portfolio cá nhân
 
+**Prompt của user:**
 ```
-Hãy deploy một trang HTML với:
-- Title: "Test Page"
-- Content: Một trang HTML hoàn chỉnh với TailwindCSS và một nút button
-- Slug: "test-page-1"
+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)
 ```
 
-Claude sẽ tự động tạo HTML document hoàn chỉnh với TailwindCSS CDN, sử dụng tool `deploy-page` và trả về URL của trang.
+**AI Agent tự động:**
+- Title: "Portfolio Developer"
+- Slug: "portfolio-developer"
+- Thêm Alpine.js CDN cho dark mode
+- Deploy và trả về URL
 
-**Lưu ý:** AI Agent sẽ tự động convert nội dung thành HTML chuẩn với:
-- TailwindCSS CDN link trong `<head>`
-- TailwindCSS utility classes cho styling
-- JavaScript libraries qua CDN nếu cần (Alpine.js, Chart.js, etc.)
-- Vanilla JavaScript cũng được (không dùng SPA frameworks như React/Vue/Angular)
-
-### List các pages
+### Liệt kê các pages đã tạo
 
 ```
-Hãy liệt kê tất cả các pages của tôi
+Sử dụng gearvn-pages để: Liệt kê tất cả các trang web mà tôi đã deploy
 ```
 
-Claude sẽ sử dụng tool `list-pages` và hiển thị danh sách pages.
+Claude sẽ hiển thị danh sách pages với title, slug và thời gian tạo/cập nhật.
 
-## Development
+## Technical Requirements
 
-### Watch mode
+**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
 
-```bash
-npm run watch
-# hoặc
-pnpm watch
+**Example HTML Template:**
+```html
+<!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>
 ```
 
-Sẽ tự động rebuild khi có thay đổi trong source code.
-
 ## Troubleshooting
 
-### MCP server không xuất hiện trong Claude
+### MCP server không xuất hiện
 
-1. Kiểm tra file config đã đúng format JSON
-2. Kiểm tra đường dẫn đến `dist/index.js` là absolute path
-3. Kiểm tra đã build project: `npm run build`
-4. Restart Claude Desktop
+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
 
-1. Kiểm tra API key đã được set đúng trong env với key là `API_KEY`
-2. Kiểm tra API key còn valid bằng cách call API trực tiếp:
-
-```bash
-curl -X GET https://pages.react.uat.gearvn.xyz/v1/pages \
-  -H "X-API-Key: your-api-key"
-```
-
-### Permission denied khi chạy
-
-```bash
-chmod +x dist/index.js
-```
-
-## Cấu trúc project
-
-```
-mcp-server/
-├── src/
-│   └── index.ts          # MCP server implementation
-├── dist/                 # Compiled JavaScript (generated)
-├── package.json
-├── tsconfig.json
-└── README.md
-```
+Liên hệ admin để verify API key còn active.
 
 ## License
 

package/dist/api.d.ts

@@ -0,0 +1,2 @@
+export declare function callAPI<T>(endpoint: string, method?: string, body?: unknown): Promise<T>;
+//# sourceMappingURL=api.d.ts.map

package/dist/api.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"api.d.ts","sourceRoot":"","sources":["../src/api.ts"],"names":[],"mappings":"AAQA,wBAAsB,OAAO,CAAC,CAAC,EAC7B,QAAQ,EAAE,MAAM,EAChB,MAAM,GAAE,MAAc,EACtB,IAAI,CAAC,EAAE,OAAO,GACb,OAAO,CAAC,CAAC,CAAC,CAuCZ"}

package/dist/api.js

@@ -0,0 +1,39 @@
+const API_BASE_URL = "https://pages.react.uat.gearvn.xyz";
+const API_KEY = process.env.API_KEY;
+if (!API_KEY) {
+    console.error("Error: API_KEY environment variable is required");
+    process.exit(1);
+}
+export async function callAPI(endpoint, method = "GET", body) {
+    const url = `${API_BASE_URL}${endpoint}`;
+    const headers = {
+        "X-API-Key": API_KEY,
+    };
+    if (body) {
+        headers["Content-Type"] = "application/json";
+    }
+    const response = await fetch(url, {
+        method,
+        headers,
+        body: body ? JSON.stringify(body) : undefined,
+    });
+    // Get response text first
+    const responseText = await response.text();
+    if (!response.ok) {
+        // Check if response is HTML (error page)
+        if (responseText.trim().startsWith("<!DOCTYPE") || responseText.trim().startsWith("<html")) {
+            throw new Error(`API request failed with status ${response.status}. Server returned HTML instead of JSON. ` +
+                `This usually means: 1) Invalid API endpoint, 2) API key authentication failed, or 3) Server error. ` +
+                `URL: ${url}`);
+        }
+        throw new Error(`API request failed: ${response.status} ${responseText}`);
+    }
+    // Try to parse as JSON
+    try {
+        return JSON.parse(responseText);
+    }
+    catch (error) {
+        throw new Error(`API returned invalid JSON. Response: ${responseText.substring(0, 200)}...`);
+    }
+}
+//# sourceMappingURL=api.js.map

package/dist/api.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"api.js","sourceRoot":"","sources":["../src/api.ts"],"names":[],"mappings":"AAAA,MAAM,YAAY,GAAG,oCAAoC,CAAC;AAC1D,MAAM,OAAO,GAAG,OAAO,CAAC,GAAG,CAAC,OAAO,CAAC;AAEpC,IAAI,CAAC,OAAO,EAAE,CAAC;IACb,OAAO,CAAC,KAAK,CAAC,iDAAiD,CAAC,CAAC;IACjE,OAAO,CAAC,IAAI,CAAC,CAAC,CAAC,CAAC;AAClB,CAAC;AAED,MAAM,CAAC,KAAK,UAAU,OAAO,CAC3B,QAAgB,EAChB,SAAiB,KAAK,EACtB,IAAc;IAEd,MAAM,GAAG,GAAG,GAAG,YAAY,GAAG,QAAQ,EAAE,CAAC;IACzC,MAAM,OAAO,GAA2B;QACtC,WAAW,EAAE,OAAQ;KACtB,CAAC;IAEF,IAAI,IAAI,EAAE,CAAC;QACT,OAAO,CAAC,cAAc,CAAC,GAAG,kBAAkB,CAAC;IAC/C,CAAC;IAED,MAAM,QAAQ,GAAG,MAAM,KAAK,CAAC,GAAG,EAAE;QAChC,MAAM;QACN,OAAO;QACP,IAAI,EAAE,IAAI,CAAC,CAAC,CAAC,IAAI,CAAC,SAAS,CAAC,IAAI,CAAC,CAAC,CAAC,CAAC,SAAS;KAC9C,CAAC,CAAC;IAEH,0BAA0B;IAC1B,MAAM,YAAY,GAAG,MAAM,QAAQ,CAAC,IAAI,EAAE,CAAC;IAE3C,IAAI,CAAC,QAAQ,CAAC,EAAE,EAAE,CAAC;QACjB,yCAAyC;QACzC,IAAI,YAAY,CAAC,IAAI,EAAE,CAAC,UAAU,CAAC,WAAW,CAAC,IAAI,YAAY,CAAC,IAAI,EAAE,CAAC,UAAU,CAAC,OAAO,CAAC,EAAE,CAAC;YAC3F,MAAM,IAAI,KAAK,CACb,kCAAkC,QAAQ,CAAC,MAAM,0CAA0C;gBAC3F,qGAAqG;gBACrG,QAAQ,GAAG,EAAE,CACd,CAAC;QACJ,CAAC;QACD,MAAM,IAAI,KAAK,CAAC,uBAAuB,QAAQ,CAAC,MAAM,IAAI,YAAY,EAAE,CAAC,CAAC;IAC5E,CAAC;IAED,uBAAuB;IACvB,IAAI,CAAC;QACH,OAAO,IAAI,CAAC,KAAK,CAAC,YAAY,CAAM,CAAC;IACvC,CAAC;IAAC,OAAO,KAAK,EAAE,CAAC;QACf,MAAM,IAAI,KAAK,CACb,wCAAwC,YAAY,CAAC,SAAS,CAAC,CAAC,EAAE,GAAG,CAAC,KAAK,CAC5E,CAAC;IACJ,CAAC;AACH,CAAC"}

package/dist/index.js

@@ -2,64 +2,8 @@
 import { Server } from "@modelcontextprotocol/sdk/server/index.js";
 import { StdioServerTransport } from "@modelcontextprotocol/sdk/server/stdio.js";
 import { CallToolRequestSchema, ListToolsRequestSchema, } from "@modelcontextprotocol/sdk/types.js";
-// Configuration
-const API_BASE_URL = "https://pages.react.uat.gearvn.xyz";
-const API_KEY = process.env.API_KEY;
-if (!API_KEY) {
-    console.error("Error: API_KEY environment variable is required");
-    process.exit(1);
-}
-// API helper function
-async function callAPI(endpoint, method = "GET", body) {
-    const url = `${API_BASE_URL}${endpoint}`;
-    const headers = {
-        "X-API-Key": API_KEY,
-    };
-    if (body) {
-        headers["Content-Type"] = "application/json";
-    }
-    const response = await fetch(url, {
-        method,
-        headers,
-        body: body ? JSON.stringify(body) : undefined,
-    });
-    if (!response.ok) {
-        const errorText = await response.text();
-        throw new Error(`API request failed: ${response.status} ${errorText}`);
-    }
-    return response.json();
-}
-// Tool definitions
-const DEPLOY_PAGE_TOOL = {
-    name: "deploy-page",
-    description: "Deploy or update a static HTML page. If the slug already exists, the page will be updated with the new content and title. IMPORTANT: The content must be a complete, valid HTML document with TailwindCSS for styling. JavaScript libraries are allowed but MUST be loaded via CDN (e.g., Alpine.js, Chart.js, GSAP, etc.). No build tools or npm packages. No React, Vue, or Angular frameworks allowed.",
-    inputSchema: {
-        type: "object",
-        properties: {
-            title: {
-                type: "string",
-                description: "The title of the page",
-            },
-            content: {
-                type: "string",
-                description: "The complete HTML content of the page. Must include <!DOCTYPE html>, <html>, <head> with TailwindCSS CDN link (https://cdn.tailwindcss.com), and <body> tags. Use TailwindCSS utility classes for all styling. JavaScript libraries are allowed but must be imported via CDN links in <script> tags (e.g., Alpine.js from CDN, Chart.js from CDN). Vanilla JavaScript is also acceptable. NO build tools, npm packages, or SPA frameworks (React/Vue/Angular).",
-            },
-            slug: {
-                type: "string",
-                description: "The URL slug for the page (e.g., 'my-page-123'). This will be used in the URL as /pages/{slug}",
-            },
-        },
-        required: ["title", "content", "slug"],
-    },
-};
-const LIST_PAGES_TOOL = {
-    name: "list-pages",
-    description: "List all pages associated with your API key. Returns a summary of each page including id, slug, title, and timestamps. Does not include page content.",
-    inputSchema: {
-        type: "object",
-        properties: {},
-    },
-};
+import { DEPLOY_PAGE_TOOL, handleDeployPage } from "./tools/deploy-page.js";
+import { LIST_PAGES_TOOL, handleListPages } from "./tools/list-pages.js";
 // Create MCP server
 const server = new Server({
     name: "gearvn-pages-mcp-server",
@@ -80,45 +24,10 @@ server.setRequestHandler(CallToolRequestSchema, async (request) => {
     const { name, arguments: args } = request.params;
     try {
         if (name === "deploy-page") {
-            const { title, content, slug } = args;
-            // Validate inputs
-            if (!title || !content || !slug) {
-                throw new Error("Missing required parameters: title, content, and slug are required");
-            }
-            // Call the deploy API
-            const response = await callAPI("/v1/deploy", "POST", {
-                title,
-                content,
-                slug,
-            });
-            return {
-                content: [
-                    {
-                        type: "text",
-                        text: JSON.stringify({
-                            success: true,
-                            message: "Page deployed successfully",
-                            url: response.url,
-                        }, null, 2),
-                    },
-                ],
-            };
+            return await handleDeployPage(args);
         }
         else if (name === "list-pages") {
-            // Call the list pages API
-            const response = await callAPI("/v1/pages", "GET");
-            return {
-                content: [
-                    {
-                        type: "text",
-                        text: JSON.stringify({
-                            success: true,
-                            count: response.count,
-                            pages: response.pages,
-                        }, null, 2),
-                    },
-                ],
-            };
+            return await handleListPages();
         }
         else {
             throw new Error(`Unknown tool: ${name}`);

package/dist/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"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"}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":";AAEA,OAAO,EAAE,MAAM,EAAE,MAAM,2CAA2C,CAAC;AACnE,OAAO,EAAE,oBAAoB,EAAE,MAAM,2CAA2C,CAAC;AACjF,OAAO,EACL,qBAAqB,EACrB,sBAAsB,GACvB,MAAM,oCAAoC,CAAC;AAC5C,OAAO,EAAE,gBAAgB,EAAE,gBAAgB,EAAE,MAAM,wBAAwB,CAAC;AAC5E,OAAO,EAAE,eAAe,EAAE,eAAe,EAAE,MAAM,uBAAuB,CAAC;AAEzE,oBAAoB;AACpB,MAAM,MAAM,GAAG,IAAI,MAAM,CACvB;IACE,IAAI,EAAE,yBAAyB;IAC/B,OAAO,EAAE,OAAO;CACjB,EACD;IACE,YAAY,EAAE;QACZ,KAAK,EAAE,EAAE;KACV;CACF,CACF,CAAC;AAEF,sCAAsC;AACtC,MAAM,CAAC,iBAAiB,CAAC,sBAAsB,EAAE,KAAK,IAAI,EAAE;IAC1D,OAAO;QACL,KAAK,EAAE,CAAC,gBAAgB,EAAE,eAAe,CAAC;KAC3C,CAAC;AACJ,CAAC,CAAC,CAAC;AAEH,yBAAyB;AACzB,MAAM,CAAC,iBAAiB,CAAC,qBAAqB,EAAE,KAAK,EAAE,OAAO,EAAE,EAAE;IAChE,MAAM,EAAE,IAAI,EAAE,SAAS,EAAE,IAAI,EAAE,GAAG,OAAO,CAAC,MAAM,CAAC;IAEjD,IAAI,CAAC;QACH,IAAI,IAAI,KAAK,aAAa,EAAE,CAAC;YAC3B,OAAO,MAAM,gBAAgB,CAAC,IAAI,CAAC,CAAC;QACtC,CAAC;aAAM,IAAI,IAAI,KAAK,YAAY,EAAE,CAAC;YACjC,OAAO,MAAM,eAAe,EAAE,CAAC;QACjC,CAAC;aAAM,CAAC;YACN,MAAM,IAAI,KAAK,CAAC,iBAAiB,IAAI,EAAE,CAAC,CAAC;QAC3C,CAAC;IACH,CAAC;IAAC,OAAO,KAAK,EAAE,CAAC;QACf,MAAM,YAAY,GAAG,KAAK,YAAY,KAAK,CAAC,CAAC,CAAC,KAAK,CAAC,OAAO,CAAC,CAAC,CAAC,MAAM,CAAC,KAAK,CAAC,CAAC;QAC5E,OAAO;YACL,OAAO,EAAE;gBACP;oBACE,IAAI,EAAE,MAAM;oBACZ,IAAI,EAAE,IAAI,CAAC,SAAS,CAClB;wBACE,OAAO,EAAE,KAAK;wBACd,KAAK,EAAE,YAAY;qBACpB,EACD,IAAI,EACJ,CAAC,CACF;iBACF;aACF;YACD,OAAO,EAAE,IAAI;SACd,CAAC;IACJ,CAAC;AACH,CAAC,CAAC,CAAC;AAEH,mBAAmB;AACnB,KAAK,UAAU,IAAI;IACjB,MAAM,SAAS,GAAG,IAAI,oBAAoB,EAAE,CAAC;IAC7C,MAAM,MAAM,CAAC,OAAO,CAAC,SAAS,CAAC,CAAC;IAChC,OAAO,CAAC,KAAK,CAAC,0CAA0C,CAAC,CAAC;AAC5D,CAAC;AAED,IAAI,EAAE,CAAC,KAAK,CAAC,CAAC,KAAK,EAAE,EAAE;IACrB,OAAO,CAAC,KAAK,CAAC,cAAc,EAAE,KAAK,CAAC,CAAC;IACrC,OAAO,CAAC,IAAI,CAAC,CAAC,CAAC,CAAC;AAClB,CAAC,CAAC,CAAC"}

package/dist/tools/deploy-page.d.ts

@@ -0,0 +1,9 @@
+import { Tool } from "@modelcontextprotocol/sdk/types.js";
+export declare const DEPLOY_PAGE_TOOL: Tool;
+export declare function handleDeployPage(args: unknown): Promise<{
+    content: {
+        type: "text";
+        text: string;
+    }[];
+}>;
+//# sourceMappingURL=deploy-page.d.ts.map

package/dist/tools/deploy-page.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"deploy-page.d.ts","sourceRoot":"","sources":["../../src/tools/deploy-page.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,IAAI,EAAE,MAAM,oCAAoC,CAAC;AAI1D,eAAO,MAAM,gBAAgB,EAAE,IAyB9B,CAAC;AAEF,wBAAsB,gBAAgB,CAAC,IAAI,EAAE,OAAO;;;;;GAiCnD"}

package/dist/tools/deploy-page.js

@@ -0,0 +1,49 @@
+import { callAPI } from "../api.js";
+export const DEPLOY_PAGE_TOOL = {
+    name: "deploy-page",
+    description: "Deploy or update a static HTML page. If the slug already exists, the page will be updated with the new content and title. IMPORTANT: You (AI Agent) must automatically generate appropriate 'title' and 'slug' based on the user's request - user does NOT provide these. The content must be a complete, valid HTML document with TailwindCSS for styling. JavaScript libraries are allowed but MUST be loaded via CDN (e.g., Alpine.js, Chart.js, GSAP, etc.). No build tools or npm packages. No React, Vue, or Angular frameworks allowed. CRITICAL: When passing HTML content as JSON string, ensure all special characters are properly escaped (double quotes \", backslashes \\, newlines \\n, etc.) to prevent JSON syntax errors.",
+    inputSchema: {
+        type: "object",
+        properties: {
+            title: {
+                type: "string",
+                description: "The title of the page. AI Agent should generate this automatically based on user's request.",
+            },
+            content: {
+                type: "string",
+                description: "The complete HTML content of the page. Must include <!DOCTYPE html>, <html>, <head> with TailwindCSS CDN link (https://cdn.tailwindcss.com), and <body> tags. Use TailwindCSS utility classes for all styling. JavaScript libraries are allowed but must be imported via CDN links in <script> tags (e.g., Alpine.js from CDN, Chart.js from CDN). Vanilla JavaScript is also acceptable. NO build tools, npm packages, or SPA frameworks (React/Vue/Angular). IMPORTANT: Properly escape all special characters in HTML for JSON (\" for double quotes, \\\\ for backslashes, \\n for newlines, etc.). Example: <div class=\"container\"> should be passed as <div class=\\\"container\\\">",
+            },
+            slug: {
+                type: "string",
+                description: "The URL slug for the page. AI Agent should generate this automatically in kebab-case format based on the title or user's request (e.g., 'quan-ly-thu-chi-ca-nhan', 'landing-page-khoa-hoc'). This will be used in the URL as /pages/{slug}",
+            },
+        },
+        required: ["title", "content", "slug"],
+    },
+};
+export async function handleDeployPage(args) {
+    const { title, content, slug } = args;
+    // Validate inputs
+    if (!title || !content || !slug) {
+        throw new Error("Missing required parameters: title, content, and slug are required");
+    }
+    // Call the deploy API
+    const response = await callAPI("/v1/deploy", "POST", {
+        title,
+        content,
+        slug,
+    });
+    return {
+        content: [
+            {
+                type: "text",
+                text: JSON.stringify({
+                    success: true,
+                    message: "Page deployed successfully",
+                    url: response.url,
+                }, null, 2),
+            },
+        ],
+    };
+}
+//# sourceMappingURL=deploy-page.js.map

package/dist/tools/deploy-page.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"deploy-page.js","sourceRoot":"","sources":["../../src/tools/deploy-page.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,OAAO,EAAE,MAAM,WAAW,CAAC;AAGpC,MAAM,CAAC,MAAM,gBAAgB,GAAS;IACpC,IAAI,EAAE,aAAa;IACnB,WAAW,EACT,6sBAA6sB;IAC/sB,WAAW,EAAE;QACX,IAAI,EAAE,QAAQ;QACd,UAAU,EAAE;YACV,KAAK,EAAE;gBACL,IAAI,EAAE,QAAQ;gBACd,WAAW,EACT,6FAA6F;aAChG;YACD,OAAO,EAAE;gBACP,IAAI,EAAE,QAAQ;gBACd,WAAW,EACT,8pBAA8pB;aACjqB;YACD,IAAI,EAAE;gBACJ,IAAI,EAAE,QAAQ;gBACd,WAAW,EACT,4OAA4O;aAC/O;SACF;QACD,QAAQ,EAAE,CAAC,OAAO,EAAE,SAAS,EAAE,MAAM,CAAC;KACvC;CACF,CAAC;AAEF,MAAM,CAAC,KAAK,UAAU,gBAAgB,CAAC,IAAa;IAClD,MAAM,EAAE,KAAK,EAAE,OAAO,EAAE,IAAI,EAAE,GAAG,IAAsB,CAAC;IAExD,kBAAkB;IAClB,IAAI,CAAC,KAAK,IAAI,CAAC,OAAO,IAAI,CAAC,IAAI,EAAE,CAAC;QAChC,MAAM,IAAI,KAAK,CACb,oEAAoE,CACrE,CAAC;IACJ,CAAC;IAED,sBAAsB;IACtB,MAAM,QAAQ,GAAG,MAAM,OAAO,CAAqB,YAAY,EAAE,MAAM,EAAE;QACvE,KAAK;QACL,OAAO;QACP,IAAI;KACL,CAAC,CAAC;IAEH,OAAO;QACL,OAAO,EAAE;YACP;gBACE,IAAI,EAAE,MAAe;gBACrB,IAAI,EAAE,IAAI,CAAC,SAAS,CAClB;oBACE,OAAO,EAAE,IAAI;oBACb,OAAO,EAAE,4BAA4B;oBACrC,GAAG,EAAE,QAAQ,CAAC,GAAG;iBAClB,EACD,IAAI,EACJ,CAAC,CACF;aACF;SACF;KACF,CAAC;AACJ,CAAC"}

package/dist/tools/list-pages.d.ts

@@ -0,0 +1,9 @@
+import { Tool } from "@modelcontextprotocol/sdk/types.js";
+export declare const LIST_PAGES_TOOL: Tool;
+export declare function handleListPages(): Promise<{
+    content: {
+        type: "text";
+        text: string;
+    }[];
+}>;
+//# sourceMappingURL=list-pages.d.ts.map

package/dist/tools/list-pages.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"list-pages.d.ts","sourceRoot":"","sources":["../../src/tools/list-pages.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,IAAI,EAAE,MAAM,oCAAoC,CAAC;AAI1D,eAAO,MAAM,eAAe,EAAE,IAQ7B,CAAC;AAEF,wBAAsB,eAAe;;;;;GAoBpC"}

package/dist/tools/list-pages.js

@@ -0,0 +1,26 @@
+import { callAPI } from "../api.js";
+export const LIST_PAGES_TOOL = {
+    name: "list-pages",
+    description: "List all pages associated with your API key. Returns a summary of each page including id, slug, title, and timestamps. Does not include page content.",
+    inputSchema: {
+        type: "object",
+        properties: {},
+    },
+};
+export async function handleListPages() {
+    // Call the list pages API
+    const response = await callAPI("/v1/pages", "GET");
+    return {
+        content: [
+            {
+                type: "text",
+                text: JSON.stringify({
+                    success: true,
+                    count: response.count,
+                    pages: response.pages,
+                }, null, 2),
+            },
+        ],
+    };
+}
+//# sourceMappingURL=list-pages.js.map

package/dist/tools/list-pages.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"list-pages.js","sourceRoot":"","sources":["../../src/tools/list-pages.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,OAAO,EAAE,MAAM,WAAW,CAAC;AAGpC,MAAM,CAAC,MAAM,eAAe,GAAS;IACnC,IAAI,EAAE,YAAY;IAClB,WAAW,EACT,uJAAuJ;IACzJ,WAAW,EAAE;QACX,IAAI,EAAE,QAAQ;QACd,UAAU,EAAE,EAAE;KACf;CACF,CAAC;AAEF,MAAM,CAAC,KAAK,UAAU,eAAe;IACnC,0BAA0B;IAC1B,MAAM,QAAQ,GAAG,MAAM,OAAO,CAAoB,WAAW,EAAE,KAAK,CAAC,CAAC;IAEtE,OAAO;QACL,OAAO,EAAE;YACP;gBACE,IAAI,EAAE,MAAe;gBACrB,IAAI,EAAE,IAAI,CAAC,SAAS,CAClB;oBACE,OAAO,EAAE,IAAI;oBACb,KAAK,EAAE,QAAQ,CAAC,KAAK;oBACrB,KAAK,EAAE,QAAQ,CAAC,KAAK;iBACtB,EACD,IAAI,EACJ,CAAC,CACF;aACF;SACF;KACF,CAAC;AACJ,CAAC"}

package/dist/types.d.ts

@@ -0,0 +1,20 @@
+export interface DeployPageArgs {
+    title: string;
+    content: string;
+    slug: string;
+}
+export interface DeployPageResponse {
+    url: string;
+}
+export interface PageSummary {
+    id: number;
+    slug: string;
+    title: string;
+    created_at: string;
+    updated_at: string;
+}
+export interface ListPagesResponse {
+    count: number;
+    pages: PageSummary[];
+}
+//# sourceMappingURL=types.d.ts.map

package/dist/types.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../src/types.ts"],"names":[],"mappings":"AAAA,MAAM,WAAW,cAAc;IAC7B,KAAK,EAAE,MAAM,CAAC;IACd,OAAO,EAAE,MAAM,CAAC;IAChB,IAAI,EAAE,MAAM,CAAC;CACd;AAED,MAAM,WAAW,kBAAkB;IACjC,GAAG,EAAE,MAAM,CAAC;CACb;AAED,MAAM,WAAW,WAAW;IAC1B,EAAE,EAAE,MAAM,CAAC;IACX,IAAI,EAAE,MAAM,CAAC;IACb,KAAK,EAAE,MAAM,CAAC;IACd,UAAU,EAAE,MAAM,CAAC;IACnB,UAAU,EAAE,MAAM,CAAC;CACpB;AAED,MAAM,WAAW,iBAAiB;IAChC,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,EAAE,WAAW,EAAE,CAAC;CACtB"}

package/dist/types.js

@@ -0,0 +1,2 @@
+export {};
+//# sourceMappingURL=types.js.map

package/dist/types.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"types.js","sourceRoot":"","sources":["../src/types.ts"],"names":[],"mappings":""}

package/package.json

@@ -1,18 +1,12 @@
 {
   "name": "gearvn-pages-mcp-server",
-  "version": "1.0.0",
+  "version": "1.1.1",
   "description": "MCP Server for GearVN Pages deployment and management",
   "type": "module",
   "main": "dist/index.js",
   "bin": {
     "gearvn-pages-mcp": "dist/index.js"
   },
-  "scripts": {
-    "build": "tsc",
-    "watch": "tsc --watch",
-    "start": "node dist/index.js",
-    "prepublishOnly": "npm run build"
-  },
   "keywords": [
     "mcp",
     "model-context-protocol",
@@ -26,5 +20,10 @@
   "devDependencies": {
     "@types/node": "^22.10.2",
     "typescript": "^5.7.2"
+  },
+  "scripts": {
+    "build": "tsc",
+    "watch": "tsc --watch",
+    "start": "node dist/index.js"
   }
-}
+}

package/src/api.ts

@@ -0,0 +1,52 @@
+const API_BASE_URL = "https://pages.react.uat.gearvn.xyz";
+const API_KEY = process.env.API_KEY;
+
+if (!API_KEY) {
+  console.error("Error: API_KEY environment variable is required");
+  process.exit(1);
+}
+
+export async function callAPI<T>(
+  endpoint: string,
+  method: string = "GET",
+  body?: unknown
+): Promise<T> {
+  const url = `${API_BASE_URL}${endpoint}`;
+  const headers: Record<string, string> = {
+    "X-API-Key": API_KEY!,
+  };
+
+  if (body) {
+    headers["Content-Type"] = "application/json";
+  }
+
+  const response = await fetch(url, {
+    method,
+    headers,
+    body: body ? JSON.stringify(body) : undefined,
+  });
+
+  // Get response text first
+  const responseText = await response.text();
+
+  if (!response.ok) {
+    // Check if response is HTML (error page)
+    if (responseText.trim().startsWith("<!DOCTYPE") || responseText.trim().startsWith("<html")) {
+      throw new Error(
+        `API request failed with status ${response.status}. Server returned HTML instead of JSON. ` +
+        `This usually means: 1) Invalid API endpoint, 2) API key authentication failed, or 3) Server error. ` +
+        `URL: ${url}`
+      );
+    }
+    throw new Error(`API request failed: ${response.status} ${responseText}`);
+  }
+
+  // Try to parse as JSON
+  try {
+    return JSON.parse(responseText) as T;
+  } catch (error) {
+    throw new Error(
+      `API returned invalid JSON. Response: ${responseText.substring(0, 200)}...`
+    );
+  }
+}

package/src/index.ts

@@ -5,106 +5,9 @@ import { StdioServerTransport } from "@modelcontextprotocol/sdk/server/stdio.js"
 import {
   CallToolRequestSchema,
   ListToolsRequestSchema,
-  Tool,
 } from "@modelcontextprotocol/sdk/types.js";
-
-// Configuration
-const API_BASE_URL = "https://pages.react.uat.gearvn.xyz";
-const API_KEY = process.env.API_KEY;
-
-if (!API_KEY) {
-  console.error("Error: API_KEY environment variable is required");
-  process.exit(1);
-}
-
-// Types
-interface DeployPageArgs {
-  title: string;
-  content: string;
-  slug: string;
-}
-
-interface DeployPageResponse {
-  url: string;
-}
-
-interface PageSummary {
-  id: number;
-  slug: string;
-  title: string;
-  created_at: string;
-  updated_at: string;
-}
-
-interface ListPagesResponse {
-  count: number;
-  pages: PageSummary[];
-}
-
-// API helper function
-async function callAPI<T>(
-  endpoint: string,
-  method: string = "GET",
-  body?: unknown
-): Promise<T> {
-  const url = `${API_BASE_URL}${endpoint}`;
-  const headers: Record<string, string> = {
-    "X-API-Key": API_KEY!,
-  };
-
-  if (body) {
-    headers["Content-Type"] = "application/json";
-  }
-
-  const response = await fetch(url, {
-    method,
-    headers,
-    body: body ? JSON.stringify(body) : undefined,
-  });
-
-  if (!response.ok) {
-    const errorText = await response.text();
-    throw new Error(`API request failed: ${response.status} ${errorText}`);
-  }
-
-  return response.json() as Promise<T>;
-}
-
-// Tool definitions
-const DEPLOY_PAGE_TOOL: Tool = {
-  name: "deploy-page",
-  description:
-    "Deploy or update a static HTML page. If the slug already exists, the page will be updated with the new content and title. IMPORTANT: The content must be a complete, valid HTML document with TailwindCSS for styling. JavaScript libraries are allowed but MUST be loaded via CDN (e.g., Alpine.js, Chart.js, GSAP, etc.). No build tools or npm packages. No React, Vue, or Angular frameworks allowed.",
-  inputSchema: {
-    type: "object",
-    properties: {
-      title: {
-        type: "string",
-        description: "The title of the page",
-      },
-      content: {
-        type: "string",
-        description: "The complete HTML content of the page. Must include <!DOCTYPE html>, <html>, <head> with TailwindCSS CDN link (https://cdn.tailwindcss.com), and <body> tags. Use TailwindCSS utility classes for all styling. JavaScript libraries are allowed but must be imported via CDN links in <script> tags (e.g., Alpine.js from CDN, Chart.js from CDN). Vanilla JavaScript is also acceptable. NO build tools, npm packages, or SPA frameworks (React/Vue/Angular).",
-      },
-      slug: {
-        type: "string",
-        description:
-          "The URL slug for the page (e.g., 'my-page-123'). This will be used in the URL as /pages/{slug}",
-      },
-    },
-    required: ["title", "content", "slug"],
-  },
-};
-
-const LIST_PAGES_TOOL: Tool = {
-  name: "list-pages",
-  description:
-    "List all pages associated with your API key. Returns a summary of each page including id, slug, title, and timestamps. Does not include page content.",
-  inputSchema: {
-    type: "object",
-    properties: {},
-  },
-};
+import { DEPLOY_PAGE_TOOL, handleDeployPage } from "./tools/deploy-page.js";
+import { LIST_PAGES_TOOL, handleListPages } from "./tools/list-pages.js";
 
 // Create MCP server
 const server = new Server(
@@ -132,56 +35,9 @@ server.setRequestHandler(CallToolRequestSchema, async (request) => {
 
   try {
     if (name === "deploy-page") {
-      const { title, content, slug } = args as unknown as DeployPageArgs;
-
-      // Validate inputs
-      if (!title || !content || !slug) {
-        throw new Error("Missing required parameters: title, content, and slug are required");
-      }
-
-      // Call the deploy API
-      const response = await callAPI<DeployPageResponse>("/v1/deploy", "POST", {
-        title,
-        content,
-        slug,
-      });
-
-      return {
-        content: [
-          {
-            type: "text",
-            text: JSON.stringify(
-              {
-                success: true,
-                message: "Page deployed successfully",
-                url: response.url,
-              },
-              null,
-              2
-            ),
-          },
-        ],
-      };
+      return await handleDeployPage(args);
     } else if (name === "list-pages") {
-      // Call the list pages API
-      const response = await callAPI<ListPagesResponse>("/v1/pages", "GET");
-
-      return {
-        content: [
-          {
-            type: "text",
-            text: JSON.stringify(
-              {
-                success: true,
-                count: response.count,
-                pages: response.pages,
-              },
-              null,
-              2
-            ),
-          },
-        ],
-      };
+      return await handleListPages();
     } else {
       throw new Error(`Unknown tool: ${name}`);
     }

package/src/tools/deploy-page.ts

@@ -0,0 +1,65 @@
+import { Tool } from "@modelcontextprotocol/sdk/types.js";
+import { callAPI } from "../api.js";
+import { DeployPageArgs, DeployPageResponse } from "../types.js";
+
+export const DEPLOY_PAGE_TOOL: Tool = {
+  name: "deploy-page",
+  description:
+    "Deploy or update a static HTML page. If the slug already exists, the page will be updated with the new content and title. IMPORTANT: You (AI Agent) must automatically generate appropriate 'title' and 'slug' based on the user's request - user does NOT provide these. The content must be a complete, valid HTML document with TailwindCSS for styling. JavaScript libraries are allowed but MUST be loaded via CDN (e.g., Alpine.js, Chart.js, GSAP, etc.). No build tools or npm packages. No React, Vue, or Angular frameworks allowed. CRITICAL: When passing HTML content as JSON string, ensure all special characters are properly escaped (double quotes \", backslashes \\, newlines \\n, etc.) to prevent JSON syntax errors.",
+  inputSchema: {
+    type: "object",
+    properties: {
+      title: {
+        type: "string",
+        description:
+          "The title of the page. AI Agent should generate this automatically based on user's request.",
+      },
+      content: {
+        type: "string",
+        description:
+          "The complete HTML content of the page. Must include <!DOCTYPE html>, <html>, <head> with TailwindCSS CDN link (https://cdn.tailwindcss.com), and <body> tags. Use TailwindCSS utility classes for all styling. JavaScript libraries are allowed but must be imported via CDN links in <script> tags (e.g., Alpine.js from CDN, Chart.js from CDN). Vanilla JavaScript is also acceptable. NO build tools, npm packages, or SPA frameworks (React/Vue/Angular). IMPORTANT: Properly escape all special characters in HTML for JSON (\" for double quotes, \\\\ for backslashes, \\n for newlines, etc.). Example: <div class=\"container\"> should be passed as <div class=\\\"container\\\">",
+      },
+      slug: {
+        type: "string",
+        description:
+          "The URL slug for the page. AI Agent should generate this automatically in kebab-case format based on the title or user's request (e.g., 'quan-ly-thu-chi-ca-nhan', 'landing-page-khoa-hoc'). This will be used in the URL as /pages/{slug}",
+      },
+    },
+    required: ["title", "content", "slug"],
+  },
+};
+
+export async function handleDeployPage(args: unknown) {
+  const { title, content, slug } = args as DeployPageArgs;
+
+  // Validate inputs
+  if (!title || !content || !slug) {
+    throw new Error(
+      "Missing required parameters: title, content, and slug are required"
+    );
+  }
+
+  // Call the deploy API
+  const response = await callAPI<DeployPageResponse>("/v1/deploy", "POST", {
+    title,
+    content,
+    slug,
+  });
+
+  return {
+    content: [
+      {
+        type: "text" as const,
+        text: JSON.stringify(
+          {
+            success: true,
+            message: "Page deployed successfully",
+            url: response.url,
+          },
+          null,
+          2
+        ),
+      },
+    ],
+  };
+}

package/src/tools/list-pages.ts

@@ -0,0 +1,35 @@
+import { Tool } from "@modelcontextprotocol/sdk/types.js";
+import { callAPI } from "../api.js";
+import { ListPagesResponse } from "../types.js";
+
+export const LIST_PAGES_TOOL: Tool = {
+  name: "list-pages",
+  description:
+    "List all pages associated with your API key. Returns a summary of each page including id, slug, title, and timestamps. Does not include page content.",
+  inputSchema: {
+    type: "object",
+    properties: {},
+  },
+};
+
+export async function handleListPages() {
+  // Call the list pages API
+  const response = await callAPI<ListPagesResponse>("/v1/pages", "GET");
+
+  return {
+    content: [
+      {
+        type: "text" as const,
+        text: JSON.stringify(
+          {
+            success: true,
+            count: response.count,
+            pages: response.pages,
+          },
+          null,
+          2
+        ),
+      },
+    ],
+  };
+}

package/src/types.ts

@@ -0,0 +1,22 @@
+export interface DeployPageArgs {
+  title: string;
+  content: string;
+  slug: string;
+}
+
+export interface DeployPageResponse {
+  url: string;
+}
+
+export interface PageSummary {
+  id: number;
+  slug: string;
+  title: string;
+  created_at: string;
+  updated_at: string;
+}
+
+export interface ListPagesResponse {
+  count: number;
+  pages: PageSummary[];
+}