Xây dựng và chạy website do AI tạo có thể chỉnh sửa với EmDash Build

EmDash Build là gì?

EmDash Build là một trình xây dựng website AI mã nguồn mở, biến bản mô tả bằng văn bản thành một website EmDash có thể chỉnh sửa. Thay vì chỉ tạo mã đánh dấu trang tĩnh, công cụ này tạo mô hình nội dung có cấu trúc, điền dữ liệu vào mô hình đó thông qua máy chủ Model Context Protocol của EmDash, rồi tạo các trang và thành phần Astro có kiểu dữ liệu để hiển thị nội dung.

Dự án tạo ra bao gồm các trang được kết xuất phía máy chủ, nội dung có cấu trúc, bộ lưu trữ media và giao diện quản trị EmDash. Biên tập viên có thể tiếp tục sử dụng website sau lần tạo ban đầu: cập nhật văn bản và media, thêm hoặc nhân bản các section, sắp xếp lại các khối nội dung, lên lịch bài đăng và yêu cầu agent thực hiện các thay đổi lớn hơn về nội dung hoặc thiết kế.

Quan trọng: EmDash Build là một ứng dụng tham chiếu alpha dành cho các nhà cung cấp dịch vụ lưu trữ, trình xây dựng website và nền tảng. Tính năng xuất bản bị vô hiệu hóa trong bản demo được lưu trữ.

Bạn có thể khám phá bản demo được lưu trữ, nhưng không thể xuất bản website từ đó.

Tính năng chính

• Làm rõ có cấu trúc: Agent đặt các câu hỏi tập trung khi bản mô tả chưa giải quyết một quyết định quan trọng.
• Mô hình nội dung do agent thiết kế: Công cụ tạo các collection cho những thực thể có thể tái sử dụng và các block có cấu trúc cho những section của trang mà biên tập viên có thể sắp xếp lại.
• Website Astro có thể chỉnh sửa: Giao diện frontend sử dụng các thành phần Astro có kiểu dữ liệu, trong khi nội dung thông thường vẫn có thể được quản lý qua EmDash.
• Xem trước trực tiếp và sửa lỗi: Dự án được kết xuất trong bản xem trước Builder riêng tư. Agent có thể xác thực đầu ra, kiểm tra lỗi và sửa lỗi trong cùng một vòng lặp.
• Quy trình nội dung: Biên tập viên có thể quản lý văn bản, media, section, block và nội dung đã lên lịch qua giao diện quản trị EmDash.
• Lịch sử bền vững: Mã nguồn và trạng thái CMS cục bộ được lưu dưới dạng các commit Git trong Cloudflare Artifacts.
• Xuất bản có kiểm soát: Các bản phát hành tĩnh đã được xác thực có thể được đóng gói cho Workers for Platforms, nhưng chỉ khi người vận hành chủ động bật và cấu hình tính năng xuất bản.

Kiến trúc hoạt động như thế nào

Mỗi dự án được tạo sẽ nhận một Cloudflare Sandbox chứa sẵn dự án EmDash, Astro và Tailwind. Một Durable Object BuilderAgent quản lý cuộc hội thoại và vòng lặp giữa mô hình và công cụ.

Agent sử dụng các công cụ EmDash MCP để tạo schema và nội dung. Agent ghi frontend công khai bên trong Sandbox, khởi động bản xem trước riêng tư, xác thực website đã kết xuất và sửa lỗi trước khi hoàn tất một lượt xử lý.

Cloudflare Artifacts lưu trữ từng trạng thái dự án nhất quán dưới dạng lịch sử Git. Nếu một Sandbox chuyển sang trạng thái ngủ, EmDash Build có thể khôi phục cả mã nguồn lẫn trạng thái CMS cục bộ vào một container mới và khởi động lại bản xem trước.

Quy trình làm việc của Agent

1. Tìm hiểu: Đọc bản mô tả và xác định những quyết định quan trọng còn thiếu.
2. Mô hình hóa: Quyết định dữ liệu nào nên trở thành collection có thể tái sử dụng và trang nào cần các block có cấu trúc.
3. Xây dựng: Tạo schema EmDash, làm mới các kiểu dữ liệu được tạo tự động và viết các bộ kết xuất Astro có kiểu dữ liệu.
4. Điền nội dung: Thêm nội dung và media đại diện thông qua các công cụ EmDash MCP.
5. Xác minh: Kiểm tra kiểu dữ liệu của dự án, kết xuất các route công khai, kiểm tra bản xem trước và sửa lỗi.
6. Lưu: Commit toàn bộ trạng thái dự án vào Cloudflare Artifacts.

Điều kiện tiên quyết

Việc phát triển cục bộ phụ thuộc cả vào các công cụ cục bộ lẫn quyền truy cập vào một số dịch vụ Cloudflare. Trước khi tiếp tục, hãy chuẩn bị những thành phần sau:

