Pagecast

Name: Pagecast
Author: mcpware

โดย mcpwareรุ่น 0.2.1i★ 54iรันบนเครื่อง

ชื่อใน registryio.github.mcpware/pagecast

วิธีติดตั้ง

ใช้ทำอะไรได้

Pagecast เป็นเครื่องมือที่ช่วยบันทึกหน้าเว็บใดก็ได้ในเบราว์เซอร์ให้เป็นไฟล์ GIF หรือวิดีโอ โดยทำงานผ่าน MCP

แปลอัตโนมัติจากคำอธิบายของผู้ทำ · ทีมยังไม่ได้ตรวจ

ต่อแบบ ติดตั้งในเครื่อง
บัญชีหรือคีย์ ไม่ต้องใส่คีย์
หมวด ออกแบบ ภาพ และเสียง

คำอธิบายต้นฉบับจากผู้ทำ (อังกฤษ)

Record any browser page as GIF or video via MCP

ติดตั้ง

เลือกโปรแกรม AI ที่คุณใช้ แล้วคัดลอกค่าตั้งไปวาง

ผลตรวจผ่าน 2/3 · ทำงานบนเครื่องคุณ · ✓ ตรวจคำสั่งแล้ว 13 พ.ย. 2569

ขั้นแรก: คุณใช้ AI ตัวไหน

Claudeเว็บ · แอป · มือถือChatGPTเว็บClaude CodeTerminalCursorโปรแกรมเขียนโค้ดVS Codeโปรแกรมเขียนโค้ดอื่น ๆโปรแกรมอื่น

เลือกแอปที่คุณใช้ ขั้นตอนจะขึ้นด้านล่าง

ต่อกับ Claude ได้ แต่ต้องเตรียมก่อน

ต้องลง Node.js ในเครื่องก่อน (ทำครั้งเดียว) · ใช้ได้เฉพาะแอป Claude บนคอม (Windows หรือ Mac) ไม่ใช่บนเว็บหรือมือถือ

ให้ AI ติดตั้งให้

คัดลอกข้อความนี้ไปวางในแชตของ Claude AI จะเช็กเครื่อง บอกว่าจะแก้ไฟล์ไหน และรอคุณตกลงก่อนทุกครั้ง

ช่วยติดตั้ง MCP server ชื่อ Pagecast ให้ Claude ในเครื่องนี้ ทำตามลำดับ 1) เช็กว่ามี Node.js ด้วยคำสั่ง node -v ถ้าไม่มี ให้บอกฉันไปลงจาก https://nodejs.org/en/download ห้ามลงเอง 2) ใช้คอนฟิกนี้เท่านั้น (ผ่านตัวตรวจของ PopNx MCP แล้ว): { "mcpServers": { "pagecast": { "command": "npx", "args": [ "-y", "@mcpware/pagecast" ] } } } 3) บอก path เต็มของไฟล์ที่จะแก้ หรือคำสั่งที่จะรัน แล้วรอฉันตกลงก่อน 4) ไม่ต้องใช้คีย์ 5) ทำตามที่ตกลง แล้วตรวจว่าเครื่องมือของ Pagecast ขึ้นจริง

ข้อความนี้ไม่มีคีย์ของคุณ ถ้าต้องใช้คีย์ AI จะบอกให้คุณวางเองในไฟล์หรือช่องของแอป

1
ลง Node.js ในเครื่อง (ถ้ายังไม่มี)
ลงไว้แล้วหรือยัง? เช็กก่อน · เปิด Terminal แล้วพิมพ์คำสั่งนี้ กด Enter
node -v
- ขึ้นเลขรุ่น เช่น v26.13.1 = ลงแล้ว ข้ามขั้นนี้ได้
- ขึ้นว่า "command not found" (Windows ขึ้นว่า "is not recognized") = ยังไม่ได้ลง หรือเพิ่งลงแต่ยังไม่ได้ปิดแล้วเปิด Terminal ใหม่
เปิด Terminal ยังไง
Mac: กด ⌘ + Space พิมพ์ Terminal แล้วกด Enter
Windows: เปิดเมนู Start พิมพ์ Windows PowerShell แล้วกด Open
ยังไม่ได้ลง: เปิดหน้าดาวน์โหลดทางการ เลือกรุ่น LTS แล้วเลือกตัวติดตั้งแบบกดเอง: Mac ไฟล์ .pkg · Windows ไฟล์ .msi ดับเบิลคลิกแล้วกดถัดไปจนจบ ไม่ต้องใช้คำสั่ง curl
เปิดหน้าดาวน์โหลด Node.js ↗
ลงเสร็จแล้ว ปิด Terminal เปิดใหม่ แล้วพิมพ์คำสั่งเดิมอีกครั้ง ต้องขึ้นเลขรุ่น: node -v
ลงครั้งเดียว ใช้ได้กับทุกตัวที่ต้องใช้ Node.js
ทำแล้ว
เปิดไฟล์ตั้งค่าของแอป Claude บนคอม
SettingsDeveloperEdit Config
ทำแล้ว

วางค่าตั้งนี้แล้วบันทึกไฟล์

{
  "mcpServers": {
    "pagecast": {
      "command": "npx",
      "args": [
        "-y",
        "@mcpware/pagecast"
      ]
    }
  }
}

