Artifacts สำหรับ Claude Code, Codex
และ CLI ของเอเจนต์อื่นทุกตัว
เอเจนต์ของคุณสร้างแดชบอร์ด กราฟ หรือรายงาน แทนที่จะทิ้งพาธไฟล์ไว้ในเทอร์มินัล มันจะแสดงหน้านั้นให้คุณดู: กล่องเหนือ composer ที่เปิดได้ในคลิกเดียว พร้อมการแจ้งเตือนพุชที่เปิดหน้านั้นบนโทรศัพท์
เครื่องมือเดียวสำหรับ CLI ของเอเจนต์ทุกตัวที่มีไคลเอนต์ MCP เหมือนกันบน macOS, Windows และ Linux ไม่มีบริการโฮสต์และไม่ต้องมีบัญชีกับผู้ให้บริการรายใดรายหนึ่ง: หน้านั้นคือไฟล์บนคอมพิวเตอร์ของคุณ และจะอยู่ที่นั่นต่อไป
view_present( path: "reports/q3.html", title: "Q3 dashboard" )
เอเจนต์เรียกเครื่องมือเพียงตัวเดียว แล้วหน้าของมันจะปรากฏเป็นกล่องเหนือ composer พร้อมเอกสารเพิ่มอีกหนึ่งรายการในแท็บ “เอกสาร”
เอเจนต์เก่งเรื่องเปลี่ยนคำถามให้เป็นหน้าเว็บ: แดชบอร์ดผลการรันเทสต์ กราฟของการย้ายข้อมูล (migration) รายงานเปรียบเทียบสามตัวเลือก แต่แล้วหน้านั้นก็จบลงเป็นพาธไฟล์ที่ไหนสักแห่งในเทอร์มินัล คุณต้องหาให้เจอ เปิดมัน และหวังว่าเลือกไฟล์ถูก
AgentsRoom มอบเครื่องมือสำหรับขั้นตอนสุดท้ายนี้ให้เอเจนต์ทุกตัว เมื่อหน้าพร้อม เอเจนต์จะเรียก view_present พร้อมพาธและชื่อเรื่อง กล่องจะปรากฏเหนือ composer ของเอเจนต์ตัวนั้น คลิกที่กล่อง: แท็บ “เอกสาร” จะขึ้นมาด้านหน้าและหน้านั้นจะเปิดขึ้น แสดงผลเรียบร้อย และกราฟทำงาน บนโทรศัพท์ การแจ้งเตือนพุชจะเปิดหน้าเดียวกัน
สิ่งนี้ไม่ขึ้นกับ CLI เครื่องมืออยู่บนเซิร์ฟเวอร์ MCP ของ AgentsRoom ซึ่งแอปเชื่อมต่อให้เอเจนต์ทุกตัวที่มีไคลเอนต์ MCP หน้าจาก Codex จึงทำงานเหมือนหน้าจาก Claude Code ทุกประการ ไม่มีอะไรออกจากคอมพิวเตอร์ของคุณเพื่อให้ระบบนี้ทำงาน
เกิดอะไรขึ้นเมื่อเอเจนต์แสดงหน้าให้คุณดู
หน้าที่เอเจนต์ของคุณเขียนจะได้รับการจัดการแบบเดียวกัน ไม่ว่า CLI ตัวไหนจะเป็นผู้เขียน
วิธีเดียวกันในทุก CLI
Claude Code, Codex, Antigravity CLI, Kimi Code และตัวอื่นๆ เรียกเครื่องมือเดียวกันและได้ผลลัพธ์เดียวกัน การเปลี่ยน CLI ไม่ได้เปลี่ยนวิธีที่คุณรับงานของมัน
กล่องเหนือ composer
เอกสารจะปรากฏตรงที่คุณคุยกับเอเจนต์อยู่แล้ว พร้อมชื่อเรื่องและเวลาที่ผ่านไปนับจากที่ส่งมาถึง คลิกเดียวก็เปิดได้ กากบาทจะเอากล่องออก และเอกสารยังคงอยู่ใน “เอกสาร”
ไม่แย่งหน้าจอของคุณ
ไม่มีอะไรเด้งขึ้นมาด้านหน้าและไม่มีแท็บเทอร์มินัลโผล่ขึ้นมา แผงที่คุณกำลังพิมพ์จึงยังเป็นของคุณ ถ้าคุณทำงานกับเอเจนต์ตัวอื่นหรือโปรเจกต์อื่น กล่องจะรอคุณอยู่ และการแจ้งเตือนจะบอกว่ามีกล่องนี้อยู่
บนโทรศัพท์ในแตะเดียว
เมื่อคุณอยู่ห่างจากคอมพิวเตอร์ การแจ้งเตือนพุชจะระบุชื่อเอเจนต์ โปรเจกต์ และหน้า แตะแล้วหน้านั้นจะเปิดในแอป AgentsRoom ซ้อนบนคอนโซลของเอเจนต์ตัวนั้น
เก็บไว้ใน “เอกสาร”
ทุกหน้าจะเข้าไปอยู่ในแผง “เอกสาร” ของโปรเจกต์ ซึ่งแท็บของแผงจะแสดงจำนวนที่มี การแสดงไฟล์ใหม่แต่ละครั้งจะถูกเก็บเป็นเวอร์ชันหนึ่ง พร้อมเอเจนต์ ผู้ให้บริการ และโมเดลที่สร้างมัน
ไม่ได้มีแค่ HTML
หน้า HTML รันสคริปต์ของตัวเอง กราฟที่สร้างขึ้นจึงทำงานได้ เครื่องมือเดียวกันนี้ยังแสดงรูปภาพ SVG, PDF, ไฟล์ Markdown หรือตาราง CSV แบบแสดงผลแล้ว ไม่ใช่ซอร์สดิบ
วิธีใช้งาน
ไม่ต้องติดตั้งหรือเปิดใช้อะไร สี่ขั้นตอนจากคำขอจนถึงหน้าเว็บ
- 1
ขอหน้าเว็บ
ในเอเจนต์ตัวไหนก็ได้ ขอด้วยคำพูดธรรมดา: สร้างแดชบอร์ดของผลลัพธ์เหล่านี้เป็นไฟล์ HTML ไฟล์เดียวแล้วแสดงให้ฉันดู การขอให้เป็นไฟล์เดียวสำคัญ เพราะหน้าที่มี CSS สคริปต์ และข้อมูลอยู่ข้างในจะแสดงผลเหมือนกันทั้งบนคอมพิวเตอร์และบนโทรศัพท์
- 2
เอเจนต์แสดงให้ดูเมื่อพร้อม
เมื่อเขียนไฟล์เสร็จ เอเจนต์จะเรียก view_present พร้อมพาธและชื่อเรื่องสั้นๆ ชื่อเรื่องนั้นจะเป็นชื่อกล่องและข้อความของการแจ้งเตือน
- 3
อ่านได้ทุกที่ที่คุณอยู่
ที่คอมพิวเตอร์ ให้คลิกกล่องเหนือ composer ของเอเจนต์: แท็บ “เอกสาร” จะขึ้นมาด้านหน้าและหน้านั้นจะเปิดขึ้น การคลิกการแจ้งเตือนให้ผลเหมือนกันจากทุกที่ในแอป เมื่ออยู่ห่างจากคอมพิวเตอร์ ให้แตะการแจ้งเตือนพุชบนโทรศัพท์
- 4
ขอให้แก้ไข
บอกเอเจนต์ว่าต้องการเปลี่ยนอะไร มันจะเขียนไฟล์ใหม่และแสดงอีกครั้ง: กล่องจะอัปเดต และเวอร์ชันก่อนหน้ายังคงอยู่ใน “เอกสาร”
ต่างจาก Artifacts ของ Claude อย่างไร
Claude มี Artifacts ของตัวเอง บน claude.ai และใน Claude Code หน้าจะถูกเผยแพร่ไปยังบริการของ Claude และอ่านในเบราว์เซอร์ พร้อมลิงก์ที่คนในองค์กรของคุณเปิดได้ เหมาะเมื่อเป้าหมายคือการแชร์หน้า และเป็นของ Claude: CLI อื่นที่คุณใช้จะไม่ได้ความสามารถนี้
ที่นี่หน้ายังคงเป็นไฟล์ธรรมดาบนคอมพิวเตอร์ของคุณ CLI ใดก็ตามที่มีไคลเอนต์ MCP แสดงหน้าได้ ไม่มีการอัปโหลดอะไร และไฟล์อยู่ใน repository ของคุณข้างโค้ดที่สร้างมันขึ้นมาได้ โทรศัพท์ของคุณอ่านผ่านการเชื่อมต่อที่เข้ารหัสแบบ end-to-end เดียวกับส่วนอื่นของแอป
ทั้งสองไม่ได้แข่งกัน ใช้ Artifacts ของ Claude เมื่อคุณต้องการลิงก์ส่งให้เพื่อนร่วมงาน และใช้สิ่งนี้เมื่อคุณรันหลาย CLI และอยากเห็นงานของพวกมันตรงที่คุณอยู่แล้ว
ข้อจำกัด
- ไม่มีลิงก์แชร์: หน้านั้นคือไฟล์บนคอมพิวเตอร์ของคุณ ถ้าจะส่งให้ใคร ให้ส่งไฟล์
- แอปเดสก์ท็อปต้องเปิดอยู่ เพราะเป็นตัวเก็บไฟล์และแสดงกล่อง โทรศัพท์อ่านหน้านั้นผ่านแอปเดสก์ท็อป
- โทรศัพท์รับหน้าเป็นเอกสารเดียว จึงโหลดไฟล์ที่อยู่ข้างๆ ไม่ได้ บนคอมพิวเตอร์ หน้าสามารถใช้รูปภาพ สไตล์ชีต สคริปต์ และข้อมูลที่อยู่ในโฟลเดอร์เดียวกันได้ เก็บทุกอย่างไว้ในไฟล์เดียวถ้าต้องการผลลัพธ์เหมือนกันทั้งสองที่
- เครื่องมือเข้าถึงเอเจนต์ผ่าน MCP ดังนั้น Aider ซึ่งไม่มีไคลเอนต์ MCP จะทิ้งพาธไฟล์ไว้ในคำตอบ
- สคริปต์ของหน้าทำงานบนคอมพิวเตอร์ของคุณและเข้าถึงเครือข่ายได้ ให้ปฏิบัติต่อหน้าที่คุณไม่ได้ขอเหมือนโปรแกรมที่คุณไม่ได้เขียน ไฟล์ที่ดูเหมือนมีข้อมูลลับจะถูกปฏิเสธ
- ผู้ช่วยส่วนตัวไม่มีแผง “เอกสาร”: การคลิกกล่องของมันจะเปิดหน้านั้นในพรีวิวของตัวเอง
คำถามที่พบบ่อย
Codex มี Artifacts แบบ Claude ไหม
ใน AgentsRoom มี: เอเจนต์ Codex แสดงหน้า HTML ที่มันเขียนให้คุณดูได้ด้วยเครื่องมือเดียวกับ Claude Code หน้านั้นปรากฏเป็นกล่องเหนือ composer เปิดได้ในคลิกเดียว และส่งถึงโทรศัพท์ของคุณ ระบบทำงานบนคอมพิวเตอร์ของคุณ จึงไม่ต้องมีบัญชีกับบริการโฮสต์
นี่เป็นทางเลือกแทน Artifacts ของ Claude ไหม
สำหรับการดูงานของเอเจนต์ ใช่ และใช้ได้กับทุก CLI ที่มีไคลเอนต์ MCP สำหรับการแชร์ ไม่ใช่: Artifacts ของ Claude ให้ลิงก์สำหรับองค์กรของคุณ ส่วนที่นี่หน้ายังคงเป็นไฟล์บนคอมพิวเตอร์ของคุณ
จะพรีวิวไฟล์ HTML ที่เอเจนต์เขียนได้อย่างไร
ขอให้เอเจนต์แสดงให้คุณดู: มันจะเรียก view_present แล้วการคลิกกล่องเหนือ composer จะเปิดหน้านั้นแบบแสดงผลเรียบร้อย คุณยังเปิดไฟล์ HTML ใดก็ได้เองจากลิงก์ไฟล์ในคำตอบของเอเจนต์ หรือจากแท็บไฟล์ในแผงด้านขวา สคริปต์จะทำงาน กราฟที่สร้างขึ้นจึงวาดออกมาได้
หน้าหรือข้อมูลของฉันผ่านเซิร์ฟเวอร์ไหม
หน้าไม่ผ่าน: มันยังคงเป็นไฟล์บนคอมพิวเตอร์ของคุณ และโทรศัพท์อ่านผ่านการเชื่อมต่อที่เข้ารหัสแบบ end-to-end ไปยังเดสก์ท็อปของคุณ การแจ้งเตือนพุชผ่านบริการพุชและมีชื่อเรื่องที่คุณเห็น ชื่อเอเจนต์และโปรเจกต์ รวมถึงพาธของไฟล์ภายในโปรเจกต์
จะขัดจังหวะงานที่ทำอยู่ไหม
ไม่ หน้านั้นไม่เปิดขึ้นเองเลย: มันจะรออยู่ในรูปกล่องเหนือ composer ของเอเจนต์จนกว่าคุณจะคลิก ถ้าคุณไม่ได้ดูเอเจนต์ตัวนั้นอยู่ คุณจะได้รับการแจ้งเตือนกับการแจ้งเตือนพุชด้วย ทั้งสองอย่างเป็นไปตามการตั้งค่าการแจ้งเตือนของคุณ และเอเจนต์หนึ่งตัวประกาศได้ไม่เกินหนึ่งหน้าต่อนาที
คุณอาจสนใจ
แผนภาพ Mermaid
Claude Code และ Codex เขียนแผนภาพ Mermaid เป็นข้อความที่เทอร์มินัลทำได้แค่พิมพ์ออกมา AgentsRoom วาดให้ตรงที่คุณอ่านเอเจนต์: แชท ไฟล์ .md แผน และตั๋ว
มุมมองบทสนทนา
มุมมองแชทสำหรับ Claude Code, Codex และ CLI ของเอเจนต์อีกห้าตัว: เซสชันที่อ่านจากทรานสคริปต์ของ CLI เอง การเรียกใช้เครื่องมือถูกพับไว้ คำตอบแสดงสด บนเดสก์ท็อปและโทรศัพท์
ตรวจทานแผน
เอเจนต์ของคุณเสนอแผน: อ่านแผนเป็นเอกสาร แสดงความคิดเห็น แทนที่ หรือลบช่วงข้อความใดก็ได้ แล้วอนุมัติหรือส่งกลับไปในข้อความเดียว เก็บไว้ทุกเวอร์ชัน
MCP แดชบอร์ด
เรียนรู้เกี่ยวกับโมเดลคอนเท็กซ์โปรโตคอล (MCP) เข้าใจเซิร์ฟเวอร์ MCP และไคลเอนต์ MCP และค้นพบว่า AgentsRoom กลายเป็นแดชบอร์ด MCP ที่มองเห็นได้สำหรับเอเจนต์ Claude Code โดยใช้เซิร์ฟเวอร์ MCP รันเวิร์กโฟลว์ MCP หลายเอเจนต์ดีบักการเชื่อมต่อ MCP ด้วย --mcp-debug และติดตามทุกเซสชัน Claude Code ที่ใช้ MCP แบบเรียลไทม์
ดูสิ่งที่เอเจนต์ของคุณสร้าง
ดาวน์โหลด AgentsRoom สำหรับ macOS, Windows หรือ Linux จากนั้นขอให้เอเจนต์ตัวไหนก็ได้สร้างแดชบอร์ดเป็นไฟล์ HTML ไฟล์เดียวแล้วแสดงให้คุณดู
แอปคู่หู: ตรวจสอบเอเจนต์ของคุณได้ทุกที่
นำของคุณเอง: Claude, Codex, Antigravity CLI, หรือผู้ให้บริการ AI อื่น ๆ
ส่งข้อบกพร่องและคำขอไปยังแบ็คล็อกสาธารณะของคุณโดยตรง