สร้าง ChatGPT MCP App ด้วย Next.js แยก UI และ Tool
เรียนรู้วิธีพัฒนา ChatGPT MCP App ผ่านโปรเจกต์โอเพนซอร์สบน Next.js พร้อมเทคนิคการแยกส่วน Tool, Widget และ Sidebar อย่างเป็นระบบ
ภาพประกอบจากคลังภาพสต็อก ไม่ใช่ภาพจากเหตุการณ์จริง
- สร้าง ChatGPT MCP App ด้วย Next.js และ mcp-handler
- แยกส่วนการทำงานระหว่าง Tool, Widget และ Sidebar ออกจากกัน
- ใช้ resource URI และ MIME type text/html;profile=mcp-app สำหรับเรนเดอร์ UI
- ทดสอบระบบในเครื่องด้วย MCP Inspector ก่อนเชื่อมต่อกับ ChatGPT
การพัฒนาแอปพลิเคชันผ่าน Model Context Protocol หรือ MCP เพื่อให้ ChatGPT สามารถโต้ตอบและแสดงผลอินเทอร์เฟซผู้ใช้งานได้นั้น มักมีความท้าทายในการจัดการส่วนประกอบต่างๆ โดยเฉพาะการทำให้โมเดลสามารถตอบสนองข้อความได้พร้อมๆ กับการเรนเดอร์ UI ในฝั่งไคลเอนต์ เพื่อให้เข้าใจโครงสร้างนี้ได้ง่ายขึ้น นักพัฒนาจึงได้จัดทำโปรเจกต์ต้นแบบแบบโอเพนซอร์สขึ้นมาโดยไม่จำเป็นต้องอาศัยโค้ด Boilerplate ขนาดใหญ่
สถาปัตยกรรมของโปรเจกต์นี้ถูกออกแบบมาให้แบ่งออกเป็น 3 ส่วนหลักอย่างชัดเจน เพื่อความยืดหยุ่นในการพัฒนาและการบำรุงรักษาในระยะยาว:
- Tool: เครื่องมือหลักที่ทำงานได้อย่างอิสระ ไม่จำเป็นต้องพึ่งพา UI โดยจะส่งข้อความตอบกลับพร้อมโครงสร้างข้อมูล แม้ไคลเอนต์จะไม่รองรับการเรนเดอร์วิดเจ็ต โมเดลก็ยังคงได้รับข้อมูลที่มีประโยชน์
- UI Resource: ทรัพยากรที่ให้บริการไฟล์ HTML แบบสถิต พร้อมกำหนด MIME type เป็น text/html;profile=mcp-app เพื่อเชื่อมโยงเข้ากับตัวเครื่องมือ
- Endpoint: จุดเชื่อมต่อเดียวที่ทำงานผ่าน Next.js App Router รองรับทั้งคำขอแบบ GET และ POST ผ่านไลบรารี mcp-handler
ในส่วนของการประกาศเครื่องมือ นักพัฒนาใช้งานฟังก์ชัน registerAppTool จากแพ็กเกจ @modelcontextprotocol/ext-apps/server ร่วมกับ Zod input schema และ readOnlyHint เพื่อความปลอดภัยและถูกต้องตามมาตรฐานของโปรโตคอล โดยเมทาดาตังของเครื่องมือจะระบุฟิลด์ ui.resourceUri เพื่อเชื่อมโยงไปยังอินเทอร์เฟซแบบอินไลน์ รวมถึงการประกาศจุดเข้าใช้งานเพิ่มเติมสำหรับแผงสนทนาและแถบด้านข้างในไคลเอนต์ที่รองรับ
การแยกสถาปัตยกรรมระหว่างส่วนประมวลผลหลังบ้าน (Backend Tool Logic) และส่วนแสดงผลหน้าบ้าน (UI Resource) ถือเป็นแนวปฏิบัติที่ดีเยี่ยมในยุคที่ AI Agent เริ่มเข้ามามีบทบาทสำคัญ เพราะช่วยให้นักพัฒนาสามารถทดสอบความถูกต้องของข้อมูลผ่าน API ได้ทันทีโดยไม่ต้องรอให้ระบบเรนเดอร์หน้าจอเสร็จสิ้น นอกจากนี้ยังช่วยลดปัญหาความเข้ากันได้ระหว่างโมเดลภาษาและไคลเอนต์ที่แตกต่างกันได้อีกด้วย
ภาพประกอบจากคลังภาพสต็อก ไม่ใช่ภาพจากเหตุการณ์จริง
สำหรับขั้นตอนการเริ่มต้นใช้งาน โปรเจกต์ตัวอย่างนี้ไม่มีการเชื่อมต่อฐานข้อมูล คีย์ API แบบเสียเงิน หรือระบบบัญชีผู้ใช้ ทำให้สามารถเริ่มต้นทดสอบได้อย่างรวดเร็วเพียงแค่โคลนโปรเจกต์ ติดตั้งแพ็กเกจ และรันคำสั่งพัฒนา:
- โคลน ChatGPT MCP App Starter และติดตั้งส่วนประกอบที่จำเป็น
- รันคำสั่ง
npm run devเพื่อเปิดใช้งานเซิร์ฟเวอร์ท้องถิ่น - ตรวจสอบการทำงานผ่านเครื่องมือ
npx @modelcontextprotocol/inspector@latest - เชื่อมต่อผ่าน URL ท้องถิ่น
/api/mcp
ในแง่ของการแก้ปัญหาเมื่อเกิดข้อผิดพลาด หากเครื่องมือทำงานได้แต่ UI ไม่แสดงผล นักพัฒนาควรตรวจสอบความถูกต้องของ Resource URI, ค่า MIME type และการสนับสนุนจากฝั่งไคลเอนต์ก่อนที่จะเริ่มแก้ไขโค้ดฝั่งเซิร์ฟเวอร์ใหม่ทั้งหมด นอกจากนี้ หากพบปัญหาข้อผิดพลาดรหัส 401 หรือ 403 ควรตรวจสอบระบบยืนยันตัวตนและการตั้งค่าการปรับใช้บนเซิร์ฟเวอร์ แทนการปิดระบบความปลอดภัยโดยไม่จำเป็น
ที่มา: Dev.to
พบข้อมูลผิดพลาดในบทความนี้? แจ้งปัญหาบทความนี้
ความคิดเห็น
แสดงความคิดเห็น