ทำแล้ว

ปิดแอป Claude แล้วเปิดใหม่
ทำแล้ว
ลองเลย
ใช้ Pagecast บอกหน่อยว่าทำอะไรให้ฉันได้บ้าง แล้วลองทำให้ดูหนึ่งอย่าง
✓ ถ้า Claude บอกว่ากำลังใช้ Pagecast หรือมีชื่อเครื่องมือของ Pagecast ขึ้นในคำตอบ แปลว่าต่อสำเร็จ

ชื่อเมนูตรวจกับหน้าช่วยเหลือของ Anthropic เมื่อ 11 พ.ย. 2569 · หน้าจอของคุณอาจต่างเล็กน้อยตามรุ่นของแอป

ChatGPT ยังต่อ Pagecast ไม่ได้

Pagecast ต้องติดตั้งในเครื่องคุณ แต่ ChatGPT ต่อได้เฉพาะตัวที่ทำงานบนเว็บ

คุณทำแบบนี้แทนได้

ก · ใช้แอปที่ต่อ Pagecast ได้

ดูขั้นตอนสำหรับ Claude →ต้องลง Node.js ในเครื่องก่อน (ทำครั้งเดียว) · ใช้ได้เฉพาะแอป Claude บนคอม (Windows หรือ Mac) ไม่ใช่บนเว็บหรือมือถือ
ดูขั้นตอนสำหรับ Claude Code →ต้องลง Node.js ในเครื่องก่อน (ทำครั้งเดียว)
ดูขั้นตอนสำหรับ Cursor →ต้องลง Node.js ในเครื่องก่อน (ทำครั้งเดียว)
ดูขั้นตอนสำหรับ VS Code →ต้องลง Node.js ในเครื่องก่อน (ทำครั้งเดียว)

ข · ตัวอื่นในหมวด ออกแบบ ภาพ และเสียง ที่ต่อกับ ChatGPT ได้

เลือกจากตัวที่ใช้มากในหมวดเดียวกัน เฉพาะตัวที่ต่อด้วยที่อยู่ได้โดยไม่ต้องใส่คีย์

Pascal 3D Editor✓ ChatGPT
Semiotic✓ ChatGPT
TypeUI✓ ChatGPT

ต่อกับ Claude Code ได้ แต่ต้องเตรียมก่อน

ต้องลง Node.js ในเครื่องก่อน (ทำครั้งเดียว)

ให้ AI ติดตั้งให้

คัดลอกข้อความนี้ไปวางในแชตของ Claude Code AI จะเช็กเครื่อง บอกว่าจะแก้ไฟล์ไหน และรอคุณตกลงก่อนทุกครั้ง

ช่วยติดตั้ง MCP server ชื่อ Pagecast ให้ Claude Code ในเครื่องนี้ ทำตามลำดับ 1) เช็กว่ามี Node.js ด้วยคำสั่ง node -v ถ้าไม่มี ให้บอกฉันไปลงจาก https://nodejs.org/en/download ห้ามลงเอง 2) ใช้คอนฟิกนี้เท่านั้น (ผ่านตัวตรวจของ PopNx MCP แล้ว): claude mcp add --scope user pagecast -- npx -y @mcpware/pagecast 3) บอก path เต็มของไฟล์ที่จะแก้ หรือคำสั่งที่จะรัน แล้วรอฉันตกลงก่อน 4) ไม่ต้องใช้คีย์ 5) ทำตามที่ตกลง แล้วตรวจว่าเครื่องมือของ Pagecast ขึ้นจริง

1
ลง Node.js ในเครื่อง (ถ้ายังไม่มี)
ลงไว้แล้วหรือยัง? เช็กก่อน · เปิด Terminal แล้วพิมพ์คำสั่งนี้ กด Enter
node -v
- ขึ้นเลขรุ่น เช่น v26.13.1 = ลงแล้ว ข้ามขั้นนี้ได้
- ขึ้นว่า "command not found" (Windows ขึ้นว่า "is not recognized") = ยังไม่ได้ลง หรือเพิ่งลงแต่ยังไม่ได้ปิดแล้วเปิด Terminal ใหม่
เปิด Terminal ยังไง
Mac: กด ⌘ + Space พิมพ์ Terminal แล้วกด Enter
Windows: เปิดเมนู Start พิมพ์ Windows PowerShell แล้วกด Open
ยังไม่ได้ลง: เปิดหน้าดาวน์โหลดทางการ เลือกรุ่น LTS แล้วเลือกตัวติดตั้งแบบกดเอง: Mac ไฟล์ .pkg · Windows ไฟล์ .msi ดับเบิลคลิกแล้วกดถัดไปจนจบ ไม่ต้องใช้คำสั่ง curl
เปิดหน้าดาวน์โหลด Node.js ↗
ลงเสร็จแล้ว ปิด Terminal เปิดใหม่ แล้วพิมพ์คำสั่งเดิมอีกครั้ง ต้องขึ้นเลขรุ่น: node -v
ลงครั้งเดียว ใช้ได้กับทุกตัวที่ต้องใช้ Node.js
ทำแล้ว
เปิด Terminal
Mac: กด Command+Space พิมพ์ Terminal · Windows: เปิด PowerShell
ทำแล้ว
3
วางคำสั่งนี้แล้วกด Enter
```
claude mcp add --scope user pagecast -- npx -y @mcpware/pagecast
```
ทำแล้ว
พิมพ์ /mcp ใน Claude Code
ต้องเห็น Pagecast ในรายการและขึ้นว่าเชื่อมต่อแล้ว
ทำแล้ว
ลองเลย
ใช้ Pagecast บอกหน่อยว่าทำอะไรให้ฉันได้บ้าง แล้วลองทำให้ดูหนึ่งอย่าง
✓ ถ้า Claude Code บอกว่ากำลังใช้ Pagecast หรือมีชื่อเครื่องมือของ Pagecast ขึ้นในคำตอบ แปลว่าต่อสำเร็จ