• Node.js 24 trở lên
• pnpm 11.9
• Một daemon tương thích với Docker đang chạy
• Wrangler đã được xác thực với một tài khoản Cloudflare
• Quyền truy cập Cloudflare Workers
• Quyền truy cập Durable Objects
• Quyền truy cập Cloudflare Sandbox
• Quyền truy cập Workers AI và AI Gateway
• Quyền truy cập Cloudflare Artifacts
• Quyền truy cập Workers for Platforms

Vì tài nguyên của nhà cung cấp và ranh giới tin cậy cần được cấu hình cẩn thận, hãy đọc hướng dẫn tự lưu trữ của repository trước khi triển khai ứng dụng.

Cài đặt và cấu hình EmDash Build

1. Cài đặt các dependency

Từ thư mục gốc của repository, cài đặt các phiên bản dependency đã được khóa:

pnpm install --frozen-lockfile

2. Tạo cấu hình nhà cung cấp

Sao chép provider.config.example.json sang tệp provider.config.json bị bỏ qua:

cp provider.config.example.json provider.config.json

Mở provider.config.json và thay thế mọi giá trị mẫu bằng các tài nguyên thuộc tài khoản Cloudflare của bạn. Hãy tạo các tài nguyên bắt buộc theo hướng dẫn tự lưu trữ thay vì dựa vào các giá trị mẫu.

3. Xác thực và kết xuất cấu hình

Chạy các bước kiểm tra trước, sau đó tạo cấu hình Wrangler dành riêng cho nhà cung cấp:

pnpm preflight
pnpm configure

Cấu hình được tạo và sử dụng bởi lệnh khởi động cục bộ được nêu trong tài liệu là wrangler.provider.jsonc. Hãy kiểm tra tệp dành riêng cho nhà cung cấp này trước khi triển khai hoặc chạy các môi trường nhạy cảm.

4. Cấu hình secret cục bộ

Sao chép mẫu secret dành cho môi trường phát triển:

cp .dev.vars.example .dev.vars

Thêm thông tin xác thực AI Gateway mà builder yêu cầu vào .dev.vars. UNSPLASH_ACCESS_KEY là tùy chọn; thêm khóa này sẽ bật tính năng tìm kiếm hình ảnh có sẵn trong quá trình tạo.

Không đặt thông tin xác thực của nhà cung cấp bên trong các dự án được tạo. Việc xuất bản do máy chủ kiểm soát và các website được tạo không được cấp thông tin xác thực của nhà cung cấp.

5. Khởi động toàn bộ ứng dụng cục bộ

Khởi động EmDash Build với cấu hình provider đã tạo:

EMDASH_WRANGLER_CONFIG=wrangler.provider.jsonc pnpm dev

Khi máy chủ phát triển sẵn sàng, hãy mở http://localhost:5173.

6. Khởi động chế độ chỉ giao diện khi phù hợp

Nếu bạn chỉ cần làm việc trên giao diện, hãy dùng:

pnpm dev:ui

Chế độ này không khởi động việc tạo trang dựa trên Sandbox. Hãy dùng lệnh phát triển đầy đủ khi cần kiểm thử builder agent, việc tạo dự án hoặc các bản xem trước được tạo trực tiếp.

Cách sử dụng cơ bản: Tạo trang từ bản mô tả

1. Viết bản mô tả hữu ích

Mô tả trang web dự kiến, đối tượng sử dụng, các trang chính, nội dung có thể tái sử dụng và định hướng hình ảnh mong muốn. Ví dụ:

Create a portfolio website for an Icelandic landscape photographer.
Include a home page, reusable photo collections, an about page,
and structured page sections that editors can reorder.

Agent có thể đặt các câu hỏi làm rõ nếu bản mô tả chưa giải quyết những lựa chọn quan trọng. Hãy trả lời các câu hỏi này trước khi mong đợi một schema và frontend nhất quán.

2. Để agent lập mô hình và xây dựng trang

Sau khi làm rõ, agent xác định thông tin nào thuộc về các collection có thể tái sử dụng và những trang dạng tường thuật nào nên dùng các block có cấu trúc. Sau đó, agent tạo schema EmDash, làm mới các type được tạo tự động, viết các renderer Astro và thêm nội dung mẫu thông qua các công cụ MCP.

3. Xem lại bản xem trước riêng tư

Sử dụng bản xem trước trực tiếp của Builder để kiểm tra các route đã tạo và thiết kế tổng thể. EmDash Build xác thực dự án đã tạo và có thể sửa các lỗi được phát hiện trong vòng lặp của agent.

4. Tiếp tục chỉnh sửa trong EmDash

Khi dự án ban đầu đã có thể sử dụng, hãy quản lý nội dung thông thường thông qua giao diện quản trị EmDash. Bạn có thể chỉnh sửa văn bản và media, thêm hoặc nhân bản section, sắp xếp lại các block và lên lịch bài đăng. Hãy quay lại agent khi cần thay đổi lớn hơn về cấu trúc, nội dung hoặc thiết kế.

