รีวิว fx0 — design agent จาก Vercel Labs พิมพ์บอกหน้าเว็บที่อยากได้ ได้ไฟล์ HTML ไฟล์เดียว

คืออะไร

fx0 คือ design agent แบบ open-source ที่ Vercel Labs สร้างบน libfx วิธีใช้คือคุณบรรยายหน้าเว็บที่อยากได้ แล้ว agent จะเขียนหน้านั้นออกมาเป็นไฟล์ HTML ไฟล์เดียว

ตัว fx0 เองก็เป็นตัวอย่างแอปที่สร้างบน libfx ด้วย เรียก createFxAgent() ครั้งเดียวก็ได้ agent loop, streaming, tool calls, retries และ durable session ที่ทำงานต่อได้แม้ server ล่ม ส่วน createFxEngine() เป็นตัวรันแต่ละ subagent

ลองเล่นได้ที่ https://fx0.vercel.dev หรือ clone มาปรับใช้เองได้

จุดเด่น

• คิดค่าโมเดลผ่าน AI Gateway ของทีมตัวเอง ด้วยการ sign in ผ่าน Vercel
• เปิดโหมดทดลองฟรีได้ถ้าต้องการ: ให้ 5 prompt ต่อ IP บน Opus 5.5 Fast โดยไม่ต้อง sign in หรือใส่บัตร ใช้ BotID กันบอต และใช้ Gateway key ฝั่ง server จ่ายค่า prompt เหล่านั้น
• ทนทาน: แชตไม่หาย แม้ฟังก์ชันตายกลางคำตอบ turn ที่ค้างอยู่จะทำงานต่อจากจุดที่หยุด โดยมี Vercel Queues เป็นตัวสำรอง
• ทุก turn เก็บเวอร์ชันของดีไซน์ไว้ เปิดย้อนหลังได้ คัดลอกหรือดาวน์โหลด HTML ได้
• เลือกโมเดลแยกต่อแชต พร้อมระดับ reasoning และโหมด fast แชตใหม่เริ่มที่ fast Claude Opus 5.5 หรือโมเดลตามตัวแปร FX0_MODEL
• agent ค้นเว็บและเปิดหน้าเว็บมาใช้เป็นข้อมูลอ้างอิงได้
• เลือกเริ่มต้นจากสไตล์ design.md สิบแบบ (มาจาก awesome-design-md ของ VoltAgent) หรืออัปโหลดสไตล์ของตัวเอง
• พิมพ์ข้อความล่วงหน้าก่อน sign in ได้ ร่างพร้อมรูปยังรออยู่ในแท็บ 15 นาที
• จำกัดที่ 64 model steps ต่อ turn (รวม subagent) กัน agent วนลูปจนเปลืองเงิน
• ในแชตแบบเสียเงิน ส่งข้อความระหว่างที่ agent กำลังทำงานได้ เพื่อบังคับทิศทางต่อ (steer) แบบเดียวกับ fx CLI

เหมาะกับใคร

• สายดีไซน์และฟรอนต์เอนด์ที่อยากได้ต้นแบบหน้าเว็บเร็ว ๆ ในรูปแบบ HTML ไฟล์เดียว
• คนที่อยากดูโค้ดแอป AI agent ที่ทำงานทนทานบน Vercel เพราะตัวอย่างนี้มี durable session, retry และการกู้ turn ให้ศึกษา
• ทีมที่ใช้ Vercel, Neon Postgres และ Upstash Redis อยู่แล้ว และอยากเอา libfx ไปใช้กับงานตัวเอง

เริ่มต้นใช้งาน

ลองเล่นก่อนได้ที่ https://fx0.vercel.dev (ถ้าจะใช้ค่าโมเดลของทีมตัวเอง ต้อง sign in ด้วย Vercel)

ถ้าจะรันเองต้องมี Node.js 24 และสามบริการ:

1. Sign in with Vercel app (scopes: openid profile email offline_access และสิทธิ์ AI Gateway: Use, Team: Read Only) ตั้ง callback เป็น http://localhost:3000/api/auth/callback ห้ามลืม offline_access ไม่งั้นจะไม่ได้ refresh token และ sign in ไม่ผ่าน
2. Neon Postgres ควรใช้ branch แยกสำหรับงาน local
3. Upstash Redis

คัดลอก .env.example เป็น .env.local แล้วกรอกค่าให้ครบ SESSION_SECRET ต้องเป็นสตริงสุ่มยาวอย่างน้อย 32 ตัวอักษร ถ้าใช้ Redis ชุดเดียวกับ deployment ให้ตั้ง FX0_REDIS_PREFIX (เช่น fx0:local) และ FX0_MODEL เป็นตัวเลือกโมเดลเริ่มต้นของแชตใหม่

npm ci
npm run db:migrate
npm run dev

db:migrate จะรันไฟล์ใน migrations/ ตามลำดับ แต่ละไฟล์ทำซ้ำได้ แอปจะไม่ migrate เอง ตอน deploy ให้ตั้งตัวแปรเดียวกันบน Vercel โดย Neon และ Upstash integration ใน Vercel Marketplace จะเติม DATABASE_URL, KV_REST_API_URL และ KV_REST_API_TOKEN ให้ แล้วตั้ง APP_URL เป็น URL จริงของเว็บ

ข้อควรรู้

• License: Apache License 2.0 ใช้งานและแก้ไขได้ตามเงื่อนไขของ Apache 2.0
• ความสดใหม่: push ล่าสุด 21 ต.ค. 2026 และสร้างโปรเจกต์เมื่อ 19 ต.ค. 2026 อายุราว 2 วัน โปรเจกต์ยังใหม่มาก โครงสร้างและข้อจำกัดอาจเปลี่ยนได้เร็ว
• สถิติ ณ 21 ต.ค. 2026: ⭐ 304 ดาว, fork 55, open issue 1
• ข้อจำกัดที่ README ระบุ: transcript ไม่เคยถูกตัด คุยยาว ๆ แล้วเปิดแชตจะช้าลง
• ถ้าฟังก์ชันที่รัน turn ล่ม คำตอบอาจช้าลงราว 13 นาที เพราะต้องรอ backstop ของคิว (บน Vercel, libfx แยกไม่ออกว่าฟังก์ชันตายหรือแค่ช้า)
• ข้อความที่ส่งระหว่างที่ tool กำลังรันจะรอให้ tool นั้นจบก่อนโมเดลจะเห็น ส่วนข้อความที่มีรูปจะรอเป็น turn แยกหลัง turn ที่กำลังรันจบ
• ค่าใช้จ่ายของแต่ละ turn ผูกกับคนที่ส่งข้อความเริ่ม turn นั้น ข้อความหลัง ๆ เปลี่ยนการคิดเงินของ turn ก่อนหน้าไม่ได้
• โหมดฟรีให้ 5 prompt ต่อ IP ไม่มีการเติมใหม่ ล้าง cookie ก็ไม่รีเซ็ต พอใช้ครบต้อง sign in เพื่อใช้ค่าของทีมตัวเองต่อ
• ดีไซน์ที่ agent เขียนต้องเป็น HTML ไฟล์เดียว ขนาดไม่เกิน 512 KB และไม่มี asset ภายนอก
• แบบเสียเงินคิดค่าโมเดลผ่าน AI Gateway ของทีมคุณ

🔗 https://github.com/vercel-labs/fx0

ข้อมูลจาก GitHub ณ 21 ต.ค. 2026: ⭐ 304 | ภาษา TypeScript | license Apache-2.0