ต่อกับ Cursor ได้ แต่ต้องเตรียมก่อน

ต้องลง Node.js ในเครื่องก่อน (ทำครั้งเดียว)

ให้ AI ติดตั้งให้

คัดลอกข้อความนี้ไปวางในแชตของ Cursor AI จะเช็กเครื่อง บอกว่าจะแก้ไฟล์ไหน และรอคุณตกลงก่อนทุกครั้ง

ช่วยติดตั้ง MCP server ชื่อ Pagecast ให้ Cursor ในเครื่องนี้ ทำตามลำดับ 1) เช็กว่ามี Node.js ด้วยคำสั่ง node -v ถ้าไม่มี ให้บอกฉันไปลงจาก https://nodejs.org/en/download ห้ามลงเอง 2) ใช้คอนฟิกนี้เท่านั้น (ผ่านตัวตรวจของ PopNx MCP แล้ว): { "mcpServers": { "pagecast": { "command": "npx", "args": [ "-y", "@mcpware/pagecast" ] } } } 3) บอก path เต็มของไฟล์ที่จะแก้ หรือคำสั่งที่จะรัน แล้วรอฉันตกลงก่อน 4) ไม่ต้องใช้คีย์ 5) ทำตามที่ตกลง แล้วตรวจว่าเครื่องมือของ Pagecast ขึ้นจริง

1
ลง Node.js ในเครื่อง (ถ้ายังไม่มี)
ลงไว้แล้วหรือยัง? เช็กก่อน · เปิด Terminal แล้วพิมพ์คำสั่งนี้ กด Enter
node -v
- ขึ้นเลขรุ่น เช่น v26.13.1 = ลงแล้ว ข้ามขั้นนี้ได้
- ขึ้นว่า "command not found" (Windows ขึ้นว่า "is not recognized") = ยังไม่ได้ลง หรือเพิ่งลงแต่ยังไม่ได้ปิดแล้วเปิด Terminal ใหม่
เปิด Terminal ยังไง
Mac: กด ⌘ + Space พิมพ์ Terminal แล้วกด Enter
Windows: เปิดเมนู Start พิมพ์ Windows PowerShell แล้วกด Open
ยังไม่ได้ลง: เปิดหน้าดาวน์โหลดทางการ เลือกรุ่น LTS แล้วเลือกตัวติดตั้งแบบกดเอง: Mac ไฟล์ .pkg · Windows ไฟล์ .msi ดับเบิลคลิกแล้วกดถัดไปจนจบ ไม่ต้องใช้คำสั่ง curl
เปิดหน้าดาวน์โหลด Node.js ↗
ลงเสร็จแล้ว ปิด Terminal เปิดใหม่ แล้วพิมพ์คำสั่งเดิมอีกครั้ง ต้องขึ้นเลขรุ่น: node -v
ลงครั้งเดียว ใช้ได้กับทุกตัวที่ต้องใช้ Node.js
ทำแล้ว
กดปุ่มนี้เพื่อเปิด Cursor
เปิดใน Cursor
Cursor จะถามยืนยันการติดตั้ง ให้กด Install
ทำแล้ว
เปิดแชตของ AI ใน Cursor โหมด Agent
ทำแล้ว
ลองเลย
ใช้ Pagecast บอกหน่อยว่าทำอะไรให้ฉันได้บ้าง แล้วลองทำให้ดูหนึ่งอย่าง
✓ ถ้า Cursor บอกว่ากำลังใช้ Pagecast หรือมีชื่อเครื่องมือของ Pagecast ขึ้นในคำตอบ แปลว่าต่อสำเร็จ

ชื่อเมนูตรวจกับหน้าช่วยเหลือของ Cursor เมื่อ 11 พ.ย. 2569 · หน้าจอของคุณอาจต่างเล็กน้อยตามรุ่นของแอป

ต่อกับ VS Code ได้ แต่ต้องเตรียมก่อน

ต้องลง Node.js ในเครื่องก่อน (ทำครั้งเดียว)

ให้ AI ติดตั้งให้

คัดลอกข้อความนี้ไปวางในแชตของ VS Code AI จะเช็กเครื่อง บอกว่าจะแก้ไฟล์ไหน และรอคุณตกลงก่อนทุกครั้ง

