หลาย ๆ คนที่ใช้ Claude AI อยู่ น่าจะใช้งาน feature Artifacts กันหมดแล้ว
เพราะว่าไม่ได้อยู่ใน preview feature อีกต่อไปแล้ว
ซึ่งจะทำการแสดงผลหรือ preview ข้อมูลต่าง ๆ ออกมาให้เห็นเลย เช่น
- Developer จะแสดง architecture diagram จาก code
- Designer จะแสดง prototype ออกมาเป็นรูป หรือ visualize ให้เลย
- Product สามารถสร้าง interactive prototype ให้ได้เลย เพื่อทดลองหรือใช้ feature นั้น ๆ
ซึ่งอำนวยความสะดวกอย่างมาก
แถมเราสามารถ chat เพื่อปรับปรุงส่วนต่าง ๆ หรือ ให้อธิบายส่วนต่าง ๆ ได้อีกด้วย
แต่สิ่งที่ผมสนใจคือ How Anthropic built Artifacts
ทีมงานพัฒนา feature กันอย่างไร มีแนวคิดอย่างไรบ้าง ?
จากบทความสรปสั้น ๆ ไว้ว่า ใช้เวลาในการพัฒนา feature นี้ภายใน 3 เดือน !!
แบ่งเป็นหัวข้อต่าง ๆ ดังนี้
1. From the drawing board to shipping Artifacts
เริ่มจากการใช้งานผ่าน ClaudeAI ของตัวเอง ที่เพื่อปล่อง model ตัวใหม่ออกมา
จากนั้นใส่ prompt เข้าไป ได้รับ HTML ออกมา
จากนั้นก็ copy ไปใน Editor เพื่อบันทึกลงไฟล์ HTML
จากนั้นก็เปิดใน web browser เพื่อดูผล
ทำแบบนี้วนไป
จากแนวคิดแบบนี้ ก็เริ่มเกิดเป็น prototype ภายในของบริษัท
มีการ pitch product ภายในขึ้นมา
เมื่อทุกอย่างผ่านแล้ว ก็เริ่มลงมือพัฒนาภายในเพื่อทดลองประมาณ 1-2 สัปดาห์
โดยสิ่งที่ทำให้น่าสนใจมาก ๆ คือ การลองสร้าง Game 8 Bit ออกมา
2. Tech stack
ในช่วงแรกของการทำ prototype จะใช้งาน Streamlit เจ้าเดิม
ซึ่งพัฒนาด้วยภาษา Python นั่นเอง
ช่วยให้การสร้าง prototype เร็วมาก
ใน version ต่อมาเริ่มพัฒนาเป็นระบบจริง ๆ ด้วย NodeJS
ฝั่ง frontend พัฒนาด้วย React + Next.js และ Tailwind CSS
ในการพัฒนาจะต้องระมักระวังเรื่องของ security มาก ๆ
เพราะว่า ต้องทำการแสดงผลจาก code ที่อาจจะมีปัญหาก็เป็นไปได้
จึงใช้งาน iFrame sandboxes with full-site process isolation
และใช้งาน strict Content Security Policies (CSPs) อีกด้วย
3. Using Claude to build Artifacts faster
ในการพัฒนาก็ใช้งาน ClaudeAI เพื่อช่วยพัฒนานั่นเอง
เป็นการทดสอบ product ของตัวเองไปในตัว
เป็นแนวทางที่น่าสนใจมาก ๆ
ลองอ่านเพิ่มเติมกันได้ครับ
สำหรับแนวคิด แนวทาง ของการสร้าง product/feature หนึ่ง ๆ ออกมา