ติดตั้ง MCP ให้ Claude Code: Perplexity, Playwright, Firecrawl, Chrome DevTools และ HyperFrames

ปกติ Claude ทำได้แค่อ่านกับเขียนข้อความ ถามข่าววันนี้ก็ตอบจากความรู้เดิม สั่งให้เปิดเว็บก็ทำไม่ได้ จนกว่าเราจะ "เสียบเครื่องมือ" ให้มันผ่าน MCP พอเสียบแล้ว Claude Code จะค้นเว็บสด คุมเบราว์เซอร์ ดึงเนื้อหาจากลิงก์ ตรวจ error ของเว็บ และทำวิดีโอได้จากแชตเดียว

บทความนี้พาติดตั้ง 5 เครื่องมือยอดนิยมให้ Claude Code ทีละตัว ได้แก่ Perplexity, Playwright, Firecrawl, Chrome DevTools และ HyperFrames พร้อมวิธีเช็กว่าเสียบติด คำสั่งลองใช้ วิธีใช้กับ Claude Desktop ตารางแก้ปัญหา และกฎความปลอดภัยของ API key

คำสั่ง MCP ในบทความนี้ทดสอบแล้ว เราทดสอบคำสั่ง claude mcp add ของ Playwright, Chrome DevTools, Perplexity และ Firecrawl กับ Claude Code 2.1.231 แล้ว claude mcp list ขึ้น Connected ครบทั้ง 4 ตัว (ทดสอบในโฟลเดอร์แยก ณ 6 พ.ย. 2026) ส่วนคำสั่งของ HyperFrames ยกมาจาก README ทางการ ยังไม่ได้รันเอง ถ้าคำสั่งเปลี่ยน ให้ยึด README ล่าสุดตามลิงก์ท้ายบทความ

จบบทความนี้คุณจะ:

• อธิบายได้ว่า MCP คืออะไร และต่างจาก skill ยังไง
• ติดตั้ง Playwright และ Chrome DevTools ที่ไม่ต้องใช้คีย์ แล้วเช็กว่าเสียบติด
• ติดตั้ง Perplexity และ Firecrawl ที่ต้องใช้ API key อย่างถูกวิธี
• ใส่ skill ทำวิดีโอ HyperFrames และตั้งค่าทั้งหมดใน Claude Desktop
• ใช้หลายเครื่องมือต่อกันเป็นงานเดียว แก้ปัญหาที่เจอบ่อย และถอดเครื่องมือออกได้

MCP คืออะไร ทำไม Claude ต้องมีเครื่องมือ

MCP (Model Context Protocol) คือมาตรฐานกลางที่ให้ AI ต่อกับเครื่องมือข้างนอกได้ เปรียบเหมือนปลั๊กไฟ เครื่องมือไหนทำหัวปลั๊กแบบ MCP ไว้ ก็เสียบเข้า Claude ได้เลย ถ้ายังไม่คุ้นกับ MCP อ่านพื้นฐานก่อนได้ในบทความเริ่มต้นใช้ MCP

เวลาใช้งานจริงจะเกิด 3 ขั้นนี้

1. เราสั่งในแชต เช่น "เปิด localhost:3000 แล้วดูว่ามี error ไหม"
2. Claude เลือกเครื่องมือ เห็นว่ามี Chrome DevTools เสียบอยู่ก็เรียกใช้ ครั้งแรกจะขออนุญาตเราก่อน
3. เครื่องมือทำงานแล้วส่งผลกลับ Claude อ่านผลแล้วสรุปให้เรา

สรุปสั้นๆ MCP ไม่ได้ทำให้ AI ฉลาดขึ้น แต่ให้มันมีมือไว้ทำงาน

ศัพท์ที่ต้องรู้

จำง่ายๆ คือ MCP เป็นปลั๊ก ส่วน skill เป็นคู่มือที่ใส่ให้ AI อ่าน

เตรียมเครื่องก่อนติดตั้ง

ทุกเครื่องมือในบทความนี้รันผ่าน npx จึงต้องมี Node.js ก่อน

node --version
claude --version

v22.x.x
2.1.231 (Claude Code)

• ไม่มี Node.js โหลดรุ่น LTS จาก nodejs.org แล้วปิดเปิดหน้าต่างใหม่ HyperFrames ต้องใช้ Node 22 ขึ้นไป
• ไม่มี Claude Code ติดตั้งตามเอกสารของ Claude Code แล้วรัน claude หนึ่งครั้งเพื่อล็อกอิน
• Windows เปิด PowerShell ถ้า npx ถูกบล็อก ให้พิมพ์ npx.cmd แทน npx ส่วน macOS เปิด Terminal

จากนั้นเข้าโฟลเดอร์โปรเจกต์ก่อนติดตั้ง