ช่วยติดตั้ง MCP server ชื่อ Pagecast ให้ VS Code ในเครื่องนี้ ทำตามลำดับ 1) เช็กว่ามี Node.js ด้วยคำสั่ง node -v ถ้าไม่มี ให้บอกฉันไปลงจาก https://nodejs.org/en/download ห้ามลงเอง 2) ใช้คอนฟิกนี้เท่านั้น (ผ่านตัวตรวจของ PopNx MCP แล้ว): { "servers": { "pagecast": { "type": "stdio", "command": "npx", "args": [ "-y", "@mcpware/pagecast" ] } } } 3) บอก path เต็มของไฟล์ที่จะแก้ หรือคำสั่งที่จะรัน แล้วรอฉันตกลงก่อน 4) ไม่ต้องใช้คีย์ 5) ทำตามที่ตกลง แล้วตรวจว่าเครื่องมือของ Pagecast ขึ้นจริง

1
ลง Node.js ในเครื่อง (ถ้ายังไม่มี)
ลงไว้แล้วหรือยัง? เช็กก่อน · เปิด Terminal แล้วพิมพ์คำสั่งนี้ กด Enter
node -v
- ขึ้นเลขรุ่น เช่น v26.13.1 = ลงแล้ว ข้ามขั้นนี้ได้
- ขึ้นว่า "command not found" (Windows ขึ้นว่า "is not recognized") = ยังไม่ได้ลง หรือเพิ่งลงแต่ยังไม่ได้ปิดแล้วเปิด Terminal ใหม่
เปิด Terminal ยังไง
Mac: กด ⌘ + Space พิมพ์ Terminal แล้วกด Enter
Windows: เปิดเมนู Start พิมพ์ Windows PowerShell แล้วกด Open
ยังไม่ได้ลง: เปิดหน้าดาวน์โหลดทางการ เลือกรุ่น LTS แล้วเลือกตัวติดตั้งแบบกดเอง: Mac ไฟล์ .pkg · Windows ไฟล์ .msi ดับเบิลคลิกแล้วกดถัดไปจนจบ ไม่ต้องใช้คำสั่ง curl
เปิดหน้าดาวน์โหลด Node.js ↗
ลงเสร็จแล้ว ปิด Terminal เปิดใหม่ แล้วพิมพ์คำสั่งเดิมอีกครั้ง ต้องขึ้นเลขรุ่น: node -v
ลงครั้งเดียว ใช้ได้กับทุกตัวที่ต้องใช้ Node.js
ทำแล้ว
กดปุ่มนี้เพื่อเปิด VS Code
เปิดใน VS Code
VS Code จะถามยืนยันการติดตั้ง ให้กด Install
ทำแล้ว
เปิดแชตของ AI ใน VS Code โหมด Agent
ทำแล้ว
ลองเลย
ใช้ Pagecast บอกหน่อยว่าทำอะไรให้ฉันได้บ้าง แล้วลองทำให้ดูหนึ่งอย่าง
✓ ถ้า VS Code บอกว่ากำลังใช้ Pagecast หรือมีชื่อเครื่องมือของ Pagecast ขึ้นในคำตอบ แปลว่าต่อสำเร็จ

ชื่อเมนูตรวจกับหน้าช่วยเหลือของ VS Code เมื่อ 11 พ.ย. 2569 · หน้าจอของคุณอาจต่างเล็กน้อยตามรุ่นของแอป

โปรแกรมอื่นที่ใช้ MCP ได้ เช่น Windsurf, Zed หรือ Gemini CLI มีวิธีเพิ่มต่างกัน ดูวิธีของแต่ละตัวในหน้ารวมโปรแกรม

ดูโปรแกรมที่ใช้ MCP ทั้งหมด →

ค่าตั้งแบบไฟล์ JSON อยู่ในหัวข้อ “สำหรับคนเขียนโค้ด” ด้านล่าง

ติดตรงไหน? ถามคนที่ใช้ Pagecast อยู่💬 พูดคุย →

สำหรับคนเขียนโค้ด: คำสั่ง Terminal และค่าตั้ง JSON

ติดตั้งในเครื่อง

Claude Code

claude mcp add --scope user pagecast -- npx -y @mcpware/pagecast

Claude Desktop (claude_desktop_config.json)

{
  "mcpServers": {
    "pagecast": {
      "command": "npx",
      "args": [
        "-y",
        "@mcpware/pagecast"
      ]
    }
  }
}

Cursor (~/.cursor/mcp.json)

{
  "mcpServers": {
    "pagecast": {
      "command": "npx",
      "args": [
        "-y",
        "@mcpware/pagecast"
      ]
    }
  }
}

VS Code (mcp.json)

{
  "servers": {
    "pagecast": {
      "type": "stdio",
      "command": "npx",
      "args": [
        "-y",
        "@mcpware/pagecast"
      ]
    }
  }
}

ค่าตั้งนี้สร้างจากข้อมูลใน registry ของผู้ทำ ถ้าไม่ตรงกับ README ให้เชื่อ README

สรุป

ดาว GitHub i: 54
ดาวน์โหลดต่อสัปดาห์i: 238/สัปดาห์
license i: MIT
การเชื่อมต่อ: รันบนเครื่อง
ช่องทาง (transport): stdio
รุ่นล่าสุดi: 0.2.1
หมวดi: ออกแบบ ภาพ และเสียง
ส่งเข้า registryi: 21 มี.ค. 2569
แก้โค้ดล่าสุดi: 27 มี.ค. 2569
ผู้ทำ: mcpware
แพ็กเกจ: npm: @mcpware/pagecast
repo: mcpware/pagecast
สถานะใน registry: ใช้งานอยู่

