Vibe coding với ChatGPT: Canvas, Codex và xây app từ ChatGPT

Bạn có thể vibe code với ChatGPT theo ba cách. Nhờ nó trong chat làm một app nhỏ và xem trước trong canvas; giao việc trên codebase thật cho Codex, coding agent của OpenAI; hoặc kết nối một trình tạo app AI như Mythex để ChatGPT xây, lưu trữ và xuất bản một app đầy đủ có cơ sở dữ liệu. Cách đầu nhanh nhất cho công cụ một trang, cách thứ hai hợp với lập trình viên, và cách thứ ba cho bạn một app chạy thật có đăng nhập và dữ liệu mà không phải rời ChatGPT.

Dưới đây là cách mỗi kiểu hoạt động, một prompt cho từng kiểu, và điểm mỗi kiểu dừng lại. Nếu muốn biết bối cảnh của thuật ngữ này, hãy đọc vibe coding là gì.

Cách 1: Chat và canvas của ChatGPT

Với một công cụ nhanh, cứ hỏi thẳng. ChatGPT viết code, và trong canvas nó có thể hiển thị các trang HTML và React đơn giản để bạn bấm thử và yêu cầu thay đổi.

Viết một máy tính tiền boa trên một trang với các ô nhập số tiền hóa đơn, phần trăm tiền boa (nút 10, 15, 20 và một ô tùy chọn) và số người. Hiển thị tiền boa và số tiền mỗi người, cập nhật khi tôi gõ. Làm cho nó trông gọn gàng trên điện thoại.

Hợp với: máy tính, trò chơi đơn giản, bản nháp landing page và học tập. Hãy hỏi "giải thích tệp này như thể tôi mới học lập trình" và bạn sẽ học nhanh.

Điểm dừng: không có backend. Không gì bạn nhập được lưu cho người dùng khác, không có đăng nhập, và để chia sẻ bạn phải chép code đi đâu đó rồi tự lưu trữ. Khoảnh khắc bạn nói "và lưu lại để nhóm của tôi xem được", bạn đã vượt quá khả năng của chat.

Vibe coding kiểu sao chép và dán

Nhiều người bắt đầu bằng cách nhờ ChatGPT viết code rồi dán vào các tệp trên máy hoặc một dịch vụ lưu trữ. Với các site tĩnh nhỏ thì được, nhưng nó nhanh chóng trở nên rối. Mỗi thay đổi nghĩa là phải tìm đúng tệp, dán đúng phần, và hy vọng không thứ gì khác phụ thuộc vào phần bạn vừa thay. Nếu bạn thấy mình làm vậy hơn vài lần, hãy chuyển sang một trong hai cách tiếp theo.

Cách 2: Codex cho codebase thật

Codex là agent của OpenAI cho công việc phần mềm. Bạn giao một việc bằng ngôn ngữ thường ngày, và nó làm việc trên một repository: đọc code, thay đổi trên nhiều tệp, chạy lệnh và kiểm thử, rồi đưa kết quả để bạn xem lại. OpenAI cung cấp nó trong ChatGPT, dưới dạng công cụ dòng lệnh và tiện ích mở rộng cho trình soạn thảo; hãy xem trang của OpenAI để biết gói nào có nó và các giới hạn hiện tại.

Một prompt kiểu giao việc hợp với nó nhất:

Trong repo này, hãy thêm nút xuất CSV vào trang Đơn hàng. Nó phải xuất các đơn đang được lọc với các cột ngày, khách hàng, tổng tiền và trạng thái. Thêm một bài kiểm thử cho hàm xuất và chạy bộ kiểm thử.

Hợp với: lập trình viên và nhà sáng lập kỹ thuật có dự án sẵn, muốn một agent nhận trọn các đầu việc khỏi danh sách của mình. Nó làm việc với stack và quy ước của bạn.

Bạn vẫn phải lo: app chạy ở đâu, cơ sở dữ liệu, secret, triển khai và tên miền. Codex thay đổi code; nó không phải nơi lưu trữ.

Codex và Mythex cùng nhau

Codex cũng có thể kết nối với các máy chủ MCP, kể cả của Mythex. Thêm https://mcp.mythex.ai/mcp làm máy chủ MCP tùy chỉnh trong Codex, cho phép truy cập trên Mythex, và Codex có thể làm việc trên một dự án Mythex trong sandbox đám mây của nó, còn bản xem trước, cơ sở dữ liệu và xuất bản do Mythex lo. Bài viết xây app Mythex từ Claude, Cursor hoặc Codex của chúng tôi hướng dẫn từng bước.

Cách 3: Xây một app đầy đủ từ ChatGPT bằng Mythex