cd โฟลเดอร์โปรเจกต์ของคุณ

ติดตั้งไว้ที่ไหน ตามเอกสาร MCP ของ Claude Code คำสั่ง claude mcp add ที่ไม่ใส่ --scope จะใช้ scope แบบ local คือใช้ได้แค่คุณในโปรเจกต์ที่อยู่ตอนนั้น ถ้าอยากให้ใช้ได้ทุกโปรเจกต์ ใส่ --scope user

Playwright MCP: ให้ Claude คุมเบราว์เซอร์

ไม่ต้องใช้คีย์ พัฒนาโดย Microsoft (Apache-2.0) ต้องใช้ Node.js 18 ขึ้นไป

claude mcp add playwright npx @playwright/mcp@latest

เช็กว่าเสียบติด

claude mcp list

Checking MCP server health…
 
playwright: npx @playwright/mcp@latest - ✔ Connected

ครั้งแรกจะใช้เวลาสักพักเพราะ npx ต้องดาวน์โหลดแพ็กเกจก่อน หรือเปิด claude แล้วพิมพ์ /mcp ในช่องแชต ก็จะเห็นรายการเครื่องมือที่เสียบอยู่ ลองใช้งาน

เปิด example.com แล้วบอกว่าหัวข้อใหญ่ของหน้าเขียนว่าอะไร

จะมีหน้าต่างเบราว์เซอร์เปิดขึ้น Claude ขออนุญาตใช้เครื่องมือ กด Yes แล้วจะได้คำตอบว่า "Example Domain" ถ้าไม่อยากเห็นหน้าต่าง README ของ Playwright MCP มีตัวเลือก --headless ให้รันแบบไม่เปิดหน้าต่าง

Playwright คลิกและพิมพ์ได้จริง อย่าสั่งให้มันล็อกอินบัญชีสำคัญหรือกดสั่งซื้อของ ใช้กับเว็บทดสอบหรือเว็บของตัวเองเท่านั้น

Chrome DevTools MCP: ตรวจ error และความเร็วเว็บ

ไม่ต้องใช้คีย์ พัฒนาโดยทีม Chrome DevTools (Apache-2.0) ต้องมี Google Chrome รุ่นปัจจุบัน และ Node.js รุ่น LTS

claude mcp add chrome-devtools --scope user npx chrome-devtools-mcp@latest

--scope user ทำให้ใช้ได้ทุกโปรเจกต์ ตอนนี้ README ทางการแนะนำให้ติดตั้งเป็นปลั๊กอินของ Claude Code ได้ด้วย ด้วยคำสั่ง /plugin marketplace add ChromeDevTools/chrome-devtools-mcp แล้วตามด้วย /plugin install chrome-devtools-mcp@chrome-devtools-plugins ในช่องแชต เลือกทางไหนก็ได้ ลองใช้งาน

เปิด localhost:3000 แล้วบอกว่ามี error ใน console ไหม และหน้าโหลดช้าเพราะอะไร

Chrome จะเปิดขึ้น แล้ว Claude อ่าน console, network และรายงานความเร็วกลับมา ถ้าไม่มีเว็บรันที่พอร์ต 3000 ให้เปลี่ยนเป็นเว็บอื่น

README ของ Chrome DevTools MCP เตือนว่าเครื่องมือนี้เปิดเนื้อหาในเบราว์เซอร์ให้ AI เห็นและแก้ได้ จึงไม่ควรเปิดข้อมูลส่วนตัวหรือข้อมูลลับในเบราว์เซอร์ที่ให้มันคุม

Perplexity MCP: ค้นเว็บสดพร้อมแหล่ง

ต้องมี API key และคิดเงินตามการใช้

1. ขอคีย์ เข้า console.perplexity.ai สมัครหรือล็อกอิน ไปหน้า API keys สร้างคีย์ใหม่แล้วคัดลอกเก็บไว้
2. ดูราคาและเติมเครดิต ค่า API คิดแยกจากแพ็กเกจแชตของ Perplexity ดูราคาในหน้าเว็บของ Perplexity เอง
3. ติดตั้ง ด้วยคำสั่งจาก README ทางการ แทน คีย์ของคุณ ด้วยคีย์จริง

claude mcp add perplexity --env PERPLEXITY_API_KEY="คีย์ของคุณ" -- npx -y @perplexity-ai/mcp-server

อย่าลืมเครื่องหมาย -- เอกสารของ Claude Code อธิบายว่า -- คั่นตัวเลือกของ Claude เอง (เช่น --env และ --scope) ออกจากคำสั่งที่ใช้เปิดเซิร์ฟเวอร์ ทุกอย่างหลัง -- ส่งให้เซิร์ฟเวอร์ตรงๆ ถ้าลืม Claude จะอ่านคำสั่ง npx เป็นตัวเลือกของตัวเอง