ใช้กับโปรแกรมไหนได้

ดูจากแบบการต่อของ server ตัวนี้ และเอกสารของผู้ทำโปรแกรมแต่ละตัว ตรวจเมื่อ 10 พ.ย. 2569

ติดตั้งบนเครื่องได้ใน

Claude Goose LM Studio Msty Studio Cherry Studio Cursor VS Code + GitHub Copilot Visual Studio Windsurf (Devin Desktop)Zed Kiro Cline Continue JetBrains AI Assistant Claude Code Codex CLI Gemini CLI OpenCode nodecode Warp LibreChat Raycast

ดูโปรแกรมทั้งหมดพร้อมข้อดีข้อเสีย →

คู่มือที่เกี่ยวข้อง

เรื่องที่ 8เช็ก 5 ข้อก่อนติดตั้ง MCP ไม่ให้ข้อมูลรั่วใช้เวลาราว 2 นาทีต่อตัว ดูจากหน้าของตัวนั้นบนเว็บเรา และหน้าขออนุญาตของโปรแกรม AI ก่อนกดยอมอ่าน 4 นาที

ทำอะไรได้บ้าง

รันในเครื่องคุณ รายการเครื่องมือจะขึ้นในแอป AI หลังติดตั้ง

ผลตรวจเบื้องต้นi

เราตรวจจากข้อมูลที่ใครก็เปิดดูได้ ยังไม่ได้อ่านโค้ด ข้อที่ไม่เกี่ยวกับตัวนี้ไม่นับในตัวหาร · ตรวจเมื่อ 16 พ.ย. 2569

✓ ผ่าน
ตัวตนผู้ทำตรงกับ repo
ชื่อใน registry ยืนยันด้วยบัญชี GitHub mcpware ซึ่งเป็นเจ้าของ repo
! ควรระวัง
ยังมีคนดูแล
แก้โค้ดล่าสุด 8 เดือนที่ผ่านมา นานกว่า 6 เดือน
✓ ผ่าน
มีสัญญาอนุญาต (license)
ใช้ MIT
– ไม่เกี่ยว
endpoint ตอบ
ตัวนี้รันบนเครื่องคุณ ไม่มี endpoint บนอินเทอร์เน็ต
– ไม่เกี่ยว
ล็อกอินแบบ OAuth
ตัวนี้รันบนเครื่อง ใช้ค่าที่ตั้งในเครื่องแทน
… ยังไม่ตรวจ
คำอธิบายเครื่องมือไม่มีคำสั่งแอบแฝง
รันในเครื่องคุณ เราอ่านรายการเครื่องมือได้เฉพาะตัวที่มี endpoint บนอินเทอร์เน็ต

ช่องโหว่ที่เปิดเผยแล้ว (OSV.dev)

ไม่พบรายการใน OSV.dev สำหรับ @mcpware/pagecast@0.1.0

ตรวจเฉพาะตัวแพ็กเกจรุ่นนี้ ไม่ใช่ทุก dependency · ตรวจเมื่อ 15 พ.ย. 2569

เราตรวจอะไรบ้าง → · JSON

ผู้ทำ: ขอให้ตรวจใหม่ หรือแจ้งข้อมูลผิด

เข้าสู่ระบบ

พูดคุย

ถาม แชร์เคล็ดลับ หรือแจ้งว่าใช้ไม่ได้ เรียงตามที่คนกดว่ามีประโยชน์

ยังไม่มีใครโพสต์ ถามหรือแชร์เป็นคนแรกได้เลย

ข้อความในส่วนนี้เขียนโดยผู้ใช้ ไม่ใช่ทีม PopNx

เข้าสู่ระบบเพื่อโพสต์

รีวิวจากผู้ใช้

ยังไม่มีรีวิว

เข้าสู่ระบบเพื่อเขียนรีวิว

เทียบกับตัวอื่นในหมวด ออกแบบ ภาพ และเสียงi

ดาวมากกว่า 96% ของอีก 3109 ตัวในหมวดนี้
ส่งรุ่นใหม่เข้า registry ล่าสุดกว่า 3% ของอีก 3109 ตัวในหมวดนี้
ผลตรวจเบื้องต้นดีกว่าหรือเท่ากับ 50% ของอีก 3109 ตัวในหมวดนี้

เทียบกับทุก server ที่ยังใช้งานในหมวดนี้ทั้งทะเบียน ดาวนับเฉพาะเมื่อผู้ลงทะเบียนเป็นเจ้าของ repo

คำถามที่พบบ่อย

Pagecast ปลอดภัยไหม?

จากการตรวจเบื้องต้นของเรา ผ่าน 2 จาก 3 ข้อที่ตรวจได้ เรายังไม่ได้อ่านโค้ด ก่อนใส่กุญแจหรือ token ให้ดูว่า server ขอสิทธิ์อะไร และเลือกกุญแจที่ทำได้เท่าที่จำเป็น

