𝗟𝗲𝘀𝘀𝗼𝗻𝘀 𝗳𝗿𝗼𝗺 𝗯𝘂𝗶𝗹𝗱𝗶𝗻𝗴 𝟮𝟬 𝗠𝗖𝗣 𝗔𝗽𝗽𝘀 𝗶𝗻 𝟮 𝗱𝗮𝘆𝘀

ทีมของผมสร้าง 20 MCP Apps ภายในสองวัน สิ่งนี้ทำให้ผมเห็นภาพชัดเจนว่าเครื่องมือเหล่านี้ทำอะไรได้บ้างและมีจุดบกพร่องตรงไหน

MCP Apps คือส่วนขยายอย่างเป็นทางการตัวแรกของ MCP spec ซึ่งช่วยให้เครื่องมือสามารถส่งคืนทรัพยากร UI พร้อมกับผลลัพธ์ได้ โดย host จะเรนเดอร์ UI นี้ใน iframe แบบ sandboxed คุณสามารถแสดงตาราง แผนภูมิ และฟอร์มได้โดยตรงในแชท

ข้อมูลที่เป็นภาพมักจะดีกว่าข้อความ แผนภูมิหนึ่งรูปดีกว่าไฟล์ CSV และรายการ pull requests ก็อ่านง่ายกว่าข้อความยาวเหยียดที่เป็นพรืด

นี่คือบทเรียนที่เราได้รับ:

• แอปทำงานอยู่ภายในเซิร์ฟเวอร์ MCP App ไม่ใช่ URL ที่โฮสต์ไว้ แต่มันถูกดึงข้อมูลผ่าน MCP ไม่ใช่ HTTP โดยโค้ด UI จะถูกส่งไปพร้อมกับ MCP server ของคุณ

• ใช้ React และ Vite เราใช้ React เพื่อใช้งาน design system ที่มีอยู่เดิม เราตั้งค่าโปรเจกต์ Vite หนึ่งโปรเจกต์ไว้ในโฟลเดอร์ /ui ซึ่งจะสร้างไฟล์ HTML หนึ่งไฟล์สำหรับทุกๆ ไฟล์ TSX ในระหว่างการ build

• ข้อความยังคงเป็นข้อตกลงหลัก (primary contract) หาก host ไม่รองรับ MCP Apps มันจะเพิกเฉยต่อคุณสมบัติ UI และผู้ใช้จะเห็นเพียงการตอบกลับเป็นข้อความเท่านั้น อย่าใส่คำตอบเพียงอย่างเดียวไว้ใน UI เพราะหากทำเช่นนั้น เครื่องมือของคุณจะใช้งานไม่ได้สำหรับผู้ใช้ที่ใช้ terminal clients ดังนั้นควรออกแบบโดยคำนึงเสมอว่าผู้ใช้ครึ่งหนึ่งอาจจะเห็นเพียงแค่ข้อความเท่านั้น

• เตรียมรับมือกับเลย์เอาต์ที่ไม่สม่ำเสมอ host แต่ละรายมีการนำ spec ไปใช้งานที่แตกต่างกัน ChatGPT จะเรนเดอร์แบบกว้าง Claude จะเรนเดอร์แบบแคบ ส่วนบนมือถือก็แตกต่างออกไปอีก ดังนั้นควรออกแบบเลย์เอาต์ที่สามารถปรับเปลี่ยน (reflow) เมื่อมีความกว้างน้อยได้ตั้งแต่เริ่มต้น

• วงจรการพัฒนา (dev loop) นั้นช้า ปัจจุบันยังไม่มีเครื่องมือทดสอบที่เป็นมาตรฐาน คุณต้อง build, ติดตั้ง และตรวจสอบด้วยตัวเองในทุกๆ client ซึ่งให้ความรู้สึกว่าช้าเมื่อเทียบกับการทำงาน frontend แบบปกติ

• อย่าเก็บข้อมูลลับ (secrets) ไว้ในแอป แอปทำงานใน iframe แบบ sandboxed ซึ่ง host สามารถมองเห็นเนื้อหาได้ ห้ามใส่ API keys หรือ OAuth tokens ลงในฟิลด์ของฟอร์มโดยเด็ดขาด หากคุณต้องการข้อมูลที่ละเอียดอ่อน ให้ใช้ฟอร์มที่ปลอดภัยแยกต่างหาก

หากคุณเริ่มตอนนี้:

  • รวม (Bundle) UI ของคุณไว้ภายในเซิร์ฟเวอร์
  • ใช้การตั้งค่า Vite แบบหลายหน้า (multi-page)
  • นำเข้า (Import) design system ที่มีอยู่เดิมของคุณโดยตรง

MCP Apps ยังอยู่ในช่วงเริ่มต้นและ spec ก็ยังมีการเปลี่ยนแปลงอยู่ เครื่องมือสนับสนุนอาจจะยังมีไม่มากนัก แต่พวกมันก็คุ้มค่าที่จะนำออกมาใช้งาน

Source: https://dev.to/arcade/lessons-from-building-20-mcp-apps-in-2-days-1f98

Optional learning community: https://t.me/GyaanSetuAi