ตาม README เซิร์ฟเวอร์นี้มีเครื่องมือ 4 ตัว คือ perplexity_search (ค้นแบบได้รายการผลลัพธ์), perplexity_ask (ถามตอบเร็ว), perplexity_research (ทำรายงานละเอียดหลายนาที) และ perplexity_reason (คิดวิเคราะห์) ลองใช้งาน

ค้นข่าว AI ล่าสุดสัปดาห์นี้ 3 เรื่อง พร้อมลิงก์แหล่ง

ควรได้คำตอบที่มีลิงก์แหล่งที่มา เพราะคิดเงินตามการเรียก ถามให้ชัดในครั้งเดียวจะประหยัดกว่าค้นหลายรอบ อยากรู้วิธีอ่านแหล่งอ้างอิงให้เป็น อ่านต่อได้ในบทความ Perplexity

Firecrawl MCP: ดึงเนื้อหาเว็บเป็นข้อความ

Firecrawl ดึงหน้าเว็บออกมาเป็นข้อความสะอาด (markdown) ตัดเมนูและโฆษณาออก ทำได้ทั้ง scrape หน้าเดียว crawl ทั้งเว็บ และ search (MIT)

1. ขอคีย์ สมัครที่ firecrawl.dev แล้วคัดลอกคีย์ ซึ่งขึ้นต้นด้วย fc-
2. ติดตั้ง แทน fc-คีย์ ด้วยคีย์จริง

claude mcp add firecrawl --env FIRECRAWL_API_KEY=fc-คีย์ -- npx -y firecrawl-mcp

README ของ Firecrawl เขียนตัวอย่างเป็น env FIRECRAWL_API_KEY=... npx -y firecrawl-mcp คำสั่งข้างบนเราแปลงให้อยู่ในรูป claude mcp add แล้วทดสอบว่าใช้ได้

มีทางลองแบบไม่ใช้คีย์ README บอกว่ามี Hosted MCP ที่ https://mcp.firecrawl.dev/v2/mcp ใช้เครื่องมือ scrape, search และ parse ได้โดยไม่ต้องมีคีย์ แต่จำกัดจำนวนครั้ง ส่วนเครื่องมืออื่นอย่าง crawl ยังต้องใช้คีย์

ลองใช้งาน

ดึงเนื้อหาหน้า https://example.com ออกมาเป็นข้อความ แล้วสรุป 3 บรรทัด

ดึงเว็บคนอื่นได้ ไม่ได้แปลว่าเอาไปเผยแพร่ซ้ำได้ เคารพเงื่อนไขของเว็บและลิขสิทธิ์เนื้อหาเสมอ

HyperFrames: เขียน HTML แล้วได้วิดีโอ

HyperFrames ของ HeyGen (Apache-2.0) เป็นเฟรมเวิร์กเปลี่ยน HTML, CSS และแอนิเมชันเป็นไฟล์วิดีโอ MP4 และมี skill สอนให้ AI อย่าง Claude Code เขียนวิดีโอเป็น HTML ได้ ตัวนี้ เป็น skill ไม่ใช่ MCP จึงไม่ได้ติดตั้งด้วย claude mcp add

README ทางการให้ติดตั้งให้ Claude Code เป็นปลั๊กอิน

claude plugin marketplace add heygen-com/hyperframes
claude plugin install hyperframes@hyperframes

หรือใส่ skill ชุดหลักลงโปรเจกต์ด้วย npx hyperframes skills update ก็ได้ จากนั้นเปิด claude ในโฟลเดอร์เดียวกัน แล้วลองสั่ง

ทำวิดีโอแนวตั้ง 10 วินาที เปิดตัวแอปของฉันชื่อ MyApp พื้นดำ ตัวหนังสือขาว

Claude จะเขียนไฟล์ HTML ของวิดีโอแล้วสั่งเรนเดอร์ ได้ไฟล์วิดีโอในโฟลเดอร์ (ชื่อและที่อยู่ไฟล์ Claude จะบอกในแชต)

เรนเดอร์ต้องใช้เครื่องมือเพิ่ม README ระบุว่าต้องมี Node.js 22 ขึ้นไป และ FFmpeg ถ้าขึ้น error ให้คัดลอกข้อความ error ไปให้ Claude อ่าน เริ่มจากคลิปสั้น 5–10 วินาทีก่อน แล้วค่อยเพิ่มความยาว

ใช้กับ Claude Desktop

ถ้าใช้แอป Claude Desktop แทน Claude Code ให้ตั้ง MCP ผ่านไฟล์ config ในแอปไปที่ Settings → Developer → Edit Config แอปจะเปิดไฟล์ให้