ต้องใช้กุญแจหรือรหัสอะไรบ้าง?

registry ไม่ได้ระบุว่าต้องใช้กุญแจ แต่บางตัวจะขอให้ล็อกอินตอนใช้ครั้งแรก

ตัวนี้รันบนเครื่องหรือบนคลาวด์?

รันบนเครื่องของคุณ โปรแกรม AI จะเปิด server ขึ้นมาเองเมื่อใช้ ข้อมูลไม่ต้องผ่านเซิร์ฟเวอร์ของผู้ทำ (ยกเว้นตัวที่ไปเรียกบริการออนไลน์ต่อ)

ยังมีคนดูแลอยู่ไหม?

repo บน GitHub มีการแก้โค้ดล่าสุด 8 เดือนที่ผ่านมา และส่งรุ่นล่าสุด (0.2.1) เข้า registry 8 เดือนที่ผ่านมา

ใช้กับโปรแกรมไหนได้บ้าง?

โปรแกรมที่รองรับ MCP เช่น Claude Desktop, Claude Code, Cursor และ VS Code ตัวนี้ต้องมี Node.js ในเครื่องด้วย

มีตัวไหนใช้แทนได้บ้าง?

ในหมวดเดียวกันมี Pascal 3D Editor, Figma MCP Server, Remocn: Remotion MCP server, Harness, ChatCut

ตัวอื่นที่ทำงานคล้ายกัน

หมวดเดียวกันจากผู้ทำคนอื่น ผ่านตัวตรวจคำสั่งแล้ว ตัวทางการขึ้นก่อน แล้วเรียงตามดาว

อ่านการ์ด:↓ ดาวน์โหลดต่อสัปดาห์i★ ดาว GitHubiสามเสา: รีวิว · ผลตรวจ · การใช้งานiอัปเดต = วันที่ส่งรุ่นล่าสุดเข้า registryi

Pascal 3D Editor

สร้าง ตรวจ และบันทึกฉากอาคาร 3 มิติที่แก้ไขได้ ด้วย Pascal

โดย pascalorgใช้กันมาก↓ 1K/สัปดาห์★ 25.5K ดาวรวมทั้งรีโปอัปเดต 3 วันที่ผ่านมา

บนเครื่องหรือคลาวด์✓ เจ้าของบริการ · pascal.app

ติดตั้ง

Figma MCP Server

server ทางการของ Figma ส่งข้อมูลงานออกแบบให้ AI อ่าน เพื่อเปลี่ยนแบบเป็นโค้ดหรืออธิบายแบบได้ตรงขึ้น ต่อผ่านคลาวด์ของ Figma

โดย figmaใช้กันมาก★ 2.2Kอัปเดต 13 เดือนที่ผ่านมา

รันบนคลาวด์✓ เจ้าของบริการ · mcp.figma.com

วิธีต่อ

Remocn: Remotion MCP server

Hosted MCP for Remotion videos: search Remocn components, read docs, plan a video, preview it.

โดย Remocnกำลังโต★ 1.7Kอัปเดต 6 วันที่ผ่านมา

รันบนคลาวด์✓ เจ้าของบริการ · remocn.dev

วิธีต่อ

Harness

Start Claude Code and Codex agents the person can watch, wait for them and read their answers.

โดย autonomous-aiกำลังโต↓ 109/สัปดาห์★ 1.5Kอัปเดต 28 วันที่ผ่านมา

รันบนเครื่อง✓ harness.autonomous.ai

ติดตั้ง

ChatCut

AI video editor for agents: cut footage, add captions and motion graphics, export editable edits.

โดย ChatCut-Incกำลังโต★ 1Kอัปเดต 17 วันที่ผ่านมา

รันบนคลาวด์✓ เจ้าของบริการ · chatcut.io

วิธีต่อ

Pascal 3D Editor — มีทั้งบนคลาวด์และแบบลงเครื่อง · ไม่ต้องใช้คีย์
Figma MCP Server — ใช้บนคลาวด์ ไม่ต้องลงเครื่อง · ไม่ต้องใช้คีย์ · อยู่ในคลังของ Claude
Remocn: Remotion MCP server — ใช้บนคลาวด์ ไม่ต้องลงเครื่อง · ไม่ต้องใช้คีย์
Harness — ต้องลงในเครื่อง · ไม่ต้องใช้คีย์
ChatCut — ใช้บนคลาวด์ ไม่ต้องลงเครื่อง · ไม่ต้องใช้คีย์

README จากผู้ทำ

เปิดอ่าน README

ส่วนนี้คัดจาก repo ของผู้ทำตามต้นฉบับ PopNx MCP ไม่ได้ตรวจหรือรับรองเนื้อหา ตัด HTML รูปภาพ และสคริปต์ออกแล้ว ลิงก์จะพาออกนอกเว็บ

Pagecast

English | 廣東話

Turn AI browser interactions into polished product demos.

Tell your AI to demo your app. Pagecast records the browser, tracks every click and keystroke, and exports a shipping-ready GIF or MP4 — with tooltip zoom overlays and cinematic pan effects. No screen recorder. No video editor. No post-production. Make a demo gif automatically after every PR if you want.