Nếu bạn muốn ở lại trong cuộc trò chuyện ChatGPT mà vẫn có một app thật, được lưu trữ, hãy kết nối Mythex. Mythex hoạt động trong ChatGPT như một app: ChatGPT nói chuyện với các công cụ của Mythex qua MCP, giao thức mở cho phép trợ lý dùng các công cụ đặt ở nơi khác (MCP là gì).

Khi đã kết nối, ChatGPT có thể tạo dự án Mythex, viết code trong sandbox đám mây riêng tư, khởi động bản xem trước trực tiếp, thêm cơ sở dữ liệu và lưu trữ tệp, và xuất bản app lên một URL công khai. Kết quả trả về kèm một liên kết để bạn mở dự án trong Mythex và xem bản xem trước.

Cách kết nối

1. Trong Mythex, mở Cài đặt tài khoản và sao chép địa chỉ MCP.
2. Trong ChatGPT, thêm Mythex từ phần cài đặt app hoặc connector bằng địa chỉ đó. Menu của ChatGPT thỉnh thoảng thay đổi, nên hãy theo trang trợ giúp của OpenAI về cách thêm app nếu tên gọi khác.
3. Một trang Mythex mở ra: đăng nhập và chọn Cho phép truy cập. Không có khóa nào để dán.
4. Bắt đầu một cuộc trò chuyện và nhắc đến Mythex trong yêu cầu của bạn.

Kết nối được ở mọi gói Mythex. Các công cụ sandbox — xây, xem trước, xuất bản — cần Mythex Pro ($25 mỗi tháng), và thời gian sandbox cùng hosting tính từ credit Mythex của bạn. Việc dùng ChatGPT vẫn nằm trong gói OpenAI của bạn.

Một prompt đầu tiên để thử

Dùng Mythex để xây cho tôi một app theo dõi hồ sơ xin việc. Tôi thêm hồ sơ với công ty, vị trí, liên kết, ngày nộp, trạng thái (đã nộp, phỏng vấn, nhận việc, bị từ chối) và ghi chú. Hiển thị một bảng theo trạng thái nơi tôi kéo thả được các thẻ, và một biểu đồ đơn giản số hồ sơ mỗi tuần. Lưu mọi thứ trong cơ sở dữ liệu và bảo vệ bằng đăng nhập. Khởi động bản xem trước và gửi tôi liên kết.

Sau đó, mỗi tin nhắn một thay đổi:

Trong dự án Mythex, hãy thêm ngày nhắc cho mỗi hồ sơ và làm nổi bật các thẻ có ngày nhắc là hôm nay hoặc đã quá hạn.

Xuất bản nó và gửi tôi URL trực tiếp.

Hợp với: những người vốn đã lên kế hoạch và suy nghĩ trong ChatGPT và muốn kết quả chạy thật, với dữ liệu được lưu, mà không phải học về hosting. Vì đây là một dự án Mythex bình thường, bạn có thể tiếp tục trong khung chat Mythex bất cứ lúc nào.

Cách nào hợp với thứ bạn đang xây

Thói quen viết prompt hiệu quả trong ChatGPT

• Gọi tên công cụ khi muốn dùng nó. "Dùng Mythex để…" làm rõ rằng yêu cầu dành cho dự án của bạn, không phải một câu trả lời chung chung.
• Mỗi tin nhắn một thay đổi. Danh sách chỉnh sửa dài sinh ra danh sách tác dụng phụ dài.
• Yêu cầu kế hoạch trước các bước lớn. "Trước khi đổi bất cứ gì, hãy liệt kê những gì bạn sẽ đổi và chờ tôi đồng ý."
• Dán đúng nguyên văn lỗi. Toàn bộ nội dung lỗi có giá trị hơn mọi mô tả.
• Hỏi điều gì đã đổi. "Hãy tóm tắt ba thay đổi gần nhất của bạn bằng lời thường ngày" giúp bạn nắm tình hình khi không đọc code.

Còn nhiều hơn trong bảng prompt vibe coding của chúng tôi.

Giữ an toàn

• Đừng bao giờ dán mật khẩu hay khóa API thật vào cuộc trò chuyện ChatGPT. Nếu app cần một khóa, hãy lưu nó trong secrets của dự án. Các công cụ của Mythex chỉ báo tên secret, không bao giờ báo giá trị.
• Trước khi xuất bản, hãy kiểm tra rằng người dùng không thấy được dữ liệu của nhau, và không có khóa nào lọt vào code chạy trên trình duyệt. Hướng dẫn vibe coding có an toàn không? liệt kê các bước kiểm tra kèm prompt bạn có thể dán.

Bạn cũng dùng Claude? Hướng dẫn đồng hành bàn về vibe coding với Claude và Claude Code. Để xem theo từng mô hình, hãy xem ChatGPT vs Claude vs Gemini khi xây app.

Câu hỏi thường gặp