{
  "mcpServers": {
    "playwright": {
      "command": "npx",
      "args": ["@playwright/mcp@latest"]
    },
    "chrome-devtools": {
      "command": "npx",
      "args": ["-y", "chrome-devtools-mcp@latest"]
    },
    "perplexity": {
      "command": "npx",
      "args": ["-y", "@perplexity-ai/mcp-server"],
      "env": { "PERPLEXITY_API_KEY": "คีย์ของคุณ" }
    }
  }
}

บันทึกไฟล์ แล้วปิดแอปให้สนิท (ปิดจากถาดระบบด้วย) แล้วเปิดใหม่ จะเห็นเครื่องมือในช่องแชต ระวัง JSON พังง่ายมาก ลืมจุลภาคหรือวงเล็บปีกกาตัวเดียว แอปจะไม่โหลดทั้งไฟล์

ใช้หลายเครื่องมือต่อกันเป็นงานเดียว

พอเสียบครบแล้ว สั่งให้ทำงานยาวๆ ในข้อความเดียวได้ เช่น

ค้นข่าว AI เด่นวันนี้ 1 เรื่องด้วย Perplexity ดึงเนื้อหาข่าวต้นฉบับด้วย Firecrawl สรุปเป็น 3 ประโยค แล้วทำเป็นวิดีโอแนวตั้ง 10 วินาทีด้วย HyperFrames

Claude จะเรียกเครื่องมือทีละตัวตามลำดับ และขออนุญาตแต่ละตัวในครั้งแรก ลองทำแบบฝึก 5 ข้อนี้

ถ้า Claude ไม่ยอมใช้เครื่องมือ ให้บอกชื่อตรงๆ เช่น "ใช้ Playwright เปิด..."

แก้ปัญหาที่เจอบ่อย

ทริกที่ช่วยได้บ่อยมาก คือคัดลอก error ทั้งก้อนไปวางให้ Claude อ่าน มันแก้ให้เองได้หลายกรณี

กฎความปลอดภัยและการถอดปลั๊ก

1. ห้ามแชร์ API key อย่าโพสต์ อย่าแคปหน้าจอติดคีย์ อย่า commit ไฟล์ที่มีคีย์ขึ้น GitHub ถ้าหลุดให้ลบคีย์ทิ้งในหน้าเว็บผู้ให้บริการทันที
2. ตั้งวงเงิน ถ้าผู้ให้บริการมีให้ตั้งลิมิตการใช้ ให้ตั้งไว้กันบิลบาน
3. อ่านก่อนกด Allow Claude จะขออนุญาตก่อนใช้เครื่องมือ ดูก่อนว่ามันจะทำอะไร
4. ระวังเนื้อหาจากเว็บ หน้าเว็บที่ดึงมาอาจมีข้อความหลอกให้ AI ทำอย่างอื่น ถ้า Claude จะทำอะไรแปลกๆ ให้กดปฏิเสธ
5. ใช้เฉพาะตัวที่ไว้ใจ ติดตั้ง MCP จากแหล่งทางการเท่านั้น ทั้ง 5 ตัวในบทความนี้มาจาก GitHub ของเจ้าของเครื่องมือ

ถอดเครื่องมือออกเมื่อไม่ใช้แล้ว

claude mcp remove playwright
claude mcp remove chrome-devtools
claude mcp remove perplexity
claude mcp remove firecrawl

ถ้าใช้ Claude Desktop ให้ลบบล็อกของตัวนั้นออกจากไฟล์ config แล้วเปิดแอปใหม่ ส่วน HyperFrames ให้ถอนปลั๊กอินด้วย claude plugin uninstall hyperframes@hyperframes หรือลบโฟลเดอร์ skill ที่คำสั่งสร้างไว้ในโปรเจกต์

สรุป

• MCP คือปลั๊กที่ให้ AI ใช้เครื่องมือข้างนอก ส่วน skill คือคู่มือที่ใส่ให้ AI อ่าน
• Playwright กับ Chrome DevTools ไม่ต้องใช้คีย์ ส่วน Perplexity ต้องมีคีย์ และ Firecrawl มีแบบฟรีจำกัดจำนวน
• คำสั่งที่มี --env ต้องมี -- คั่นก่อนคำสั่งของเซิร์ฟเวอร์เสมอ
• เช็กว่าเสียบติดด้วย claude mcp list หรือ /mcp
• อ่านก่อนกด Allow เก็บคีย์ให้ดี และถอดตัวที่ไม่ใช้ออก

README ทางการของแต่ละตัว

• Perplexity MCP
• Playwright MCP
• Firecrawl MCP
• Chrome DevTools MCP
• HyperFrames
• เอกสาร MCP ของ Claude Code

พร้อมแล้วก็ไปทำ Quiz ท้ายบทด้านล่างเพื่อรับ XP ได้เลยครับ