Without Pagecast — plain screen recording, you do the demonstration yourself and record yourself and you need to repead every time you changed the UI. You can see the cursor moving, but the actual interactions are too small to follow:

With Pagecast (tooltip mode) — a magnified close-up appears on every interaction so viewers can actually see what's happening, and it design what to demo and make a new demo gif automatically:

With Pagecast (cinematic mode) — the camera crops and pans to follow each action, and it design what to demo and make a new demo gif automatically:

Two ways to use Pagecast

1. Product demo tool (the main use case)

You built a web app. You need a demo GIF for the README. Normally you'd:

Open a screen recorder, manually click through the demo
Open a video editor, zoom into the important parts
Export, figure out ffmpeg, optimize the file size
UI changes → repeat everything

With Pagecast, you tell your AI:

"Record a demo of localhost:3000 for my GitHub README"

The AI opens a real browser, interacts with your app, and exports a polished GIF with auto-zoom on every interaction. UI changes? Just re-run. The demo rebuilds itself.

2. Screen recording tool (also works)

Don't need zoom effects? Pagecast works as a plain screen recorder too:

"Record my app for 10 seconds and export as MP4"

The AI records, you get a .webm → optimized .gif or .mp4. Two-pass ffmpeg palette optimization, platform-aware sizing, one tool call.

Export Modes

Mode	Tool	What it does	Best for
Tooltip	`smart_export`	Full viewport visible + magnified tooltip inset near each interaction	README demos, product pages
Cinematic	`cinematic_export`	Camera crops and pans to follow each interaction	Social media, dramatic reveals
Plain	`convert_to_gif` / `convert_to_mp4`	Standard screen recording, no zoom effects	Bug reports, QA captures

Just Say Where It's Going

You don't need to know viewport sizes or formats. Just tell your AI the destination:

"Record a demo for GitHub README"           → 1280×720 GIF

"Record my app for Instagram Reels" → 1080×1920 MP4 "Make a TikTok demo of my dashboard" → 1080×1920 MP4 "Record for YouTube" → 1280×720 MP4

Platform	Size	Format	Aspect
`github` / `readme`	1280×720	GIF	16:9
`youtube` / `twitter`	1280×720	MP4	16:9
`reels` / `tiktok` / `shorts`	1080×1920	MP4	9:16
`instagram` / `linkedin`	1080×1080	MP4	1:1
Custom	Any size	Your choice	Any

Quick Start

Node.js ≥ 20 and ffmpeg required.

# Add to Claude Code

claude mcp add pagecast -- npx -y @mcpware/pagecast

Or run directly

npx @mcpware/pagecast

Headless mode (no visible browser)

claude mcp add pagecast -- npx -y @mcpware/pagecast --headless

First time: install browser

npx playwright install chromium

How It Works

You: "Record a demo of my app"

↓ AI → record_page(url, platform: "github") Opens Chromium (visible) at 1280×720 Injects cursor highlight + click ripple ↓ AI → interact_page(click, type, hover...) Each action records bounding box + timestamp ↓ AI → stop_recording Saves .webm + timeline.json ↓ AI → smart_export (tooltip mode) or cinematic_export (crop-pan mode) or convert_to_gif (plain mode) ↓ Shipping-ready .gif or .mp4

What makes the demo look professional:

Cursor highlight — red dot tracks the mouse so viewers can follow the action
Click ripple — visual feedback on every click
Tooltip overlay — magnified close-up appears near each interaction, with a small arrow pointing toward it
Cinematic pan — smooth crop transitions between interaction targets with easeInOut curves

MCP Tools

Tool	What it does
`record_page`	Open a URL, start recording. Auto-injects cursor highlight + click ripple
`interact_page`	scroll, click, hover, type, press keys, select, navigate, waitForSelector — all captured with bounding boxes
`stop_recording`	Stop and save `.webm` + `-timeline.json` (event timeline with interaction positions)
`smart_export`	Tooltip overlay — magnified tooltip close-up on each interaction
`cinematic_export`	Cinematic crop-pan — camera follows the action between interaction targets
`convert_to_gif`	WebM → optimized GIF (ffmpeg two-pass palette, configurable FPS/width/trim)
`convert_to_mp4`	WebM → MP4 (H.264, ready for social/sharing/embedding)
`record_and_export`	All-in-one: record → auto-export to GIF or MP4 based on platform
`list_recordings`	List all `.webm`, `.gif`, and `.mp4` files in output directory

Comparison

	Automated	Interactions	Demo zoom	Output	AI-driven	Platform presets
Pagecast	✅	✅ click/type/scroll/hover	✅ tooltip + cinematic	GIF + WebM + MP4	✅	✅
Screen Studio	❌ manual	❌	✅ cursor-based	MP4	❌	❌
AutoZoom	❌ manual	❌	✅ click-based	MP4	❌	❌
Playwright MCP	✅	✅	❌	Raw `.webm`	Partial	❌
gifcap.dev / Peek / Kap	❌ manual	❌	❌	GIF	❌	❌
VHS (Charmbracelet)	✅ scripted	Terminal only	❌	GIF	❌	❌

Screen Studio and AutoZoom have great zoom — but require manual recording. Pagecast is the only tool where the AI records AND the demo effects are automatic.

Configuration