5. Lưu và khôi phục trạng thái dự án

Các trạng thái dự án nhất quán được ghi vào Cloudflare Artifacts dưới dạng lịch sử Git. Cơ chế lưu trữ này cho phép EmDash Build khôi phục mã nguồn dự án và trạng thái CMS cục bộ khi một Sandbox chuyển sang trạng thái ngủ và cần một container mới.

Lệnh xác thực và phát triển

Sử dụng các lệnh của repository phù hợp với loại thay đổi bạn đang thực hiện:

• pnpm dev khởi động EmDash Build với cấu hình mặc định.
• pnpm dev:ui khởi động giao diện mà không cần các container Cloudflare Sandbox.
• pnpm check kiểm tra kiểu cho ứng dụng và các bài kiểm thử Worker.
• pnpm test chạy bộ kiểm thử ứng dụng.
• pnpm test:worker chạy bộ kiểm thử tích hợp Workers.
• pnpm build build EmDash Build với cấu hình mặc định.
• pnpm build:provider build bằng wrangler.provider.jsonc.
• pnpm format định dạng repository bằng oxfmt.

Trước khi gửi đóng góp, hãy chạy đầy đủ chuỗi xác thực được dự án khuyến nghị:

pnpm format
pnpm check
pnpm test
pnpm test:worker
pnpm build

Mẹo nâng cao

Chọn đúng chế độ phát triển

Sử dụng pnpm dev:ui cho công việc giao diện độc lập vì lệnh này không khởi động các container Sandbox. Không dùng chế độ này để xác minh quy trình tạo trang: tính năng tạo trang dựa trên Sandbox không khả dụng trong chế độ chỉ giao diện.

Tách chỉnh sửa nội dung khỏi thay đổi cấu trúc

Sử dụng giao diện quản trị EmDash cho các công việc biên tập thông thường như thay đổi văn bản, media, section và thứ tự. Sử dụng agent cho các thay đổi lớn hơn về thiết kế hoặc mô hình nội dung. Điều này duy trì sự phân tách của dự án giữa dữ liệu CMS có cấu trúc và mã renderer Astro có kiểu.

Kiểm tra cấu hình provider

Chỉ xem cấu hình provider mẫu như một template. Thay thế mọi giá trị mẫu, chạy pnpm preflight, tạo cấu hình Wrangler bằng pnpm configure và kiểm tra đầu ra cho tài khoản Cloudflare mục tiêu.

Kiểm soát rõ ràng việc phát hành

Việc phát hành công khai do máy chủ quản lý và bị tắt theo mặc định. Chỉ bật và cấu hình tính năng này khi provider vận hành đã sẵn sàng đóng gói các bản phát hành tĩnh đã được xác thực cho Workers for Platforms. Bản demo được lưu trữ cũng giữ nguyên trạng thái tắt phát hành.

Xem xét ranh giới bảo mật trước khi triển khai

Tham khảo mô hình mối đe dọa của repository để biết chi tiết về các công cụ mô hình, quá trình thực thi Sandbox, secret, bản xem trước riêng tư, cơ chế lưu trữ và phát hành. Sử dụng hướng dẫn vận hành để thực hiện các bước kiểm tra vận hành.

Điều hướng repository hiệu quả

• src/worker chứa các route Worker, BuilderAgent, prompt, công cụ, cơ chế lưu trữ và các điều khiển phát hành.
• src/client chứa giao diện Builder React, tính năng trò chuyện, các chế độ xem hoạt động và bản xem trước trực tiếp.
• prototype/builder-cloudflare chứa scaffold EmDash và Astro trống đã chuẩn bị, được dùng cho các dự án mới.
• migrations chứa các migration cơ sở dữ liệu về xác thực và kiểm soát provider.
• scripts chứa cấu hình provider, smoke test và các công cụ hỗ trợ vận hành.
• test chứa các bài kiểm thử ứng dụng và Worker.
• docs chứa tài liệu về tự lưu trữ, bảo mật, vận hành và triển khai.

Kết luận

EmDash Build kết hợp khả năng tạo nội dung có AI hỗ trợ với quy trình CMS bền vững, có thể chỉnh sửa. Ứng dụng tạo nội dung EmDash có cấu trúc và các thành phần Astro được định kiểu, xác thực kết quả trong bản xem trước Cloudflare Sandbox riêng tư, đồng thời lưu lịch sử dự án trong Cloudflare Artifacts. Vì đây là ứng dụng tham chiếu alpha với yêu cầu hạ tầng đáng kể, hãy cấu hình tài nguyên của nhà cung cấp cẩn thận, xem lại tài liệu bảo mật và luôn kiểm soát rõ ràng việc xuất bản công khai.