Setting	Default	Notes
Browser	Headed (visible)	`--headless` for background
GIF FPS	12	Higher = smoother, larger
GIF width	800px	Height auto-scaled
Tooltip magnify	1.6x	How much the tooltip zooms in
Tooltip size	380px	Size of the tooltip inset
Cinematic zoom	2.5x	How much the camera zooms in
Zoom transition	0.35s	Smoothstep ease-in/out duration
Cursor overlay	On	Red dot + click ripple effect
Video viewport	1280×720	Or use `platform` parameter
Output dir	`./recordings`	Override: `RECORDING_OUTPUT_DIR`

Architecture

src/

├── index.js # MCP server — 9 tools, platform presets, stdio transport ├── recorder.js # Playwright browser lifecycle + sessions + event timeline ├── converter.js # ffmpeg GIF/MP4 + tooltip overlay + cinematic zoom conversion ├── zoom.js # Zoom engine — chains, panning, tooltip events, FFmpeg expressions ├── tooltip.js # Tooltip PNG generator (rounded rect + arrow, pure Node.js) └── remotion/ ├── ZoomComposition.jsx # React composition for cinematic zoom ├── Root.jsx # Remotion entry point └── render.js # Remotion CLI wrapper

Event timeline — every interaction records bounding box + timestamp
Cursor overlay — red dot + click ripple injected into the page
Tooltip overlay — magnified close-up in a clean tooltip frame with directional arrow
Cinematic zoom chains — nearby interactions form chains that zoom in, pan, zoom out
Thread-safe FFmpeg expressions — crop filters work correctly with multi-threaded encoding
Headed by default — watch what the AI does
`execFile` not `exec` — safe against shell injection

More from @mcpware

Project	What it does	Install
[Instagram MCP](https://github.com/mcpware/instagram-mcp)	23 Instagram Graph API tools — posts, comments, DMs, stories, analytics	`npx @mcpware/instagram-mcp`
[Claude Code Organizer](https://github.com/mcpware/claude-code-organizer)	Visual dashboard for Claude Code memories, skills, MCP servers, hooks	`npx @mcpware/claude-code-organizer`
[UI Annotator](https://github.com/mcpware/ui-annotator-mcp)	Hover labels on any web page — AI references elements by name	`npx @mcpware/ui-annotator`
[LogoLoom](https://github.com/mcpware/logoloom)	AI logo design → SVG → full brand kit export	`npx @mcpware/logoloom`

License

MIT

Pagecast

ใช้ทำอะไรได้

ติดตั้ง

ลง Node.js ในเครื่อง (ถ้ายังไม่มี)

เปิดไฟล์ตั้งค่าของแอป Claude บนคอม

วางค่าตั้งนี้แล้วบันทึกไฟล์

ปิดแอป Claude แล้วเปิดใหม่

ลองเลย

คุณทำแบบนี้แทนได้

ลง Node.js ในเครื่อง (ถ้ายังไม่มี)

เปิด Terminal

วางคำสั่งนี้แล้วกด Enter

พิมพ์ /mcp ใน Claude Code

ลองเลย

ลง Node.js ในเครื่อง (ถ้ายังไม่มี)

กดปุ่มนี้เพื่อเปิด Cursor

เปิดแชตของ AI ใน Cursor โหมด Agent

ลองเลย

ลง Node.js ในเครื่อง (ถ้ายังไม่มี)

กดปุ่มนี้เพื่อเปิด VS Code

เปิดแชตของ AI ใน VS Code โหมด Agent

ลองเลย

ติดตั้งในเครื่อง

สรุป

ใช้กับโปรแกรมไหนได้

คู่มือที่เกี่ยวข้อง

ทำอะไรได้บ้าง

ผลตรวจเบื้องต้นi

ตัวตนผู้ทำตรงกับ repo

ยังมีคนดูแล

มีสัญญาอนุญาต (license)

endpoint ตอบ

ล็อกอินแบบ OAuth

คำอธิบายเครื่องมือไม่มีคำสั่งแอบแฝง

ช่องโหว่ที่เปิดเผยแล้ว (OSV.dev)

พูดคุย

รีวิวจากผู้ใช้

เทียบกับตัวอื่นในหมวด ออกแบบ ภาพ และเสียงi

คำถามที่พบบ่อย

ตัวอื่นที่ทำงานคล้ายกัน

Pascal 3D Editor

Figma MCP Server

Remocn: Remotion MCP server

Harness

ChatCut

README จากผู้ทำ

Pagecast

Without Pagecast — plain screen recording, you do the demonstration yourself and record yourself and you need to repead every time you changed the UI. You can see the cursor moving, but the actual interactions are too small to follow:

With Pagecast (tooltip mode) — a magnified close-up appears on every interaction so viewers can actually see what's happening, and it design what to demo and make a new demo gif automatically:

With Pagecast (cinematic mode) — the camera crops and pans to follow each action, and it design what to demo and make a new demo gif automatically:

Two ways to use Pagecast

1. Product demo tool (the main use case)

2. Screen recording tool (also works)

Export Modes

Just Say Where It's Going

Quick Start

Or run directly

Headless mode (no visible browser)

First time: install browser

How It Works

MCP Tools

Comparison

Configuration

Architecture

More from @mcpware

License